Mate & Build/Builds/How the PedidosYa team went from days to 10 minutes creating marketing emails
Mate & Build #03Post

How the PedidosYa team went from days to 10 minutes creating marketing emails

Participant
Manuela FernΓ‘ndez del Tejo
Company
PedidosYa
Duration
3 horas
Date
Abril 2026
Tools
Claude CodeBrazeSelf-modifying prompts
DΓ­as
Before
10 minutos
After
De dΓ­as a 10 minutos
How the PedidosYa team went from days to 10 minutes creating marketing emails

Manu came to Mate & Build with no expectations. Her team took days to create a marketing email β€” from the idea to the final HTML ready for Braze, given the day-to-day pace and the number of countries involved. Three hours later, they were doing it in 10 minutes. This is what we built, why we built it this way, and what broke along the way.

"Building one email takes days and goes through 3 teams"

Manuela FernΓ‘ndez del Tejo works as Fintech Marketing Strategist at PedidosYa, handling brand, content and media. Her pain was concrete: creating a marketing email for Braze required coordinating content, design and HTML production β€” a pipeline that consumed days going back and forth between different areas.

She came to Mate & Build β€” the weekly AI problem-solving sessions Patricio Iturraspe runs β€” with 3 problems. One was too complex for 3 hours. We focused on the 2 that shared the same axis: email creation in Braze.

What she told me when she sat down was honest: she had zero faith in this. Zero expectation.

The whole pipeline was the problem, not the writing

When we sat down to break the process apart step by step, the thing the day-to-day rhythm never lets you see showed up. It wasn't just writing the content. It was thinking about the structure, writing for multiple segments with Braze's dynamic variables, converting everything to production-ready HTML compatible with Outlook, Gmail and Apple Mail β€” with MSO conditionals, VML for buttons, responsive design β€” and loading everything with the right custom attributes.

Each piece of that process lived inside a different person or team. That's where the time was going.

The question stopped being "how do we automate the writing" and became "how do we build a system that covers the full pipeline and improves on its own with use."

Why 2 separate skills and not a monolithic pipeline

The most important design decision was separating responsibilities. We could have built a single skill that takes a brief and spits out HTML. We chose not to for a practical reason: when something fails inside a monolith, you don't know where it broke.

Two skills in Claude Code and one permanent reference file.

email-drafter writes the content in structured plain text β€” HERO + BODY + CTA. Supports multiple segments and Braze dynamic variables. Clean output: just what the email says, no HTML, no design.

email-to-html takes that plain text and turns it into production-ready HTML. Tables for layout, inline styles, MSO conditionals for Outlook, VML for CTA buttons, responsive with media queries. The structure has 10 rows: logo, hero with mobile/desktop versions, body, tagline, cards, closing, help and footer.

html-structure-reference isn't a skill β€” it's a permanent reference file. It documents the HTML structure as patterns (~3k tokens) instead of pasting real production HTMLs (~10–15k tokens). Both skills consult it as the source of truth for colors, assets and specs of each component.

If the content is right but the HTML comes out wrong, you only touch skill 2. If you add a new segment, you only touch skill 1. You don't break what already works.

7 failed iterations were the most valuable part

Here comes the part nobody tells.

The first iterations didn't work. Braze custom attributes were getting mapped wrong, the HTML came out broken, the structure didn't respect the specs. It took almost 7 iterations to get a production-ready email. Each one taught something the previous ones couldn't show.

And the most revealing mistake: at first we gave it the reference template as a PDF. It seemed logical β€” that's the format the team had it in. But Claude Code couldn't parse the structure well from a PDF. The styles got lost, the row hierarchy got confused, the components couldn't be distinguished.

It was only when we gave it real HTML templates as reference that the output quality jumped sharply. The lesson is a pattern that applies to any skill: the quality of what you give it as reference exponentially defines the quality of what comes out. A PDF "looks like" the final result but doesn't have the structural information the system needs. An HTML has the full truth.

"I really can't believe it. I was honestly surprised. I thought it was going to solve 80% of it, but the truth is it solved 98%. Incredible." β€” Manu

Why we chose for the system to learn on its own

What really set this build apart from a regular automation were the self-modifying prompts. We could have delivered 2 skills and a static reference file that work well today. We chose to add the learning layer because the real value isn't in solving today's problem β€” it's in the system solving tomorrow's problems better.

Three files do the work: prompts that modify themselves, lessons that accumulate, and persistent memory. Every time a skill generates an email and there's an error β€” a dynamic field mapped wrong, a style that doesn't render, a structure that breaks in Outlook β€” the system saves it as a lesson. The next time it runs, it consults those lessons before generating.

It doesn't make the same mistake twice.

The system Manu took home yesterday isn't the same one she'll have a month from now. It'll be better. Every email it generates trains it. Every correction the team makes turns into permanent knowledge.

From days to 10 minutes β€” and what's left

Without the system: idea for the email, drafting with the content team, design, HTML production, Braze upload with custom attributes. Days.

With the system: idea for the email, email-drafter (2 min), email-to-html (3 min), quick review, Braze upload. 10 minutes.

And the quality goes up because each skill works with precise specs, not interpretations of a brief. The html-structure-reference is the source of truth that removes the ambiguity between what content asked for and what dev interpreted.

The third problem Manu brought β€” the most complex β€” stayed out of scope. It's the natural next step. There's also room to iterate: more reference templates, more accumulated lessons, and eventually wiring the output directly to the Braze API to remove the manual upload step.

But that's optimization. What she has today already changed the game.

Takeaways

  • Separate responsibilities > monolith: 2 skills + 1 reference file where each piece does one thing well.
  • Reference in the final format, always: a PDF "looks like" the result but an HTML has the structural truth.
  • Self-modifying prompts turn tools into systems: lessons and memory turn every error into a permanent improvement.
  • Iterating isn't failing: 7 iterations to production-ready.
  • The biggest value is replicability: Manu took home the structure for her team at PedidosYa to create new skills following the same pattern.

Concepts applied here

  • File system for AI (in Spanish) β€” 2 skills + reference file instead of a monolithic mega-prompt.
  • Context engineering (in Spanish) β€” self-modifying prompts and persistent memory that improve the system with every use.
  • AI for marketing (in Spanish) β€” how a marketing team at a LATAM company builds its own system without depending on IT.
Build resources
---
name: email-drafter
description: >
  Redacta contenido de texto para emails de marketing de productos financieros.
  Genera SOLO texto plano estructurado (NO HTML). Crea emails concisos con header
  llamativo (oferta al frente), cuerpo breve con beneficio o efemeride, y CTA claro.
  Soporta multiples segmentos de audiencia y campanas custom.
  Use when the user says "email", "mail", "correo", "campana", "armar un mail",
  "redactar email", "email marketing", "crear email", "contenido de email".
argument-hint: <tipo de email o contexto de la campana>
user-invocable: true
allowed-tools: Read, Glob, Grep
---

> Este skill genera SOLO contenido de texto estructurado. Para convertirlo a HTML, usar `/email-to-html`.

## Input Check

Si `$ARGUMENTS` esta vacio o solo tiene whitespace, preguntar al usuario:
1. Que tipo de email necesita (upgrade de oferta, segmento estandar, segmento premium, u otro)
2. Si hay alguna efemeride o contexto especial para la campana
3. Si tiene datos especificos (monto, nivel de membresia, etc.)

Do NOT proceed with empty input.

Solicitud del usuario: `$ARGUMENTS`

## Step 1: Cargar contexto

Leer los archivos de referencia:
- `references/email-templates.md` β€” Campanas pasadas, estructura, tono, propuestas de valor
- `references/product-info.md` β€” Solo si se necesita info especifica del producto

> **Nota:** Adaptar las rutas a la estructura de tu proyecto. Lo importante es tener un archivo con templates de referencia y otro con informacion del producto.

## Step 2: Determinar el tipo de email

| Tipo | Cuando aplica |
|------|--------------|
| **Upgrade de Oferta** | El usuario ya tenia oferta y el monto aumento |
| **Segmento Estandar** | Usuario activo sin programa de fidelidad, con producto pre-aprobado |
| **Segmento Premium** | Usuario del programa de fidelidad, con descuento exclusivo |
| **Custom** | Efemeride, campana estacional, o contexto especial |

> **Personaliza tus segmentos:** Estos son ejemplos. Reemplaza con los segmentos reales de tu negocio.

## Step 3: Redactar el contenido

### Estructura obligatoria (3 bloques):

1. **HERO** β€” La oferta va al frente. Headline corto, impactante, con monto visible.
2. **CUERPO** β€” Maximo 2-3 oraciones. Beneficio puntual o efemeride. Empatico con el usuario.
3. **CTA** β€” Call-to-action directo y claro.

### Tono de voz:

- Directo y motivador, sin jerga tecnica o financiera
- Urgencia suave, nunca agresiva
- Empatico con el negocio del usuario

> **Personaliza el tono:** El ejemplo usa tratamiento informal en espanol rioplatense ("vos", "tenes", "podes"). Ajusta el registro al mercado y audiencia de tu marca.

### Variables dinamicas:

Usar variables con doble llave donde corresponda. Ejemplos:

| Variable | Descripcion |
|----------|-------------|
| `{{BUSINESS_NAME}}` | Nombre del negocio o razon social |
| `{{AMOUNT}}` | Monto de la oferta actual |
| `{{PREVIOUS_AMOUNT}}` | Monto de la oferta anterior (para upgrades) |
| `{{MEMBERSHIP_LEVEL}}` | Nivel de membresia o fidelidad |
| `{{DISCOUNT_PERCENT}}` | Porcentaje de descuento exclusivo |

> **Personaliza las variables:** Adapta los nombres de variables al sistema de envio que uses (ej: Mailchimp, SendGrid, Klaviyo). Si usas atributos custom, la sintaxis puede variar segun la plataforma.

## Step 4: Entregar en formato estructurado

Entregar el contenido en este formato exacto:

```
---
TIPO: [Upgrade de Oferta / Estandar / Premium / Custom]
SEGMENTO: [descripcion del segmento]
VARIABLES: [lista de variables usadas]
---

## HERO
- Badge: {{PRODUCT_NAME}}
- Headline: [texto del headline]
- Subline: [texto del subline, si aplica]
- CTA: [texto del boton]

## CUERPO
- Saludo: {{BUSINESS_NAME}}
- Texto: [texto principal del email]
- CTA: [texto del boton]

## TAGLINE
[frase de marca o propuesta de valor]

## BENEFICIOS β€” Card Izquierda
[contenido de la card izquierda]
- CTA: [texto del boton]

## BENEFICIOS β€” Card Derecha
[lista de beneficios o contenido de la card derecha]

## CIERRE
- Headline: [frase motivacional]
- Subline: [frase secundaria, si aplica]
- CTA: [texto del boton]

## AYUDA
[texto de cierre con link a ayuda]
```

## Step 5: Presentar y esperar aprobacion

Mostrar el contenido estructurado al usuario y preguntar:

**"Te comparto el contenido. Si lo aprobas, genero el HTML con la estructura de produccion."**

- Si el usuario aprueba (dice "dale", "ok", "aprobado", "si", "generar html", "maquetalo", o similar): invocar `/email-to-html` pasandole el contenido estructurado completo como argumento.
- Si el usuario pide cambios: ajustar el contenido segun el feedback y volver a presentar.
- NO generar HTML sin aprobacion explicita del usuario.

## Output Format

Entregar:
1. **Contenido estructurado** en el formato de arriba
2. **Resumen**: tipo, segmento, variables, propuestas de valor destacadas
3. **Pregunta de aprobacion** para disparar la conversion a HTML

NO generar HTML directamente. NO guardar archivos. Solo devolver el texto en la conversacion y esperar aprobacion.

## If Something Goes Wrong

- Si el tipo de email no esta claro, preguntar antes de redactar.
- Si faltan datos criticos (monto, segmento), preguntar.
- Si el usuario pide algo que contradice las reglas del producto, advertir y sugerir alternativa.
---
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.

Documentacion de Referencia: HTML Email Structure


Esto NO es un skill β€” es un documento de referencia tecnica que los skills consumen como contexto.


Por que documentar la estructura en vez de pegar el HTML directamente?


Pegar un HTML de produccion como referencia tiene varios problemas:


  1. Ruido vs. senal. Un HTML de email tiene 800-1200 lineas entre tablas anidadas, condicionales MSO, media queries y VML. El 80% es boilerplate de compatibilidad. Lo que el skill necesita saber son los patrones: que va en cada row, que colores usar segun el segmento, donde van los assets.

  1. Consumo de contexto. Un HTML completo consume ~10-15k tokens de contexto. Un documento de referencia estructurado cubre la misma informacion en ~3k tokens. Cuando el skill necesita generar un email, carga esta referencia en vez de parsear HTMLs completos β€” mas rapido, mas barato, mas preciso.

  1. Patrones, no instancias. Un HTML es un email especifico. La referencia captura el patron que aplica a todos los emails: la estructura de 10 rows, las variaciones por segmento, los componentes reutilizables, la paleta de colores. El skill puede generar cualquier variante sin depender de un ejemplo particular.

  1. Evolucion controlada. Cuando cambia el diseno (nuevo color, nuevo row, nuevo componente), se actualiza UN documento de referencia. Si la referencia fueran HTMLs pegados, habria que actualizar cada ejemplo y rezar que el skill interprete los cambios.

Como se complementa con HTMLs reales


Los HTMLs de produccion originales se guardan en references/html-templates/ como referencia viva. Sirven para:

  • Validar que la referencia documentada sea correcta
  • Resolver ambiguedades ("como se ve exactamente este componente?")
  • Copiar snippets especificos cuando hace falta

Pero el skill lee la referencia estructurada, no los HTMLs directos.


Este es un ejemplo de muchos


Este documento cubre la estructura HTML de emails. El mismo enfoque aplica a cualquier tipo de contenido:

  • Estructura de landing pages
  • Patrones de banners y ads
  • Templates de notificaciones push

Cada tipo de contenido tendra su propia referencia estructurada siguiendo el mismo principio: documentar patrones, no pegar ejemplos.




Especificaciones Generales


| Propiedad | Valor |

|-----------|-------|

| Ancho del email | 650px |

| Fondo pagina | #f1f1f1 (gris claro) o #f3f2f5 |

| Fondo contenido | #ffffff |

| Font principal | 'Helvetica Neue', Helvetica, Arial, sans-serif |

| Layout | Tablas anidadas (compatibilidad email clients) |

| Responsive | mobile_hide / desktop_hide clases + media query max-width: 670px |

| Outlook | Condicionales MSO <!--[if mso]> + VML para botones |




Paleta de Colores


| Uso | Color | Hex |

|-----|-------|-----|

| Hero background / CTA principal | Primario | {{PRIMARY_COLOR}} |

| Botones CTA (variante) | CTA | {{CTA_COLOR}} |

| Card izquierda (Estandar/Upgrade) | Primario | {{PRIMARY_COLOR}} |

| Card derecha (Estandar/Upgrade) | Gris | #ebebeb |

| Card izquierda (Premium - usos) | Gris | #ebebeb |

| Card derecha (Premium - proceso) | Secundario | {{SECONDARY_COLOR}} |

| Texto principal | Oscuro | #100423 |

| Links | Azul | #004add |

| Fondo pagina | Gris claro | #f1f1f1 |

| Boton sobre fondo de color | CTA color sobre blanco | {{CTA_COLOR}} texto, #ffffff fondo |

| Boton sobre fondo blanco | Blanco sobre CTA color | #ffffff texto, {{CTA_COLOR}} fondo |


Personaliza tu paleta: Reemplaza los placeholders {{PRIMARY_COLOR}}, {{CTA_COLOR}} y {{SECONDARY_COLOR}} con los colores de tu marca.




Assets (URLs)


Configurar con las URLs reales de tu CDN o servidor de assets:


| Asset | Placeholder | Formato sugerido |

|-------|-------------|-----------------|

| Logo marca (principal) | {{ASSET_LOGO}} | PNG, ~163px ancho |

| Logo producto (blanco, sobre fondo color) | {{ASSET_PRODUCT_LOGO_WHITE}} | PNG con transparencia |

| Logo producto (color, sobre fondo blanco) | {{ASSET_PRODUCT_LOGO_COLOR}} | PNG con transparencia |

| Check icon (beneficios) | {{ASSET_CHECK_ICON}} | PNG, 32x32px |

| Footer decorativo | {{ASSET_FOOTER}} | PNG/JPG, 650px ancho |

| Header desktop (fondo blanco) | {{ASSET_HEADER_DESKTOP}} | JPG |

| Header mobile (fondo blanco) | {{ASSET_HEADER_MOBILE}} | JPG |

| Hero Estandar (desktop) | {{ASSET_HERO_STANDARD_DESKTOP}} | PNG |

| Hero Estandar (mobile) | {{ASSET_HERO_STANDARD_MOBILE}} | PNG |

| Hero Upgrade (desktop) | {{ASSET_HERO_UPGRADE_DESKTOP}} | PNG |

| Hero Upgrade (mobile) | {{ASSET_HERO_UPGRADE_MOBILE}} | PNG |

| Hero Premium (desktop/mobile) | {{ASSET_HERO_PREMIUM}} | PNG |




Estructura de Rows (10 rows estandar)


Row 1 β€” Logo Desktop (mobile_hide)

  • Fondo: #f3f2f5
  • Contenido: Logo marca centrado, max-width 163px
  • Padding: 20px top/bottom

Row 2 β€” Logo Mobile (desktop_hide)

  • Mismo logo, max-width 130px
  • Padding: 15px top/bottom, 60px lateral

Row 3 β€” Hero Mobile (desktop_hide)

  • 2 columnas 50/50 sobre fondo {{PRIMARY_COLOR}}
  • Col 1: Imagen hero
  • Col 2: Logo producto (blanco) + Headline (36px bold) + CTA boton blanco
  • border-radius: 20px en columnas

Row 4 β€” Hero Desktop (mobile_hide)

  • 2 columnas (58%/42% para Estandar, 50/50 para Premium/Upgrade)
  • Col 1: Logo producto + Headline (30-42px bold) + subline si aplica + CTA
  • Col 2: Imagen hero alineada a la derecha
  • Fondo: {{PRIMARY_COLOR}}

Row 5 β€” Cuerpo principal

  • Fondo blanco, padding: 40px 30px 20px
  • Saludo: {{BUSINESS_NAME}} en bold, 14px
  • Texto: 14px, line-height 1.4, centrado
  • CTA: Boton {{CTA_COLOR}} con texto blanco, border-radius 35px

Row 6 β€” Tagline

  • Fondo blanco, padding: 15px 60px 30px
  • Texto: 20px bold, centrado
  • Contenido varia por segmento:

- Estandar/Upgrade: Frase de propuesta de valor principal

- Premium: Frase con variables de monto y descuento


Row 7 β€” Bloque de 2 Cards

  • Fondo blanco, padding lateral: 40px
  • 2 columnas 50/50 con gap de 15px
  • border-radius: 20px en ambas cards
  • Estandar / Upgrade:

- Card izq ({{PRIMARY_COLOR}}): Logo producto blanco + texto corto + CTA blanco

- Card der (#ebebeb): Titulo + 3 beneficios con check icon (32px)

  • Premium:

- Card izq (#ebebeb): Logo producto color + texto + 4 items con checks

- Card der ({{SECONDARY_COLOR}}): Texto proceso + acreditacion + CTA blanco


Row 8 β€” Cierre + CTA final

  • Fondo blanco, padding: 40px 60px 20px
  • Headline: 20px bold centrado
  • Frase motivacional segun segmento
  • CTA: Boton {{CTA_COLOR}}

Row 9 β€” Ayuda

  • Fondo blanco, padding: 10px 60px 25px
  • Texto: 14px, centrado
  • Link a seccion de ayuda en azul #004add

Row 10 β€” Footer

  • Imagen footer decorativa (650px ancho)
  • Link a unsubscribe (requerido legalmente)



Componente: Boton CTA


Sobre fondo de color (hero, card primaria)

Background: #ffffff
Color texto: {{CTA_COLOR}}
Font: 14px bold Helvetica Neue
Padding: 5px 20px
Border-radius: 35px


Sobre fondo blanco (cuerpo, cierre)

Background: {{CTA_COLOR}}
Color texto: #ffffff
Font: 14px bold Helvetica Neue
Padding: 5px 20px
Border-radius: 35px


VML para Outlook

Todos los botones incluyen fallback VML con v:roundrect para Outlook.




Componente: Beneficio con Check


<table class="icons_block">
  <tr>
    <td style="padding: 5px 10px 5px 25px;">
      <img src="{{ASSET_CHECK_ICON}}" width="32" alt="check">
    </td>
    <td style="font-family: Helvetica Neue; font-size: 15px; font-weight: 700;">
      Titulo del beneficio
    </td>
  </tr>
</table>
<table class="paragraph_block">
  <tr>
    <td style="padding: 0 40px 5px 30px;">
      <div style="font-size: 14px; line-height: 1.4;">
        Descripcion del beneficio
      </div>
    </td>
  </tr>
</table>




Responsive (Media Query max-width: 670px)


  • Columnas se apilan (width: 100%, display: block)
  • Headlines crecen: 44-50px en mobile
  • Botones: 16px font, 32px line-height
  • Alineacion: centrada en la mayoria de bloques
  • Imagenes: max-width 100%
  • Padding se ajusta para mobile



Variables de la plataforma de envio


Configurar segun tu sistema de envio (ej: Mailchimp, SendGrid, Klaviyo, etc.):


| Tipo | Ejemplo | Descripcion |

|------|---------|-------------|

| Variables de contenido | {{AMOUNT}}, {{BUSINESS_NAME}} | Datos dinamicos del usuario/oferta |

| Variables de sistema | {{UNSUBSCRIBE_URL}}, {{HELP_LINK}} | URLs generadas por la plataforma |

| Links por mercado | {{CTA_LINK}} | URL destino adaptada al pais/mercado |


Crear un archivo references/email-variables.md con la lista completa de variables, su sintaxis en tu plataforma, y valores de ejemplo para testing.




Tipos de HTML segun segmento


| Segmento | Hero | Cards |

|----------|------|-------|

| Estandar | Imagen + headline | Primario + Gris |

| Upgrade de Oferta | Imagen + "Antes: $X" | Primario + Gris |

| Premium | Imagen + "X% OFF" | Gris (usos) + Secundario (proceso) |

| Custom / Multi | Imagen + headline custom | Sin cards o layout simple |


Los HTMLs de produccion de cada segmento se guardan en references/html-templates/ como referencia viva. El skill lee este documento estructurado y recurre a los HTMLs solo para resolver ambiguedades.


Got a problem to solve?

Propose your case. The most voted problems get solved first in Mate & Build.

Propose your problem β†’