How I build and maintain design systems with Claude
Workflows I've tried and what works for me and how I set Claude up to remember my conventions. + free AI-Powered Product Design Workflows guide
How I build and maintain design systems with Claude — the full workflow
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 :)
PART 1 — BUILDING A SYSTEM
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.
Route A — reverse-engineer an existing product
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.
