Supported by

Until now, AI email builders have relied on guessing. They guess your mobile layout. They scrape your website and hope they land close to your brand. They drop in an over-saturated, AI-generated image and call it a hero.

We knew there had to be a better way. One where AI builds strictly from your actual design system and brand guide.

This week, we are thrilled to release Email Love Claude Skills and ChatGPT Codex Agents. This completely changes the email build process. It is a way to arm the AI agent you already use with the Email Love Figma plugin, empowering it to build responsive, 100% on-brand emails right inside your own Figma file, using your own design system.

We honestly think this is the future of email design and development.

One honest note before you dive in: this does not produce a perfect, ready-to-send email. It gets you about 90% of the way there, fast. You still read the copy, check how it looks on mobile, and do your own QA before you hit send. Think of it as a serious head start on production, not a shortcut around it.

How to build emails with AI in Figma

You need three things to start:

• Claude or OpenAI Codex (whichever agent your team already uses).
• The official Figma MCP (connected to that agent with access to your file).
• The Email Love Figma plugin

Install the Claude skills or the Codex plugin, and from there you can build your design system and then start shipping campaigns directly from the chat box.

Step 1: Build your design system

Everything the agent makes stands on your design system, so you build that first, and we’ve made it super easy to build.

• If you have an existing component library or design system: The agent audits what you have and rebuilds it as a working Email Love design system, without touching your original file. A file that was eyeballed gets rebuilt to clean email standards so your brand sits on a sound foundation, not a pixel-perfect copy of an old guess.
• You are starting fresh: Point it at a single design you like, and it turns that into your first reusable components. Your first email doubles as the first piece of your library.

It builds them the way a designer would: real Figma components with properties, variants, and auto layout. A swatch swaps its color, a button switches to its ghost variant, and a section flows when the text runs long. It even documents the system so a teammate who did not build it can actually navigate it.

We uploaded some old Figma files designed for JustFoodForDogs years ago, and it created this really useful style guide.

Step 2: Build your email campaigns

Now the fast part. Give the agent a campaign brief in plain English, or build an email with it turn by turn in Claude or Codex.

A good brief carries three things: what the email needs to do (announce, promote, welcome, win back), the offer or the news itself, and the audience it is going to. Point it at supporting material too if you have it: a landing page, a past email, a brand you like the tone of. From there it selects the right components from your library and assembles a first draft.

Building a whole lifecycle program in one session is the same workflow, not a longer one. Ask for the six-email onboarding sequence, or the whole holiday push, and it lays each email out as a separate frame in your file.

The email appears in your Figma file, where you and your colleagues review and comment on it like any other design. Because the underlying components are still real Figma components, your designers can grab a section and edit it directly. You can also ask the agent to iterate: “make the hero shorter”, “swap the testimonial for social proof”, “try it without the pricing row”.

When it looks right, open the Email Love plugin, preview it, send yourself a test, and export straight to your ESP. You are still the one who hits send.

Step 3: Export responsive email HTML to your ESP

Email HTML is a dark art: nested tables, Outlook fallbacks, inline styles, and years of inconsistent rendering quirks. When AI attempts to guess this code from an image, the result is a coin flip. Layouts shift, accessibility vanishes, and brand standards drift.

So we do not ask the AI to write the HTML.

Here is what actually happens:

• The AI handles the design: The agent works inside your Figma file through the official Figma MCP. It builds responsive, on-brand components assembled directly from your design system.
• The Plugin handles the code: Once the design is approved, you export it using the Email Love plugin. It applies a battle-tested export engine refined over years of production sends, generating bulletproof table structures, dark-mode support, and the correct merge tags for your ESP.
• The AI never touches the HTML. That clear separation between design and code is what makes the output 100% dependable.

Why every email stays on-brand

Because the agent builds from your components, it cannot go off-brand. It does not invent a font. It does not shift your colors a shade. It does not improvise a layout that almost looks like yours. It uses your header, your hero, your buttons, and your type, because those are the pieces it is given.

On-brand is not a setting you switch on afterward. It is baked in, because the raw material is your own system. Here is an example design system that ChatGPT Codex created in around 20 minutes

We built 37 lifecycle emails this way

An agent built 37 emails in one working session, inside our Figma file: hero sections, alternating feature rows, case-study blocks, pricing rows, all assembled from synced components. Every one was reviewable and commentable by the team in Figma, and export-ready through the plugin. We actually still did a lot of editing and adjustments in Figma after the emails were generated, but it cut down the production time significantly.

Get Started Today

It runs the same on both agents. On Claude, there are three skills that load automatically when you ask it to build an email or design system. On OpenAI Codex, it is a plugin with two skills, loaded on demand.

• Full Setup Guide: help.emaillove.com/plugin/ai/agents-in-figma
• Claude skills: github.com/email-love/claude-skills
• Codex plugin: github.com/email-love/codex-agents

If you already have an Email Love design system, you can build emails with an agent right now. If you have an old library, run the read-only audit first. Either way, the next email your team ships is built on your brand, not on a guess.

Let us know what you think!

Much love,
Andy

Email: [email protected]
Twitter: @emaillove