We imported a real client Design System into Claude Design. Here's what we learned.

Claude Design has been getting a lot of attention since its April 2026 release and the big update it got this past June. We hadn't touched the original version, so we can't really compare, but the consensus we kept running into online was that the new templates, the reworked design system importer, and lower token consumption were the standout changes. Worth remembering: it's still in Beta.

We wanted to see for ourselves, so instead of watching another "Beginner to Pro" tutorial, we set up a split screen: Claude Design on one side, Claude Desktop on the other to talk through what we were doing. The test case was importing one of our client's design systems from Figma and seeing what Claude Design could actually build with it.

Getting the Design System in

The first step was exporting two .fig files from Figma:

• Foundations: design language, typography, colors, spacing.
• Design System: the full component set, atoms through templates.

Claude flagged a few gaps on its own, some deprecated components, a few still under construction, and suggested leaving them out. The importer lets you pick exactly what to include, which turned out to be genuinely useful rather than a checkbox nobody uses. You can also attach assets and font families for better results, which we did.

The processing step is where the estimate and reality diverged the most: it said 5 minutes, it took closer to 30. We just let it run and worked on something else for a while.

Prompting is still where the work is

Once the design system was in, the first outputs were rough. Some of that was probably our prompt being too simple, but we also found that having the full DS uploaded wasn't enough on its own, Claude still needed product and business context to generate something that actually made functional sense. We didn't find a dedicated place to feed that in, so we just appended it to the prompt alongside what we wanted built.

To get a better prompt, we fed Claude Desktop the URL of one of the client's live product pages and asked it to write a prompt for Claude Design to recreate something similar, swapping in one of the client's own illustrations instead of the original imagery. The result was solid, though not responsive by default: a two-column desktop layout doesn't automatically collapse into one column on a smaller viewport unless you say so explicitly.

From there, results improved fast, and tweaking directly inside the interface felt intuitive enough that we stopped going back to the chat for small changes.

Export options, and one that doesn't quite deliver yet

You can export as HTML, PDF, PNG, video, or PowerPoint. The one we were most curious about was the export to Claude Code, since it sounded like it could open a real path from "designer builds the screen" to "PR gets opened." In practice, it just generates a prompt with instructions for Claude Code to build the HTML from the design, which is not that different from just hitting the HTML export button yourself. There's room to make that connection tighter, but given it's Beta, that's probably coming.

We also went looking for a direct Figma connection, something that would let you build new screens or components straight from Claude Design back into Figma but we didn't find it. Might not exist yet, might just be hard to locate.

Takeaway

The output quality tracked pretty directly with how well-structured the source DS was: components, tokens, variables, and whether the import itself went cleanly. That's not a surprising conclusion, but it was useful to confirm hands-on rather than assume. There's clearly more to explore here, and with it still in Beta, we wouldn't be shocked if some of what we ran into (the responsiveness defaults, the Claude Code export) looks different in a few months.