The AI Designer (BETA) tab connects your Emailify component library to agent apps such as Codex and Claude Code. Download the reusable Emailify Skill once, give briefs directly to your agent, then import its validated JSON response into Emailify.

AI Designer is currently in beta and is being actively improved. Its interface, downloaded Skill, agent instructions, prompts, validation, and workflow steps may change as we refine the experience based on customer feedback.

The skill keeps your component catalog, editable slot references, brand profile, copy policy, response schema, and validator together. It uses a compact index and opens detailed component files only when required, so the complete catalog is not bundled into every brief.

AI Designer does not send your brief or component library to an AI model from inside the plugin. You choose where to install the downloaded skill and which agent receives your brief.

How it works

1. Open Emailify in Figma.
2. Click the + icon in the plugin header to open the New Email modal.
3. Select AI Designer (BETA).
4. Click Download Skill. Emailify automatically packages the current file's Emailify component library, or its default presets when the file has no Emailify components.
5. Click Copy Instructions, paste the instruction into a new Codex or Claude Code task, and wait for the agent to confirm that the downloaded Skill is ready. Then send your campaign brief as the next message.
6. In Import Agent Result, paste or drop the generated JSON, or choose one or more .emailify-ai.json files.
7. When the response is valid, click Create Email or Create Emails.

Emailify validates the response before insertion, creates a new Emailify frame in Figma, inserts the selected component instances in the returned order, and applies supported text, link, image, alt text, and hidden-layer overrides. Branded components remain linked instances after their content is updated.

Step 1: Download Skill

AI Designer automatically uses Emailify components found in the current Figma file as the Skill's primary catalog. This includes local components and design-system component instances already used in the file, so there is no separate source-selection step.

If the current file does not contain any Emailify components, AI Designer automatically uses Default Emailify Presets instead. When branded Figma components are available, Emailify presets are not included as fallback, keeping the generated email in strict branded mode.

Step 1 intentionally has one action: Download Skill. Download it again whenever the current component library changes or Copy Instructions becomes disabled, then replace the older installed Skill with the fresh package.

For the most branded result, keep reusable headers, footers, hero rows, CTA rows, disclaimers, product rows, and content blocks in the same Figma file before downloading the skill.

Protect fixed and legal content

To prevent an agent from changing fixed copy, lock the layer or its parent group in Figma. You can also prefix the layer or group name with 🔒, such as 🔒 Legal.

AI Designer exports these layers as protected slots. The downloaded Skill tells the agent not to override or hide them, its validator rejects any attempted change, and Emailify leaves the original component content unchanged during import. Use this for approved legal text, disclaimers, footer details, compliance copy, or other content that must remain fixed.

Build directly with Figma MCP

When Figma write tools are available, the downloaded Skill can assemble or update an email directly in Figma while keeping its Emailify components linked to their original main components. The agent must follow Emailify's exact frame, instance, and subject/preheader metadata conventions before the plugin can adopt the result.

See Using Emailify with Figma MCP for the canonical agent instruction, naming contract, editing safeguards, and troubleshooting steps. The validated JSON import workflow remains available when direct Figma writing is unavailable.

Step 2: Generate With Your Agent

The Emailify Skill downloaded in Step 1 is a versioned ZIP containing one ready-to-install emailify-ai-designer folder. Its unique filename includes the Skill version, millisecond UTC export time, catalog fingerprint, and configuration fingerprint, for example emailify-ai-designer-v11-20260722T130512123Z-a1-5bixn7-k11-abc123.zip.

• SKILL.md with the reusable agent workflow and output rules.
• INSTALL.md with Codex and Claude Code setup paths and the combined agent instruction.
• manifest.json with the exact package filename, Skill version, export time, catalog fingerprint, configuration fingerprint, source, fallback state, and active profile.
• profile.json with copy policy, required roles, approved links, and team instructions.
• catalog-index.json, a compact component index for discovery.
• previews/*.jpg, a 1x visual reference for each successfully exported component.
• components/*.json, grouped role files with exact component and slot references, including protected slots.
• plan-schema.json and scripts/validate-plan.js for validating the component plan before any copy is mapped.
• response-schema.json for schema-constrained generation.
• scripts/search-components.js and scripts/inspect-component.js for token-efficient catalog discovery without loading the full library into context.
• scripts/create-response-skeleton.js for creating the exact JSON envelope and override arrays from a validated plan.
• scripts/validate-response.js, a local validator the agent runs before returning a file.
• scripts/self-test.js and integrity.json for checking package files, catalog references, previews, and SHA-256 hashes.
• data-inventory.json, which states what the package contains and confirms that it includes no briefs, generated email copy, API keys, or Figma access tokens.
• agents/openai.yaml with current Codex skill metadata.
• integration-contract.json, a small operation map that includes the direct-to-Figma MCP frame contract and its canonical documentation URL.

The skill uses deterministic progressive loading. The agent searches the compact index with the bundled script, inspects only shortlisted components and their previewFile images, validates a compact component plan, creates a response skeleton, fills exact slot references, and validates the finished response. The full catalog does not need to enter the model context.

Install the Skill

After downloading the current package, click Copy Instructions. The button changes to Instructions Copied and Emailify confirms the next action. Paste the copied instruction into a new Codex or Claude Code task. The instruction names the exact ZIP that was downloaded, installs or replaces the project Skill, and verifies its filename, version, export time, catalog fingerprint, and configuration fingerprint. The agent stops and asks for a fresh download if any value does not match. When the agent confirms that emailify-ai-designer is ready, send your email brief as the next message:

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.

The combined instruction lets the current agent choose its supported project skill location and continue directly into the brief. Project scope keeps the Figma file's branded catalog and profile attached to the relevant workspace instead of replacing a global skill.

Skill version 11 adds subject-line and preheader ingestion to the guarded direct-to-Figma MCP workflow while retaining linked-instance checks, protected-slot enforcement, and exact package identity checks. Packages downloaded during an earlier AI Designer beta are intentionally marked stale after this update, so download and install the current Skill once before generating new emails.

To install it manually, extract the ZIP, then move the included emailify-ai-designer folder to one of these locations:

• Codex personal skill: ~/.agents/skills/emailify-ai-designer/
• Codex project skill: .agents/skills/emailify-ai-designer/
• Claude Code personal skill: ~/.claude/skills/emailify-ai-designer/
• Claude Code project skill: .claude/skills/emailify-ai-designer/

The folder itself must contain SKILL.md, manifest.json, catalog-index.json, previews/, components/, and the other downloaded resources. Start a new agent task after installing it if the skill does not appear immediately.

Give the Agent Your Brief

Include the campaign goal, audience, lifecycle stage, timing, subject line, preheader, approved copy, CTA copy, links, image URLs, alt text, brand guidance, legal requirements, ESP requirements, merge tags, and preferred module order when available.

The skill writes a validated .emailify-ai.json file into your working directory. For large campaigns it prefers one complete file per email instead of producing partial or truncated JSON in chat.

You can optionally make component matching more explicit by adding lines such as AI role: hero, AI intent: product launch, AI usage: use when an image and CTA are required, or AI notes: preserve the secondary legal line to a Figma component description. These hints are optional; AI Designer also infers component roles and capacity from names, descriptions, editable layers, and Emailify metadata.

Step 3: Import Agent Result

Paste raw JSON, drop one or more generated .emailify-ai.json files onto the response field, or click Choose Result File. Emailify validates the complete result automatically.

When the entire result is valid, Create Email becomes available. For a valid multi-email response, the button shows the number of emails that will be created. If any part is invalid, creation remains disabled and Copy Fix Prompt copies a compact repair request that you can paste back into the same agent task. The repair request uses the Skill already loaded by your agent instead of repeating the component catalog.

You can also run the bundled validator manually from inside the installed skill folder:

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

Emailify warns you when the last downloaded skill no longer matches the current component catalog, source, profile, copy policy, fallback setting, or skill package version. Download and replace the installed skill whenever any of these inputs change. Your in-progress AI Designer result remains available if you switch to another tab in the same New Email modal.

Catalog freshness includes component names, roles, categories, descriptions, AI notes, capacities, editable-slot and protected-slot metadata, and a lightweight visual signature. Download and reinstall the skill whenever Emailify marks it as out of date. Unchanged preview images are reused during the current plugin session to make repeated package downloads faster.

Emailify Skill responses are catalog-bound rather than brief-bound, so they do not require a requestFingerprint. They must declare workflowMode: "external", the active contentPolicy, an unresolved array for each email, and source: "provided" or source: "generated" for every text override.

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

Response validation and formats

The JSON Response field accepts raw JSON pasted from an AI tool, dropped files, or one or more imported .json or .emailify-ai.json files.

AI Designer accepts:

• One email draft as a single JSON object.
• Multiple email drafts in an emails array.
• Multiple email drafts in a templates array.

Emailify Skill responses are checked against the downloaded catalog fingerprint, so Emailify can block stale JSON if the component library changed after the Skill was downloaded.

Before enabling Create Email, Emailify checks component references, editable slots, URLs, approved links, image alt text, placeholder content, required roles, header/footer placement, copy policy, and fallback usage behind the scenes.

If the JSON is not valid, click Copy Fix Prompt and paste it back into the same Codex or Claude Code task that generated the result. Replace the response field with the agent's corrected JSON.

Example JSON response

{
  "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": []
          }
        }
      ]
    }
  ]
}

The component and slot references above are illustrative. Always use the references exported in the current Emailify Skill.

JSON fields

The top-level response includes:

• schemaVersion: the AI Designer response contract version.
• workflowMode: external for Emailify Skill responses.
• contentPolicy: the active profile policy: preserve, light-edit, or draft-missing.
• catalogFingerprint: identifies the detected component library exported in the Skill.
• emails: one or more complete email drafts. Focused multi-email prompts contain one email.

Each email draft includes:

• name: the Figma frame name for the generated email.
• subject: the email subject line.
• preheader: the email preheader text.
• timing: optional send timing from the brief, or an empty string.
• job: optional objective from the brief, or an empty string.
• unresolved: missing copy, links, images, claims, or legal content that must be resolved before insertion.
• components: the ordered list of Emailify components to insert.

Each component includes:

• role: a simple layout role such as header, hero, content, cta, disclaimer, or footer.
• componentRef: the compact component reference copied in the prompt. Emailify resolves it to the exact Figma component or built-in preset locally.
• overrides.text: an array of {slotRef, value, source} text replacements, where source is provided or generated.
• overrides.links: an array of {slotRef, value} link replacements using plain http or https URLs.
• overrides.images: an array of {slotRef, url, alt, href} image replacements.
• overrides.hidden: slot references to hide when a component has unused optional or placeholder content.

Older responses using exact componentId, componentName, presetKey, and named override objects remain supported for compatibility.

Best practices

• Use exact component names from your Emailify component library when you want specific branded modules.
• Keep header components first and footer components last unless your brief says otherwise.
• Use a hero or feature component near the top when the campaign needs a strong opening message.
• Use one clear CTA per email unless the brief specifically asks for multiple CTAs.
• Use plain absolute URLs, not markdown-formatted links.
• Include useful alt text for every image URL.
• Preserve legal, compliance, discount, timing, merge tag, and disclaimer copy exactly where required.
• For multi-email campaigns, use a clear heading for each email. The Skill writes one complete response file per email.
• Review the generated Figma template before exporting it to your ESP.

Troubleshooting

• If Emailify says The JSON could not be parsed, remove markdown fences, comments, trailing commas, or any text before or after the JSON.
• If a component does not match, download and reinstall the current skill, then make sure the agent uses only the exported componentRef and slotRef values.
• If placeholder content remains visible, add the unused layer or slot name to overrides.hidden, or choose a simpler component.
• If the output feels generic, make sure your branded Emailify components are in the current file before downloading the Skill. Preset fallback is automatically disabled when branded components are available.
• If Emailify says the component library changed, download and reinstall the current skill, then regenerate the JSON against its new fingerprint.
• If the agent cannot find the exact ZIP named in the copied instruction, tell it where you saved that file instead of asking it to choose a different or older download.
• If a reusable AI workflow uses too many tokens, confirm it runs scripts/search-components.js and scripts/inspect-component.js instead of loading catalog-index.json or every role file into context.
• If a downloaded package appears incomplete or modified, run node scripts/self-test.js from the installed skill folder and download a fresh Skill if any integrity check fails.
• If preflight reports generated copy under the preserve policy, change the text source, provide the missing copy, or use a profile that permits drafting.
• For a large multi-email campaign, ask the agent to write one complete .emailify-ai.json file per email and use headings such as Email 1 - Welcome, Email 2 - Follow-up, and Email 3 - Offer in the brief.