tokens agents

A working thesis on the AI-native design-to-code stack 01 → 04

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, each one turning a design decision into something an agent can read and run. Tokens carry the values, machine-readable logic the meaning, spec-driven development the intent, and runtime context delivers the lot. Skim it, listen, go deep, or ask.

The stack, resolving the primary navigation

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 is a door into its layer.

The chain

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 starts guessing.

  1. 01 Tokens gives the values
  2. 02 Machine-readable logic gives the meaning
  3. 03 Spec-driven development gives the intent
  4. 04 Runtime context delivers the lot
Listen

The argument in brief

The whole case for the four-layer stack, narrated. About twelve minutes. The player you're using is built from the design tokens this site is about.

Narrated overview · 12:03 Ready
0:0012:03
audio/00-overview.mp3 Download
The method

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. They all reach the same place.

The proof

A notebook you can ask

The site is the front door. Behind it sits the notebook that feeds it.

The summaries, the audio overviews, and the query door all draw from one NotebookLM master notebook. The synthesis and the curation are the product. That's what makes this a point of view, not a links page.

Ask the corpus

This site practices what it preaches. Every 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 reference →
FAQ

Straight 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 stops guessing and starts building to your system.

  • 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 guessing at 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 guessing 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.