Most design systems don't fail because the components are wrong. They fail because the work of building and maintaining one is slow, repetitive and easy to postpone. Naming dozens of colour tokens, writing guidance for every button state and checking spacing across hundreds of screens is exactly the kind of work that slips to "next sprint" forever.
Here is where Claude comes in. Not by making design decisions for you, but by taking on the structured, detail-heavy parts so your time goes to the decisions that actually need a designer. Here's a workflow that holds up in practice.
Audit your designs
Every product already has a design system. It's just undocumented and inconsistent. The fastest way to begin is to find out what you really have.
Export what you can: production CSS, your Figma styles, screenshots of key screens. Then ask Claude to inventory it. Here is a prompt that works well:
“Here's our production CSS. List every unique colour, font size, spacing value and border radius. Group near-duplicates and flag values used only once or twice.”
It's common to discover twenty different greys and a dozen spacing values nobody chose on purpose. That list makes the case for a system more convincingly than any slide deck, and it gives you a clear brief: consolidate, don't invent.
Define the foundations together
Tokens come next: the named decisions for colour, type, spacing, radius, elevation and motion that everything else is built from. This is where Claude works best as a thinking partner.
Ask it to propose a structure, then push back. A common model has three tiers: primitive
tokens (blue-500), semantic tokens (color-action-primary) and component tokens
(button-bg-default). Ask why each tier exists and whether your team needs all three.
Then hand over the tedious parts. Claude can generate a spacing scale on a 4px base, check text and background pairings against WCAG contrast ratios, and output everything as JSON for Tokens Studio, Style Dictionary or plain CSS custom properties. What used to be a day of spreadsheet work becomes a review task.
Components and documentation
For each component, give Claude the design (a screenshot or a description) plus your tokens, and ask for three things:
- A spec: Anatomy, variants, sizes and every state, from default, hover and focus to disabled, loading and error.
- Usage guidance: When to use it, when not to, and what to use instead.
- Accessibility notes: Keyboard behaviour, focus order, and minimum touch targets.
The states list is where it earns its keep. It's easy to design a beautiful default button and forget what happens when it's loading inside a modal on a slow connection. Claude is consistently good at surfacing those edge cases.
It can also write working code for each component, in React or plain HTML and CSS, wired to your tokens. Even if engineering rewrites it, a live reference beats a static frame. For field-heavy products this matters: components have to work on a tablet in bright sunlight, with gloves, on a patchy connection. Those constraints belong in the spec from day one.
Where the designer stays in charge
Claude is fast and thorough, but it doesn't know your users, your brand or the trade-offs your team has already argued about. Four rules keep the output useful:
- Taste is yours. Use Claude to generate options and catch inconsistencies, not to pick the visual direction.
- Verify everything. Confirm contrast with a dedicated checker and test components with real content, not lorem ipsum.
- Feed it context. Share brand guidelines, product principles and research summaries. The more it knows, the less generic the result.
- Keep one source of truth. Decide whether Figma or code is canonical, and use Claude to keep the other in sync.
To Summarise
A design system is a product, and most of its effort goes into the unglamorous parts: consistency, documentation, edge cases and upkeep. That's exactly where an AI collaborator helps most. Hand Claude the repetitive structure, keep the judgment for yourself, and your design system stops being a someday project and becomes something your team actually ships.