A aba AI Designer conecta a sua biblioteca de componentes do Emailify a ferramentas de IA, enquanto o Emailify continua responsável por validar o resultado e criar o template final no Figma. Escolha Agent (Skill), Copy & Paste Prompt ou LLM Provider API, conforme o jeito que você prefere trabalhar.

O AI Designer está em beta e vem sendo aprimorado constantemente. A interface, a Skill baixada, as instruções do agente, os prompts, a validação e as etapas do fluxo podem mudar à medida que refinamos a experiência com base no feedback dos clientes.

Agent (Skill) é a opção padrão recomendada para uso recorrente e grandes bibliotecas da marca. A Skill reúne o catálogo de componentes, as referências dos slots editáveis, o perfil da marca, a política de textos, o schema de resposta e o validador. Ela usa um índice compacto e só abre os arquivos detalhados dos componentes quando necessário, então o catálogo completo não vai junto com cada briefing.

Agent (Skill) e Copy & Paste Prompt não enviam o seu briefing nem a sua biblioteca de componentes a um modelo de IA de dentro do plugin. O LLM Provider API envia a solicitação gerada ao provedor de IA que você escolher, usando a sua própria chave de API.

Como funciona

1. Abra o Emailify no Figma.
2. Clique no ícone + ao lado do seletor de e-mails para abrir a janela New Email.
3. Selecione AI Designer.
4. Escolha uma das três abas de fluxo:
   • Agent (Skill): baixe uma Skill reutilizável, carregue-a no Codex ou no Claude Code e depois passe o briefing ao agente.
   • Copy & Paste Prompt: adicione o briefing, copie o prompt gerado em qualquer LLM compatível e cole a resposta em JSON de volta no Emailify.
   • LLM Provider API: adicione o briefing e gere o JSON diretamente pelo ChatGPT, Claude ou Gemini usando a sua própria chave de API.
5. Revise ou importe o JSON gerado na etapa final.
6. Quando a resposta for válida, clique em Create Email, ou em Create 2 Emails (e assim por diante) para uma resposta com vários e-mails.

O Emailify valida a resposta antes de inseri-la, cria um novo frame do Emailify no Figma, insere as instâncias de componentes selecionadas na ordem retornada e aplica as substituições compatíveis de texto, link, imagem, texto alternativo e camadas ocultas. Os componentes da marca continuam como instâncias vinculadas depois que o conteúdo é atualizado.

Escolha um fluxo

Agent (Skill)

Use Agent (Skill) quando você gera e-mails com frequência a partir da mesma biblioteca de componentes da marca, tem um catálogo grande ou quer que o agente valide os arquivos localmente antes de devolvê-los. É o modo que mais economiza tokens no trabalho recorrente, porque o catálogo é instalado uma vez e consultado aos poucos.

Copy & Paste Prompt

Use Copy & Paste Prompt para um fluxo manual rápido com ChatGPT, Claude, Gemini ou outro LLM capaz:

1. Cole o briefing em Add Email Brief.
2. Clique em Copy Prompt.
3. Cole o prompt no seu LLM e peça que ele devolva apenas o JSON solicitado.
4. Cole ou importe a resposta em Paste LLM Result.
5. Clique em Create Email quando a validação passar.

Em briefings com vários e-mails, o Emailify foca o prompt copiado em um e-mail por vez. O botão mostra o número do e-mail atual, para que cada resposta fique completa e dentro do limite de saída do modelo.

LLM Provider API

Use LLM Provider API quando quiser que o Emailify cuide da geração do prompt e do JSON sem copiar de um app para outro:

1. Cole o briefing em Add Email Brief.
2. Selecione ChatGPT, Claude ou Gemini.
3. Adicione a chave de API do provedor, se ela ainda não estiver configurada no AI Designer.
4. Clique em Generate 1 Email Draft. O número corresponde aos e-mails do briefing, por exemplo, Generate 3 Email Drafts.
5. Revise o JSON gerado e clique em Create Email quando a validação passar.

O campo da chave de API aparece por padrão. Depois que você salva uma chave, o Emailify a exibe como um campo de senha mascarado e somente leitura. Clique no botão de lápis Edit para substituí-la. As chaves de API ficam salvas por usuário do Figma no seu dispositivo e não são gravadas no arquivo do Figma. Briefings com vários e-mails são gerados em solicitações separadas ao provedor e combinados em um único resultado validado, para reduzir respostas cortadas.

O Emailify valida cada resultado gerado antes de ativar Create Email. Se o provedor devolver um JSON válido com referências incorretas de componentes ou slots editáveis, o Emailify envia automaticamente ao mesmo provedor uma solicitação de correção que leva o catálogo em conta. A janela New Email fica desativada enquanto a geração e a correção automática estão em andamento. Quando o resultado corrigido passa na validação, Create Email fica disponível sem nenhuma ação extra.

Se a correção automática não resolver a resposta, o Emailify mantém o JSON gerado, mostra o problema de validação restante e exibe Repair para você tentar de novo. A correção automática só usa uma solicitação adicional à API do provedor quando o resultado inicial tem um erro de validação bloqueante.

O uso da API é cobrado pelo provedor escolhido. O Emailify não adiciona cobranças pelo uso do modelo.

Fluxo Agent (Skill)

Etapa 1: baixar a Skill

O AI Designer usa automaticamente os componentes do Emailify encontrados no arquivo atual do Figma como catálogo principal da Skill. Isso inclui componentes locais e instâncias de componentes do design system já usadas no arquivo, então não há uma etapa separada para escolher a origem.

Se o arquivo atual não tiver nenhum componente do Emailify, o AI Designer usa automaticamente as Default Emailify Presets. Quando há componentes da marca no Figma, as predefinições do Emailify não são incluídas como alternativa, e o e-mail gerado fica no modo estrito da marca.

A Etapa 1 tem, de propósito, uma única ação: Download Skill. Baixe de novo sempre que a biblioteca de componentes atual mudar ou Copy Instructions ficar desativado, e substitua a Skill instalada antiga pelo pacote novo.

Para um resultado mais fiel à marca, mantenha cabeçalhos, rodapés, rows de hero, rows de CTA, avisos legais, rows de produtos e blocos de conteúdo reutilizáveis no mesmo arquivo do Figma antes de baixar a Skill.

Proteger conteúdo fixo e jurídico

Para impedir que um agente altere textos fixos, bloqueie a camada ou o grupo pai dela no Figma. Você também pode começar o nome da camada ou do grupo com 🔒, como em 🔒 Legal.

O AI Designer exporta essas camadas como slots protegidos. A Skill baixada instrui o agente a não substituir nem ocultar essas camadas, o validador dela rejeita qualquer tentativa de alteração e o Emailify mantém o conteúdo original do componente intacto na importação. Use isso para textos jurídicos aprovados, avisos legais, detalhes do rodapé, textos de compliance ou qualquer outro conteúdo que precise continuar fixo.

Criar diretamente com o Figma MCP

Quando as ferramentas de escrita do Figma estão disponíveis, a Skill baixada pode montar ou atualizar um e-mail diretamente no Figma, mantendo os componentes do Emailify vinculados aos componentes principais originais. O agente precisa seguir exatamente as convenções do Emailify para frames, instâncias e metadados de assunto/preheader antes que o plugin possa adotar o resultado.

Veja Usar o Emailify com o Figma MCP para conferir a instrução oficial para o agente, o contrato de nomenclatura, as proteções de edição e as etapas de solução de problemas. O fluxo de importação de JSON validado continua disponível quando não é possível escrever diretamente no Figma.

Etapa 2: gerar com o seu agente

A Skill do Emailify baixada na Etapa 1 é um ZIP versionado com uma pasta emailify-ai-designer pronta para instalar. O nome único do arquivo inclui a versão da Skill, o horário da exportação em UTC com milissegundos, a impressão digital do catálogo e a impressão digital da configuração, por exemplo, emailify-ai-designer-v11-20260722T130512123Z-a1-5bixn7-k11-abc123.zip.

• SKILL.md, com o fluxo reutilizável do agente e as regras de saída.
• INSTALL.md, com os caminhos de configuração do Codex e do Claude Code e a instrução combinada para o agente.
• manifest.json, com o nome exato do pacote, a versão da Skill, o horário da exportação, a impressão digital do catálogo, a impressão digital da configuração, a origem, o estado da alternativa e o perfil ativo.
• profile.json, com a política de textos, as funções obrigatórias, os links aprovados e as instruções da equipe.
• catalog-index.json, um índice compacto de componentes para a busca.
• previews/*.jpg, uma referência visual 1x de cada componente exportado com sucesso.
• components/*.json, arquivos agrupados por função com as referências exatas de componentes e slots, inclusive os slots protegidos.
• plan-schema.json e scripts/validate-plan.js, para validar o plano de componentes antes de mapear qualquer texto.
• response-schema.json, para a geração restrita pelo schema.
• scripts/search-components.js e scripts/inspect-component.js, para consultar o catálogo economizando tokens, sem carregar a biblioteca inteira no contexto.
• scripts/create-response-skeleton.js, para criar o envelope JSON exato e os arrays de substituições a partir de um plano validado.
• scripts/validate-response.js, um validador local que o agente executa antes de devolver um arquivo.
• scripts/self-test.js e integrity.json, para verificar os arquivos do pacote, as referências do catálogo, as pré-visualizações e os hashes SHA-256.
• data-inventory.json, que informa o conteúdo do pacote e confirma que ele não inclui briefings, textos de e-mail gerados, chaves de API nem tokens de acesso do Figma.
• agents/openai.yaml, com os metadados atuais da skill do Codex.
• integration-contract.json, um pequeno mapa de operações que inclui o contrato de frames do MCP direto no Figma e a URL da documentação oficial.

A Skill usa carregamento progressivo determinístico. O agente busca no índice compacto com o script incluído, inspeciona apenas os componentes pré-selecionados e as imagens previewFile deles, valida um plano compacto de componentes, cria um esqueleto de resposta, preenche as referências exatas dos slots e valida a resposta final. O catálogo completo não precisa entrar no contexto do modelo.

Instalar a Skill

Depois de baixar o pacote atual, clique em Copy Instructions. O botão muda para Instructions Copied e o Emailify confirma a próxima ação. Cole a instrução copiada em uma nova tarefa do Codex ou do Claude Code. A instrução indica o ZIP exato que foi baixado, instala ou substitui a Skill do projeto e verifica o nome do arquivo, a versão, o horário da exportação, a impressão digital do catálogo e a impressão digital da configuração. O agente para e pede um novo download se algum valor não corresponder. Quando o agente confirmar que emailify-ai-designer está pronta, envie o briefing do e-mail na mensagem seguinte:

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.

A instrução combinada permite que o agente atual escolha o local de skill de projeto compatível e siga direto para o briefing. O escopo de projeto mantém o catálogo e o perfil da marca do arquivo do Figma ligados ao workspace correspondente, em vez de substituir uma skill global.

A versão 11 da Skill adiciona a leitura da linha de assunto e do preheader ao fluxo protegido de MCP direto no Figma, mantendo as verificações de instâncias vinculadas, a proteção dos slots protegidos e as verificações da identidade exata do pacote. Os pacotes baixados durante uma fase beta anterior do AI Designer são marcados como desatualizados de propósito depois desta atualização, então baixe e instale a Skill atual uma vez antes de gerar novos e-mails.

Para instalar manualmente, extraia o ZIP e mova a pasta emailify-ai-designer incluída para um destes locais:

• Skill pessoal do Codex: ~/.agents/skills/emailify-ai-designer/
• Skill de projeto do Codex: .agents/skills/emailify-ai-designer/
• Skill pessoal do Claude Code: ~/.claude/skills/emailify-ai-designer/
• Skill de projeto do Claude Code: .claude/skills/emailify-ai-designer/

A pasta em si precisa conter SKILL.md, manifest.json, catalog-index.json, previews/, components/ e os outros recursos baixados. Se a skill não aparecer imediatamente, inicie uma nova tarefa do agente depois de instalá-la.

Passar o briefing ao agente

Inclua, quando tiver, o objetivo da campanha, o público, a etapa do ciclo de vida, o timing, a linha de assunto, o preheader, os textos aprovados, o texto do CTA, os links, as URLs das imagens, o texto alternativo, as diretrizes da marca, os requisitos jurídicos, os requisitos do ESP, as merge tags e a ordem preferida dos módulos.

A Skill grava um arquivo .emailify-ai.json validado no seu diretório de trabalho. Em campanhas grandes, ela prefere um arquivo completo por e-mail em vez de gerar um JSON parcial ou cortado no chat.

Se quiser, você pode deixar a correspondência de componentes mais explícita adicionando à descrição de um componente do Figma linhas como AI role: hero, AI intent: product launch, AI usage: use when an image and CTA are required ou AI notes: preserve the secondary legal line. Essas dicas são opcionais: o AI Designer também deduz as funções e a capacidade dos componentes a partir dos nomes, das descrições, das camadas editáveis e dos metadados do Emailify.

Etapa 3: importar o resultado do agente

Cole o JSON bruto, solte um ou mais arquivos .emailify-ai.json gerados no campo de resposta ou clique em Choose File. O Emailify valida o resultado completo automaticamente.

Quando o resultado inteiro for válido, Create Email fica disponível. Em uma resposta válida com vários e-mails, o botão mostra quantos e-mails serão criados. Se alguma parte for inválida, a criação continua desativada e Copy Fix Prompt copia uma solicitação de correção compacta, que você pode colar de volta na mesma tarefa do agente. A solicitação de correção usa a Skill já carregada pelo agente, em vez de repetir o catálogo de componentes.

Você também pode executar manualmente o validador incluído de dentro da pasta da skill instalada:

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

O Emailify avisa quando a última skill baixada não corresponde mais ao catálogo de componentes atual, à origem, ao perfil, à política de textos, à configuração de alternativa ou à versão do pacote da skill. Baixe e substitua a skill instalada sempre que qualquer um desses itens mudar. O resultado em andamento do AI Designer continua disponível se você mudar para outra aba na mesma janela New Email.

A atualização do catálogo leva em conta os nomes, as funções, as categorias, as descrições, as notas de IA e as capacidades dos componentes, os metadados de slots editáveis e protegidos e uma assinatura visual leve. Baixe e reinstale a skill sempre que o Emailify marcá-la como desatualizada. As imagens de pré-visualização que não mudaram são reaproveitadas durante a sessão atual do plugin, para agilizar os downloads repetidos do pacote.

As respostas da Skill do Emailify são vinculadas ao catálogo, e não ao briefing, então não exigem um requestFingerprint. Elas precisam declarar workflowMode: "external", a contentPolicy ativa, um array unresolved para cada e-mail e source: "provided" ou source: "generated" em cada substituição de texto.

Exemplo de briefing

# 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.

Validação e formatos da resposta

O campo JSON Response aceita JSON bruto colado de uma ferramenta de IA, arquivos soltos no campo ou um ou mais arquivos .json ou .emailify-ai.json importados.

O AI Designer aceita:

• Um rascunho de e-mail como um único objeto JSON.
• Vários rascunhos de e-mail em um array emails.
• Vários rascunhos de e-mail em um array templates.

As respostas da Skill do Emailify são verificadas em relação à impressão digital do catálogo baixado, para que o Emailify possa bloquear um JSON desatualizado se a biblioteca de componentes tiver mudado depois do download da Skill.

Antes de ativar Create Email, o Emailify verifica em segundo plano as referências de componentes, os slots editáveis, as URLs, os links aprovados, o texto alternativo das imagens, o conteúdo provisório, as funções obrigatórias, a posição do cabeçalho e do rodapé, a política de textos e o uso de alternativas.

Se o JSON não for válido, clique em Copy Fix Prompt e cole o resultado de volta na mesma tarefa do Codex ou do Claude Code que gerou a resposta. Substitua o conteúdo do campo de resposta pelo JSON corrigido pelo agente.

Exemplo de resposta em 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": []
          }
        }
      ]
    }
  ]
}

As referências de componentes e slots acima são ilustrativas. Use sempre as referências exportadas na Skill atual do Emailify.

Campos do JSON

A resposta de nível superior inclui:

• schemaVersion: a versão do contrato de resposta do AI Designer.
• workflowMode: external para as respostas da Skill do Emailify.
• contentPolicy: a política do perfil ativo: preserve, light-edit ou draft-missing.
• catalogFingerprint: identifica a biblioteca de componentes detectada exportada na Skill.
• emails: um ou mais rascunhos de e-mail completos. Os prompts focados em vários e-mails contêm um e-mail.

Cada rascunho de e-mail inclui:

• name: o nome do frame do Figma para o e-mail gerado.
• subject: a linha de assunto do e-mail.
• preheader: o texto do preheader do e-mail.
• timing: o timing de envio opcional do briefing, ou uma string vazia.
• job: o objetivo opcional do briefing, ou uma string vazia.
• unresolved: textos, links, imagens, afirmações ou conteúdo jurídico ausentes que precisam ser resolvidos antes da inserção.
• components: a lista ordenada de componentes do Emailify a inserir.

Cada componente inclui:

• role: uma função de layout simples, como header, hero, content, cta, disclaimer ou footer.
• componentRef: a referência compacta do componente copiada no prompt. O Emailify a resolve localmente para o componente exato do Figma ou para a predefinição integrada.
• overrides.text: um array de substituições de texto {slotRef, value, source}, em que source é provided ou generated.
• overrides.links: um array de substituições de link {slotRef, value} com URLs http ou https simples.
• overrides.images: um array de substituições de imagem {slotRef, url, alt, href}.
• overrides.hidden: referências de slots a ocultar quando um componente tem conteúdo opcional ou provisório não utilizado.

Respostas antigas que usam componentId, componentName, presetKey exatos e objetos de substituição nomeados continuam aceitas por compatibilidade.

Boas práticas

• Use os nomes exatos dos componentes da sua biblioteca do Emailify quando quiser módulos específicos da marca.
• Mantenha os componentes de cabeçalho no início e os de rodapé no fim, a menos que o briefing diga o contrário.
• Use um componente de hero ou de destaque perto do topo quando a campanha precisar de uma mensagem de abertura forte.
• Use um CTA claro por e-mail, a menos que o briefing peça explicitamente vários CTAs.
• Use URLs absolutas simples, e não links formatados em Markdown.
• Inclua um texto alternativo útil para cada URL de imagem.
• Preserve exatamente, onde for exigido, os textos jurídicos, de compliance, de descontos, de timing, as merge tags e os avisos legais.
• Em campanhas com vários e-mails, use um título claro para cada e-mail. A Skill grava um arquivo de resposta completo por e-mail.
• Revise o template gerado no Figma antes de exportá-lo para o seu ESP.

Solução de problemas

• Se o Emailify mostrar The JSON could not be parsed, remova as cercas de código Markdown, os comentários, as vírgulas finais ou qualquer texto antes ou depois do JSON.
• Se um componente não corresponder, baixe e reinstale a skill atual e garanta que o agente use apenas os valores componentRef e slotRef exportados.
• Se o conteúdo provisório continuar visível, adicione o nome da camada ou do slot não utilizado a overrides.hidden ou escolha um componente mais simples.
• Se o resultado parecer genérico, garanta que os componentes da sua marca no Emailify estejam no arquivo atual antes de baixar a Skill. A alternativa com predefinições é desativada automaticamente quando há componentes da marca disponíveis.
• Se o Emailify disser que a biblioteca de componentes mudou, baixe e reinstale a skill atual e gere o JSON de novo com a nova impressão digital.
• Se o agente não encontrar o ZIP exato indicado na instrução copiada, diga a ele onde você salvou esse arquivo, em vez de pedir que ele escolha um download diferente ou mais antigo.
• Se um fluxo de IA reutilizável usar tokens demais, confirme que ele executa scripts/search-components.js e scripts/inspect-component.js, em vez de carregar catalog-index.json ou todos os arquivos de função no contexto.
• Se um pacote baixado parecer incompleto ou modificado, execute node scripts/self-test.js na pasta da skill instalada e baixe uma Skill nova se alguma verificação de integridade falhar.
• Se a verificação prévia apontar texto gerado sob a política preserve, mude a origem do texto, forneça o texto que falta ou use um perfil que permita redigir.
• Em uma campanha grande com vários e-mails, peça ao agente que grave um arquivo .emailify-ai.json completo por e-mail e use no briefing títulos como Email 1 - Welcome, Email 2 - Follow-up e Email 3 - Offer.