You know that feeling when you generate a gorgeous UI with an AI tool, get all excited, and then paste it into Figma only to find… a complete mess? No auto layouts. No variables. Layers named "div div div." It looks great in the browser. In Figma, it's chaos. 😅
I've been there more times than I'd like to admit. But recently I discovered a workflow that actually solves this — completely. It combines Claude Design with the html.to.design MCP workflow, and the results land in Figma ready to use. Real auto layouts. Real variables. Clean layer structure. Everything set up the way you'd do it yourself, except in a fraction of the time.
Let me walk you through exactly how it works.
Why Most AI-to-Figma Workflows Fall Apart
Before we get into the good stuff, let's talk about the real problem. Most AI design tools generate UI that looks impressive on screen. The visuals are clean, the layouts feel intentional, and for a moment you think: this is the future.
Then you bring it into Figma.
The structure is flat. There are no components. Variables? Forget it. Auto layouts are either missing or broken. You end up spending hours rebuilding the design manually just to make it editable — which completely defeats the purpose of using AI in the first place.
The issue isn't the design quality. It's the handoff. Getting from AI-generated output to a production-ready Figma file has always been the weak link in the chain.
That's what the html.to.design MCP workflow fixes.
What Is Claude Design?
If you haven't tried it yet, Claude Design is Anthropic's AI design tool available at claude.ai/design. It works inside your browser and lets you generate high-fidelity UI designs from a prompt. You can even feed it a design system file — a .md file with your colors, typography, spacing scales, and grid info — so the output matches your brand instead of defaulting to that generic "AI interface" look. 🤯
For the demo in my video, I prompted Claude Design to build a Neo Bank web app dashboard — balances, crypto and fiat transactions, currency converter, stocks, ETFs, the works. I pointed it at my design system file and let it run. A few minutes later, I had a beautiful, detailed dashboard. Filters, card layouts, transaction rows — all there.
Now the question was: how do I get this into Figma without losing everything that makes it useful?
Enter html.to.design — And Its New MCP Feature
You've probably heard of the html.to.design plugin by <div>Riots. It's been around for a while and it's incredibly popular for copying web designs into Figma. But they recently launched something that changes the game entirely: an MCP (Model Context Protocol) connector.
This MCP connector allows your AI agent — in this case, Claude — to talk directly to the html.to.design plugin inside Figma. No manual copy-paste. No browser extension gymnastics. You describe what you want, and the designs transfer seamlessly from Claude into your Figma file, with everything structured properly.
Here's why this matters so much: it's not just about speed (though it is much faster than Figma's native MCP). It's about quality. The variables get set up. The auto layouts are applied. The styles are created. You're not starting from a flat blob of shapes — you're starting from a real, editable Figma system. 🚀
How to Set Up the Claude + html.to.design MCP Workflow
Here's the step-by-step of how I set this up. It's honestly simpler than it sounds.
Step 1 — Install the html.to.design Plugin in Figma
Head to html.to.design or find it directly in the Figma community. Install it and open it in your Figma project.
Step 2 — Create a Custom Connector in Claude
Go to claude.ai (not Claude Design — the regular app). On the left panel, click Customize app, then find Connectors. Click the + button and add a custom connector. You'll get the connector name and the MCP URL from the html.to.design documentation page — just copy and paste them in.
Once added, click Connect and authorize the plugin to work with your Figma account. Done. ✅
Step 3 — Link the Plugin in Figma
Inside Figma, open the html.to.design plugin and navigate to the MCP tab. It should show as connected to your Claude account. If it's not connected yet, the plugin docs will walk you through it — super straightforward.
Step 4 — Transfer Your Design with a Prompt
This is the fun part. Go back to Claude Design, grab the shareable link to your Figma file, and write a simple prompt like:
"Bring this design to Figma file [paste your Figma link] using the html.to.design connector."
Hit run. In the plugin panel inside Figma, you'll see options appear: auto layouts, variables, styles, hyperlinks, HTML layer names. Enable the ones you want (I recommend all except hover effects for most use cases), click Proceed, and watch it go.
It takes seconds. Seriously — seconds. 😬
What You Actually Get in Figma
When the import completes, here's what's waiting for you in Figma:
Variables — Colors, spacing, stroke height, fonts — all set up in a variables collection. Properly named, properly structured. You can rename the collection, but the values are all there.
Auto layouts — Every frame, row, and column is in auto layout. Resize behavior is set. Gaps are defined. You're not hunting through layers trying to figure out why something breaks when you change a value.
Styles — Text styles, color styles — all created and linked to the variables. So when you update a variable, it cascades through the entire design. This is the kind of setup that takes a senior designer hours to build from scratch.
Layer names — Because I enabled HTML layer naming, the layers are named meaningfully. This is huge if you're planning to push the design back to code later — the transfer is way cleaner.
What used to take several hours of manual Figma work is now done before you finish your coffee. ☕
Bonus: Copy Any Website into Figma with html.to.design
While we're here, let me mention another use case for html.to.design that I use for client work all the time.
We recently had a client who needed to migrate their WordPress website to Framer. Instead of manually redesigning every page in Figma first, we used the html.to.design Chrome extension to capture the existing website — three breakpoints in one shot — and import it directly into Figma. Then we transferred those frames into Framer using the Framer plugin.
The process took minutes, not days. The client was happy. We were happy. 🙏
You can also do this directly from inside Figma without the Chrome extension: just open the html.to.design plugin, paste in a URL, select your breakpoints, and click import. I showed this with Apple's website in the video — full homepage, three breakpoints, perfect auto layout structure, under a minute. It even picked up the variables we had defined in the file.
It's an absurdly useful tool for client presentations too. Every client wants their website to "look like Apple" anyway 😅 — now you can mock it up in two minutes.
Why This Workflow Is Different
What makes the Claude Design + html.to.design MCP workflow stand out isn't just that it's fast. It's that it respects the craft. Figma files built this way are actually workable. You can hand them off to a developer. You can iterate on them without rebuilding from scratch. You can present them to a client and know they're seeing production-quality work.
Most AI design tools give you an image of a design. This workflow gives you an actual design.
That's the difference between a demo and something you can ship.
Actionable Steps to Try This Today
Create a design system
.mdfile with your brand colors, typography, and spacing. Even a basic one is better than nothing — it keeps Claude Design from defaulting to generic styles.Go to
claude.ai/designand start a new project. Paste your design system file and write a prompt for the UI you want to build.Install html.to.design from the Figma community and set up the MCP connector in Claude following the steps above.
Share your Figma file link and prompt Claude to transfer the design using the html.to.design connector.
Review your variables and styles after import — rename the collection, check the structure, and you're ready to design.
Conclusion: The AI-to-Figma Gap Is Finally Closed
For a long time, AI design tools were impressive in demos and frustrating in practice. The Claude Design + html.to.design MCP workflow is the first approach I've used that actually closes that gap. The variables are real. The auto layouts work. The structure is production-ready.
If you're a designer, a freelancer, or someone who works with clients and needs Figma files that are actually usable — this workflow is worth setting up. It'll save you hours every single time you use it.
👉 Watch the full tutorial on my channel to see this workflow in action, step by step. And if you're not subscribed yet, now's a good time — I cover Figma, Framer, AI tools, and everything in between.
FAQs
What is the html.to.design MCP and how does it work?
Does the html.to.design MCP workflow work with tools other than Claude?
Why use html.to.design MCP instead of Figma's native MCP?
Can I use html.to.design to copy an existing website into Figma?
Do I need a paid Claude plan to use Claude Design?
