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 agents execute against.

Four layers, one chain. Tokens carry the values, machine-readable logic the meaning, spec-driven development the intent, and runtime context delivers the lot. Learn it however fits you: skim, listen, go deep, or ask.

The stack, resolving the primary navigation
  1. 01 PRIMITIVE gray.950 Tokens the values
  2. 02 SEMANTIC color.foreground Machine-readable logic the meaning
  3. 03 COMPONENT button.background Spec-driven development the intent
  4. 04 RENDERED color.foreground Runtime context the delivery

One value travels left to right. It is renamed and re-contained at each station, but the value itself never changes. Plays once on load, honors reduced motion, and each station is a link into its layer.

The spine

Four layers, one argument

Not four separate topics. The map shows the chain. The thesis explains how each layer hands off to the next.

  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. Self-hosted and played from a token-driven player.

The argument in brief, narrated Ready
0:0012:03
audio/00-overview.mp3 Download
The method

Four doors into every layer

The same material, four ways in. None is optional. Each door is the only one some reader will open.

The engine

A notebook you can interrogate

The site is the front door and the point of view. Behind it, a queryable corpus.

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

The medium is the message: this page, and every page, runs on the tokens it argues for. No raw values, no accent color, emphasis by inversion only.

Open the token reference →
FAQ

Common questions about the stack

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.