Newsletter por E-mail
Crie e projete um newsletter HTML completo a partir de um tópico ou resumo de conteúdo. A saída está pronta para colar no Loops, Mailchimp, Beehiiv, Resend ou qualquer plataforma de e-mail padrão.
Regra crítica: HTML baseado em tabelas com estilos inline apenas. Sem classes CSS, sem flexbox, sem grid, sem blocos <style>. Cada elemento recebe style="" diretamente. Isso não é opcional — os clientes de e-mail removem todo o resto.
Passo 1: Coleta de Informações
Preciso de três coisas para começar. Se todas as três estiverem presentes na mensagem: pule para o Passo 2.
Se alguma estiver faltando, pergunte exatamente:
"Para começar, preciso de três coisas:
- Tópico — sobre o que é este newsletter?
- Público-alvo — quem está lendo? (cargo, tamanho da empresa, como eles conhecem você)
- CTA Principal — qual ação você quer que os leitores tomem?"
Aguarde as três respostas antes de continuar.
Passo 2: Coleta Completa
Faça todas as perguntas em uma única mensagem, agrupadas por categoria. O usuário pode pular qualquer uma — valores padrão serão aplicados.
"Algumas perguntas antes de eu rascunhar — responda o que souber, pule o resto:
Conteúdo
- Tamanho — breve (300 palavras, impacto) / padrão (500-700) / aprofundado (800+ palavras)?
- Formato — artigo editorial / lista numerada / história pessoal / relatório de dados?
- Contexto da edição — envio único / parte de série semanal / resumo mensal?
- URL do CTA — qual é o link real? (ou usarei um placeholder)
Marca 5. Nome da empresa / marca — para cabeçalho e rodapé 6. Slogan — descrição em uma linha (opcional, para o rodapé) 7. Cidade e país — para o rodapé (ex.: "São Paulo, Brasil") 8. Cor primária da marca — hex? (ex.: #856FE6) 9. Cor secundária — manter o amarelo-verde padrão (#D8F90A) / usar a cor da marca / outra cor?
Design 10. Fundo — escuro (editorial/SaaS) / claro (limpo/corporativo) / hex personalizado? 11. Fonte de exibição — serifa editorial (Instrument Serif) / sem serifa moderna limpa / apenas fontes do sistema? 12. Estilo do botão — pílula (bordas muito arredondadas) / bordas levemente arredondadas / cantos retos? 13. Estilo visual — editorial / técnico+dados / caloroso+fundador / ousado+campanha?
Plataforma e Técnico 14. Plataforma — Loops / Mailchimp / Beehiiv / Resend / outra? 15. Tom — educacional / conversacional / ousado+direto / formal / divertido? 16. Personalização — nenhuma / primeiro nome / primeiro nome + empresa? 17. Assunto — já tem / quer 3 opções? 18. Seções secundárias — bloco de patrocinador / destaque de produto / evento / links rápidos / nenhuma? 19. Versão em texto simples — sim (recomendado) / não?"
Valores padrão se pulado:
| Pergunta | Padrão |
|---|---|
| Tamanho | padrão (500-700 palavras) |
| Formato | artigo editorial |
| Contexto da edição | envio único |
| URL do CTA | placeholder [CTA_URL] |
| Nome da empresa | placeholder [YOUR BRAND] |
| Slogan | nenhum |
| Cidade e país | placeholder [CIDADE, PAÍS] |
| Cor da marca | nenhuma (use #D8F90A para todos os acentos) |
| Cor secundária | #D8F90A (amarelo-verde padrão) |
| Fundo | escuro |
| Fonte de exibição | Instrument Serif (serifa editorial) |
| Estilo do botão | pílula |
| Estilo visual | editorial |
| Plataforma | genérica |
| Tom | conversacional |
| Personalização | nenhuma |
| Assunto | gerar 3 opções |
| Seções secundárias | nenhuma |
| Texto simples | sim |
Passo 2.5: Direção de Design (interno — não mostrado ao usuário)
A partir das respostas do Passo 2, determine:
- Caráter visual (da pergunta 13, ou inferido do tom + formato se pulado)
- UM elemento imperdível — identifique antes do Passo 3
- Caminho do modelo (veja o Passo 5)
Padrões de caráter se a pergunta 13 for pulada:
- Tom educacional / formal: Editorial
- Conteúdo com muitas métricas (estatísticas, benchmarks, relatórios): Técnico/dados
- Lançamentos de produtos, eventos, campanhas: Ousado/campanha
Nunca pergunte ao usuário pela direção de design separadamente — derive-a das respostas.
Passo 3: Estrutura do Design
Leia references/guiia-html-email.md para regras de layout antes de escolher as seções.
Com base no tópico + público-alvo + CTA + seções secundárias solicitadas, selecione seções desta biblioteca:
| Seção | Incluir quando |
|---|---|
| cabeçalho | Sempre — placeholder do logotipo + número da edição ou data |
| hero | Sempre — título grande + gancho de 1-2 frases |
| introdução | Tom conversacional ou educacional — nota pessoal curta |
| conteúdo-principal | Artigo ou insight primário (com muito texto) |
| destaque-estatística | Há uma estatística, citação ou dado atraente |
| seção-secundária | CTA secundário foi solicitado |
| cta-produto | Contexto da marca presente e um plug suave do produto se encaixa |
| bloco-patrocinador | Seção de patrocinador foi solicitada |
| links-rápidos | Seção de links selecionados foi solicitada |
| rodapé | Sempre — link de descadastro + nome da empresa |
Produza a estrutura escolhida como uma lista numerada com o propósito de cada seção em uma linha:
Estrutura proposta:
1. Cabeçalho — logotipo + Edição nº1 / [data]
2. Hero — título + parágrafo de gancho
3. Introdução — enquadramento pessoal curto
4. Conteúdo Principal — detalhamento do [tópico]
5. Destaque de Estatística — ponto de dados chave da história
6. CTA — [texto do cta]
7. Rodapé — descadastro + empresa
Esta estrutura funciona, ou devo ajustar alguma seção?
Aguarde a confirmação antes do Passo 4.
Passo 4: Rascunho de Conteúdo
Escreva o texto para cada seção em sequência. Ainda sem HTML — apenas prosa limpa.
Regras por seção:
- Cabeçalho: Número da edição + data. Nenhum texto necessário.
- Título hero: Máximo de 8 palavras, focado em resultado, sem começar com "Eu/Nós/Nosso"
- Gancho hero: 1-2 frases, problema ou lacuna de curiosidade, que atraia o leitor
- Introdução: 2-3 frases, pessoal ou contextual, sem linguagem corporativa, contrações são permitidas
- Conteúdo principal: 250-400 palavras, escaneável — use frases em negrito para pontos-chave, parágrafos curtos (1-3 linhas), sem paredes de texto, sem sobrecarga de marcadores
- Destaque de estatística: Uma estatística ou citação, máximo de 20 palavras, impactante
- CTA do produto: 2-3 frases, focado em valor, não "Confira nosso produto" — diga o que muda para eles
- Texto do botão CTA: 3-5 palavras, verbo de ação + benefício ("Leia o resumo completo", "Garanta meu lugar", "Baixe o guia")
- Rodapé: Placeholder do link de descadastro + nome da empresa
Leia references/formulas-de-assunto.md e depois escreva 3 opções de assunto (se o assunto não foi fornecido pelo usuário):
- Opção A: Fórmula de lacuna de curiosidade
- Opção B: Fórmula de benefício direto
- Opção C: Fórmula de número/lista
Não use travessões. Não use: "poderoso", "perfeito", "revolucionário", "alavancar", "inovador", "desbloquear", "transformar", "elevar", "de ponta", "robusto".
Passo 5: Geração de HTML
Leia references/sistema-de-design.md e references/guiia-html-email.md antes de gerar o HTML.
Modelo ou personalizado — decida com base nas respostas do Passo 2:
Use modelos/newsletter-escuro.html como base quando TODAS as condições forem atendidas:
- fundo = escuro (ou não especificado)
- fonte de exibição = Instrument Serif (ou não especificada)
- nenhum hex de fundo personalizado fornecido
Use modelos/newsletter-claro.html como base quando TODAS as condições forem atendidas:
- fundo = claro OU tom = formal
- fonte de exibição = Instrument Serif (ou não especificada)
- nenhum hex de fundo personalizado fornecido
Gere HTML personalizado do zero quando QUALQUER condição for atendida:
- hex de fundo personalizado fornecido (não escuro, não branco)
- fonte de exibição = sem serifa moderna ou apenas fontes do sistema
- combinação de respostas produz um design que nenhum modelo atende
Para geração personalizada: use references/sistema-de-design.md Guia de Geração Personalizada como a especificação completa de tokens. Aplique as escolhas de fundo/fonte/botão/acento do usuário em todo o design.
Em seguida (para o caminho do modelo):
- Selecione apenas as seções necessárias do modelo (com base na estrutura do Passo 3)
- Preencha todos os valores
[PLACEHOLDER]com o conteúdo do Passo 4 - Aplique a substituição de cor da marca (veja abaixo)
- Verifique se todos os placeholders
[UNSUBSCRIBE_URL]ainda estão presentes (o ajuste da plataforma ocorre no Passo 6)
Regras de substituição de cor da marca:
Se cor_da_marca for fornecida:
- Substitua o
bgcolorda faixa da marca (#D8F90Ana linhaheight:2px) pelo cor_da_marca - Substitua a cor da borda esquerda do destaque de estatística pelo cor_da_marca
- Substitua a cor do rótulo da categoria pelo cor_da_marca
- Se a luminância de cor_da_marca for alta (amarelos, verdes, laranjas — maioria dos neons): substitua
#D8F90Ado crachá da etapa pelo cor_da_marca também - Se a luminância de cor_da_marca for baixa (azul marinho escuro, verde floresta, cinza carvão): mantenha os crachás da etapa e o botão CTA como
#D8F90A, use cor_da_marca apenas para a faixa e a borda da estatística
Se cor_da_marca NÃO for fornecida: mantenha todos os valores #D8F90A como estão.
Regras de substituição de conteúdo (das respostas do Passo 2):
- Se
nome_da_empresafor fornecido: substitua todos os placeholders[YOUR BRAND]e[COMPANY NAME] - Se
cidade_paisfor fornecido: substitua o placeholder[CIDADE, PAÍS] - Se
sloganfor fornecido: adicione como linha de subtítulo no rodapé após o nome da empresa - Se
url_ctafor fornecida: substitua todos os placeholders[CTA_URL]pela URL real - Se
personalizacao = primeiro_nome: adicione a variável de primeiro nome apropriada para a plataforma na saudação do hero — ex.:Olá %%first_name%%,no Beehiiv,Olá {{first_name}},no Loops,Olá *|FNAME|*,no Mailchimp - Se
personalizacao = primeiro_nome + empresa: adicione ambas as variáveis onde contextualmente apropriado
Verificação de tensão visual da cor da marca (em e-mail escuro):
A cor da marca se destaca visualmente em #111111? Teste mentalmente: ela seria visível como uma faixa de 2px?
- Cores de alta saturação (roxos, azuis, turquesas, rosas, amarelos, laranjas, verdes): SIM — use para faixa + borda da estatística + rótulo da categoria
- Cores de baixa saturação / quase neutras (cinzas quentes, bege, off-white): apenas faixa; o rótulo da categoria volta para
#555555 - Quase pretas (azul marinho muito escuro, verde floresta, cinza carvão abaixo de ~
#2A2A2A): pule cor_da_marca para TODOS os usos de acento, volte para#D8F90Apara cada elemento
Regra de disciplina de acento: cor_da_marca aparece em NO MÁXIMO 3 lugares: faixa da marca, borda da estatística, rótulo da categoria. Nunca no corpo do texto, títulos, fundos de botão ou fundos de seção. O excesso de branding mata a sensação premium.
Cor do texto do botão CTA:
- Em fundo de botão
#D8F90A: sempre use texto#0A0A0A(é uma cor clara) - Em fundo de botão
#111111(dentro do cartão de callout amarelo): sempre use texto#F2F2F2 - Em botão com cor_da_marca: use
#0A0A0Ase a marca for clara,#FFFFFFse a marca for escura
Exigido em cada <td> com cor de fundo:
Tanto o atributo HTML bgcolor= quanto o estilo inline background-color:. Exemplo:
<td bgcolor="#D8F90A" style="background-color:#D8F90A;">
O atributo cuida do Outlook. O estilo cuida de todo o resto. Nunca use apenas um.
Excelência de design (princípios de design frontend, adaptados para e-mail):
As restrições de tabela do e-mail não limitam a ambição do design. Ultrapasse-as:
-
Tipografia ao extremo: títulos de 4-5 palavras = 60px,
-0.04emtracking. Títulos de 6-7 palavras = 56px,-0.03em. 8 palavras = 48px. Nunca reduza o tamanho por segurança — o título é um pôster, não um rótulo. Instrument Serif itálico em citações de estatísticas adiciona peso literário que nenhum outro elemento consegue igualar. -
Contraste de densidade como sinal de habilidade: Hero = espaço aberto máximo (64px no topo). Parágrafos do corpo = compactos e densos. Cartão de callout CTA = espaço aberto máximo novamente (64px). Aberto → compacto → aberto é o ritmo que parece design intencional, não saída de modelo.
-
Profundidade de fundo via alternância de seção (tudo seguro para e-mail):
- Cabeçalho:
#0A0A0A - Hero:
#111111 - Destaque de estatística externo:
#111111, cartão elevado interno:#1A1A1A - Parágrafos do corpo:
#161616(elevação sutil cria profundidade sem cor) - Cartões de etapa:
#111111(contraste com o corpo) - Cartão de callout CTA:
#D8F90A(o ÚNICO elemento brilhante — nunca dilua) - Rodapé:
#080808
- Cabeçalho:
-
Escassez de acento = luxo: Um cartão de callout amarelo em um mar escuro parece premium. Amarelo aparecendo em seis lugares parece barato. O poder do cartão CTA vem inteiramente de ser o único elemento brilhante em um e-mail escuro.
-
Teste inesquecível: Antes de salvar, declare em uma frase o que um leitor descreveria a um colega 3 horas depois. Se for vago ("era escuro e limpo") — a âncora visual não é forte o suficiente. Torne-a específica ("o cartão amarelo com o título serifado grande").
-
Destaque de estatística como citação de destaque editorial: Borda esquerda de 4px (não 3px). 26px Instrument Serif itálico no texto da citação. 32px de preenchimento interno. Este é o mais próximo que um e-mail chega de uma citação de destaque de revista. Trate-o como tal.
Passo 6: Ajuste de Plataforma
Leia references/compatibilidade-plataforma.md e aplique ajustes específicos da plataforma:
| Plataforma | Ação |
|---|---|
| Loops | Substitua [UNSUBSCRIBE_URL] por {{unsubscribe_url}}. Substitua referências [FIRST_NAME] por {{first_name}} |
| Mailchimp | Substitua [UNSUBSCRIBE_URL] por *|UNSUB|*. Adicione mc:edit="[nome-da-secao]" aos blocos <td> editáveis |
| Beehiiv | Substitua [UNSUBSCRIBE_URL] por %%unsubscribe_url%%. Substitua [FIRST_NAME] por %%first_name%% |
| Resend | Substitua [UNSUBSCRIBE_URL] por {unsubscribeUrl}. Nota: Saída React Email .tsx disponível mediante solicitação |
| Genérica/Outra | Mantenha [UNSUBSCRIBE_URL] como placeholder com o comentário: <!-- Substitua pelo seu link de descadastro --> |
Passo 7: Auto-Verificação
Verifique o HTML gerado antes da saída. Corrija todos os problemas encontrados — não pule nenhum.
Verificações de renderização:
- Todos os estilos inline — sem blocos
<style>, sem atributosclass=em lugar nenhum - Todas as
<table>têmcellpadding="0" cellspacing="0" border="0" - Imagens (se houver) têm
alt="",border="0",display:blockno estilo - Largura máxima de 600px aplicada na tabela do contêiner
- Botão CTA usa estrutura
<table>+<td>com atributobgcolor=, não apenas<a>comdisplay:block - Sem
flexbox,grid,position:,float:, variáveis CSS (--var),min-height,max-heightem qualquer estilo inline -
border-radiusapenas em<td>— não em<table>ou<a>(o Outlook renderiza o raio em<td>) - Rodapé tem link de descadastro com a variável correta da plataforma
Verificações de conteúdo:
- Título hero tem 8 palavras ou menos
- Texto do botão CTA tem 3-5 palavras
- Sem travessões (-- é permitido, — não)
- Sem palavras proibidas: "poderoso", "perfeito", "revolucionário", "alavancar", "inovador", "desbloquear", "transformar", "elevar", "de ponta", "robusto"
(CONTINUA NA PRÓXIMA MENSAGEM)