Documentación de Margarita Email Designer. Instálala, pide un email y envíalo.

Margarita Email Designer es una skill gratuita y de código abierto para agentes de IA que convierte el enlace de una marca, una carpeta de fotos y tus colores en emails listos para Klaviyo. Pides en lenguaje normal. Lee la web, elige el email adecuado para el momento, escribe el texto con la voz de la marca, construye el HTML y lo revisa antes de que lo veas.

01Qué hace Margarita

Dale tres cosas a tu agente: la web de la marca, una carpeta con el logo y las fotos de producto, y los colores en hexadecimal. Margarita devuelve emails terminados que puedes importar en Klaviyo y enviar. Cada producto, precio, oferta y reseña sale de la web o de tu brief, palabra por palabra. Si falta un dato, la línea se quita; nunca se inventa.

Funciona en Claude (web y escritorio), Claude Code y Google Antigravity, y en cualquier agente que lea skills en formato SKILL.md. La construcción y los controles son scripts de Python que vienen dentro de la skill.

02Qué recibes

Para cada email, Margarita crea una carpeta con:

Para toda la tanda recibes además notes.md (el perfil de la marca, todo lo que tuvo que deducir, avisos de cumplimiento y una lista para importar), gallery.html (cada email en escritorio y en móvil) y, si lo pides, una maqueta y una ficha de montaje en Klaviyo para cada popup de suscripción.

03Instalar en Claude (web y escritorio)

Paso 1. En Settings → Capabilities, activa la ejecución de código (Code execution and file creation, o Create and edit files en el diseño más reciente). Los controles de Margarita son scripts, así que la necesitan.

Paso 2. Descarga el zip desde la página de Margarita Email Designer. Contiene la carpeta margarita/ con SKILL.md dentro, que es la estructura que Claude espera.

Paso 3. Abre Customize → Skills, haz clic en +, elige + Create skill, luego Upload a skill y selecciona el zip.

Paso 4. Comprueba que su interruptor esté activado, abre un chat nuevo y pide un email. No hace falta nombrar la skill.

04Instalar en Claude Code

Claude Code lee las skills desde una carpeta. Clona el repositorio en tu carpeta de skills, para todos los proyectos o para uno:

# para todos tus proyectos
git clone https://github.com/yenderfonseca/margarita \
  ~/.claude/skills/margarita

# o solo para un proyecto
git clone https://github.com/yenderfonseca/margarita \
  .claude/skills/margarita

Si descargaste el zip, descomprímelo en ~/.claude/skills/ para que el archivo quede en ~/.claude/skills/margarita/SKILL.md. Abre una sesión nueva. La skill se carga cuando tu petición encaja, o escribe /margarita.

05Instalar en Google Antigravity

Antigravity lee el mismo formato SKILL.md. Pon la carpeta en su carpeta global de skills, o en un solo espacio de trabajo:

# para todos tus espacios de trabajo
git clone https://github.com/yenderfonseca/margarita \
  ~/.gemini/config/skills/margarita

# o solo para un espacio de trabajo
git clone https://github.com/yenderfonseca/margarita \
  .agents/skills/margarita

Las instalaciones antiguas de Antigravity IDE también leen ~/.gemini/antigravity/skills/. El agente usa la skill a partir de su descripción, o puedes nombrarla en tu petición; en la App, escribe /margarita. En la CLI, ejecuta /skills reload después de instalar. En el IDE aparece en Customizations, en el panel lateral del agente.

Varios agentes en el mismo equipo

Clona una vez y enlaza la carpeta en cada agente, así todos usan la misma copia y un solo git pull los actualiza:

git clone https://github.com/yenderfonseca/margarita \
  ~/code/margarita
ln -s ~/code/margarita ~/.claude/skills/margarita
ln -s ~/code/margarita ~/.gemini/config/skills/margarita

06Cómo usarla

Pide como se lo pedirías a un diseñador. Algunos ejemplos:

Haz una serie de bienvenida para https://example-brand.com. Las fotos están en
~/Desktop/brand-photos, colores #1F1B16, #F5F1EA y #A34A28.

Email de lanzamiento de nuestra sudadera: https://example-brand.com/products/hoodie

Enséñame estilos de email para mi tienda de velas, https://example-candles.com

Campaña de Black Friday, 20% con el código FRIDAY20, termina el domingo a medianoche.

Solo se detiene a preguntar cuando no hay enlace, ni fotos, ni un brief que nombre la marca. En cualquier otro caso entrega y después te dice qué revisar.

07Cómo funciona

1. Lee la petición: enlace, fotos, paleta, brief y dónde guardar.
2. Recopila: lee la web y guarda cada página como evidencia, hace inventario de las fotos, asigna tus colores a funciones con un control de contraste 4.5:1 e imprime una línea de estado.
3. Decide: el nicho, la ocasión o el flujo, el estilo, cuántos emails y para quién.
4. Referencias (opcional): con un servidor de la biblioteca de Margarita conectado, trae dos o tres emails de referencia, solo como guía de maquetación.
5. Escribe: asuntos A y B, texto de vista previa, el texto de cada bloque, texto alternativo y una sola llamada a la acción, cada dato con su fuente.
6. Construye: todo va a un archivo de especificación, y la construcción genera los emails, copia las imágenes, crea el zip de importación y pasa el linter.
7. Revisa: capturas en tres anchos, sin imágenes y en modo oscuro, medidas para detectar desbordes, palabras huérfanas, imágenes rotas, tamaño del botón y texto ilegible. Después el agente las mira él mismo.
8. Popups: si los pides, maquetas y fichas de montaje en Klaviyo para formularios de suscripción.
9. Informa: una línea por email, lo que dedujo, avisos de cumplimiento y los supuestos que puedes cambiar.

08Los controles que bloquean un email

Un email que falla cualquiera de estos no se entrega. Los aplican la construcción y el linter, no dependen del gusto.

09Estilos, bloques, nichos y flujos

13 estilos. Editorial, lujo discreto, retail audaz, pop suave, artesanal natural, premium oscuro, tecnológico limpio, retro cálido, color lúdico, brutalista monocromo, nota sencilla, carta del fundador y solo texto. Un estilo define forma, tipografía y ritmo, nunca colores: esos siempre salen de tu paleta. Pide ver opciones y construye el primer email en dos o tres estilos para compararlos.

31 bloques, desde cabeceras, historias y rejillas de producto hasta reseñas, códigos de descuento, tablas comparativas, preguntas frecuentes, un bucle del checkout de Klaviyo para emails de carrito y tres pies de página.

56 nichos en 10 grupos (belleza, moda, alimentación, hogar, estilo de vida, aire libre, mascotas, servicios, tecnología y bienestar), cada uno con la apertura que funciona ahí, sus mejores estilos y sus notas de cumplimiento.

Ocasiones y flujos: fechas del calendario como Black Friday, guías de regalos, San Valentín o el Día de la Madre; momentos de producto como lanzamientos y reposiciones; y los flujos de bienvenida, checkout abandonado, navegación abandonada, poscompra y recuperación, con el momento de envío de cada email.

8 diseños de formularios de suscripción para el creador de formularios de Klaviyo: oferta de bienvenida, newsletter sin descuento, intención de salida, email y luego SMS, captura de cumpleaños, lista de espera, acceso anticipado en campañas y test de preferencias.

10Línea de comandos

Los scripts solo necesitan Python 3.9 o superior. Playwright es opcional y solo lo usa el control de render. Cada script muestra su uso con --help.

S=~/.claude/skills/margarita/scripts

# construye cada email de una especificación y pasa el linter a cada uno
python3 $S/build.py spec.json --out out/brand
# los mismos emails en otros estilos, para comparar
python3 $S/build.py spec.json --out out/brand --styles all
# lista estilos y bloques
python3 $S/build.py --list

# revisa un email, o el contraste de dos colores
python3 $S/preflight.py --html email.html --subject "Asunto A" --preheader "Vista previa"
python3 $S/preflight.py contrast "#1F1B16" "#F5F1EA"

# capturas y controles de maquetación
python3 $S/render.py out/brand/01-welcome/email.html
# una página con todos los emails, y maquetas de popups
python3 $S/gallery.py out/brand
python3 $S/popup.py spec.json --out out/brand

Para confirmar que la instalación funciona, ejecuta las dos pruebas desde la carpeta de la skill:

python3 scripts/build.py --self-test
python3 scripts/preflight.py --self-test

El README en GitHub (en inglés) documenta cada campo y cada opción.

11Importar en Klaviyo

1. Plantillas: crea una plantilla, elige Import y sube klaviyo-import.zip.
2. Organización: configura el nombre y la dirección de tu organización en Klaviyo. El pie de página usa ambos.
3. Cupones: crea cada cupón que mencionen los emails, por ejemplo {% coupon_code 'WELCOME10' %}.
4. Flujos: usa los tiempos y filtros que indica notes.md.
5. Formularios: sigue la ficha de montaje de cada popup en el editor de formularios de Klaviyo.
6. Prueba: envía cada email a una bandeja real, incluidos Gmail y Outlook, en modo claro y oscuro.

12Respuestas rápidas

¿Margarita Email Designer es gratis?

Sí. Es de código abierto con licencia MIT. Úsala para tu marca, para trabajos de clientes o dentro de tus propias herramientas.

¿Envía emails o se conecta a mi cuenta de Klaviyo?

No. Construye los archivos. Tú importas la plantilla en Klaviyo y la envías desde allí, así que nada llega a tu lista sin ti.

¿Se puede inventar un descuento, un precio o una reseña?

No. Cada dato sale de tu web o de tu brief y aparece con su fuente en email.md. Un bloque sin sus datos se quita.

¿Funciona con plataformas distintas de Klaviyo?

El HTML es estándar y seguro para cualquier cliente de correo, pero las etiquetas de personalización y legales usan la sintaxis de Klaviyo. Para otra plataforma, cambia esas etiquetas y pasa sus propios controles.

¿Qué agentes pueden usarla?

Claude en web y escritorio, Claude Code y Google Antigravity, además de cualquier agente que lea skills en formato SKILL.md.