We Fed Claude a Real Design System. Here Is What Actually Happened.

Claude's new design-focused mode can now ingest a real Figma design system and attempt to build UI from it. That is not a small thing. One of the loudest complaints about AI-generated interfaces has always been that the output looks generic, because the model ignores your tokens, your spacing rules, your actual components.

Nick Babich, writing on UX Planet, put that claim to a direct test. He fed Claude Design the Figma team's own Simple Design System and asked it to produce real page layouts. The results are worth understanding before you build your next vibe-coded prototype.

What the Experiment Actually Tested

Babich started with the Simple Design System, a well-structured, openly available Figma library created by the Figma team itself. It is a good choice for a test because it is clean, documented, and comes with example UIs, so there is a clear reference for what "correct" output should look like.

He exported the system as a .fig file and imported it directly into Claude Design, then asked the model to recreate page layouts using the system's components and styles. The key question was not whether Claude could produce something that looked nice in isolation. The question was whether it would respect the system's own rules: the specific spacing values, the named color tokens, the component hierarchy, all the design decisions that make a system a system rather than a mood board.

This matters enormously for designers building their own apps. If you are vibe-coding a product and you have a design system, even a lightweight one you sketched in Figma yourself, you need to know whether your AI tool will honor it or quietly invent its own version of it.

What Claude Got Right

According to the experiment, Claude Design did meaningfully engage with the provided design system rather than ignoring it outright. It picked up on visual patterns from the example UIs and used them as a reference when generating layouts. For a tool that designers often accuse of producing generic, componentless soup, that is genuine progress.

The ability to import a .fig file directly is itself a workflow shift. Instead of describing your design language in words, hoping the model interprets "use 8-point spacing and a neutral palette" the way you mean it, you can hand over the source of truth. That is a more honest conversation between designer and tool.

Where the Gaps Still Show Up

This is where it gets interesting, and honest. AI models working with design systems still have a tendency to approximate rather than replicate. They may understand the visual spirit of a system without perfectly adhering to its specific token values or component states. The difference between "looks about right" and "actually uses the correct button variant with the correct hover state at the correct elevation" is exactly the difference that matters in a shipped product.

Babich's experiment surfaces this tension directly. Claude Design is better than most at following a design system, but "better than most" is not the same as "production-ready out of the box." If you are building a prototype to test an idea, the approximation is probably fine, maybe even useful, because it moves fast. If you are handing the output to a developer to implement, you will want to audit it carefully before anything gets committed to code.

How to Actually Use This in Your Workflow

Here is a practical way to think about integrating this into how you build:

Use your design system as a brief, not a guarantee. Import your .fig file into Claude Design and treat the output as a first draft that reflects your system's intent. Plan to review component choices against your Figma source before moving forward.

Lean on the example UIs. The experiment worked partly because the Simple Design System includes reference examples. If your own system has annotated examples or documented patterns, include those when prompting. The model has more to anchor to.

Treat token mismatches as a checklist, not a failure. When Claude generates a layout that is close but not exact, the gap between its output and your actual system is a useful audit. It tells you which parts of your system are underspecified or hard to infer visually, which is valuable design feedback in its own right.

Keep your system simple and well-named. Vague layer names and unlabeled color styles will produce vague outputs. A tidy, well-structured Figma file gives the model more signal to work with.

The Honest Takeaway

Claude Design can follow a real design system better than the generic "paste a screenshot and hope" workflow most designers have been stuck with. That is a real step forward for anyone building their own apps without a full engineering team. But it is not a replacement for design judgment. The model will approximate, sometimes beautifully, sometimes just well enough to fool you into shipping something slightly off-spec.

The most useful frame is this: think of Claude Design as a very fast junior collaborator who read your style guide carefully but has not yet internalized every edge case. You still need to review the work. The good news is that reviewing AI-generated UI against a known system is a much faster job than designing from scratch, which means the tool is genuinely useful even when it is not perfectly accurate.

Open questions remain. How well does this scale to larger, more complex design systems with hundreds of components? How does it handle interactive states and accessibility requirements baked into a system? Those are the tests worth running next.