A working thesis on the AI-native design-to-code stack 01 → 04, AND BACK
A design system used to be documentation humans read. Now it's infrastructure that agents execute against.
AI agents build real software now. The only question is whether they build your system or a generic guess. Four layers decide it: tokens carry the values, machine-readable logic the meaning, spec-driven development the intent, and runtime context the delivery. Then the readback closes the loop, checking what got built against the system it was supposed to build to.
- 01 PRIMITIVE gray.950 Tokens the values
- 02 SEMANTIC color.foreground Machine-readable logic the meaning
- 03 COMPONENT button.background Spec-driven development the intent
- 04 RENDERED color.foreground Runtime context the delivery
Watch one value travel all four stations. It starts as a raw number, then picks up a name and a job at each stop: what it means, where it lives, what finally renders. The number never changes, only its context does. That's how tokens work, one value aliased through the tiers, so changing a single primitive updates everything downstream. Each station opens its layer. And then the value comes home: the readback layer checks what got built against the system it was supposed to build to.
Four layers, one argument
These aren't four separate topics. They're one chain. Each layer hands what it knows to the next, and the handoff is the whole point. Miss a link and everything downstream fills the gap on its own.
- 01 Tokens gives the values
- 02 Machine-readable logic gives the meaning
- 03 Spec-driven development gives the intent
- 04 Runtime context delivers all three
- The readback layer checks what came home
Two formats, one rule. JSON for what a machine parses. Markdown for what a model reads. The rule is direction of flow: anything going into the model, context, rules, meaning, belongs in Markdown, because that's the shape of what it trained on and every character carries meaning. Anything coming out of the model for a parser, props, contracts, tool calls, belongs in JSON, because a parser needs zero ambiguity. Every layer below is that one rule, applied.
Someone has to sign off
The readback layer needs something to check against. That's the Interaction Conformance Standard, a one-page spec for what agent-built interaction design has to pass before it ships. Version 0.1 is published and free to adopt.
One short essay a week, from inside a production build. The starter kit comes with it.
You're in. Click confirm in your inbox and lesson zero lands right after.
That didn't send. Try again, or email hello@tokenstoagents.ai and I'll add you by hand.
The argument in brief
The whole case for the four-layer stack, narrated. About six minutes. The player you're using is built from the design tokens this site is about.
Four doors into every layer
Same material, four ways in. Pick how you learn: a two-minute skim, a narrated listen, the original sources, or a question to the notebook. People open different doors. Everyone lands in the same place.
- Skim The summary Two or three minutes. The gist, before you go deeper.
- Listen The audio A narrated overview, about six minutes.
- Go deep The annotated sources The original articles and specs. Each gets a line: why it matters, where it sits on the stack.
- Ask The query Ask the notebook behind this site a question. It answers from every source here, including what a page skipped.
A notebook you can ask
The site is the surface. The notebook underneath feeds it.
The summaries, the audio overviews, and the query door all draw from one NotebookLM master notebook. The point of view is the product.
Ask the notebookEvery page is built from the same design tokens it argues for. No hardcoded values, no accent colors, emphasis comes only from flipping black and white. If the method works, you're looking at the proof.
Open the token referenceStraight answers
What people ask about design tokens, agents, and the four-layer chain.
-
What does "tokens to agents" mean?
It means your design system stopped being documentation people read and became infrastructure an AI agent executes against. You formalize design decisions into structured data, and design turns into executable intent instead of static files. Get four layers right and the agent builds to your system instead of inventing one.
-
Why do AI agents need a design system at all?
Because an agent can't see your Figma file. It only reads. Hand it loose prompts and it builds from the average of the internet's UI, not yours. A structured design system gives it your actual decisions to execute against, so the output matches your brand instead of resembling it.
-
What are the four layers of the AI-native design-to-code stack?
Four layers, each handing context to the next: tokens carry the values, machine-readable logic carries the meaning, spec-driven development carries the intent, and runtime context standards deliver all of it to the agent. Skip one and the layer above inherits the gap. Together they replace improvisation with structure.
-
Can AI really build production software from a design system today?
Yes, with governance on top. Ryan Payne built an agentic platform used by about 8,000 people at a Fortune 250 utility using exactly this stack. The honest caveat: structure raises the floor, it doesn't remove review. One team shipped 4,300 prototypes in four months and an audit still found violations. The checking layer for that has a name now: the readback layer.
-
Who checks what the agents build?
A checker agent that didn't build it, then a human. The readback layer reads every agent build back against the system: tokens, components, flows, states. Its output is a one-page document called the readback, a monochrome scaffold where the only color is the color that shouldn't be there. One agent builds, a different agent reads it back, a human signs. Banks call that maker-checker. Read the readback layer →