# How we built an email design system for Movember with AI https://emaillove.com/build-email-design-system-with-ai-movember If you’ve ever built an email design system, you know how long it takes. Someone on the design team collects every template, screenshots every module, tracks it all in a big spreadsheet, and then rebuilds each component in Figma by hand. Then a developer rebuilds it all again in HTML and figures out how to get it into the ESP. It’s weeks of work, and most of it is repetitive. Matt and I ran a live session where we did the whole thing for Movember using Claude, Figma, and Email Love. We wanted to use a nonprofit, and Movember sends great email. The full recording is above. This post walks through what we did, what the AI produced, and the questions people asked along the way. If you don’t know us, Matt and I have both been in email for over 20 years. I’ve worked at Campaign Monitor, Sailthru, Liveclicker, Emma, and Lyris, and I started Email Love a few years ago to help email marketers and designers build better emails. Matt co-founded Kickdynamic, which was acquired by Litmus in 2021, and that’s where we worked together. Our Figma plugin now has over 11,000 users. ## The tools we used The workflow uses five pieces: - The Email Love MCP, which pulls a brand’s emails from emaillove.com into Claude, including screenshots, the original HTML, and our brand insights data. - Claude, plus a set of Claude skills that tell it how to work with Email Love and with your ESP’s templating language. This works in ChatGPT or another AI client too. - Figma and the Figma MCP, so Claude can build directly in a Figma file. - The Email Love Figma plugin and builder, which turn the designs into responsive, accessible email HTML. - Your ESP. We exported to Iterable, but the plugin also works with Customer.io, Braze, Klaviyo, Salesforce Marketing Cloud, and others. ## The skills do most of the heavy lifting Skills are instructions that tell your AI agent how to do a specific job. We’ve built four for this workflow, and you can take them and customize them for your own process: - Migration audit looks at your existing emails and inventories the components and templates you have. You can give it emails from our MCP, raw HTML, images, or Figma files. - EDS converter builds the design system in Figma, including the layouts, typography, and color styles. - Figma builder creates templates and campaigns from a brief using your design system. - Quality gates checks that everything is built correctly before you ship. The skills are free on our GitHub. ## We pulled Movember’s emails into Claude with the Email Love MCP The first step was a single prompt asking Claude to find Movember on emaillove.com and pull in their emails. You can watch it work in real time. It searched for the brand, pulled the Movember emails we have in the library, and then searched for any other emails that mention Movember. It also pulled our brand insights for Movember, which is the same data you see on a brand’s insights page on emaillove.com: send times, the email platform they use, email width, button styles, fonts, and so on. That’s useful for strategy as well as design. In Movember’s case it confirmed they send from Salesforce Marketing Cloud. I used Opus 5.5 for this part. For building the actual design system, I’d recommend the most capable model you have access to, since that’s a much more resource-intensive job. ## The audit found 23 modules across 21 emails Next we asked Claude to run the migration audit. This takes about 10 minutes, so in the session I showed one I’d run the day before. It produces a summary, findings, a full inventory of modules, the spacing and mobile styles, and the color palette. For Movember it found 21 emails sent through Salesforce Marketing Cloud and catalogued 23 distinct modules. That included one preheader, six single-column modules, three image styles, three header options, and four two-column sections. It flagged which modules could be converted to live text, and it estimated that a designer would need four to six days to build the full library by hand. The audit also asks you to make decisions where the emails disagree with each other. It found one square button and one pill-shaped button, so it asked which style we wanted. Same with corner radius and email width. That makes sense when you’re looking at emails sent over a long period, because templates change. It caught some things I didn’t expect, too. It found a few typos, and it found old tracking pixels from Oracle Eloqua and Validity Everest that don’t look like they’re being used anymore. You might want to run this on your own emails just to see what turns up. ## We built the Figma foundations, then the components in batches With the audit done, we asked Claude to build the foundations of the Figma file. It created a cover page, a getting started guide, pages for typography, buttons, and foundations, and one page per component category. Then we built the components. We recommend doing this in batches of 10 to 15 at a time. You could ask for 100 components at once, but that’s a big job, and smaller batches give you better quality because the model is less likely to rush or get things wrong. You should also run the quality gates skill on each batch. I had these as two separate prompts, but you can combine them and ask Claude to check each batch as it builds. ## The finished design system has 33 modules across eight categories The final Movember design system came out at 33 modules across eight component categories, at 600 pixels wide with content in a 560 pixel container. It’s all based on Movember’s actual HTML, so Claude isn’t making things up. If you have a brand guide, upload that too and it will apply it. The getting started guide Claude wrote is surprisingly detailed. It covers dark mode, contrast, and spacing. I also asked it to create headings for each component and to document each one, so every component has notes beside it telling a designer how to use it. The buttons are components themselves, nested inside the bigger components. So if you change the button color in one place, it updates everywhere that button is used. That’s the main benefit of building a design system in Figma: if you change your logo, fonts, or brand colors, you make the change once at the design system level. Because Claude is using the Figma MCP, it knows Figma well and can use its features properly. All of the modules are parent components with variants and properties, including on and off toggles for buttons, text, and images, so you can edit content from the properties panel or directly inline. On fonts, make sure your design system uses email-friendly ones. If you have a custom font, give Claude a Google Font option and a web-safe fallback, and build those into the system. We’re planning to publish the Movember file to our Figma Community page so you can look through it yourself. ## Dark mode still needs testing Matt asked me to talk about dark mode because it came up in the chat. The plugin has an appearance tab where you define your dark mode theme and styles. Those work on iOS devices for the most part, so Apple Mail and iPhones. Outlook and Gmail tend to invert colors on their own, so an orange might turn brown, and there’s not much anyone can do about that. What I’ve found works best is making the components transparent and putting the background color on the email frame instead. Then you can define other colors for buttons and text at the template or component level if you need to. It still takes some testing. I used Inbox Monster to check how the Movember email rendered in dark mode across clients. Not everything will be perfect in every client, but that’s email, and you’ll run into the same issues with any builder or Figma plugin. ## We exported to Iterable and kept Figma as the source of truth In the session I exported the email to Iterable, changed some copy in Figma, and re-exported. The template in Iterable updated straight away. The way I think about it is that Figma is the source of truth for your templates, not your ESP. If you ever switch ESPs, or add something like HubSpot or Marketo to your stack, your templates are all still in Figma and you can export them anywhere. It makes migrating between platforms much less painful. The bigger reason I like this workflow is that nobody has to rebuild anything. Designers stay in Figma, where they already work. Marketers can work in Figma or in the Email Love builder. You go from design system to campaign to ESP without rebuilding components or HTML in a drag-and-drop tool. You can also save components to the plugin, and they stay linked to the parent component in Figma. When I changed a component in Figma and resynced, it updated in the plugin. If you then add a saved component to an email, it becomes a child component, so edits in that email don’t affect the parent. ## You can build campaigns from the design system too Once the design system exists, you can ask Claude to build emails from it. My prompt in the session was very simple, and the result used a generic image because I didn’t give it one. In real life I’d give Claude the campaign brief you’d normally give a designer, along with the copy, images, links, and alt text. It also helps to tell Claude which components to use. If you give it access to everything, you may not get what you want. If you say use this hero, this footer, and this content block, you’ll get much closer. Another option is to build separate design systems for different email types, like one for newsletters and one for promotions or transactional emails. That limits what Claude has to choose from and gives it a better starting point. Or give it a template. That’s how I build our own newsletter: I give Claude my template and the copy, and it fills in the featured emails and the stories for that week. ## Questions from the session Does it work with Adobe Fonts? Yes. A customer asked for it and we added it recently. Adobe Fonts won’t render in every email client, but where the client supports them, we embed them in the HTML. We already built a design system with Email Love. Can Claude make changes to our components? Yes, you can give Claude the Figma link and ask for changes. I’d still use the migration skill so everything follows the Email Love structure of wrappers, rows, and columns, because that’s the structure the skills teach Claude to use. An existing design system is actually a great starting point. Claude can organize it, document it, add the foundation pages, and set up the component properties. Matt also pointed out that you can then ask Claude to build templates from it, like a full lifecycle journey. If we have text over an image in a hero, does the plugin flatten it into one image? You can do HTML text on a background image, but dark mode is the problem. Black text can get turned white and look terrible. My recommendation is to flatten heroes like that into a PNG. The nice part is you can keep it editable in Figma, so your designers can change the copy or add a logo or button inside the image block, and the plugin flattens it on export. If you have an existing component with live text over a background image, you can ask Claude to turn it into an editable image component for Email Love. Should we still use live text, or is it fine to go image-based? Use live text as much as you can. You don’t need everything to be live text, and a hero like the one above is fine as an image. But live text is easier to read on mobile because it scales with the device, and AI summaries in the inbox don’t necessarily read text inside images. Lots of brands send image-only emails, but I think it’s the lazy way to do it. Matt’s view is that the right answer is a good balance of images and live text, and that the plugin makes that balance easier, because you’re not chopping up a Figma design and rebuilding it in your ESP. Do you only export HTML, or can you export into builders like Beefree or Really Good Emails? We export directly to the major ESPs, including Iterable. We don’t export into Beefree or Really Good Emails because they don’t have an API that allows it. If they added one, we’d build the integration. How much design freedom do you have compared to an ESP’s builder? I’d say it’s similar to an email builder, just inside Figma. At the end of the day it’s tables, rows, and columns, generated through MJML. You won’t be putting video or layouts that don’t work in email into it. Things like mobile styling work much like they do in Stripo or Beefree. Can Claude help with UTMs? It probably can, but UTMs are usually handled in the ESP, and most of the big ones append them automatically once you set them up. You can also add them in the plugin’s template properties, and you can ask Claude to add UTMs, preheader text, and the subject line there for you. Is it common to use this process without the Email Love builder? Very common. The plugin and the builder can be used separately. Most customers who use the builder want a tool outside Figma for a CRM team that doesn’t want to work in Figma. The design team builds everything in Figma and syncs it to the builder, and the CRM team updates copy, images, and links, runs tests, and exports to the ESP. Customers also add Liquid or Handlebars for dynamic content, either in the builder or directly in the Figma components. What counts as a shared design system and an AI import on the plugin pricing page? A shared design system is one like the Movember system that can be shared across a team, so several people can work with it. AI imports are a separate feature from what we showed in the session. They let you take an image or Figma file and convert it into an Email Love compatible design using the AI built into the plugin, which runs on the Claude API. It’s a quick way to try things out. For a whole design system or 20 templates at once, Claude or ChatGPT is more scalable, and we have a new version of the import coming that will let you create a design system from inside the plugin too. ## How to get started Here’s what you need: - Figma, with the Figma MCP enabled in Claude or ChatGPT - Claude or ChatGPT - The Email Love MCP (you may need your IT team to install it) - Our Claude skills - The Email Love Figma plugin, and the Email Love builder if you want a more locked-down environment for your team - Your email platform In the session we pulled Movember’s emails from emaillove.com, audited them, built a documented Figma design system with variables and component properties, built an email from it, saved the components to the plugin, and exported to Iterable. The whole process takes 30 minutes to an hour depending on how many components you need. I’d guess doing that by hand would take you a lot longer. If you have questions, email us at hello@emaillove.com or connect with Matt and me on LinkedIn.