L’onglet AI Designer relie votre bibliothèque de composants Emailify à des outils d’IA, tandis qu’Emailify reste chargé de valider le résultat et de créer le modèle Figma final. Choisissez Agent (Skill), Copy & Paste Prompt ou LLM Provider API selon votre façon de travailler.

AI Designer est actuellement en bêta et fait l’objet d’améliorations continues. Son interface, la Skill téléchargée, les instructions de l’agent, les prompts, la validation et les étapes du workflow peuvent évoluer à mesure que nous affinons l’expérience à partir des retours clients.

Agent (Skill) est le mode recommandé par défaut pour un usage répété et les grandes bibliothèques à votre marque. La Skill regroupe votre catalogue de composants, les références des emplacements modifiables, votre profil de marque, votre politique de rédaction, le schéma de réponse et le validateur. Elle utilise un index compact et n’ouvre les fichiers détaillés des composants qu’en cas de besoin : le catalogue complet n’est donc pas joint à chaque brief.

Agent (Skill) et Copy & Paste Prompt n’envoient ni votre brief ni votre bibliothèque de composants à un modèle d’IA depuis le plugin. LLM Provider API envoie la requête générée au fournisseur d’IA de votre choix avec votre propre clé API.

Fonctionnement

1. Ouvrez Emailify dans Figma.
2. Cliquez sur l’icône + à côté du sélecteur d’emails pour ouvrir la fenêtre New Email.
3. Sélectionnez AI Designer.
4. Choisissez l’un des trois onglets de workflow :
   • Agent (Skill) : téléchargez une Skill réutilisable, chargez-la dans Codex ou Claude Code, puis donnez votre brief à l’agent.
   • Copy & Paste Prompt : ajoutez votre brief, copiez le prompt généré dans n’importe quel LLM pris en charge, puis collez sa réponse JSON dans Emailify.
   • LLM Provider API : ajoutez votre brief et générez le JSON directement via ChatGPT, Claude ou Gemini avec votre propre clé API.
5. Vérifiez ou importez le JSON généré à la dernière étape.
6. Lorsque la réponse est valide, cliquez sur Create Email, ou sur Create 2 Emails (et ainsi de suite) pour une réponse contenant plusieurs emails.

Emailify valide la réponse avant l’insertion, crée un nouveau frame Emailify dans Figma, insère les instances de composants sélectionnées dans l’ordre renvoyé et applique les remplacements pris en charge : texte, liens, images, texte alternatif et calques masqués. Les composants à votre marque restent des instances liées une fois leur contenu mis à jour.

Choisir un workflow

Agent (Skill)

Utilisez Agent (Skill) si vous générez régulièrement des emails à partir de la même bibliothèque de composants à votre marque, si votre catalogue est volumineux ou si vous voulez que l’agent valide les fichiers en local avant de les renvoyer. C’est le mode le plus économe en tokens pour un travail répété, car le catalogue est installé une seule fois puis consulté progressivement.

Copy & Paste Prompt

Utilisez Copy & Paste Prompt pour un workflow manuel rapide avec ChatGPT, Claude, Gemini ou un autre LLM performant :

1. Collez votre brief dans Add Email Brief.
2. Cliquez sur Copy Prompt.
3. Collez le prompt dans votre LLM et demandez-lui de ne renvoyer que le JSON demandé.
4. Collez ou importez la réponse dans Paste LLM Result.
5. Cliquez sur Create Email une fois la validation réussie.

Pour les briefs contenant plusieurs emails, Emailify limite le prompt copié à un email à la fois. Le bouton affiche le numéro de l’email en cours, pour que chaque réponse reste complète et dans la limite de sortie du modèle.

LLM Provider API

Utilisez LLM Provider API si vous voulez qu’Emailify se charge de générer le prompt et le JSON, sans copier d’une application à l’autre :

1. Collez votre brief dans Add Email Brief.
2. Sélectionnez ChatGPT, Claude ou Gemini.
3. Ajoutez la clé API du fournisseur si elle n’a pas encore été configurée dans AI Designer.
4. Cliquez sur Generate 1 Email Draft. Le nombre correspond aux emails de votre brief, par exemple Generate 3 Email Drafts.
5. Vérifiez le JSON généré, puis cliquez sur Create Email une fois la validation réussie.

Le champ de clé API est affiché par défaut. Une fois la clé enregistrée, Emailify l’affiche dans un champ de mot de passe masqué, en lecture seule. Cliquez sur le bouton crayon Edit pour la remplacer. Les clés API sont stockées par utilisateur Figma sur votre appareil et ne sont pas écrites dans le fichier Figma. Les briefs contenant plusieurs emails sont générés en requêtes distinctes auprès du fournisseur, puis fusionnés en un seul résultat validé pour limiter les réponses tronquées.

Emailify valide chaque résultat généré avant d’activer Create Email. Si le fournisseur renvoie un JSON valide mais avec des références de composants ou d’emplacements modifiables incorrectes, Emailify envoie automatiquement au même fournisseur une requête de correction qui tient compte du catalogue. La fenêtre New Email reste désactivée pendant la génération et la correction automatique. Lorsque le résultat corrigé passe la validation, Create Email devient disponible sans action supplémentaire.

Si la correction automatique ne résout pas le problème, Emailify conserve le JSON généré, affiche le problème de validation restant et propose Repair pour réessayer. Une correction automatique n’utilise une requête API supplémentaire auprès du fournisseur que si le résultat initial contient une erreur de validation bloquante.

L’utilisation de l’API est facturée par le fournisseur choisi. Emailify n’ajoute aucuns frais d’utilisation des modèles.

Workflow Agent (Skill)

Étape 1 : télécharger la Skill

AI Designer utilise automatiquement les composants Emailify présents dans le fichier Figma actuel comme catalogue principal de la Skill. Cela inclut les composants locaux et les instances de composants de design system déjà utilisées dans le fichier : il n’y a donc pas d’étape distincte pour choisir la source.

Si le fichier actuel ne contient aucun composant Emailify, AI Designer utilise automatiquement Default Emailify Presets à la place. Lorsque des composants Figma à votre marque sont disponibles, les préréglages Emailify ne servent pas de solution de repli : l’email généré reste en mode strictement à votre marque.

L’étape 1 ne comporte volontairement qu’une action : Download Skill. Téléchargez-la de nouveau chaque fois que la bibliothèque de composants actuelle change ou que Copy Instructions est désactivé, puis remplacez l’ancienne Skill installée par le nouveau package.

Pour un résultat le plus fidèle possible à votre marque, gardez dans le même fichier Figma vos en-têtes, pieds de page, rangées hero, rangées CTA, mentions légales, rangées produit et blocs de contenu réutilisables avant de télécharger la Skill.

Protéger le contenu fixe et juridique

Pour empêcher un agent de modifier un texte fixe, verrouillez le calque ou son groupe parent dans Figma. Vous pouvez aussi faire précéder le nom du calque ou du groupe de 🔒, par exemple 🔒 Legal.

AI Designer exporte ces calques comme emplacements protégés. La Skill téléchargée indique à l’agent de ne pas les remplacer ni les masquer, son validateur rejette toute tentative de modification, et Emailify laisse le contenu d’origine du composant inchangé à l’import. Utilisez cette protection pour les textes juridiques validés, les mentions légales, les informations de pied de page, les textes de conformité ou tout autre contenu qui doit rester fixe.

Construire directement avec le MCP de Figma

Lorsque les outils d’écriture de Figma sont disponibles, la Skill téléchargée peut assembler ou mettre à jour un email directement dans Figma, tout en gardant ses composants Emailify liés à leurs composants principaux d’origine. L’agent doit respecter exactement les conventions d’Emailify pour le frame, les instances et les métadonnées d’objet et de pré-en-tête avant que le plugin puisse reprendre le résultat.

Consultez Utiliser Emailify avec le MCP de Figma pour l’instruction de référence de l’agent, le contrat de nommage, les garde-fous d’édition et les étapes de dépannage. Le workflow d’import JSON validé reste disponible lorsque l’écriture directe dans Figma ne l’est pas.

Étape 2 : générer avec votre agent

La Skill Emailify téléchargée à l’étape 1 est un ZIP versionné qui contient un dossier emailify-ai-designer prêt à installer. Son nom de fichier unique inclut la version de la Skill, l’heure d’export UTC à la milliseconde, l’empreinte du catalogue et l’empreinte de configuration, par exemple emailify-ai-designer-v11-20260722T130512123Z-a1-5bixn7-k11-abc123.zip.

• SKILL.md, avec le workflow réutilisable de l’agent et les règles de sortie.
• INSTALL.md, avec les chemins d’installation pour Codex et Claude Code et l’instruction combinée pour l’agent.
• manifest.json, avec le nom exact du package, la version de la Skill, l’heure d’export, l’empreinte du catalogue, l’empreinte de configuration, la source, l’état de la solution de repli et le profil actif.
• profile.json, avec la politique de rédaction, les rôles requis, les liens approuvés et les instructions de l’équipe.
• catalog-index.json, un index compact des composants pour les repérer.
• previews/*.jpg, une référence visuelle en 1x pour chaque composant exporté avec succès.
• components/*.json, des fichiers regroupés par rôle avec les références exactes des composants et des emplacements, y compris les emplacements protégés.
• plan-schema.json et scripts/validate-plan.js, pour valider le plan de composants avant d’y associer le moindre texte.
• response-schema.json, pour une génération contrainte par le schéma.
• scripts/search-components.js et scripts/inspect-component.js, pour explorer le catalogue en économisant les tokens, sans charger toute la bibliothèque dans le contexte.
• scripts/create-response-skeleton.js, pour créer l’enveloppe JSON exacte et les tableaux de remplacements à partir d’un plan validé.
• scripts/validate-response.js, un validateur local que l’agent exécute avant de renvoyer un fichier.
• scripts/self-test.js et integrity.json, pour vérifier les fichiers du package, les références du catalogue, les aperçus et les empreintes SHA-256.
• data-inventory.json, qui décrit le contenu du package et confirme qu’il ne contient ni briefs, ni textes d’email générés, ni clés API, ni jetons d’accès Figma.
• agents/openai.yaml, avec les métadonnées actuelles de la Skill pour Codex.
• integration-contract.json, une petite table des opérations qui inclut le contrat de frame pour le MCP direct vers Figma et l’URL de sa documentation de référence.

La Skill utilise un chargement progressif déterministe. L’agent interroge l’index compact avec le script fourni, n’inspecte que les composants présélectionnés et leurs images previewFile, valide un plan de composants compact, crée un squelette de réponse, renseigne les références exactes des emplacements et valide la réponse finale. Le catalogue complet n’a pas besoin d’entrer dans le contexte du modèle.

Installer la Skill

Après avoir téléchargé le package actuel, cliquez sur Copy Instructions. Le bouton devient Instructions Copied et Emailify vous indique l’action suivante. Collez l’instruction copiée dans une nouvelle tâche Codex ou Claude Code. L’instruction nomme le ZIP exact téléchargé, installe ou remplace la Skill du projet, et vérifie son nom de fichier, sa version, son heure d’export, l’empreinte du catalogue et l’empreinte de configuration. L’agent s’arrête et vous demande un nouveau téléchargement si une valeur ne correspond pas. Lorsque l’agent confirme que emailify-ai-designer est prête, envoyez votre brief d’email dans le message suivant :

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.

Avec cette instruction combinée, l’agent choisit l’emplacement de Skill de projet qu’il prend en charge et enchaîne directement sur le brief. La portée projet garde le catalogue et le profil à votre marque du fichier Figma rattachés à l’espace de travail concerné, au lieu de remplacer une Skill globale.

La version 11 de la Skill ajoute la prise en compte de l’objet et du pré-en-tête au workflow encadré du MCP direct vers Figma, tout en conservant les vérifications des instances liées, la protection des emplacements protégés et la vérification exacte de l’identité du package. Les packages téléchargés lors d’une bêta antérieure d’AI Designer sont volontairement marqués comme obsolètes après cette mise à jour : téléchargez et installez donc une fois la Skill actuelle avant de générer de nouveaux emails.

Pour l’installer manuellement, décompressez le ZIP, puis déplacez le dossier emailify-ai-designer qu’il contient vers l’un de ces emplacements :

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

Le dossier lui-même doit contenir SKILL.md, manifest.json, catalog-index.json, previews/, components/ et les autres ressources téléchargées. Si la Skill n’apparaît pas tout de suite après l’installation, démarrez une nouvelle tâche d’agent.

Donner votre brief à l’agent

Indiquez si possible l’objectif de la campagne, l’audience, l’étape du cycle de vie, le calendrier, l’objet, le pré-en-tête, les textes validés, le texte des CTA, les liens, les URL des images, le texte alternatif, les consignes de marque, les exigences juridiques, les exigences de l’ESP, les balises de fusion et l’ordre des modules souhaité.

La Skill écrit un fichier .emailify-ai.json validé dans votre répertoire de travail. Pour les grandes campagnes, elle privilégie un fichier complet par email plutôt qu’un JSON partiel ou tronqué dans le chat.

Vous pouvez, si vous le souhaitez, rendre l’association des composants plus explicite en ajoutant à la description d’un composant Figma des lignes comme 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. Ces indications sont facultatives : AI Designer déduit aussi les rôles et la capacité des composants à partir des noms, des descriptions, des calques modifiables et des métadonnées Emailify.

Étape 3 : importer le résultat de l’agent

Collez le JSON brut, déposez un ou plusieurs fichiers .emailify-ai.json générés sur le champ de réponse, ou cliquez sur Choose File. Emailify valide automatiquement l’ensemble du résultat.

Lorsque tout le résultat est valide, Create Email devient disponible. Pour une réponse valide contenant plusieurs emails, le bouton indique le nombre d’emails qui seront créés. Si une partie n’est pas valide, la création reste désactivée et Copy Fix Prompt copie une requête de correction compacte à recoller dans la même tâche d’agent. Cette requête s’appuie sur la Skill déjà chargée par votre agent au lieu de répéter le catalogue de composants.

Vous pouvez aussi lancer manuellement le validateur fourni depuis le dossier de la Skill installée :

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

Emailify vous avertit lorsque la dernière Skill téléchargée ne correspond plus au catalogue de composants, à la source, au profil, à la politique de rédaction, au réglage de repli ou à la version du package de Skill actuels. Téléchargez et remplacez la Skill installée chaque fois que l’un de ces éléments change. Votre résultat AI Designer en cours reste disponible si vous passez à un autre onglet de la même fenêtre New Email.

La fraîcheur du catalogue tient compte des noms, rôles, catégories et descriptions des composants, des notes pour l’IA, des capacités, des métadonnées des emplacements modifiables et protégés, ainsi que d’une signature visuelle légère. Téléchargez et réinstallez la Skill chaque fois qu’Emailify la signale comme obsolète. Les images d’aperçu inchangées sont réutilisées pendant la session du plugin en cours pour accélérer les téléchargements répétés du package.

Les réponses de la Skill Emailify sont liées au catalogue et non au brief : elles n’ont donc pas besoin de requestFingerprint. Elles doivent déclarer workflowMode: "external", la contentPolicy active, un tableau unresolved pour chaque email, et source: "provided" ou source: "generated" pour chaque remplacement de texte.

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

Validation et formats de réponse

Le champ JSON Response accepte le JSON brut collé depuis un outil d’IA, les fichiers déposés, ou un ou plusieurs fichiers .json ou .emailify-ai.json importés.

AI Designer accepte :

• Un brouillon d’email sous forme d’objet JSON unique.
• Plusieurs brouillons d’email dans un tableau emails.
• Plusieurs brouillons d’email dans un tableau templates.

Les réponses de la Skill Emailify sont vérifiées par rapport à l’empreinte du catalogue téléchargé : Emailify peut ainsi bloquer un JSON obsolète si la bibliothèque de composants a changé après le téléchargement de la Skill.

Avant d’activer Create Email, Emailify vérifie en arrière-plan les références des composants, les emplacements modifiables, les URL, les liens approuvés, le texte alternatif des images, le contenu provisoire, les rôles requis, la position de l’en-tête et du pied de page, la politique de rédaction et l’utilisation de la solution de repli.

Si le JSON n’est pas valide, cliquez sur Copy Fix Prompt et collez-le dans la même tâche Codex ou Claude Code que celle qui a généré le résultat. Remplacez ensuite le contenu du champ de réponse par le JSON corrigé par l’agent.

Exemple de réponse 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": []
          }
        }
      ]
    }
  ]
}

Les références de composants et d’emplacements ci-dessus sont données à titre d’exemple. Utilisez toujours les références exportées dans la Skill Emailify actuelle.

Champs JSON

La réponse de premier niveau comprend :

• schemaVersion : la version du contrat de réponse d’AI Designer.
• workflowMode : external pour les réponses de la Skill Emailify.
• contentPolicy : la politique du profil actif, preserve, light-edit ou draft-missing.
• catalogFingerprint : identifie la bibliothèque de composants détectée et exportée dans la Skill.
• emails : un ou plusieurs brouillons d’email complets. Les prompts ciblés pour plusieurs emails en contiennent un seul.

Chaque brouillon d’email comprend :

• name : le nom du frame Figma de l’email généré.
• subject : l’objet de l’email.
• preheader : le texte de pré-en-tête de l’email.
• timing : le calendrier d’envoi facultatif indiqué dans le brief, ou une chaîne vide.
• job : l’objectif facultatif indiqué dans le brief, ou une chaîne vide.
• unresolved : les textes, liens, images, affirmations ou contenus juridiques manquants à résoudre avant l’insertion.
• components : la liste ordonnée des composants Emailify à insérer.

Chaque composant comprend :

• role : un rôle de mise en page simple, comme header, hero, content, cta, disclaimer ou footer.
• componentRef : la référence compacte du composant copiée dans le prompt. Emailify la résout localement vers le composant Figma exact ou le préréglage intégré.
• overrides.text : un tableau de remplacements de texte {slotRef, value, source}, où source vaut provided ou generated.
• overrides.links : un tableau de remplacements de liens {slotRef, value} avec de simples URL http ou https.
• overrides.images : un tableau de remplacements d’images {slotRef, url, alt, href}.
• overrides.hidden : les références des emplacements à masquer lorsqu’un composant contient du contenu facultatif ou provisoire inutilisé.

Les anciennes réponses qui utilisent les champs exacts componentId, componentName, presetKey et des objets de remplacement nommés restent prises en charge pour la compatibilité.

Bonnes pratiques

• Utilisez les noms exacts des composants de votre bibliothèque Emailify lorsque vous voulez des modules précis à votre marque.
• Placez les composants d’en-tête en premier et ceux de pied de page en dernier, sauf indication contraire dans votre brief.
• Utilisez un composant hero ou de mise en avant près du haut lorsque la campagne a besoin d’un message d’ouverture fort.
• Utilisez un seul CTA clair par email, sauf si le brief demande explicitement plusieurs CTA.
• Utilisez de simples URL absolues, et non des liens au format Markdown.
• Ajoutez un texte alternatif utile pour chaque URL d’image.
• Conservez à l’identique, là où c’est requis, les textes juridiques, de conformité, de remise, de calendrier, les balises de fusion et les mentions légales.
• Pour les campagnes de plusieurs emails, donnez un titre clair à chaque email. La Skill écrit un fichier de réponse complet par email.
• Vérifiez le modèle Figma généré avant de l’exporter vers votre ESP.

Dépannage

• Si Emailify affiche The JSON could not be parsed, supprimez les délimiteurs de code Markdown, les commentaires, les virgules finales ou tout texte avant ou après le JSON.
• Si un composant ne correspond pas, téléchargez et réinstallez la Skill actuelle, puis assurez-vous que l’agent n’utilise que les valeurs componentRef et slotRef exportées.
• Si du contenu provisoire reste visible, ajoutez le nom du calque ou de l’emplacement inutilisé à overrides.hidden, ou choisissez un composant plus simple.
• Si le résultat semble générique, vérifiez que vos composants Emailify à votre marque se trouvent dans le fichier actuel avant de télécharger la Skill. Les préréglages de repli sont automatiquement désactivés lorsque des composants à votre marque sont disponibles.
• Si Emailify indique que la bibliothèque de composants a changé, téléchargez et réinstallez la Skill actuelle, puis régénérez le JSON avec sa nouvelle empreinte.
• Si l’agent ne trouve pas le ZIP exact nommé dans l’instruction copiée, indiquez-lui où vous avez enregistré ce fichier au lieu de lui demander de choisir un autre téléchargement, plus ancien.
• Si un workflow d’IA réutilisable consomme trop de tokens, vérifiez qu’il exécute scripts/search-components.js et scripts/inspect-component.js au lieu de charger catalog-index.json ou tous les fichiers de rôles dans le contexte.
• Si un package téléchargé semble incomplet ou modifié, exécutez node scripts/self-test.js depuis le dossier de la Skill installée et téléchargez une nouvelle Skill si une vérification d’intégrité échoue.
• Si la vérification préalable signale du texte généré alors que la politique est preserve, changez la source du texte, fournissez le texte manquant ou utilisez un profil qui autorise la rédaction.
• Pour une grande campagne de plusieurs emails, demandez à l’agent d’écrire un fichier .emailify-ai.json complet par email et utilisez dans le brief des titres comme Email 1 - Welcome, Email 2 - Follow-up et Email 3 - Offer.