Expose your design system to LLMs

AI summary focused on the core points of the original article.

1. Why do LLMs keep breaking design systems

AI coding agents often create fairly convincing UIs at first, but as sessions repeat, the design gradually drifts out of alignment.

The reason is that rather than truly “understanding” the design system, the LLM guesses plausible values each time.
- Card padding is 16px, while elsewhere it is 12px
- The link color is a blue that is similar, but different
- Button radius also differs slightly from screen to screen
Each one may not look significantly wrong, but when hundreds of small guesses accumulate, the result increasingly looks like a “strangely different product.”
The bigger problem is that with every new session, it cannot remember previous judgments.

2. The solution is an “LLM-readable design system”

The key is not to let the AI guess freely, but to provide a closed set of rules it can consult every time.

The original text organizes this into three layers.
- Spec files: Markdown documents that structure component usage, states, exceptions, and patterns
- Closed token layer: A structure that allows colors, spacing, typography, radius, and so on to be used only as `tokens.css` variables
- Audit script: A validation script that catches hardcoded values in CI when the AI uses them
In other words, instead of making the AI wonder “which blue should I use?”, the approach makes it find and use `var(--color-link)`.

3. Practical adoption proceeds in 6 steps

This approach is less like a grand redesign and more like organizing an existing project to be LLM-friendly.

First, scan all CSS/SCSS files for hardcoded colors, spacing, font sizes, radius, and so on.
Next, create `tokens.css` and build a three-step structure that goes from higher-level design system tokens → project aliases → actual component usage.
In the `specs/` folder, separate and write documents for foundations, tokens, components, and patterns.
Connect a validation script such as `token-audit.js` so that raw values cause a failure.
Finally, add guidance to `CLAUDE.md` or `.cursorrules` that says to read the relevant spec before modifying UI code, use only `tokens.css`, and pass the audit before committing.

4. Good design systems are no longer only for humans to read

What is interesting in the original text is the point that a design system is no longer seen only as documentation for people or as a Figma library.

In the AI era, a design system becomes both a component library and an execution specification that the model refers to in every session.
If the documentation is missing, the LLM guesses, and as those guesses increase, visual consistency in the product breaks down.
Conversely, when spec, token, and audit are connected, the output from the first AI session and the tenth AI session can maintain the same level of quality.

XPLORED View

This article goes one step beyond “let’s explain the design system to AI” and shows how to embed rules, tokens, and a verification loop into the codebase so that AI cannot freely design on its own.

Good when reading

When UIs made with AI coding start varying slightly from session to session and consistency breaks down
When you want design systems to be actually referenced by tools like LLMs, Claude Code, or Cursor

Takeaways

What LLMs need is not a long style guide, but structured specs and a closed token set they can query every time.
In the AI era, a design system becomes less about “reusable components” and more like “operational infrastructure that reduces guesses and enforces consistency.”

Read original

This article is summarized and interpreted by XPLORED based on publicly available original sources and related materials. Rights to the original source and materials included in it belong to their respective rights holders. If a rights holder requests a correction or removal, we will review and respond promptly.

Get the week's signal by email, every Saturday.

A short read on the tools and articles added that week.