AI HTML Email Export Review: What Broke When Converting a Figma Email Design to HTML

Point Claude AI at a Figma link, add a prompt, and in about 10 minutes you’ll have a full HTML email sitting in front of you. That’s the promise behind AI HTML email export, and on paper, it’s a great one. Coding an email manually, including tables, inline styles, and Outlook conditionals, usually eats up half a day or more.

The excitement isn’t hype, either. Developers using AI coding assistants report saving close to 3.6 hours a week on routine work (DX data, via Uvik Software, 2026). That’s real time back.

But speed on paper is one thing. Design fidelity is another. 

We wanted to see the gap for ourselves. So we took a real Figma email design, ran it through Claude AI’s export, and compared the result against the original, section by section, image by image.

Here’s what we found: the export is fast, but it’s not a clean handoff. Six categories of issues showed up: background images, mobile layout, list spacing, Gmail’s Android app, CTA buttons, and Dark Mode, and every one of them needed a manual fix before this file was anywhere near production-ready. 

Let’s cut to the chase and learn more about converting from Figma to HTML email using AI.

6 Key issues you may encounter when converting a Figma Email Design to HTML 

Below are the key issues we found during the comparison. 

1. Background images get dropped, not recreated 

The conversion from Figma to HTML email using AI ran into its first snag with background images. In the original design, several content blocks sit directly on top of full-bleed background images, text and buttons layered over a photo, say. 

Figma Design:

Claude AI Exported HTML:

In the export, that background disappeared. The content generated fine, but the image behind it never showed up. The section looked flattened compared to the design, like someone had switched off a layer. 

This isn’t really a Claude AI problem, to be fair. Background images are one of the trickier things to code in HTML email to begin with. Native support is limited across clients, and Outlook still needs VML fallbacks to render them at all. 

So it’s a known hurdle for human developers too. But it’s a category the export consistently under-handles, not a one-off miss. If your design leans on background imagery, plan on hand-coding those sections using email-safe techniques; don’t expect the AI export to carry them over.

2. Mobile layout builds its own structure, not Figma’s

Claude AI does generate a mobile-responsive version of the email; that part works. The problem is it builds its own responsive structure instead of following the Figma mobile frame. 

This shows up most when a separate Figma mobile design wasn’t handed over as a reference. Without that guide rail, the AI makes its own calls, and those calls don’t always match what you’d approve. Here’s what we saw specifically:

• Inconsistent spacing between sections, some tighter and some looser than the design called for
• Uneven left-right and top-bottom padding across blocks that should have matched
• Content stacking in a different order than the Figma mobile frame showed
• Elements losing their intended visual hierarchy once the layout collapsed to a single column
• The overall mobile layout needing a full manual pass before it was usable 

Figma mobile design:

Think about it. Responsive email design is already one of the harder problems in this field, since every client interprets media queries a little differently. Layering AI-generated structure on top doesn’t remove that complexity; it just moves it. 

Treat this output as a rough first pass on mobile, not a match. Developers still need to manually align breakpoints and spacing to the approved design before anything ships.

3. Bullet lists break in Outlook

Bulleted lists in the exported HTML looked fine everywhere, until we opened the email in Outlook. There, the lists picked up extra spacing and indentation that wasn’t in the design. 

That’s because Outlook desktop doesn’t render HTML email through a browser engine. It renders through Microsoft Word’s engine instead, and that’s exactly why lists, margins, and spacing behave unpredictably there, a well-documented quirk (Litmus, “The Ultimate Guide to Bullet Points in HTML Email”).

Human developers have workarounds for this: explicit margin and line-height resets, or coding bullets manually instead of relying on native <ul>/<li> tags. The AI-generated markup skipped all of that. So, that’s practically about AI-generated HTML email limitations.

So this stays a manual QA step for now. If your template uses lists, check them in Outlook specifically before you approve the send; don’t assume they’ll carry over the way they looked in the preview.

4. Two-column sections shrink instead of stacking in Gmail’s Android app

Here’s a subtler one. Two-column sections in the export scale down instead of stacking vertically, but only in the Gmail app on Android. The same layout stacks correctly across most other mobile email clients, which is what makes this an inconsistency rather than a universal mobile problem. 

That narrow scope doesn’t make it small. Apple and Gmail together account for roughly 90% of global email opens (Litmus Email Analytics, Feb 2026), so a rendering gap specific to Gmail’s Android app still reaches a huge share of any list. Gmail’s Android app has also historically lagged iOS and desktop clients on media query support, so this isn’t a new pain point for email developers, either.

We only caught this through HTML email client testing on Email on Acid, running the export across real clients rather than eyeballing it in one inbox. It’s a good reminder: a code export on its own doesn’t catch client-specific AI-generated HTML email rendering issues like this. Real cross-client testing does.

5. CTA buttons don’t render the same way twice

CTA buttons rendered inconsistently across the devices and clients we tested. In some cases, the button text wrapped onto two lines instead of sitting on one, which sounds minor until you remember the CTA is often the entire point of the email. 

Bulletproof buttons in HTML email need fixed widths, careful padding, and specific font-size handling, usually paired with VML for Outlook, to guarantee the text stays on a single line. Generic AI-generated button markup tends to skip these safeguards.

It’s a small piece of code with an outsized failure mode. A button is the highest-visibility element in most emails, so a wrapped line or a misaligned button jumps out immediately, even to someone who wouldn’t notice a spacing issue elsewhere. Give every export a dedicated manual QA pass on CTAs before you send. 

6. Dark mode turns some images solid black 

In Dark Mode, some images in the export rendered as solid black blocks. The export didn’t automatically invert their colors, and it also skipped the strokes or outlines that would have kept those images visible against a dark background. 

There was a secondary issue too: some section background colors shifted under Dark Mode in ways that didn’t match the client’s approved brand colors.

This matters more than it used to. Roughly 35% of measured email opens now happen in Dark Mode as of 2026, up from 28% a year earlier (Stripo data, via 99 Coupons Journal, 2026). That’s over a third of your audience potentially seeing broken visuals, not an edge case you can skip.

Dark mode email compatibility still needs a human hand. When a client has specific Dark Mode requirements, developers need to manually add image strokes and set explicit colors. The AI export doesn’t handle brand-specific Dark Mode direction on its own. 

Wrapping up 

So here’s where that leaves us. We ran one real design through Claude AI’s HTML export, and six categories needed manual correction before it could go anywhere near production: background images, mobile layout, list spacing, Gmail’s Android app, CTA buttons, and Dark Mode. 

So use the export as your starting point, not your final file. Run every AI-generated email through a proper design-fidelity check and a real cross-client test before it ships.

That’s exactly the kind of review our team does at Email Mavlers, taking an AI-generated export, or any email build, through design-fidelity and cross-client QA before it goes out the door. If you’d like a second pair of eyes on yours, we’re happy to take a look. Connect with us today.