Habilidad de Marketing por Correo Electrónico
Producir un único correo HTML — centrado, columna única, sin cromo alrededor del cuerpo del correo. Trátalo como un artefacto de marketing: una gran idea, una CTA.
Flujo de trabajo
- Leer el DESIGN.md activo (inyectado arriba). El correo se apoya en la fuente display más que cualquier otra superficie — elige el token de tipo más llamativo del DS para el titular.
- Elegir la marca + producto de la solicitud. Genera un logotipo real, un nombre de producto real y una frase de beneficio real — sin marcadores de posición.
- Diseño, en orden, todo centrado dentro de una columna de 600–680px sobre un fondo de página tintado (para que el cuerpo del correo parezca un correo, no la página):
- Encabezado — logotipo a la izquierda + 3 enlaces de navegación cortos (SHOP, JOURNAL, MEMBERS) a la derecha. Subrayado fino.
- Bloque héroe — un marcador de posición de imagen de producto 16:9. Usa un degradado tintado del DS o una silueta SVG estilizada del producto (zapato, botella, auriculares, lo que implique la solicitud). Agrega un pequeño sello de marca en la esquina superior izquierda y una etiqueta de combinación de colores en la esquina inferior izquierda.
- Ceja — mayúscula pequeña, color de acento, separada por caracteres
·(ej. "NUEVO · ENTRENADOR DE MÁXIMA AMORTIGUACIÓN · EMBER FLARE"). - Titular — titular de 2–3 líneas usando la fuente display, todo mayúsculas, tracking extra apretado. Aplica una ligera inclinación (
transform: skew(-6deg)) en una palabra de acento para darle una sensación deportiva de paralelogramo. - Cuerpo — párrafo de 2–3 oraciones, alineado a la izquierda, fuente del cuerpo.
- CTA principal — botón sólido en forma de píldora o bloque. Solo uno.
- Cuadrícula de especificaciones — cuadrícula 2×2 de llamadas (número grande + unidad + etiqueta) usando la fuente display para los números.
- Pie — logotipo, dirección, enlaces de cancelación de suscripción y ver en navegador.
- Escribir un único documento HTML:
<!doctype html>hasta</html>, CSS inline.- Centrar la columna con
margin: 0 auto. Establecerbody { background: <tinte> }para que la metáfora de correo sobre página se lea. - Sin imágenes externas — usar SVG inline o bloques de degradado tintados del DS para la foto del producto.
data-od-iden el encabezado, héroe, titular, CTA, especificaciones.
- Autoverificación:
- El correo se lee de arriba a abajo en 8–10 segundos.
- Una CTA. El acento aparece como máximo dos veces (ceja + CTA, o palabra del titular).
- Se ve legible en una ventana de 480px (la columna se reajusta, el tipo baja un paso).
Contrato de salida
Emitir entre etiquetas <artifact>:
<artifact identifier="email-slug" type="text/html" title="Email — Línea de Asunto">
<!doctype html>
<html>...</html>
</artifact>
Una oración antes del artefacto, nada después.