This week's AI Bite: What it's actually like building a design system in Claude Design

Design systems in Claude Design: putting it to the test

I kicked things off with a design system for one of the products I work on. My recurring pain point had been that prototypes built in Claude would gradually drift away from what the actual product looked like, no matter how much context I fed it. Early passes would come close, but the further along I got, the more Claude Design would start taking creative liberties.

One way to build a design system is to upload a repository of React components - this route gets you the most faithful result. Since we already had Storybook set up for this project, that’s the path I took. To round out the context, I also fed in the Figma design system, screenshots of the live product, and a set of rules and best practices we work by with this client day to day.

From there, Claude Design took the wheel and started assembling the design system. A few dozen minutes later, I had a first pass that genuinely impressed me - the documentation was clean, with only a handful of small errors that were quick to fix, but the end result held up well. On top of that, to double-check everything was built right, I ran a usability audit with Claude Design’s help, which surfaced a few spots worth a second look - and just like that, the design system was good to go.

Once loaded up with these design systems, Claude Design is genuinely useful for pulling together prototypes ahead of stakeholder conversations. I can now pitch new feature ideas much faster, or put together clickable prototypes for user testing in a fraction of the time it used to take.

What worked well

One thing I really liked about Claude Design: you can make changes either by prompting or by editing directly. The side panel for manual tweaks feels a lot like Figma, and it saves both tokens and time, since small adjustments don’t need a full prompt cycle. Editing individual components this way also feels smooth and quick.

What’s next

Next up is rolling this out to other projects. I’ve already tried building a second design system using the other approach - without relying on React components. Per Claude Design, this method reflects the design system less faithfully, so I’ve got some comparison testing ahead to weigh the two approaches against each other.

A quick word on Claude Design, for anyone who hasn’t tried it

Claude Design is a research-preview product from Anthropic Labs, built on Claude’s vision capabilities. Rather than chatting your way toward a static mockup, you describe what you’re after and Claude produces something functional: a prototype, a slide deck, a one-pager, or - as in this case - a full design system pulled straight from a codebase, design files, or screenshots.

A few things worth flagging:

During onboarding, Claude can read through your codebase and design files to build a design system automatically, which then carries over consistently to every project after that.

You can kick off with a text prompt, upload files, point it at your codebase, or capture elements straight from a live site.

Refinement happens through conversation, inline comments, direct edits, or on-the-fly adjustment controls Claude generates - matching the Figma-like side panel experience mentioned above.

Finished designs can be exported to Canva, PDF, PPTX, or standalone HTML, or handed off to Claude Code as a bundle once it’s time to move from prototype to production.

It’s a genuinely different route from “rough idea” to “something clickable” - one that skips the usual back-and-forth through a design tool entirely.