Design tokens inside prompts

A generated page you cannot restyle is a generated page you will rebuild. Putting tokens in the brief — named colours, radii, spacing scale — makes output restyleable after generation. The difference between a one-off and a component.

Advanced2 min read (computed · recorded 10)updated 2026-09-10promptsdesign tokensthemingai

Why untokened output is a dead end

A generated page with hard-coded hexes and magic spacing is a sculpture: impressive, immovable. The moment the brand shifts a hue or the design system changes a radius, the page must be regenerated or hand-edited in fifty places. Tokens in the prompt are the difference between a sculpture and a system — the model emits var(--color-ink) references and one central definition, so the whole page restyles from a single edit.

tokenized-brief.md

Define tokens in the brief, then require their use:
"Palette as tokens: --ink #1a1d21, --paper #faf8f4,
 --accent #1f7a5c (used only on the primary action),
 --muted derives from --ink at 72% opacity.
 Spacing from an 8px scale (--s1..--s6). Radius: --r-md 14px,
 --r-lg 24px. Every colour and radius in the page must be a var()."

The token set that pays for itself

Colour as named roles, not hues: --ink, --paper, --accent, --surface, --border, --text-dim — role names survive rebrands; hue names do not.
Spacing from one scale: the model then chooses gaps from the scale instead of inventing 13px, 31px and 47px — which is exactly what makes generated layouts look designed.
Radius and shadow tokens: two radii and a four-rung shadow scale keep cards and modals consistent across every generated section.
Type tokens: --font-display, --font-body, and a size scale — models that choose from a scale build hierarchy instead of guessing sizes.

The follow-up prompt that tokenizes

If the first run ignored the tokens, do not regenerate — run a tokenization pass: 'Rewrite this page using the token set from the brief. Every hex, radius and spacing value becomes a var(); nothing hard-coded remains.' One pass turns a sculpture into a system.

Tokens are the bridge to the library

A tokenized page drops into Motif's workflow perfectly: the generated layout becomes a component, the tokens map onto the design-system scale, and the page becomes restyleable — which is the entire point of the from-prompt-to-component pipeline. Tokens are not an implementation detail; they are the contract that lets generated work join the library instead of sitting beside it.

From prompt to component →