Email to HTML — convertir texto a HTML production-ready para Braze
Toma el output del Email Drafter en texto plano y lo convierte en HTML compatible con Outlook, Gmail y Apple Mail — con condicionales MSO, VML para botones, responsive design e inline styles. Production-ready, no "se ve bien en el preview".
Después de Email Drafter, nunca antes. El skill asume input de calidad (texto bien estructurado).
Decisiones de diseño
Por qué no es parte del Email Drafter
Si el contenido está bien pero el HTML sale mal, solo tocás este skill. Si agregás un segmento nuevo, solo tocás el otro. Separar responsabilidades = poder iterar sin romper.
Por qué referencia HTML, no PDF
La primera versión usaba un PDF como template de referencia. No funcionó: Claude no parsea bien estructura desde un PDF. Cuando le dimos templates HTML reales como referencia, la calidad subió drásticamente.
Lección general: la calidad de la referencia que le das al skill define exponencialmente la calidad del output. Un PDF "se parece"; un HTML tiene la verdad estructural.
Self-modifying prompts
El skill incluye una capa de aprendizaje. Cada vez que genera un email y aparece un error (campo dinámico mal mapeado, estilo que no renderiza), el sistema lo guarda como lesson y consulta esas lessons antes de la próxima ejecución. No repite el mismo error dos veces.
---
name: email-to-html
description: >
Convierte contenido de texto estructurado de emails a HTML production-ready
compatible con todos los email clients (Outlook, Gmail, Apple Mail).
Usa templates HTML reales como referencia. Incluye responsive design,
VML para Outlook, versiones mobile/desktop.
Use when the user says "convertir a html", "pasar a html", "generar html",
"html del email", "maquetar email", "email html", "/email-to-html".
argument-hint: <contenido estructurado del email o path al archivo>
user-invocable: true
allowed-tools: Read, Glob, Grep, Write, Bash
---
## Input Check
Si `$ARGUMENTS` esta vacio, buscar en la conversacion el ultimo contenido estructurado generado por `/email-drafter`. Si no hay contenido disponible, pedir al usuario que lo provea o que corra `/email-drafter` primero.
Contenido a convertir: `$ARGUMENTS`
## Step 1: Cargar referencia de estructura HTML
Leer la guia tecnica de estructura:
- `references/html-structure.md` — Patrones, colores, assets, componentes
- `references/email-variables.md` — Variables de contenido, sistema y links por pais/mercado
> **Nota:** Adaptar las rutas a tu proyecto. La seccion de Documentacion de Referencia al final de este documento sirve como ejemplo para crear tu `html-structure.md`.
## Step 2: Identificar el tipo de email
Desde el contenido estructurado, determinar:
- **Tipo**: Upgrade de Oferta, Estandar, Premium, o Custom
- **Segmento**: Cual es la audiencia
- **Variables**: Que variables dinamicas se usan
Esto define:
- Que imagenes de hero usar
- Que colores de cards usar
- Que tagline usar
- Si incluir subline comparativo en el hero (ej: "Antes: $X")
## Step 3: Generar el HTML
Generar un HTML completo siguiendo EXACTAMENTE la estructura de produccion documentada en `references/html-structure.md`.
### Reglas CRITICAS:
**Estructura de 10 rows:**
1. Row 1: Logo desktop (`mobile_hide`)
2. Row 2: Logo mobile (`desktop_hide`)
3. Row 3: Hero mobile (`desktop_hide`)
4. Row 4: Hero desktop (`mobile_hide`)
5. Row 5: Cuerpo (saludo + texto + CTA)
6. Row 6: Tagline
7. Row 7: Bloque de 2 cards (50/50)
8. Row 8: Cierre + CTA final
9. Row 9: Ayuda
10. Row 10: Footer
**Compatibilidad obligatoria:**
- Tablas para layout, NO divs
- Inline styles en todos los elementos
- Condicionales MSO `<!--[if mso]>` para Outlook
- VML `v:roundrect` para botones en Outlook
- Clases `mobile_hide` / `desktop_hide` para responsive
- Media query `@media (max-width:670px)` en `<style>`
- Namespaces VML en `<html>`: `xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"`
**Especificaciones tecnicas:**
| Propiedad | Valor |
|-----------|-------|
| Ancho del email | 650px |
| Font principal | `'Helvetica Neue', Helvetica, Arial, sans-serif` |
| Fondo pagina | `#f1f1f1` |
| Fondo contenido | `#ffffff` |
| Color primario (hero/cards) | `{{PRIMARY_COLOR}}` — ej: `#ff0049` |
| Color botones CTA | `{{CTA_COLOR}}` — ej: `#fa0050` |
| Color texto | `#100423` |
| Color links | `#004add` |
| Border-radius cards | 20px |
| Border-radius botones | 35px |
> **Personaliza los colores:** Reemplaza `{{PRIMARY_COLOR}}` y `{{CTA_COLOR}}` con los colores de tu marca.
**Assets:**
Configurar las URLs de los assets de tu marca:
| Asset | Placeholder | Descripcion |
|-------|-------------|-------------|
| Logo principal | `{{ASSET_LOGO}}` | Logo de la marca en header |
| Logo producto (blanco) | `{{ASSET_PRODUCT_LOGO_WHITE}}` | Logo del producto sobre fondo de color |
| Logo producto (color) | `{{ASSET_PRODUCT_LOGO_COLOR}}` | Logo del producto sobre fondo blanco |
| Check icon | `{{ASSET_CHECK_ICON}}` | Icono de check para listas de beneficios (32px) |
| Footer image | `{{ASSET_FOOTER}}` | Imagen decorativa del footer |
| Hero images | `{{ASSET_HERO_DESKTOP}}` / `{{ASSET_HERO_MOBILE}}` | Imagenes del hero por segmento |
**Variables de la plataforma de envio:**
| Variable | Placeholder | Descripcion |
|----------|-------------|-------------|
| Link de ayuda | `{{HELP_LINK}}` | URL a la seccion de ayuda |
| Unsubscribe | `{{UNSUBSCRIBE_URL}}` | URL de desuscripcion (requerido por ley) |
| CTA link | `{{CTA_LINK}}` | URL destino del boton principal |
> **Personaliza las variables:** Adapta la sintaxis al sistema de envio que uses. Por ejemplo, en algunos sistemas seria `{{${unsubscribe_url}}}` o `{unsubscribe_link}`.
## Step 4: Verificacion de assets (OBLIGATORIO)
Antes de guardar, verificar que TODOS los assets estan presentes en el HTML:
- [ ] Logo principal en Row 1 y Row 2
- [ ] Logo producto en Hero y Cards segun corresponda
- [ ] Check icon en cada beneficio listado en las cards
- [ ] Footer image en Row 10
- [ ] Hero image (desktop y mobile) en Row 3 y Row 4
- [ ] Link de unsubscribe en el footer
- [ ] Link de ayuda en Row 9
> **Bug conocido con caracteres especiales en URLs:**
> Si alguna URL de asset contiene caracteres Unicode especiales (ej: acentos, enyes), el tool Write de Claude Code puede corromper los bytes al guardar. **Solucion:** usar un placeholder temporal al escribir el archivo y luego reemplazarlo via `sed` en Bash con los bytes correctos. Verificar con `xxd` que los bytes son los esperados.
## Step 5: Guardar el archivo
Guardar el HTML en `emails/` con nombre descriptivo:
- Pattern: `emails/[tipo]-[contexto]-[fecha].html`
- Crear la carpeta `emails/` si no existe
- Si hay assets con caracteres especiales, correr los comandos de correccion del Step 4
## Output Format
Entregar:
1. **Archivo HTML guardado** en `emails/` con el path
2. **Checklist de assets**: confirmar que todas las imagenes y logos estan presentes
3. **Indicacion** de que se puede abrir en el browser para preview
4. **Resumen tecnico**: tipo, hero image, colores de cards, variables
## If Something Goes Wrong
- Si el contenido no tiene estructura clara (hero/cuerpo/cierre), pedir que se reformatee o correr `/email-drafter` primero.
- Si no se puede determinar el tipo de email, preguntar al usuario.
- Si falta la referencia `html-structure.md`, usar los patrones documentados en este skill como fallback.