Agent design system

What this means

A normal design system often assumes a human designer can infer intent. An agent design system needs more explicit instructions because the user is delegating implementation to a model.

It should pair tokens and components with the judgement behind them: which surfaces are quiet, where accents belong, what makes a card legitimate and when a layout should use a table instead.

Core parts

Core parts include design tokens, layout rules, type scale, colour palette, component rules, imagery direction, interaction states and accessibility constraints.

Add anti-patterns. These are often more useful than preferences because they stop the agent defaulting to common AI-built website habits.

QA loops

A useful agent design system includes screenshot review, adversarial critique and ranked fix lists. The system should tell the agent how to judge its own output before returning it.

For multi-page work, include route-level rules so guide pages, landing pages and utility pages do not collapse into the same template.

Prompt example

Create an agent design system for [site].

Tokens: define colour, spacing, radius, border, type scale and motion timings.
Components: hero, nav, cards, code blocks, tables, CTA rows, footer.
Rules: no cards inside cards, no fake metrics, no low-contrast labels.
Review: compare screenshot to tokens, then list hierarchy, spacing and trust issues.

Common mistakes

• Treating tokens as enough without component rules.
• Adding too many variants before the first product surface exists.
• Ignoring mobile behaviour and interaction states.
• Writing rules that sound tasteful but cannot be tested.
• Failing to distinguish marketing, docs and app surfaces.

Workflow

1. Start from the real product job and audience.
2. Define tokens with usage notes.
3. Define component families and states.
4. Add do-not-do rules and QA checks.
5. Use screenshots to validate the system in the actual UI.

FAQ