Design Systems AI Agents Can Build With: Tokens, Components and Rules (2026)

AI agents build what they can see. Give them a design system with named tokens, documented components and written rules, connected through files and MCP servers, and their pages look like yours. Leave the system in someone’s head or in an unlinked Figma file and you get the same generic page everyone else gets.

Most teams we talk to already generate UI with Claude, Cursor or v0. The ones whose output stays on brand have a system the agent can read. Here is what that system needs in 2026, and how to check whether yours has it.

Why agents need a system

Without context, a model falls back on what it has seen most often. Anthropic says as much in its own guidance on frontend design: Claude tends to converge toward generic outputs unless it is steered, and it recommends CSS variables for consistency. Vercel’s v0 works the same way. It is trained on default shadcn/ui, and its docs describe a design system registry as the way to make output match your brand without manual overrides.

There’s a reliability reason too. Small error rates add up across steps: an agent that is right 90% of the time per step is right 59% of the time after five steps. Every decision you take out of the agent’s hands, such as which blue, which spacing or which card, is a step it can’t get wrong.

Right per step90%

Right after five steps59%

Layer 1: tokens with names an agent understands

Design tokens are the named values behind the interface: colours, type sizes, spacing, radii, motion. What matters for agents is the name. A token called --color-text or --space-6 tells the agent what it is for. A token called --blue-500 only tells it what it looks like, and the agent still has to guess where it belongs.

Use two tiers. Primitive tokens hold the raw palette and scale. Semantic tokens say what each value is for, such as text, surface, border, accent, and point at the primitives. Components use semantic tokens only, which is also what makes light and dark themes work without the agent thinking about them.

Store them in a format machines can read. The W3C Design Tokens Community Group published the first stable version of its format, 2025.10, on 28 October 2025. A token is a JSON object with a $value and an optional $type, and the same file can feed design tools, iOS, Android and the web. The group lists Figma, Framer, Penpot, Tokens Studio, Style Dictionary and others among the tools supporting or implementing it.

Layer 2: components the agent can find and trust

For anything an agent ships, the component library in code is the source of truth. Agents assemble pages from what’s in the repository, so those components need clear names, typed props, variants and a line on when to use each one.

Keep one component per job. If your codebase has five card styles, the agent will pick one at random, or write a sixth. On our own site the rule is that cards, lists, chips and tags each have one primitive, and a new need means a new prop or variant on that primitive, never one-off CSS on a page.

Then make the components findable:

• Figma. Figma’s MCP server, launched in June 2025 as the Dev Mode MCP server, passes variables, components and layout data to coding agents. With Code Connect, which links Figma components to the components in your code, it can point the agent to the exact code file to use.
• Storybook. Storybook 10.3 added an MCP server for React that lets agents query your components, build UI from them and run component and accessibility tests. Storybook’s docs mark it as a preview.
• Component registries. The shadcn CLI 3.0 and its MCP server let agents browse, search and install components from any registry with plain-language prompts.

Layer 3: rules written down

Tokens and components say what exists. Rules say when to use what, and they are the layer most teams skip. Write them where agents read them first.

Claude Code reads a CLAUDE.md file in the project at the start of every session. AGENTS.md is the open equivalent for other agents, used by more than 60,000 open-source projects and now stewarded by the Agentic AI Foundation under the Linux Foundation. Claude Code can read AGENTS.md too.

Good design system rules are short and testable:

• Use semantic tokens. Never a raw hex value, pixel font size or one-off shadow.
• Which component to use for each job: a card, a list row, a tag, a stat, a section head.
• What never to create: new card, list or chip styles, gradients behind heroes, rounded corners above the radius scale.
• Content rules: tone, spelling, banned punctuation, how headings are phrased.
• How to check work: build, both themes, a phone width, contrast.

Keep the file tight. Anthropic’s docs suggest keeping each CLAUDE.md under 200 lines, and longer rules can live in linked docs the agent opens when it needs them.

Layer 4: a way in

Agents reach your system through files in the repository and through the Model Context Protocol. Anthropic open-sourced MCP in November 2024 and donated it to the Agentic AI Foundation in December 2025, when it counted more than 10,000 active public MCP servers. In practice, that means the Figma, Storybook and registry servers above, plus the docs servers frameworks such as Astro now publish.

Checks and review

Rules in a file are context, not enforcement. Anthropic’s docs say Claude treats CLAUDE.md as context rather than enforced configuration, so anything that must never happen also needs a check in code: a lint rule that rejects raw hex values, contrast and accessibility checks on every pull request, and visual comparisons against a styleguide page that shows every token and component in both themes.

Then a person reviews the result. The system makes the agent’s output consistent. It doesn’t make it right.

It isn’t only for SaaS

The same setup works for a manufacturer’s product pages, where an agent adds a new model from the product template and the spec table component, or a DTC brand’s campaign pages, built from approved hero, product grid and offer sections. The more pages follow a pattern, the more a system pays off.

Is your design system agent-ready?

Seven questions to check:

1. Do your tokens have semantic names, and do components use only those?
2. Are tokens stored in a machine-readable file, not only in Figma styles?
3. Is there exactly one component for each job?
4. Do components have typed props and a line on when to use them?
5. Are your rules written in a file agents read at the start of a session?
6. Can agents reach Figma or your component library through MCP?
7. Do automated checks catch raw values, contrast failures and broken pages before review?

Five or more yeses and agents can build on it today. Fewer, and the gaps are usually quicker to close than another round of fixing generic pages by hand.

How we build them

We design systems in Figma and in code together, so people and agents build from the same parts. That’s in our product design work, where a focused cleanup starts from $10k and a full product from $25k, both with a design system ready for agents and developers. For marketing sites, our Astro builds ship with the tokens, components and agent docs, and AI workflows connect an agent your team can ask in Slack or Claude.

Our own site is built this way. If you want to see what the agent workflow looks like day to day, read how to let your team edit your website with Claude, and for the wider picture, AI in product design in 2026.

DesignMe designs product UI and design systems for funded SaaS and AI companies, in Figma and in code, so your team and your agents ship on-brand. If your AI-generated pages keep drifting, send us a link and we’ll reply within one business day:

designme.agency/intro