Por qué tu plantilla de email de ChatGPT se rompe al llegar

Tu plantilla de email de ChatGPT se ve genial en la ventana del chat: columnas ordenadas, un botón grande, los colores de tu marca. Luego envías una prueba, y Outlook estira el email por toda la pantalla, Gmail se salta los estilos y en lugar del logo aparece un hueco en blanco. ¿Te suena? La culpa no es solo de ChatGPT. Claude, Gemini, Copilot y otras herramientas de IA cometen los mismos errores, porque el origen es el mismo.

En este artículo vemos por qué un email en HTML generado por IA suele verse mal en los clientes de correo, repasamos los errores típicos con ejemplos de código y te enseñamos a convertir ese HTML en un email que llegue a tus suscriptores tal y como lo diseñaste.

Por qué pasa: la IA aprendió a maquetar con webs

Un modelo de IA escribe HTML tal y como lo ha visto más a menudo. Y la mayor parte del HTML de internet son webs: millones de páginas hechas con las reglas de la web moderna, con bloques <div>, rejillas flexibles, estilos en un archivo aparte e imágenes SVG. Para un navegador, ese código es correcto. Y la IA lo reproduce fielmente también en tu email.

Pero un cliente de correo no es un navegador. El email tiene sus propias reglas, y van años por detrás de la web. El Outlook clásico para Windows todavía muestra los emails con el motor de Microsoft Word, no con el de un navegador, y Microsoft ha prometido darle soporte al menos hasta 2029. Gmail elimina parte de tus estilos. GMX y WEB.DE en Alemania y La Poste y SFR en Francia ignoran los estilos escritos en un bloque aparte. Por eso, el HTML5 y el CSS3 en los que se apoya una web moderna no funcionan en las campañas de email.

Un detalle importante: una campaña sale a todos tus suscriptores a la vez. No puedes elegir quién la abre en Gmail y quién en Outlook. Así que, si una técnica falla aunque sea en un solo cliente de correo importante, no sirve para email. Ese es el criterio que usamos con los errores de abajo.

Error 1. Divs y flexbox, como en una web

Así suele ser un email generado por IA: dos tarjetas de producto una al lado de la otra, en un bloque de 600 píxeles centrado en la 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 una web, todo esto está bien. Para un email, casi cada línea es un problema. El Outlook clásico para Windows no entiende display: flex, así que las tarjetas se apilan una encima de otra en lugar de quedar en fila. Solo respeta max-width en las tablas y no admite centrar con margin: auto, así que el email se estira a todo el ancho de la ventana. Outlook tampoco conoce las etiquetas <main> y <section>, y Gmail cambia algunas de ellas por las suyas.

Como se diseñó

Blocks Store

Como llegó a Outlook para Windows

Blocks Store

Qué significa para ti: en el email, la maquetación se hace con tablas, no con bloques. Parece anticuado, pero todos los clientes entienden las tablas igual, incluido Outlook con su motor de Word. Aquí tienes las mismas dos tarjetas maquetadas para email:

<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>

Una IA puede escribir código así si se lo pides. Pero, por defecto, elige la maquetación de web, la que ha visto más veces. Si te interesa cómo se maquetan los emails a mano con tablas y cómo ayudan los frameworks, echa un vistazo a nuestra comparativa de frameworks de email.

Error 2. Estilos en un bloque aparte, no en las etiquetas

Una web separa el diseño del contenido: los estilos se describen una vez en un bloque <style> o en un archivo aparte, y los elementos los usan mediante clases. La IA hace lo mismo:

<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>

Muchos clientes de correo simplemente tiran ese bloque. La versión web móvil de Gmail, GMX, WEB.DE, La Poste y SFR no leen <style> en absoluto. La app de Gmail lo ignora cuando la bandeja de entrada no es una cuenta de Google, por ejemplo una dirección del trabajo. Gmail en la web solo acepta estilos en la cabecera del email, el <head>, y solo hasta 16 KB. Basta con que el bloque crezca un poco más para que todo el diseño desaparezca de golpe. Gmail y Outlook.com no admiten en absoluto enlazar una hoja de estilos externa con <link>.

Como se diseñó

Blocks Store

Ofertas de otoño

Hasta un 50% de descuento en toda la colección hasta el domingo.

Ver ofertas

Como llegó sin el bloque de estilos

Blocks Store

Ofertas de otoño

Hasta un 50% de descuento en toda la colección hasta el domingo.

Ver ofertas

Qué significa para ti: en un email, cada regla de diseño se escribe directamente en la etiqueta, en el atributo style. Son los llamados estilos en línea. Hay más código, pero los estilos no se pierden por el camino:

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

Pero no cantes victoria con este botón todavía: en Outlook para Windows seguirá fallando. Te explicamos por qué en el cuarto error.

Error 3. Imágenes en SVG y base64

Una IA no puede adjuntar un archivo de imagen a su respuesta, así que busca un atajo. Dibuja el logo y los iconos directamente en el código como SVG. Y si le pasaste una imagen, la incrusta en el HTML como base64, una larga cadena de caracteres en lugar de un enlace a un archivo:

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

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

Las dos cosas funcionan en un navegador. Ninguna funciona en el email. Gmail, Outlook y Yahoo no muestran el SVG dibujado en el código. Gmail convierte en PNG un archivo SVG enlazado como imagen normal, así que pierde la nitidez y la animación. Gmail y el nuevo Outlook para Windows no muestran imágenes en base64: donde deberían estar, ves un hueco vacío.

Como se diseñó

Blocks Store

Ofertas de otoño

Como llegó a Gmail

El base64 tiene un segundo inconveniente: engorda el email. Una imagen escrita como caracteres ocupa en el código aproximadamente un tercio más que el propio archivo. Un par de banners, y el email pesa tanto que Gmail lo recorta. Hablamos de eso en el quinto error.

Qué significa para ti: las imágenes de un email deben estar en un servidor como archivos PNG, JPG o GIF, y el código solo debe llevar un enlace a ellas con sus dimensiones:

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

Error 4. Outlook para Windows ve tu email a través de Word

El Outlook clásico para Windows merece capítulo aparte. No muestra el email con un navegador, sino con el motor del procesador de textos Word. Por eso no entiende mucho de lo que cualquier IA da por básico. Este es un típico primer pantallazo de email hecho por IA, con una imagen de fondo, un titular encima y un botón:

<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>

En Outlook, todo eso falla a la vez:

• No muestra la imagen de fondo definida con background-image. El titular blanco queda sobre fondo blanco y desaparece.
• Outlook para Windows, Outlook para Mac y Outlook.com no admiten la etiqueta <button> en los emails.
• Outlook solo respeta padding en las celdas de tabla. Un botón hecho con un enlace con relleno se encoge al tamaño de su texto.
• No dibuja border-radius, así que las esquinas salen rectas.

Como se diseñó

Ofertas de otoño

Hasta un 50% de descuento hasta el domingo

Comprar ahora

Como llegó a Outlook para Windows

Ofertas de otoño

Hasta un 50% de descuento hasta el domingo

Comprar ahora

Qué significa para ti: para Outlook, los emails se maquetan con técnicas especiales. Un botón se construye con una celda de tabla con color de fondo, y un botón así aguanta en todas partes:

<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>

Una imagen de fondo necesita código aparte en VML, un lenguaje de marcado antiguo que solo entiende Outlook. Las herramientas de IA casi nunca se acuerdan de él. Y un profesional del marketing no tiene por qué aprenderlo.

Error 5. Un email pesado que Gmail recorta

Gmail solo muestra un email completo si su código pesa menos de unos 102 KB. Lo que no cabe queda oculto tras la línea «[Mensaje recortado] Ver todo el mensaje». Lo que cuenta es el código: el texto, los estilos, las direcciones de los enlaces y de las imágenes. Las imágenes cargadas por enlace no suman a ese tamaño, pero las imágenes en base64 sí.

Las herramientas de IA se enrollan. Repiten los mismos estilos en cada elemento, añaden envoltorios y comentarios de sobra e incrustan las imágenes en el código. Y el recorte se lleva justo lo más importante: al final de un email suelen estar el enlace para darse de baja y el píxel invisible con el que tu servicio de email cuenta las aperturas. Un suscriptor que quiere darse de baja no encuentra el enlace y puede acabar pulsando «Spam». Y las aperturas de ese email no llegan a tus estadísticas.

Qué significa para ti: vigila el peso del código. Si el email pesa más de 100 KB, hay que recortarlo: quitar repeticiones, llevar las imágenes a un servidor y eliminar lo que sobra.

Error 6. Sin preencabezado

El preencabezado es el texto breve que la bandeja de entrada muestra junto al asunto. Si no lo hay, la bandeja toma el primer texto que encuentra en la parte de arriba del email. Normalmente es «Ver en el navegador», las opciones del menú o el texto bajo el logo. Las herramientas de IA casi nunca añaden un preencabezado, porque las webs no tienen nada parecido.

Qué significa para ti: el preencabezado es un segundo asunto e influye en que el email se abra o no. Se añade como un bloque oculto al principio del 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 más sobre qué hace bueno a un email, lee nuestra guía de diseño de emails.

Error 7. Scripts, formularios y vídeo

En una web es normal añadir partes interactivas: un carrusel en JavaScript, un formulario de registro, un vídeo. Por costumbre, la IA los añade también a los emails. En el email, nada de esto funciona:

• Los clientes de correo no ejecutan scripts y los eliminan para protegerse de código malicioso. Algunos servicios de email ni siquiera te dejan guardar un email que lleve un script.
• Gmail cambia la etiqueta <video> por un hueco vacío, y Outlook para Windows y Yahoo no la muestran. Se reproduce sobre todo en Apple Mail.
• Los formularios no funcionan en Outlook para Windows, Yahoo en iPhone, Proton Mail y GMX, y en Outlook.com y Outlook para Mac los datos no se envían.

Qué significa para ti: en lugar de un vídeo, el email lleva una imagen de portada que enlaza con él, y en lugar de un formulario, un botón que lleva a una página con el formulario. Si de verdad necesitas interactividad, hacen falta técnicas especiales, de las que hablamos en nuestro artículo sobre emails animados.

Cómo pedirle a una IA que maquete bien un email

Muchos de estos errores se evitan si le explicas a la IA desde el principio las reglas de la maquetación de emails. Aquí tienes un prompt que puedes añadir a tu petición:

Maqueta un email en HTML para una campaña de email, no una página web. Usa tablas con role=“presentation” solo para la maquetación, sin rejillas de div, flex ni grid. El email mide 600 píxeles de ancho. Escribe todos los estilos en línea en el atributo style, sin bloque style y sin clases. No uses las etiquetas header, main, section, footer ni button. Las imágenes deben ser PNG o JPG con URL completa, width, height y alt, sin SVG y sin base64. Haz los botones con una celda de tabla con color de fondo. Sin JavaScript, formularios ni vídeo. Añade un preencabezado oculto al principio del email. Mantén el código por debajo de 100 KB.

Con un prompt así, el resultado mejora bastante. Pero seamos sinceros sobre lo que no resuelve.

Primero, en un email largo la IA empieza a olvidar las reglas a mitad de camino. Los primeros bloques los maqueta con tablas, y luego en el pie vuelven a aparecer <div> y flexbox. Segundo, la IA no ve cómo queda el email en una bandeja de entrada. Te escribirá muy segura «este código es compatible con todos los clientes de correo», pero no tiene forma de comprobarlo: nunca ha abierto el email en Outlook. Y tercero, tú tampoco puedes revisar el código, salvo que maquetes emails por oficio. Para eso hace falta un conjunto de bandejas de prueba en distintos clientes o un servicio de pruebas de pago.

La IA es estupenda para planificar la estructura de un email y escribir los textos, como contamos en nuestro artículo sobre la IA en el email marketing. Pero la maquetación final está más segura en manos de una herramienta que conoce las reglas del email.

Cómo convertir la maquetación de una IA en un email que funciona

Para eso está el conversor HTML de Blocks. Toma el código que escribió la IA y lo reconstruye con las reglas de la maquetación de emails. Corrige por su cuenta todo lo que hemos visto arriba: convierte los bloques y el flexbox en tablas, pasa los estilos a las etiquetas y pone en orden las imágenes, los botones y Outlook.

Así funciona:

1. Pega el código del email en Blocks o sube el archivo.
2. Blocks detecta que el email se hizo en otro sitio y te ofrece convertirlo.
3. La conversión suele tardar menos de un minuto.
4. El email se abre en el editor, listo para exportarlo a tu servicio de email.

Hay una segunda ventaja que es fácil pasar por alto. Después de la conversión, el email ya no es un muro de código que da miedo tocar. Se abre en el editor por bloques: titular, imagen, texto, botón. Puedes arreglar cualquier punto a mano, detalle a detalle: cambiar una palabra, sustituir una imagen, cambiar el color de un botón, todo sin código y sin volver a pedírselo a la IA. Y al exportar, Blocks vuelve a generar código que los clientes de correo entienden.

Si no tienes claro que un email en HTML merezca la pena, compáralo con uno en texto plano en nuestro artículo «Emails en HTML o texto plano».

En resumen

• Los modelos de IA aprendieron a maquetar con webs, así que una plantilla de email de ChatGPT, Claude o Gemini está hecha como una página web.
• Una campaña sale a todo el mundo a la vez. Si una técnica no funciona aunque sea en un solo cliente de correo importante, no sirve para email.
• Los errores principales: divs y flexbox en lugar de tablas, un bloque de estilos aparte en lugar de estilos en línea, imágenes en SVG y base64, técnicas que Outlook para Windows no entiende, código demasiado pesado, falta de preencabezado, y scripts, formularios y vídeo.
• Un prompt detallado ayuda, pero no garantiza el resultado, y sin pruebas no puedes revisar el código.
• La forma fiable es pasar la maquetación de la IA por un conversor y ajustar los detalles a mano en el editor.