Por que seu modelo de e-mail do ChatGPT chega quebrado

Seu modelo de e-mail do ChatGPT fica ótimo na janela do chat: colunas organizadas, um botão grande, as cores da sua marca. Aí você envia um teste, e o Outlook estica o e-mail pela tela inteira, o Gmail descarta os estilos e, no lugar do logotipo, aparece um espaço em branco. Parece familiar? A culpa não é só do ChatGPT. Claude, Gemini, Copilot e outras ferramentas de IA cometem os mesmos erros, porque o motivo é o mesmo.

Neste artigo, vamos ver por que um e-mail em HTML gerado por IA costuma aparecer mal nos clientes de e-mail, passar pelos erros mais comuns com exemplos de código e mostrar como transformar esse HTML em um e-mail que chega aos assinantes do jeito que você criou.

Por que isso acontece: a IA aprendeu a programar com sites

Um modelo de IA escreve HTML do jeito que mais viu. E a maior parte do HTML na internet é de sites: milhões de páginas feitas pelas regras da web moderna, com blocos <div>, grids flexíveis, estilos em um arquivo separado e imagens SVG. Para um navegador, esse código está correto. E a IA reproduz tudo fielmente no seu e-mail também.

Mas um cliente de e-mail não é um navegador. O e-mail segue regras próprias, que estão anos atrás da web. O Outlook clássico para Windows ainda renderiza os e-mails com o motor do Microsoft Word, e não com o de um navegador, e a Microsoft prometeu dar suporte a ele pelo menos até 2029. O Gmail corta parte dos seus estilos. GMX e WEB.DE, na Alemanha, e La Poste e SFR, na França, ignoram estilos escritos em um bloco separado. Resultado: o HTML5 e o CSS3 em que um site moderno se apoia não funcionam em campanhas de e-mail.

Um detalhe importante: uma campanha vai para todos os seus assinantes de uma vez. Você não escolhe quem vai abrir no Gmail e quem vai abrir no Outlook. Então, se uma técnica quebra em um só cliente de e-mail importante, ela não serve para e-mail. É com essa régua que avaliamos os erros abaixo.

Erro 1. Divs e flexbox, como em um site

Veja como costuma ser um e-mail gerado por IA: dois cards de produto lado a lado em um bloco de 600 pixels centralizado na página.

<style>
  .container { max-width: 600px; margin: 0 auto; }
  .products { display: flex; gap: 24px; }
  .card { flex: 1; }
</style>

<main class="container">
  <section class="products">
    <div class="card"><img src="sneakers.jpg" alt="Sneakers"><p>New arrivals</p></div>
    <div class="card"><img src="jacket.jpg" alt="Jacket"><p>Best sellers</p></div>
  </section>
</main>

Para um site, está tudo certo. Para um e-mail, quase toda linha é um problema. O Outlook clássico para Windows não entende display: flex, então os cards ficam um em cima do outro em vez de lado a lado. Ele respeita max-width só em tabelas e não aceita centralização com margin: auto de jeito nenhum, então o e-mail se estica pela largura inteira da janela. O Outlook também não conhece as tags <main> e <section>, e o Gmail troca algumas dessas tags pelas suas próprias.

Como foi criado

Blocks Store

Como chegou no Outlook para Windows

Blocks Store

O que isso significa para você: no e-mail, o layout é montado com tabelas, e não com blocos. Parece antiquado, mas todo cliente entende tabelas do mesmo jeito, inclusive o Outlook com o motor do Word. Veja os mesmos dois cards em marcação de e-mail:

<table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td width="288" valign="top">…</td>
    <td width="24"></td>
    <td width="288" valign="top">…</td>
  </tr>
</table>

Uma IA consegue escrever um código assim se você pedir. Mas, por padrão, ela escolhe a marcação de site, que é a que ela mais viu. Se você tem curiosidade sobre como os e-mails são codificados à mão com tabelas e como os frameworks ajudam, dê uma olhada na nossa comparação de frameworks de e-mail.

Erro 2. Estilos em um bloco separado, e não nas tags

Um site mantém o design separado do conteúdo: os estilos são descritos uma vez em um bloco <style> ou em um arquivo separado, e os elementos se referem a eles por meio de classes. A IA faz o mesmo:

<style>
  .button { background: #2f54eb; color: #ffffff; padding: 14px 28px; border-radius: 8px; }
</style>

<a class="button" href="https://example.com/sale">Shop the sale</a>

Muitos clientes de e-mail simplesmente jogam esse bloco fora. A versão web do Gmail para celular, GMX, WEB.DE, La Poste e SFR não leem <style> de jeito nenhum. O app do Gmail ignora o bloco quando a caixa de entrada não é uma conta Google, como um endereço corporativo. O Gmail na web aceita estilos só no início do código do e-mail, o <head>, e só até 16 KB. Basta o bloco crescer um pouco mais para todo o design sumir de uma vez. O Gmail e o Outlook.com também não aceitam uma folha de estilos externa vinculada com <link>.

Como foi criado

Blocks Store

Promoção de outono

Até 50% de desconto em toda a coleção até domingo.

Aproveitar a promoção

Como chegou sem o bloco de estilos

Blocks Store

Promoção de outono

Até 50% de desconto em toda a coleção até domingo.

Aproveitar a promoção

O que isso significa para você: no e-mail, cada regra de design é escrita direto na tag, no atributo style. Isso se chama estilo inline. O código fica maior, mas os estilos não se perdem no caminho:

<a href="https://example.com/sale" style="background:#2f54eb;color:#ffffff;padding:14px 28px;border-radius:8px;">Shop the sale</a>

Mas não comemore esse botão ainda: ele continua quebrando no Outlook para Windows. Explicamos o motivo no quarto erro.

Erro 3. Imagens em SVG e base64

Uma IA não consegue anexar um arquivo de imagem à resposta, então ela dá um jeito. Desenha o logotipo e os ícones direto no código, em SVG. E, se você passou uma imagem para ela, ela incorpora a imagem no HTML em base64, uma longa sequência de caracteres no lugar de um link para o arquivo:

<svg width="120" height="32" viewBox="0 0 120 32">…</svg>

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…" alt="Fall sale">

As duas coisas funcionam no navegador. Nenhuma funciona no e-mail. Gmail, Outlook e Yahoo não mostram SVG desenhado no código. O Gmail converte em PNG um arquivo SVG vinculado como imagem comum, e ele perde a nitidez e a animação. O Gmail e o novo Outlook para Windows não mostram imagens em base64: no lugar delas, fica um espaço vazio.

Como foi criado

Blocks Store

Promoção de outono

Como chegou no Gmail

O base64 tem um segundo problema: ele incha o e-mail. Uma imagem escrita como caracteres ocupa cerca de um terço a mais de espaço no código do que o próprio arquivo. Dois banners, e o e-mail fica tão pesado que o Gmail o corta. Falamos mais disso no quinto erro.

O que isso significa para você: as imagens de um e-mail devem ficar em um servidor, como arquivos PNG, JPG ou GIF, e o código deve ter só o link para elas, com as dimensões:

<img src="https://cdn.example.com/fall-sale.png" width="600" height="300" alt="Fall sale">

Erro 4. O Outlook para Windows enxerga seu e-mail pelo Word

O Outlook clássico para Windows merece uma conversa à parte. Ele renderiza o e-mail não com um navegador, mas com o motor do editor de textos Word. Por isso, não entende muito do que qualquer IA considera básico. Veja uma primeira tela de e-mail típica feita por IA, com imagem de fundo, um título por cima e um botão:

<div style="background-image:url(hero.jpg);padding:48px;">
  <h1 style="color:#ffffff;">Fall sale</h1>
  <button style="border-radius:24px;padding:14px 28px;">Shop now</button>
</div>

No Outlook, tudo isso quebra de uma vez:

• Ele não mostra a imagem de fundo definida com background-image. O título branco fica sobre um fundo branco e desaparece.
• O Outlook para Windows, o Outlook para Mac e o Outlook.com não aceitam a tag <button> em e-mails.
• O Outlook respeita padding só em células de tabela. Um botão feito de um link com padding encolhe até o tamanho do texto.
• Ele não desenha border-radius, então os cantos ficam retos.

Como foi criado

Promoção de outono

Até 50% de desconto até domingo

Comprar agora

Como chegou no Outlook para Windows

Promoção de outono

Até 50% de desconto até domingo

Comprar agora

O que isso significa para você: os e-mails são codificados para o Outlook com técnicas especiais. O botão é feito de uma célula de tabela com cor de fundo, e um botão assim sobrevive em qualquer lugar:

<table role="presentation" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#2f54eb" style="border-radius:8px;padding:14px 28px;">
      <a href="https://example.com/sale" style="color:#ffffff;text-decoration:none;">Shop the sale</a>
    </td>
  </tr>
</table>

Uma imagem de fundo precisa de um código separado em VML, uma linguagem de marcação ultrapassada que só o Outlook entende. As ferramentas de IA quase nunca se lembram dela. E quem trabalha com marketing não tem por que aprender isso.

Erro 5. Um e-mail pesado que o Gmail corta

O Gmail só mostra o e-mail inteiro se o código dele pesar menos de cerca de 102 KB. O que não couber fica escondido atrás da linha “[Mensagem cortada] Exibir toda a mensagem”. O que conta é o código: texto, estilos, endereços de links e de imagens. Imagens carregadas por link não entram nesse tamanho, mas imagens em base64 entram.

As ferramentas de IA são prolixas. Elas repetem os mesmos estilos em cada elemento, adicionam contêineres e comentários desnecessários e incorporam imagens no código. O corte atinge a parte mais importante: o final do e-mail costuma ter o link de descadastro e o pixel invisível que sua plataforma de e-mail usa para contar as aberturas. O assinante que quer se descadastrar não encontra o link e pode acabar clicando em “Spam”. E as aberturas desse e-mail não entram nas suas estatísticas.

O que isso significa para você: fique de olho no peso do código. Se o e-mail passar de 100 KB, ele precisa de uma enxugada: tire as repetições, leve as imagens para um servidor, corte o que não for necessário.

Erro 6. Sem pré-cabeçalho

O pré-cabeçalho é o texto curto que a caixa de entrada mostra ao lado do assunto. Se ele não existir, a caixa de entrada pega o primeiro texto que encontrar no topo do e-mail. Normalmente é “Ver no navegador”, os itens do menu ou a legenda embaixo do logotipo. As ferramentas de IA quase nunca adicionam um pré-cabeçalho, porque sites não têm esse elemento.

O que isso significa para você: o pré-cabeçalho funciona como um segundo assunto e influencia a decisão de abrir o e-mail. Ele entra como um bloco oculto bem no início do código:

<div style="display:none;max-height:0;overflow:hidden;">
  Up to 50% off until Sunday — free shipping on every order
</div>

Para saber mais sobre o que faz um bom e-mail, leia o nosso guia de design de e-mail.

Erro 7. Scripts, formulários e vídeo

Em um site, é normal adicionar partes interativas: um slider em JavaScript, um formulário de cadastro, um vídeo. Por hábito, a IA coloca tudo isso nos e-mails também. No e-mail, nada disso funciona:

• Os clientes de e-mail não executam scripts e os removem para se proteger de código malicioso. Algumas plataformas de e-mail nem deixam você salvar um e-mail que contenha um script.
• O Gmail troca a tag <video> por um espaço vazio, e o Outlook para Windows e o Yahoo não mostram o vídeo. Ele roda principalmente no Apple Mail.
• Formulários não funcionam no Outlook para Windows, no Yahoo no iPhone, no Proton Mail e no GMX, e no Outlook.com e no Outlook para Mac os dados não são enviados.

O que isso significa para você: no lugar do vídeo, o e-mail usa uma imagem de capa com link para ele e, no lugar do formulário, um botão que leva a uma página com o formulário. Se você precisa mesmo de interatividade, são necessárias técnicas especiais, que explicamos no nosso artigo sobre e-mails animados.

Como pedir para uma IA codificar um e-mail do jeito certo

Você pode evitar muitos desses erros explicando para a IA, logo de cara, as regras da marcação de e-mail. Veja um prompt que você pode adicionar ao seu pedido:

Codifique um e-mail em HTML para uma campanha de e-mail marketing, e não uma página web. Use tabelas com role=“presentation” apenas para o layout, sem grids de div, flex ou grid. O e-mail tem 600 pixels de largura. Escreva todos os estilos inline no atributo style, sem bloco de estilos e sem classes. Não use as tags header, main, section, footer nem button. As imagens devem ser PNG ou JPG com URL completa, width, height e alt, sem SVG e sem base64. Faça os botões com uma célula de tabela com cor de fundo. Nada de JavaScript, formulários ou vídeo. Adicione um pré-cabeçalho oculto no início do e-mail. Mantenha o código abaixo de 100 KB.

Com um prompt assim, o resultado fica bem melhor. Mas vamos ser sinceros sobre o que ele não resolve.

Primeiro, em um e-mail longo, a IA começa a esquecer as regras no meio do caminho. Os primeiros blocos saem com tabelas, e depois <div> e flexbox voltam a aparecer no rodapé. Segundo, a IA não vê como o e-mail fica na caixa de entrada. Ela vai escrever com toda a confiança “este código é compatível com todos os clientes de e-mail”, mas não tem como conferir: ela nunca abriu o e-mail no Outlook. E terceiro, você também não consegue conferir o código, a não ser que codifique e-mails profissionalmente. Para isso, é preciso ter um conjunto de caixas de entrada de teste em clientes diferentes ou um serviço de testes pago.

A IA é ótima para planejar a estrutura de um e-mail e escrever os textos, como mostramos no nosso artigo sobre IA no e-mail marketing. Mas a marcação final fica mais segura nas mãos de uma ferramenta que conhece as regras do e-mail.

Como transformar a marcação feita por IA em um e-mail que funciona

É para isso que serve o conversor de e-mails HTML do Blocks. Ele pega o código que a IA escreveu e o reconstrói pelas regras da marcação de e-mail. E corrige sozinho tudo o que vimos acima: transforma blocos e flexbox em tabelas, leva os estilos para dentro das tags e resolve imagens, botões e o Outlook.

Funciona assim:

1. Cole o código do e-mail no Blocks ou importe o arquivo.
2. O Blocks percebe que o e-mail foi feito em outro lugar e oferece a conversão.
3. A conversão costuma levar menos de um minuto.
4. O e-mail abre no editor, pronto para a exportação para a sua plataforma de e-mail.

Há uma segunda vantagem que passa despercebida com facilidade. Depois da conversão, o e-mail deixa de ser uma muralha de código em que você tem medo de mexer. Ele abre no editor em blocos: título, imagem, texto, botão. Você pode corrigir qualquer ponto à mão, um detalhe de cada vez: trocar uma palavra, substituir uma imagem, mudar a cor de um botão, tudo sem código e sem outro pedido para a IA. E, na exportação, o Blocks gera de novo um código que os clientes de e-mail entendem.

Se você não tem certeza de que um e-mail em HTML vale o trabalho, compare-o com um e-mail em texto simples no nosso artigo “E-mail em HTML ou texto simples”.

Resumindo

• Os modelos de IA aprenderam a programar com sites, então um modelo de e-mail do ChatGPT, do Claude ou do Gemini é montado como uma página web.
• Uma campanha vai para todo mundo de uma vez. Se uma técnica não funciona em um só cliente de e-mail importante, ela não serve para e-mail.
• Os principais erros: divs e flexbox no lugar de tabelas, um bloco de estilos separado no lugar de estilos inline, imagens em SVG e base64, técnicas que o Outlook para Windows não entende, código pesado demais, falta de pré-cabeçalho, além de scripts, formulários e vídeo.
• Um prompt detalhado ajuda, mas não garante o resultado, e você não consegue conferir o código sem testar.
• O caminho confiável é passar a marcação feita por IA por um conversor e ajustar os detalhes à mão no editor.