Build Emails in Figma with Claude or Codex

Give Claude or OpenAI Codex a brief and a Figma file link. It builds a real Email Love email on your canvas that your team can edit, review, and export to your ESP. Not a screenshot. Not a mockup. A real email. The agent builds campaigns from your published Email Love components. If you are starting without a design system, its first job is to build or migrate one from your existing emails and designs.

What you need

There are three pieces, plus one we recommend:

The Email Love Figma plugin, installed in Figma and ready to open in the file where you want to build
The Email Love workflow, installed in Claude or Codex so the agent understands export-safe email structure
The official remote Figma MCP, which gives the agent access to your canvas
Recommended: the Email Love Library, a free, read-only MCP that lets the agent study real marketing emails and lifecycle journeys before it builds

To write to the canvas, you also need a Full Figma seat and edit permission for the file. The Figma connection must include use_figma, get_metadata, and get_screenshot.

Your agent asks for approval before it writes to Figma. Approve the use_figma calls. Declining them stops the build, even when the connection is working.

Set up your agent

Choose the agent you use and complete that one tab. Each tab installs everything in one pass:

What	What it does
Email Love workflow	Builds, repairs, and migrates export-ready emails in Figma. Five skills.
ESP skills	Write and debug personalization for ten ESPs after export.
Lifecycle calendar	Plans a year of campaign moments in Notion, backed by what competitors actually sent. Also needs the Notion connector.
Email Love Library	Free research MCP at `https://chat.emaillove.com/mcp`: real emails, journeys, and brand insights.
Figma MCP	Lets the agent read and write your canvas. Required for this workflow.

Using Cursor or another agent? The interactive setup at dev.emaillove.com builds the commands for it.

Claude Code
Claude.ai
Claude Cowork
OpenAI Codex

Install the Email Love skills

Run these commands once in your terminal. Skip any line you don’t need:

claude plugin marketplace add email-love/claude-skills
claude plugin install email-love@email-love
claude plugin install emaillove-esp@email-love
claude plugin marketplace add email-love/lifecycle-calendar
claude plugin install competitive-lifecycle-calendar@email-love-lifecycle-calendar

email-love@email-love is the Email Love workflow: the email builder, template repair, the design-system migration pair (audit and converter), and the quality-gates acceptance audit. The next two lines add the ESP skills and the lifecycle calendar.

Connect the Email Love Library and Figma

claude mcp add --scope user --transport http email-love https://chat.emaillove.com/mcp
claude plugin install figma@claude-plugins-official

The first line adds the Email Love Library. The second is the official Claude Code plugin that Figma recommends. To connect Figma manually instead:

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

Start a new Claude Code session. Run /mcp, then sign in to Email Love and to Figma. Confirm that the Figma connection includes use_figma before asking it to build.

Rather have Claude do it? Paste this into Claude Code:

Set up Email Love for me. Run these commands in order:

  claude plugin marketplace add email-love/claude-skills
  claude plugin install email-love@email-love
  claude plugin install emaillove-esp@email-love
  claude plugin marketplace add email-love/lifecycle-calendar
  claude plugin install competitive-lifecycle-calendar@email-love-lifecycle-calendar
  claude mcp add --scope user --transport http email-love https://chat.emaillove.com/mcp
  claude plugin install figma@claude-plugins-official

Then tell me to restart Claude Code and run /mcp to sign in to Email Love
and Figma. After that, confirm the Email Love tools include search_emails,
Figma includes use_figma, and list the Email Love skills you can see.

Roll out to your whole team

To offer the plugins automatically to everyone who works in one of your repositories, add this to the repository’s .claude/settings.json and commit it:

{
  "extraKnownMarketplaces": {
    "email-love": {
      "source": {
        "source": "github",
        "repo": "email-love/claude-skills"
      }
    },
    "email-love-lifecycle-calendar": {
      "source": {
        "source": "github",
        "repo": "email-love/lifecycle-calendar"
      }
    }
  },
  "enabledPlugins": {
    "email-love@email-love": true,
    "emaillove-esp@email-love": true,
    "competitive-lifecycle-calendar@email-love-lifecycle-calendar": true
  }
}

Each teammate is prompted to install the plugins the first time they trust the folder, with no commands to run. Anyone who prefers to opt out sets the plugin to false in their personal .claude/settings.local.json. Each person still connects the Email Love Library and Figma once with the commands above.

Install the Email Love skills

Enable Code execution and file creation under Settings → Capabilities.Download the skills you want, then open Customize → Skills, click + → Create skill → Upload a skill, and upload each one:

emaillove-figma-builder.skill and the other workflow skills from the Email Love workflow release
The skill for your ESP from the ESP skills release
competitive-lifecycle-calendar.skill from the lifecycle calendar release

Connect Figma and the Email Love Library

Open Customize → Connectors, click + → Add custom connector, and add each URL as its own connector. Leave the OAuth Client ID and Secret blank.

https://mcp.figma.com/mcp
https://chat.emaillove.com/mcp

Complete the Figma and Email Love sign-in flows. On Team and Enterprise plans, an organization owner must add the connectors before members can connect them.

Start a new chat

In a new conversation, click + → Connectors and enable Figma and Email Love. Confirm that Figma exposes use_figma, then share your Figma file link and brief.

If use_figma is missing, Claude can plan the email or prepare an AI Import handoff, but it cannot write to your Figma Design file.

Install the Email Love skills

In Claude, enable Code execution and file creation under Settings → Capabilities.Download the skills you want, then open Customize → Skills, click + → Create skill → Upload a skill, and upload each one:

emaillove-figma-builder.skill and the other workflow skills from the Email Love workflow release
The skill for your ESP from the ESP skills release
competitive-lifecycle-calendar.skill from the lifecycle calendar release

Connect Figma and the Email Love Library

Open Customize → Connectors, click + → Add custom connector, and add each URL as its own connector. Leave the OAuth Client ID and Secret blank.

https://mcp.figma.com/mcp
https://chat.emaillove.com/mcp

Complete both sign-in flows. Remote connectors added to your Claude account are available in Cowork too.

Start a Cowork task

Open the Cowork tab in Claude Desktop. Start a new task, enable Figma and Email Love from + → Connectors, and confirm that Figma exposes use_figma. Then share your Figma file link and brief.

Cowork uses remote connectors through Anthropic’s cloud. A local Figma desktop MCP connection is not available inside Cowork.

Install the Email Love plugin

Open Email Love in the Codex Plugins Directory and install it.The plugin includes the email builder, template repair, the design-system migration pair, and a quality-gates acceptance audit, plus templating skills for ten ESPs.

Connect Figma

In the Codex app, open Plugins, click + next to Figma, then choose Install Figma and complete the sign-in flow.For the Codex CLI, connect it manually instead:

codex mcp add figma --url https://mcp.figma.com/mcp
codex mcp login figma

Add the lifecycle calendar and the Email Love Library (optional)

npx skills add email-love/lifecycle-calendar -g -a codex --skill '*' -y
codex mcp add email-love --url https://chat.emaillove.com/mcp
codex mcp login email-love

Skip the last two lines if your Codex plugin already shows an Email Love connection. It includes the same research tools.

Start a new task

Start a new Codex task after everything is installed. Confirm that Figma provides use_figma, then share your Figma file link and brief.

Developer install from GitHub

To test an exact repository release instead of the reviewed public plugin:

codex plugin marketplace add email-love/codex-agents --ref v4.11.4
codex plugin add email-love@email-love

Replace v4.11.4 with main only when testing unreleased work.

First, prepare your design system

Before you build a campaign email, your Figma file needs a working Email Love design system. Choose the route that matches your starting point:

Use your synced design system

If your Email Love components are already synced, the agent can inventory them and start building campaigns.

Migrate a legacy library

Have old Figma templates, ESP emails, or an agency library? Audit and rebuild them as a new Email Love design system before campaign work begins.

Build a new design system

No library yet? Give the agent your best existing email or design. It builds the foundations and reusable modules first.

Building or migrating a design system sends rendered images of your source designs, plus any metadata the agent pins, to the Email Love design-converter service. Remove personal or confidential content first and review the data-handling guidance before using sensitive material.

Build your first email

Once your design system is ready and synced, copy this prompt and replace the brackets:

Using the synced Email Love design system in [Figma file link], build a
promo email.

Audience: [who will receive it]
Goal: [what you want them to do]
Offer or message: [the key facts]
CTA: [one button label and destination]

Match the voice from existing campaigns in the file. Leave missing imagery
as gray placeholders for our design team.

Then the workflow is simple:

The agent checks your file

It inventories the synced Email Love components and studies existing campaigns before it changes anything.

It chooses components

It selects your header, hero, content, CTA, and footer components based on the brief. It never detaches or redraws their internal structure.

It builds on your canvas

Approve the Figma writes as they appear. A normal email takes a few minutes, and the agent reports progress by section.

Your team reviews and exports

Edit copy, swap imagery, and comment in Figma. Then select the finished frame and export it through the Email Love Figma plugin, the same way you export an email built by hand.

What to expect

A build takes minutes, not seconds. Most of the time is spent waiting for Figma canvas operations.
One primary CTA works best. Give the agent one action for each email.
New imagery may stay gray. The agent preserves image blocks so your design team can art-direct them later.
Links are provisional. Verify CTA and image links in the Figma plugin before export.
The result stays editable. Your team can review, comment, and make normal Figma edits.
Building is free. Exports count against your Email Love plan. The Free plan includes five exports per month.

If the build does nothing

Check these in order:

Is use_figma available? If not, the connection is read-only. Connect the official remote Figma MCP, not the desktop server.
Do you have a Full Figma seat and edit access? Read access is not enough for canvas writes.
Did you approve the tool calls? Declining a use_figma request stops the build.
Did you start a new task after installation? Skills and plugin tools load when a new Claude or Codex session starts.
Is the Email Love Figma plugin current? Older releases may not recognize agent-created email frames.

If the agent still cannot write to Figma, ask it for an email plan or use the AI Import handoff instead.

Go further

Advanced Figma MCP guide

Learn how export-safe structure works, use another agent, create email roots, and prepare reusable modules.

Create and sync a design system

Upload your own Email Love components so agents can reuse them in every campaign.

Migrate an existing library

Audit and rebuild legacy email templates without modifying the source.

Add email inspiration

Let the agent search Email Love’s library for patterns, pacing, and subject-line direction.

Get help from an agent

Use read-only diagnosis prompts for structure, preview, setup, and export problems.

Need help?

Email hello@emaillove.com and we’ll respond within a business day.

​What you need

​Set up your agent

​First, prepare your design system

Use your synced design system

Migrate a legacy library

Build a new design system

​Build your first email

​What to expect

​If the build does nothing

​Go further

Advanced Figma MCP guide

Create and sync a design system

Migrate an existing library

Add email inspiration

Get help from an agent

​Need help?

What you need

Set up your agent

First, prepare your design system

Build your first email

What to expect

If the build does nothing

Go further

Need help?