Skip to main content
Design an email in Claude’s design tool, export it, and bring it straight into Migma as a fully editable email. Claude builds designs as React / JSX components (for example, Claude Artifacts), so Migma takes that export and converts it into a real, email-safe email you can refine, preflight, and send. The result is built for 100% inbox compatibility and renders reliably across Outlook, Gmail, Apple Mail, and mobile.

​
How it works

1

Design in Claude

Build your email in Claude’s design tool. Claude exports the design as React / JSX components.
2

Export as a .zip

Download the design as a .zip of the React / JSX components.
3

Open the add-content menu in Migma

In the Migma create / chat input, click the + (plus) button to open the add-content dropdown.The plus add-content dropdown in the create input, with React / JSX to Email in the list
4

Choose “React / JSX to Email”

Select the menu item labeled React / JSX to Email. This is the Claude-design import.
5

Pick clone or adapt, then upload your .zip

The Import a Claude design dialog opens. Choose whether to clone the design exactly or adapt it to your brand, then click Choose .zip file and pick the export. Migma reads the zip and converts each email component into an editable email.The Import a Claude design dialog showing the Clone exactly and Adapt to my brand options and the Choose .zip file button
The Claude-design import is the React / JSX to Email menu item. If you’re looking for “Claude” in the menu, look for React / JSX to Email instead. That’s the one.

​
Clone or adapt

When you open the dialog, you pick how Migma should treat the design:

Clone exactly

Keep the colors, layout, and styling as designed. A faithful, 1:1 translation of the design you built in Claude. This is the default.

Adapt to my brand

Re-theme with your brand colors, voice, and remembered preferences. Migma keeps the layout, structure, and content of the design but maps the palette to your brand.
When you choose Adapt to my brand, Migma maps the design’s colors to your brand by role: page background, accent / CTA fill, body text, and muted text. Where your brand doesn’t define a color for a role, the design’s original value is kept. Either way, you can keep refining in chat after the import lands.
Both options preserve the layout and structure of your design. The difference is purely the color palette and brand voice: Clone keeps the design’s own colors, Adapt swaps in yours.

​
What happens under the hood

The import runs in two stages:
1

Convert React / JSX to email source

Migma reads each email component in your export and translates it into editable Migma email source, applying your clone-or-adapt choice. If your export contains more than one top-level email component, you get one editable email per component.
2

Compile email source to HTML

That source is compiled through Migma’s deterministic engine into email-safe HTML. Claude Design, Figma, HTML, and Screenshot imports use the same engine.

Native React / JSX

Claude exports React / JSX, and that’s exactly what this import takes. No screenshot or redraw step in between.

Email-safe HTML

Compiles through Migma’s email engine, so the markup can be reviewed before send.

Renders reliably

Review Outlook, Gmail, Apple Mail, and mobile before send.
Faithful to the design you built in Claude (or re-themed to your brand, if you chose Adapt)
Stays consistent in dark and light mode. Migma emits explicit color-scheme metadata
Lands as a normal Migma email you can keep editing

​
After import

Once you upload the zip, Migma takes you into the chat / canvas and the converted email (or emails) stream in. From there each one behaves like any other Migma email:
1

Refine

Adjust copy, layout, colors, and images in the chat or the visual editor.A converted Claude design open and editable in the Migma editor
2

Preflight

Run Email Preflight to check how it renders across clients and devices before you send.
3

Export or send

Export the email or send it like any other Migma email.
Don’t try to land the final version on import. It’s faster to convert first, then refine in chat: “make the header smaller,” “swap in my logo,” “tighten the spacing between sections.”

​
Dark mode and client rendering

Migma emits explicit color-scheme metadata, so your email stays consistent and renders predictably in both dark and light mode. You get a controlled, intentional result across clients rather than colors flipping unpredictably when a reader has dark mode turned on. For a full picture of what’s supported where, see the client compatibility guide.

​
Claude Design vs other import methods

Claude DesignFigma ImportImage CloneHTML Import
InputReact / JSX .zip from ClaudeFigma file URLScreenshot or mockupExisting HTML source
Brand optionClone exactly or adapt to your brandAI conversionAI + OCRDirect import
Email-safeYes, compiles through Migma’s email engineYesYesYes
Best forEmails designed in ClaudeOriginal Figma designsCompetitor emails, mockupsMigrating code
Setup neededExport the .zipFigma file accessNoneHTML source
If you designed the email in Claude, the Claude Design import is the most direct path. It takes the React / JSX export natively, and the clone-or-adapt choice lets you decide up front whether to keep the original look or retheme it to your brand.

​
Troubleshooting

Cause: The Claude-design import isn’t labeled “Claude.”Solution: Click the + button in the create / chat input and choose React / JSX to Email. That menu item is the Claude-design import.
Cause: The import expects a .zip of the React / JSX components. If the zip has no JSX modules inside, Migma can’t tell it’s a Claude design export.Solution: Export the design from Claude as a .zip and upload that file, not the individual files or a screenshot.
Cause: The clone-or-adapt choice controls the palette. Clone exactly keeps the design’s own colors; Adapt to my brand swaps in your brand colors.Solution: Re-run the import with the other option, or just refine the colors in chat after the import lands.
Cause: The converted email is a starting point, not a final draft.Solution: Refine it in chat or the visual editor, then run Email Preflight before you send.

​
What do you want to do next?

Edit your email

Click into any part of the imported email to tweak text, images, or colors.

Preflight before sending

Check how your email renders across clients and devices before it goes out.

Client compatibility

See how Migma keeps emails rendering reliably across major clients.

Figma import

Bring a design in straight from your Figma file.

Clone from image

Recreate any email from a screenshot or mockup.

HTML to Email

Convert an existing HTML email into a fully compatible Migma email.