Big Idea

The argument in one line.

Combining Claude's HTML generation with its Figma connector collapses the email design workflow into a single voice-driven session, with image rendering as the only remaining manual step.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

You do email marketing for an e-commerce brand and want to cut design production time significantly.
You use Klaviyo and want a fully editable Figma template as your starting point, not a static export.
You have used Claude for copy but have not tried attaching product URLs and reference emails together in one prompt.
You want a concrete example of a voice-to-prompt workflow (WhisperFlow + Claude) applied to a real production task.

SKIP IF…

You need a finished, copy-ready email -- this produces a structural skeleton that still needs copy editing.
You do not use Figma -- the second half of the tutorial does not apply.

TL;DR

The full version, fast.

The host builds a Gymshark promotional email entirely through voice prompts to Claude, attaching the product URL, product images, a logo, and two ReallyGoodEmails reference templates. Claude returns two HTML versions: an embedded self-contained file and an ESP-ready version with Klaviyo image placeholder tokens. A second voice command pushes the design into a Figma file as native editable layers. Images do not populate automatically, so the host fills them manually from the Gymshark site. The result is a near-complete 'FOR THE RESETS.' campaign email -- hero image, product CTA, 'Complete the Look' grid, footer -- ready for font swaps and copy polish before Klaviyo upload.

Free for members

Chat with this breakdown — free.

Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.

Create a free account →

Chapters

Where the time goes.

00:00 – 00:54

01 · Intro — talking not typing

Host sets up the demo: Claude + WhisperFlow, target brand Gymshark, stick around for the final design.

00:54 – 01:35

02 · The master prompt (voice)

Full prompt dictated via WhisperFlow: expert email strategist role, brand Gymshark, product link, images attached, two reference emails, logo, footer spec, ecommerce best practices.

01:35 – 02:52

03 · Attaching assets

Host navigates to Gymshark product page, copies product URL, drag-attaches product images, opens ReallyGoodEmails to find two Gymshark reference layouts, attaches them all.

02:52 – 03:32

04 · Claude's output revealed

Claude returns a near-matching Gymshark email structure with 'FOR THE RESETS.' headline, hero block, product CTA, 'Complete the Look' grid, and footer. Host reviews and issues Figma push command via voice.

03:32 – 04:04

05 · Push to Figma

Claude's Figma connector drops the HTML into a native Figma file as editable layers. Skeleton is clean but images are missing placeholders.

04:04 – 05:40

06 · Manual image fill

Host fills each image slot in Figma by selecting fill > image and copying product shots from the Gymshark website. Also screenshots the Gymshark logo and pastes it into the header.

05:40 – 06:43

07 · Final result and wrap

Completed email reviewed: hero image with model, product CTA block, 'Complete the Look' product grid with hoodie and joggers. Host acknowledges CTA placement and font fallback (Inter) as minor issues, recommends testing for your own brand.

Atomic Insights

Lines worth screenshotting.

Claude can scrape a product page URL directly -- no manual image download needed for the prompt input, only for Figma image fills.
Providing two real brand reference emails from ReallyGoodEmails produces layout fidelity that a zero-shot email prompt cannot match.
Claude's Figma connector writes native editable layers, not a flattened image -- every text block, CTA button, and section is independently selectable.
Image rendering is the predictable failure mode: Claude generates correct-sized image slots but cannot populate them reliably across sessions.
The ESP-ready HTML version uses Klaviyo-compatible CDN placeholder tokens -- swap the URLs and the email uploads cleanly to any Klaviyo account.
Voice-to-prompt via WhisperFlow removes the typing bottleneck and lets you dictate multi-paragraph creative briefs in real time, including corrections.
Font fallbacks are automatic (Claude substituted Inter for Gymshark's brand font) -- replace manually in Figma before handoff to avoid brand inconsistency.
The full email layout -- header, hero, product block, Complete the Look grid, footer -- is determined in a single prompt, not through iterative back-and-forth.
Attaching the brand logo separately as a screenshot is still a required manual step; Claude cannot reliably extract logos from product page scrapes.
Total time from first voice prompt to Figma skeleton is under 5 minutes; manual image fill adds roughly 5-10 minutes more.

Takeaway

Three inputs that make Claude's email output actually match the brand.

WHAT TO LEARN

A zero-shot email prompt to Claude produces generic output; three specific inputs -- product URL, real brand reference emails, and explicit layout spec -- produce layout-accurate, Klaviyo-ready HTML.

Attaching the product URL directly lets Claude scrape title, price, and description in one step instead of you transcribing product details into the prompt.
Two real brand emails from ReallyGoodEmails teach Claude the actual layout structure, section order, and footer format -- replicating what words alone cannot convey.
Specifying footer and general layout requirements explicitly in the prompt prevents Claude from defaulting to a layout that does not match how the brand actually sends email.
Claude's Figma connector writes native editable layers, not a flattened export -- every text block, button, and section is independently editable before you push to Klaviyo.
Image slots in the HTML will be structurally correct but visually empty; plan 5-10 minutes to manually fill them in Figma by copying images from the brand's product pages.

Glossary

Terms worth knowing.

WhisperFlow: A voice-to-text tool that transcribes speech directly into a text input field, used here to dictate all Claude prompts without typing.
ESP-ready: An HTML email version formatted for upload to an Email Service Provider like Klaviyo, using CDN-hosted image URLs instead of embedded base64 data.
Figma connector: A Claude integration that gives Claude read/write access to a Figma file, allowing it to create and edit native Figma layers via the API.
ReallyGoodEmails: A curated library of real brand email examples, searchable by company -- used here as a source of Gymshark reference layouts for Claude to imitate.
Klaviyo: An e-commerce email marketing platform commonly used with Shopify; emails are uploaded as HTML templates with image URLs pointing to Klaviyo's CDN.

Resources

Things they pointed at.

00:00toolClaude (Anthropic) ↗

00:10toolWhisperFlow

02:31toolReallyGoodEmails ↗

03:06toolFigma ↗

06:32toolKlaviyo ↗

Quotables

Lines you could clip.

00:10

“I'm literally just gonna speak into Claude. I might type, like, one or two things.”

zero setup needed, immediately demonstrates the concept→ TikTok hook↗ Tweet quote

06:32

“You literally just talk to it, give it some links, give it the product you wanna push.”

tight summary with no setup required→ IG reel cold open↗ Tweet quote

06:12

“You can't really tell me that this is a terrible email. It's actually pretty solid.”

honest admission of quality -- quotable because it's not hyperbolic→ newsletter pull-quote↗ Tweet quote

The Script

Word for word.

Read-along

Don't just watch it. Burn it in.

See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.

analogystory

00:00You're very welcome back to another video. And in today's one, we're gonna go through something very, very exciting that I've been working on and playing around with a lot over the last two to three weeks, and that is creating full email designs with Cloud. Now we recently recorded another video going through how I did a full email with AI, but since then, I've been playing around a lot with this platform.

00:14And to be honest, the results are so, so much better. So I'm not even gonna type in this video. I'm literally just gonna speak into Claude.

00:20I might type, like, one or two things, but we'll dive straight into the process. So we have Claude open here, and what we're gonna do is we're gonna design a full email for Gymshark. We're just gonna pick them as the example brand here for this video.

00:30So what we're gonna do is I'm probably gonna start off with a prompt. I'm gonna use WhisperFlow to just talk into Claude, and we'll just proceed with the process. So this is pretty cool, so make sure to stick around for the end of the video to see the actual design.

00:41So here we go. I want you to act as an expert email marketing strategist, and we are going to build a full HTML email design for the brand Gymshark. What I want you to do is take the exact product that I'm gonna link down below and create a HTML design.

00:55I'm also gonna include the exact images that I want you to use within this HTML design. It's super important that you make sure that the images are rendering within the HTML design.

01:07On top of that, I'm also gonna give you two examples of previous emails sent out by Gymshark, and I want you to copy the exact same email design structure as previous emails. I'll also attach the logo for Gymshark so you can use that at the top of the email. It's super important that you act as an expert email designer as well in order to follow email marketing design best practices for ecommerce brands.

01:29Please pay close attention to the details within the example emails, especially for the footer and the general layout so you use the exact same structure. Okay. So now we have our prompt in.

01:38What I'm gonna do is I'm just gonna link to the product page that we're gonna use here, and what I'm also gonna do is I'm just gonna a few images. So if I head over to the Gymshark website, I'm just gonna pull the exact link so Claude can actually just scrape the website, and I'm just gonna say images are attached.

01:52So what we'll also do is just go back over to the product page, and what we're gonna do is, whoops, we're just gonna copy some of these these images, and we're just gonna put them in. And, again, like, is a very quick, very simple example of what this can do.

02:04And to be honest, the results are pretty, pretty amazing. You'll also see, like, later on, uh, in this video that you're actually able to push these, uh, email designs that Cloud comes up with into Figma. So if you have Figma set up as a connector in your in your Cloud account, you'll basically be able to, um, to push that straight into Figma so you can actually make edits, um, if needed.

02:22But to be honest, the results from this look pretty solid. The only thing I will say is sometimes the images won't render correctly. So if you just go back, reprompt, Claude, it will actually probably put those in.

02:31Now what I do wanna also do is, well, as I wanna head over to really good emails, and we wanna pick just two simple example emails just so it gets an understanding of the typography, the layout of the email, and, uh, generally, you know, just the look and feel that we're kinda looking for here. So let's head back to Claude, we have all of our images.

02:46Let's just double check, and I think we're good to go. So what we're gonna do now is just leave that do its magic. So we'll come back in a second and see what it actually comes up with.

02:54Okay. So I came back with the design. And to be honest, it's really, really not that bad at all.

02:57It's pretty, pretty solid. It definitely follows the exact same structure that, uh, Gymshark used for most of their emails. But you can see it's putting the images quite nicely here as well.

03:06Haven't even put down a complete look now to be fair. They probably should have put in they probably should have put in joggers there as well. But the important thing is what we can do here is we can actually push this into into Figma.

03:14So what we're gonna do is we're actually gonna go back to the chat and say, hey. Look. We wanna push this into Figma, and I'll give it the exact project or not even project, but file that we wanted to put into.

03:22So I'm just gonna x out of this for a second, and what I'm gonna do is I'm gonna go go over to Figma and just copy the link of the file that I actually wanted to push it push it into, and we're just gonna talk to it again. Again, not really doing much typing here. Please drop this HTML design into a Figma file, which I've attached attached down below.

03:38Please also make sure that this is fully editable within Figma. Okay. So now what it's gonna do is hopefully it'll push into the exact Figma file that I want it to go into.

03:47So we're gonna leave that, try and figure that out, and we'll see what it comes up with. Okay. So now it's actually pushed the email into Figma, you can see it's kinda still, like, working on things here.

03:54I think it's, like, struggling to pull the actual images over into the email design. But if we go over to Figma, can see that we have the complete skeleton here looking pretty clean, to be honest, and all absolutely edible edible, I should say. So what you can actually do here is instead of, like, just waiting for to pull in the images, and I've actually seen this with Claude sometimes as well, what we can do is we can just, like, kind of highlight it a little bit, go into the fill, and we're just gonna select image here.

04:14And what we can do is we can actually, like, head back to the Gymshark website, just copy an image, add them back into the design. Let's see if this comes in nicely. There we go.

04:22What we can do is we can pull the next one as well. We'll pull this nice one of him kinda facing away. We're gonna do that image selection again.

04:30We're gonna copy it in. Hopefully, it actually copies. There we go.

04:33Now we're gonna go on to the last one. Well, actually, we still have more to do because, obviously, um, I think Claude actually uses, like, the incorrect, uh, images for let me just redo that there. He used the incorrect images for basically, like, the the complete, the look type of products because it was actually supposed to be the joggers, not, like, the actual same email or sorry.

04:53Not same email, but the same product. So you can see here that we have the the graphic hoodie, but also the graphic joggers as well. So what we can do is we can actually, like, pull pull those exact images.

05:01So we're just gonna copy this, come back over here, do the exact same thing again, change it to an image, copy that in.

05:08If it actually copies, there we go. And then lastly, what we're gonna do is let me just make sure this is actually selected.

05:16We're going to pull in the final image. So here we go. Um, let me come back.

05:22There we go. Now if we come out, like, that is pretty pretty decent. We did forget one small thing as well, of course, which is very important, which is actually the logo itself.

05:32So what we'll do here is we'll probably just go over to Gymshark, just screenshot the logo, and then it's gonna look it's gonna look the part. So we'll screenshot that. I'm just gonna copy it, come back over to our design, paste it in, and boom.

05:44There we go. So that is looking pretty clean. Now, of course, to be fair, you could say, like, yes, a kinda needs to up higher in this email, which is absolutely true.

05:50So what we could do is, obviously, of course, edit this email, put a CTA up a little bit higher. We could even, like, extend that image up a little bit more as well. So, like, extend the background and maybe have the text actually showing on that image as well just so it's not, like, you know, white and then a different color here.

06:02But to be fair, you can't really tell me that this is, a terrible email. It's actually pretty solid. All this needs is, like, a couple of edits.

06:07So kinda scary what Glau can do. I would strongly recommend you testing this out for your own brand, and the beauty of this is everything is absolutely editable here. Now Claud did have some issues with the exact font, so it just used a fallback.

06:16It used Inter, but to be honest, it's actually pretty pretty solid. But, of course, you can change the fonts actually in here as well. So that's pretty much how you literally just talk into Claud.

06:23You don't even have to type. You literally just talk to it, give it some links, give the product that you wanna push, um, and, obviously, you give can some copy direction if you want. I just didn't bother doing that for the purpose of the demonstration, but a fully editable, um, Figma template for you to then push into Klaviyo.

06:36So pretty solid, pretty scary what I can do. Hopefully, you enjoyed this video. Um, if you did, please leave a like, comment, and subscribe, and I'll catch you on the next

The Hook