La pestaña AI Designer conecta tu biblioteca de componentes de Emailify con herramientas de IA, mientras Emailify se encarga de validar el resultado y de crear la plantilla de Figma terminada. Elige Agent (Skill), Copy & Paste Prompt o LLM Provider API según cómo prefieras trabajar.

AI Designer está en beta y lo estamos mejorando activamente. Su interfaz, la Skill descargada, las instrucciones para el agente, los prompts, la validación y los pasos del flujo de trabajo pueden cambiar a medida que afinamos la experiencia con el feedback de los clientes.

Agent (Skill) es la opción predeterminada recomendada para el uso repetido y para bibliotecas de marca grandes. La Skill reúne tu catálogo de componentes, las referencias a los slots editables, el perfil de marca, la política de textos, el esquema de respuesta y el validador. Usa un índice compacto y solo abre los archivos detallados de los componentes cuando hace falta, así que no se incluye el catálogo completo en cada brief.

Agent (Skill) y Copy & Paste Prompt no envían tu brief ni tu biblioteca de componentes a un modelo de IA desde el plugin. LLM Provider API envía la solicitud generada al proveedor de IA que elijas, con tu propia clave de API.

Cómo funciona

1. Abre Emailify en Figma.
2. Haz clic en el icono + junto al selector de emails para abrir la ventana New Email.
3. Selecciona AI Designer.
4. Elige una de las tres pestañas de flujo de trabajo:
   • Agent (Skill): descarga una Skill reutilizable, cárgala en Codex o Claude Code y dale tu brief al agente.
   • Copy & Paste Prompt: añade tu brief, copia el prompt generado en cualquier LLM compatible y pega su respuesta JSON de vuelta en Emailify.
   • LLM Provider API: añade tu brief y genera el JSON directamente con ChatGPT, Claude o Gemini usando tu propia clave de API.
5. Revisa o importa el JSON generado en el último paso.
6. Cuando la respuesta sea válida, haz clic en Create Email, o en Create 2 Emails (y así sucesivamente) si la respuesta incluye varios emails.

Emailify valida la respuesta antes de insertarla, crea un frame de Emailify nuevo en Figma, inserta las instancias de los componentes seleccionados en el orden devuelto y aplica las sustituciones compatibles de texto, enlaces, imágenes, texto alternativo y capas ocultas. Los componentes de marca siguen siendo instancias vinculadas después de actualizar su contenido.

Elegir un flujo de trabajo

Agent (Skill)

Usa Agent (Skill) cuando generes emails a menudo a partir de la misma biblioteca de componentes de marca, tengas un catálogo grande o quieras que tu agente valide los archivos en local antes de devolverlos. Es el modo que menos tokens gasta en el trabajo repetido, porque el catálogo se instala una vez y se consulta de forma progresiva.

Copy & Paste Prompt

Usa Copy & Paste Prompt para un flujo de trabajo manual y rápido con ChatGPT, Claude, Gemini u otro LLM capaz:

1. Pega tu brief en Add Email Brief.
2. Haz clic en Copy Prompt.
3. Pega el prompt en tu LLM y pídele que devuelva solo el JSON solicitado.
4. Pega o importa la respuesta en Paste LLM Result.
5. Haz clic en Create Email cuando se supere la validación.

En los briefs con varios emails, Emailify centra el prompt copiado en un email cada vez. El botón muestra el número del email actual para que cada respuesta esté completa y no supere el límite de salida del modelo.

LLM Provider API

Usa LLM Provider API cuando quieras que Emailify se encargue de generar el prompt y el JSON sin copiar de una aplicación a otra:

1. Pega tu brief en Add Email Brief.
2. Selecciona ChatGPT, Claude o Gemini.
3. Añade la clave de API del proveedor si todavía no la has configurado en AI Designer.
4. Haz clic en Generate 1 Email Draft. El número coincide con los emails de tu brief, por ejemplo Generate 3 Email Drafts.
5. Revisa el JSON generado y haz clic en Create Email cuando se supere la validación.

El campo de la clave de API se muestra de forma predeterminada. Cuando guardas una clave, Emailify la muestra como un campo de contraseña enmascarado y de solo lectura. Haz clic en el botón del lápiz Edit para sustituirla. Las claves de API se guardan por usuario de Figma en tu dispositivo y no se escriben en el archivo de Figma. Los briefs con varios emails se generan con solicitudes separadas al proveedor y se combinan en un único resultado validado para reducir las respuestas truncadas.

Emailify valida cada resultado generado antes de activar Create Email. Si el proveedor devuelve un JSON válido con referencias incorrectas a componentes o slots editables, Emailify envía automáticamente al mismo proveedor una solicitud de reparación que tiene en cuenta el catálogo. La ventana New Email permanece desactivada mientras se generan y reparan automáticamente los resultados. Cuando el resultado reparado supera la validación, Create Email queda disponible sin que tengas que hacer nada más.

Si la reparación automática no consigue resolver la respuesta, Emailify conserva el JSON generado, muestra el problema de validación pendiente y muestra Repair para que puedas volver a intentarlo. Una reparación automática usa una solicitud adicional a la API del proveedor solo cuando el resultado inicial tiene un error de validación que impide continuar.

El uso de la API lo factura el proveedor que elijas. Emailify no añade cargos por el uso del modelo.

Flujo de trabajo Agent (Skill)

Paso 1: descargar la Skill

AI Designer usa automáticamente los componentes de Emailify del archivo de Figma actual como catálogo principal de la Skill. Esto incluye los componentes locales y las instancias de componentes del sistema de diseño que ya se usan en el archivo, así que no hay un paso aparte para elegir la fuente.

Si el archivo actual no contiene componentes de Emailify, AI Designer usa automáticamente los Default Emailify Presets. Cuando hay componentes de Figma de marca disponibles, los ajustes predefinidos de Emailify no se incluyen como alternativa, de modo que el email generado se mantiene en modo de marca estricto.

El paso 1 tiene, a propósito, una sola acción: Download Skill. Vuelve a descargarla cada vez que cambie la biblioteca de componentes actual o se desactive Copy Instructions, y sustituye la Skill instalada anterior por el paquete nuevo.

Para obtener el resultado más fiel a tu marca, ten en el mismo archivo de Figma las cabeceras, los pies, las filas hero, las filas de CTA, los avisos legales, las filas de producto y los bloques de contenido reutilizables antes de descargar la Skill.

Proteger el contenido fijo y legal

Para evitar que un agente cambie textos fijos, bloquea la capa o su grupo padre en Figma. También puedes poner 🔒 delante del nombre de la capa o del grupo, por ejemplo 🔒 Legal.

AI Designer exporta estas capas como slots protegidos. La Skill descargada le indica al agente que no las sustituya ni las oculte, su validador rechaza cualquier intento de cambio y Emailify deja intacto el contenido original del componente durante la importación. Úsalo para textos legales aprobados, avisos legales, datos del pie, textos de cumplimiento normativo u otro contenido que no deba cambiar.

Crear directamente con Figma MCP

Cuando hay herramientas de escritura de Figma disponibles, la Skill descargada puede montar o actualizar un email directamente en Figma, manteniendo sus componentes de Emailify vinculados a sus componentes principales originales. El agente debe seguir exactamente las convenciones de Emailify para el frame, las instancias y los metadatos de asunto y preheader antes de que el plugin pueda adoptar el resultado.

Consulta Usar Emailify con Figma MCP para ver la instrucción canónica para el agente, el contrato de nombres, las protecciones de edición y los pasos de solución de problemas. El flujo de importación de JSON validado sigue disponible cuando no se puede escribir directamente en Figma.

Paso 2: generar con tu agente

La Skill de Emailify que descargas en el paso 1 es un ZIP versionado que contiene una carpeta emailify-ai-designer lista para instalar. Su nombre de archivo único incluye la versión de la Skill, la hora de exportación en UTC con milisegundos, la huella del catálogo y la huella de la configuración, por ejemplo emailify-ai-designer-v11-20260722T130512123Z-a1-5bixn7-k11-abc123.zip.

• SKILL.md, con el flujo de trabajo reutilizable del agente y las reglas de salida.
• INSTALL.md, con las rutas de configuración de Codex y Claude Code y la instrucción combinada para el agente.
• manifest.json, con el nombre exacto del paquete, la versión de la Skill, la hora de exportación, la huella del catálogo, la huella de la configuración, la fuente, el estado de la alternativa y el perfil activo.
• profile.json, con la política de textos, los roles obligatorios, los enlaces aprobados y las instrucciones del equipo.
• catalog-index.json, un índice compacto de componentes para buscarlos.
• previews/*.jpg, una referencia visual a 1x de cada componente exportado correctamente.
• components/*.json, archivos agrupados por rol con las referencias exactas a los componentes y a los slots, incluidos los slots protegidos.
• plan-schema.json y scripts/validate-plan.js, para validar el plan de componentes antes de asignar los textos.
• response-schema.json, para la generación restringida por el esquema.
• scripts/search-components.js y scripts/inspect-component.js, para buscar en el catálogo gastando pocos tokens, sin cargar toda la biblioteca en el contexto.
• scripts/create-response-skeleton.js, para crear el envoltorio JSON exacto y las listas de sustituciones a partir de un plan validado.
• scripts/validate-response.js, un validador local que el agente ejecuta antes de devolver un archivo.
• scripts/self-test.js e integrity.json, para comprobar los archivos del paquete, las referencias del catálogo, las vistas previas y los hashes SHA-256.
• data-inventory.json, que indica qué contiene el paquete y confirma que no incluye briefs, textos de email generados, claves de API ni tokens de acceso a Figma.
• agents/openai.yaml, con los metadatos actuales de la Skill para Codex.
• integration-contract.json, un pequeño mapa de operaciones que incluye el contrato del frame para MCP directo a Figma y la URL de su documentación canónica.

La Skill usa una carga progresiva determinista. El agente busca en el índice compacto con el script incluido, consulta solo los componentes preseleccionados y sus imágenes previewFile, valida un plan de componentes compacto, crea el esqueleto de la respuesta, rellena las referencias exactas de los slots y valida la respuesta terminada. No hace falta que el catálogo completo entre en el contexto del modelo.

Instalar la Skill

Después de descargar el paquete actual, haz clic en Copy Instructions. El botón cambia a Instructions Copied y Emailify confirma la siguiente acción. Pega la instrucción copiada en una tarea nueva de Codex o Claude Code. La instrucción indica el ZIP exacto que se descargó, instala o sustituye la Skill del proyecto y comprueba su nombre de archivo, versión, hora de exportación, huella del catálogo y huella de la configuración. Si algún valor no coincide, el agente se detiene y te pide que la vuelvas a descargar. Cuando el agente confirme que emailify-ai-designer está lista, envía tu brief de email en el siguiente mensaje:

Find the exact Emailify Skill ZIP named [filename copied by Emailify] in my Downloads folder; if it is not there, ask me where I saved it. Replace any existing project skill named emailify-email-assembler or emailify-ai-designer with the skill from that ZIP. Read its manifest.json and verify the exact package filename, Skill version, export time, catalog fingerprint, and configuration fingerprint supplied in this instruction. If any value does not match exactly, stop and ask me to download the current Skill again. Run the installed skill's scripts/self-test.js and stop if it reports an integrity or catalog error. Confirm the installed project-skill path and complete package identity, and that emailify-ai-designer is ready. Then use the emailify-ai-designer skill to turn my attached or pasted email brief into one validated .emailify-ai.json file per email. Preserve supplied copy, use only components from the installed catalog, and write the files locally instead of pasting JSON into chat. If this message does not include an email brief, ask me to attach or paste it before generating anything.

La instrucción combinada permite que el agente actual elija la ubicación de Skills de proyecto que admite y continúe directamente con el brief. El ámbito de proyecto mantiene el catálogo de marca y el perfil del archivo de Figma vinculados al espacio de trabajo correspondiente, en lugar de sustituir una Skill global.

La versión 11 de la Skill añade la lectura del asunto y del preheader al flujo de trabajo protegido de MCP directo a Figma, y mantiene las comprobaciones de instancias vinculadas, la protección de los slots protegidos y la comprobación exacta de la identidad del paquete. Los paquetes descargados durante una beta anterior de AI Designer se marcan a propósito como obsoletos tras esta actualización, así que descarga e instala una vez la Skill actual antes de generar emails nuevos.

Para instalarla a mano, descomprime el ZIP y mueve la carpeta emailify-ai-designer incluida a una de estas ubicaciones:

• Skill personal de Codex: ~/.agents/skills/emailify-ai-designer/
• Skill de proyecto de Codex: .agents/skills/emailify-ai-designer/
• Skill personal de Claude Code: ~/.claude/skills/emailify-ai-designer/
• Skill de proyecto de Claude Code: .claude/skills/emailify-ai-designer/

La propia carpeta debe contener SKILL.md, manifest.json, catalog-index.json, previews/, components/ y los demás recursos descargados. Si la Skill no aparece enseguida después de instalarla, empieza una tarea nueva del agente.

Darle tu brief al agente

Incluye, cuando los tengas, el objetivo de la campaña, la audiencia, la fase del ciclo de vida, el calendario, el asunto, el preheader, los textos aprobados, el texto del CTA, los enlaces, las URL de las imágenes, el texto alternativo, las pautas de marca, los requisitos legales, los requisitos del ESP, las etiquetas de combinación y el orden de módulos que prefieras.

La Skill escribe un archivo .emailify-ai.json validado en tu directorio de trabajo. En las campañas grandes, prefiere un archivo completo por email en lugar de generar JSON parcial o truncado en el chat.

Si quieres, puedes hacer más explícita la correspondencia con los componentes añadiendo a la descripción de un componente de Figma líneas como AI role: hero, AI intent: product launch, AI usage: use when an image and CTA are required o AI notes: preserve the secondary legal line. Estas pistas son opcionales: AI Designer también deduce los roles y la capacidad de los componentes a partir de los nombres, las descripciones, las capas editables y los metadatos de Emailify.

Paso 3: importar el resultado del agente

Pega el JSON sin procesar, suelta uno o varios archivos .emailify-ai.json generados en el campo de respuesta o haz clic en Choose File. Emailify valida automáticamente el resultado completo.

Cuando todo el resultado es válido, Create Email queda disponible. Si la respuesta es válida e incluye varios emails, el botón muestra el número de emails que se crearán. Si alguna parte no es válida, la creación sigue desactivada y Copy Fix Prompt copia una solicitud de reparación compacta que puedes pegar en la misma tarea del agente. La solicitud de reparación usa la Skill que tu agente ya tiene cargada, en lugar de repetir el catálogo de componentes.

También puedes ejecutar a mano el validador incluido desde la carpeta de la Skill instalada:

node scripts/validate-response.js /path/to/email.emailify-ai.json

Emailify te avisa cuando la última Skill descargada ya no coincide con el catálogo de componentes, la fuente, el perfil, la política de textos, el ajuste de alternativa o la versión del paquete de la Skill actuales. Descarga y sustituye la Skill instalada cada vez que cambie alguno de estos datos. El resultado de AI Designer en curso sigue disponible si cambias a otra pestaña de la misma ventana New Email.

La vigencia del catálogo tiene en cuenta los nombres, roles, categorías y descripciones de los componentes, las notas para la IA, las capacidades, los metadatos de los slots editables y protegidos, y una firma visual ligera. Descarga y vuelve a instalar la Skill cada vez que Emailify la marque como desactualizada. Las imágenes de vista previa que no han cambiado se reutilizan durante la sesión actual del plugin para que las descargas repetidas del paquete sean más rápidas.

Las respuestas de la Skill de Emailify dependen del catálogo y no del brief, así que no necesitan un requestFingerprint. Deben declarar workflowMode: "external", la contentPolicy activa, una lista unresolved para cada email y source: "provided" o source: "generated" para cada sustitución de texto.

Ejemplo de brief

# Product Launch Email - Brief + Draft Copy

Audience: Trial users who created an account but have not exported an email.
Goal: Announce the new AI Designer beta and drive users to create a test template.
Tone: Practical, confident, helpful.

Subject: Build branded emails faster with AI Designer
Preheader: Turn approved Emailify components into ready-to-review templates.

Module order:
- Header: use the standard logo header.
- Hero: introduce AI Designer and the main value proposition.
- Content: explain that the workflow uses approved Emailify components first.
- CTA: button linking to https://www.hypermatic.com/emailify/
- Footer: keep the standard footer unchanged.

Hero copy:
Create on-brand emails from your approved components.

Body copy:
Brief your campaign in Codex or Claude Code, let the Emailify Skill create a validated JSON response, and import it into Figma using your reusable branded components.

CTA:
Try AI Designer

Compliance:
Do not invent claims, discounts, testimonials, or legal copy.

Validación y formatos de la respuesta

El campo JSON Response acepta JSON sin procesar pegado desde una herramienta de IA, archivos soltados o uno o varios archivos .json o .emailify-ai.json importados.

AI Designer acepta:

• Un borrador de email como un único objeto JSON.
• Varios borradores de email en una lista emails.
• Varios borradores de email en una lista templates.

Las respuestas de la Skill de Emailify se comparan con la huella del catálogo descargado, así que Emailify puede bloquear un JSON obsoleto si la biblioteca de componentes cambió después de descargar la Skill.

Antes de activar Create Email, Emailify comprueba internamente las referencias a componentes, los slots editables, las URL, los enlaces aprobados, el texto alternativo de las imágenes, el contenido de ejemplo, los roles obligatorios, la posición de la cabecera y el pie, la política de textos y el uso de alternativas.

Si el JSON no es válido, haz clic en Copy Fix Prompt y pégalo en la misma tarea de Codex o Claude Code que generó el resultado. Sustituye el contenido del campo de respuesta por el JSON corregido del agente.

Ejemplo de respuesta JSON

{
  "schemaVersion": 1,
  "workflowMode": "external",
  "contentPolicy": "preserve",
  "catalogFingerprint": "a1-example",
  "emails": [
    {
      "name": "AI Designer Launch",
      "subject": "Build branded emails faster with AI Designer",
      "preheader": "Turn approved Emailify components into ready-to-review templates.",
      "timing": "",
      "job": "Introduce the feature and drive a test template",
      "unresolved": [],
      "components": [
        {
          "role": "hero",
          "componentRef": "c-example",
          "overrides": {
            "text": [
              {
                "slotRef": "t-example-title",
                "value": "Create on-brand emails from your approved components",
                "source": "provided"
              },
              {
                "slotRef": "t-example-body",
                "value": "Brief your campaign in Codex or Claude Code, let the Emailify Skill create a validated JSON response, and import it into Figma using your reusable branded components.",
                "source": "provided"
              },
              {
                "slotRef": "t-example-button",
                "value": "Try AI Designer",
                "source": "provided"
              }
            ],
            "links": [
              {
                "slotRef": "l-example-button",
                "value": "https://www.hypermatic.com/emailify/"
              }
            ],
            "images": [],
            "hidden": []
          }
        }
      ]
    }
  ]
}

Las referencias a componentes y slots anteriores son solo ilustrativas. Usa siempre las referencias exportadas en la Skill de Emailify actual.

Campos JSON

La respuesta de nivel superior incluye:

• schemaVersion: la versión del contrato de respuesta de AI Designer.
• workflowMode: external para las respuestas de la Skill de Emailify.
• contentPolicy: la política del perfil activo: preserve, light-edit o draft-missing.
• catalogFingerprint: identifica la biblioteca de componentes detectada que se exportó en la Skill.
• emails: uno o varios borradores de email completos. Los prompts centrados en un email de una campaña con varios contienen un solo email.

Cada borrador de email incluye:

• name: el nombre del frame de Figma del email generado.
• subject: el asunto del email.
• preheader: el texto del preheader del email.
• timing: el calendario de envío opcional del brief, o una cadena vacía.
• job: el objetivo opcional del brief, o una cadena vacía.
• unresolved: los textos, enlaces, imágenes, afirmaciones o contenido legal que faltan y que hay que resolver antes de la inserción.
• components: la lista ordenada de componentes de Emailify que se van a insertar.

Cada componente incluye:

• role: un rol de diseño sencillo, como header, hero, content, cta, disclaimer o footer.
• componentRef: la referencia compacta al componente copiada en el prompt. Emailify la resuelve en local al componente de Figma exacto o al preset integrado.
• overrides.text: una lista de sustituciones de texto {slotRef, value, source}, donde source es provided o generated.
• overrides.links: una lista de sustituciones de enlaces {slotRef, value} con URL http o https sin formato.
• overrides.images: una lista de sustituciones de imágenes {slotRef, url, alt, href}.
• overrides.hidden: las referencias de los slots que hay que ocultar cuando un componente tiene contenido opcional o de ejemplo que no se usa.

Las respuestas antiguas que usan componentId, componentName, presetKey exactos y objetos de sustitución con nombre siguen siendo compatibles.

Buenas prácticas

• Usa los nombres exactos de los componentes de tu biblioteca de Emailify cuando quieras módulos de marca concretos.
• Pon los componentes de cabecera al principio y los de pie al final, salvo que tu brief diga otra cosa.
• Usa un componente hero o destacado cerca del principio cuando la campaña necesite un mensaje de apertura potente.
• Usa un solo CTA claro por email, salvo que el brief pida expresamente varios.
• Usa URL absolutas sin formato, no enlaces con formato Markdown.
• Incluye un texto alternativo útil para cada URL de imagen.
• Conserva exactamente, donde sea necesario, los textos legales, de cumplimiento normativo, de descuentos, de fechas, de etiquetas de combinación y de avisos legales.
• En las campañas con varios emails, usa un encabezado claro para cada email. La Skill escribe un archivo de respuesta completo por email.
• Revisa la plantilla de Figma generada antes de exportarla a tu ESP.

Solución de problemas

• Si Emailify dice The JSON could not be parsed, quita los delimitadores de código Markdown, los comentarios, las comas finales o cualquier texto antes o después del JSON.
• Si un componente no coincide, descarga y vuelve a instalar la Skill actual y asegúrate de que el agente use solo los valores componentRef y slotRef exportados.
• Si sigue viéndose contenido de ejemplo, añade el nombre de la capa o del slot que no se usa a overrides.hidden, o elige un componente más sencillo.
• Si el resultado parece genérico, asegúrate de que tus componentes de Emailify de marca estén en el archivo actual antes de descargar la Skill. La alternativa de ajustes predefinidos se desactiva automáticamente cuando hay componentes de marca disponibles.
• Si Emailify dice que la biblioteca de componentes ha cambiado, descarga y vuelve a instalar la Skill actual y vuelve a generar el JSON con su huella nueva.
• Si el agente no encuentra el ZIP exacto que indica la instrucción copiada, dile dónde guardaste ese archivo en lugar de pedirle que elija otra descarga distinta o más antigua.
• Si un flujo de trabajo de IA reutilizable gasta demasiados tokens, comprueba que ejecute scripts/search-components.js y scripts/inspect-component.js en lugar de cargar catalog-index.json o todos los archivos de roles en el contexto.
• Si un paquete descargado parece incompleto o modificado, ejecuta node scripts/self-test.js desde la carpeta de la Skill instalada y descarga una Skill nueva si falla alguna comprobación de integridad.
• Si la comprobación previa detecta textos generados con la política preserve, cambia la fuente del texto, aporta el texto que falta o usa un perfil que permita redactar borradores.
• En una campaña grande con varios emails, pide al agente que escriba un archivo .emailify-ai.json completo por email y usa en el brief encabezados como Email 1 - Welcome, Email 2 - Follow-up y Email 3 - Offer.