How I build and maintain design systems with Claude

Both routes into a new system, the single-frame challenge, keeping Figma and code in sync, the maintenance I stopped avoiding, and how I set Claude up to remember my conventions. All the prompts I actually use.

Hi designers,

This issue is a long one — deliberately. I have been writing about agentic Design Systems and exploring multiple ways to build and maintain them. So I decided to list my most successful design-system workflow in one place instead of scattered across issues. So here it is: how I build a system, how I keep it alive, and every prompt I actually reach for.

One rule underneath all of it: keep your process, hand over the repeatable parts. Claude does the audits, the comparisons, the first-draft documentation. The decisions stay yours. Now let’s get into it.

I talked about the intentional usage of AI when working with Design Systems at the Tokyo Design Meetup a few months ago - here’s the recording, if you want to check it out :)

There are three starting points I use, depending on where your design truth already lives: an existing product, a clean slate, or a single frame. Pick one.

If the product is already shipping, the system is hiding in plain sight — in the rendered HTML and computed CSS of the live pages. Two moves.

Move 1 — read the live page. Point the Claude browser extension at the product and pull the system out of what’s actually rendered:

“Using what you can read from this live page — the HTML structure and the computed CSS — pull out the underlying design system: colours (every distinct value, grouped by likely role — background, text, border, accent), typography (families, sizes, weights, line-heights, as a scale), spacing and radius (the recurring padding, margin, gap, border-radius values), and repeating UI patterns (buttons, inputs, cards, nav). Give me the raw inventory first. Flag where values are almost-but-not-quite consistent — e.g. 15px and 16px used interchangeably. Those are the cleanup decisions I’ll need to make.”

Asking for the near-misses up front is the move. It turns a messy real UI into a short list of decisions instead of letting Claude quietly “tidy” values without telling you.