How to Build a Design System With AI in 2026 (And What Happens in Month Four)

It's a Tuesday afternoon. You export your Figma variables, open Claude Code, and ask it to turn them into tokens, build a button on top of them, and write the docs. By the evening you have a token package, eight components with typed props, a Storybook, and a CLAUDE.md telling every future agent to use them.

That's real, and two years ago it was a quarter's work. You can now build a design system with AI in a week, and most of the people telling you otherwise haven't tried.

This guide covers how to do that well. It also covers month four: what tends to go wrong once the system is live, and why it catches teams out. Read the first half to build it. Read the second half before you promise anyone it's finished.

Week one: the build

Start with tokens, as data

Everything else reads from tokens, so get them right first.

• Export the source: pull your Figma variables out with a plugin or Figma's REST API (depending on your plan) as JSON.
• Use the standard format: ask the agent to convert them to the Design Tokens Community Group format, which reached its first stable version in October 2025. Tools already understand it, so you won't write a converter twice.
• Generate the outputs: have Style Dictionary build CSS variables and a typed JS module from that one file. Platforms come later. Web first.

The test for this step: can a script, not a person, give you the resolved value of color.action.primary right now? If yes, move on.

Build components on primitives you don't have to maintain

Don't let the agent invent a dialog from scratch. Ask it to build on a headless library (our roundup of React UI libraries covers the current options) and style it with your tokens. Accessibility and keyboard behaviour come with the primitive.

Two prompts make the difference here:

• Give it a check: Anthropic's own Claude Code guidance is blunt about this. Give the agent tests or a screenshot to compare against, because without one, "looks done" is the only signal it has. A Storybook story per variant does both jobs.
• Type everything: props as TypeScript types, variants as unions. Types are the part of your component API an agent can read without guessing.

Write a short context file, then stop

Your CLAUDE.md or AGENTS.md should hold conventions that apply to every task. Something like:

# Design system
- Build UI with components from @acme/ui. Never write a raw button, input or modal.
- Colour, spacing and type come from tokens. No hex values.
- If a component doesn't exist, ask before building one.

Keep the token values and component lists out of it. Anthropic's guidance lists "information that changes frequently" and "detailed API documentation" under what to exclude, and we've written up why the reference data belongs somewhere else.

Then make the important rules mechanical. A file is advice. A lint rule that fails on a raw hex value, or a hook that runs it after every edit, is enforcement.

Give agents a way to ask

Last, a small MCP server so agents can look things up instead of reading files. Built on the Model Context Protocol SDK, a read-only server with three tools gets you most of the value:

An agent can write this in a day. Point it at your token JSON and the type definitions you already generate.

At the end of week one you have tokens as data, typed components, a docs site, a short context file and an MCP server. That's a better-instrumented design system than most teams had in 2023.

Month one: it works

Engineers use it. Agents pick the right button most of the time. The team that built it demos it at an all-hands, and it deserves the applause.

Enjoy this month. It's real, and it's also the month where nobody's job is "keep this true", because nothing has drifted yet.

Month four: what breaks

Nothing fails loudly. The system keeps running, and a handful of small problems start stacking up underneath it.

• Figma moves, the JSON doesn't: a designer renames a collection on a Thursday. The export only runs when someone remembers to run it. Your tokens are now a copy, and nothing tells you which values are stale.
• The context file grows: every wrong output looks like a missing line, so lines get added. Anthropic names where this ends up: "If your CLAUDE.md is too long, Claude ignores half of it because important rules get lost in the noise." No error tells you which half.
• Agents duplicate instead of reuse: GitClear's analysis of 623 million code changes found duplicated code blocks rose 81% between 2023 and 2026. An agent that can't find the right component makes a near-copy, and a near-copy passes review.

• "Almost right" becomes the norm: 66% of developers say AI output is "almost right, but not quite" (Stack Overflow Developer Survey 2025). In UI, that's a colour one step off the ramp.
• Teams quietly route around it: 59% of design system teams now see UI built that bypasses the system (zeroheight, 2026). They don't announce it. You find out in a screenshot.
• The MCP server answers from last month: it reads the JSON, and the JSON is the copy that stopped updating.

None of this was a mistake in week one. The build was the cheap part. These are the jobs that start after it works, and none of them were anyone's job.

Month twelve: the real question

By now someone has spent a day a week on token plumbing, the context file has been rewritten twice, and the person who built the MCP server is on a different team. The software sector has the highest staff turnover of any industry at 13.2%, so plan for that handover rather than hoping it won't happen.

At that point there are two honest answers:

• Staff it as a product: a named owner, a sync that runs on every Figma change, versioned releases, and some way of seeing what agents get wrong. Small system, a few consuming teams, one person who can hold it in their head? This is a good answer, and you should take it.
• Move the plumbing, keep the work: keep the components, the conventions and the agents you set up, and stop owning the pipes between them.

The second is where Supernova fits. It connects to Figma and your code, keeps tokens, components and docs in sync as data, and serves each team's agents a scoped context over MCP. Your Claude Code setup and skills stay exactly where they are. They just read from something that updates itself, and you get data on what agents look up and miss, rather than a screenshot six weeks later.

If you want a number before deciding, the ROI calculator compares running your own system with Supernova over three years. Its conservative setting assumes your system works just as well as ours, so the gap you see is only the cost of owning it.

Build it this week. Decide who runs it before month four.

The build really is a week now, and you should do it properly: tokens as data, typed components on good primitives, a short context file, rules that run as checks, and an MCP server agents can ask.

Then, before anyone calls it finished, answer one question: when Figma changes on a Thursday, who or what makes sure every agent knows by Friday? If the answer is a name, you have a plan for month four. If it's "probably someone", you have a date for it.