Source authority
Primary source
Designesy research 2026-08-01
Contract shift
DLS Lead — "treat the design system as an API, not a library... CI fails if either side breaks the agreement"
Types, not suggestions
davekurian (dev.to) — "tokens are types... you're removing the off-brand options from the API it consumes"
Adoption signal
zeroheight 2026 — token adoption 84% (up from 56%), but 40% still sync tokens by hand
Output bundle
Fetch the URL, extract all CSS + :root custom properties, parse token values into DTCG format, generate lint rules from the allowed values, emit the AGENTS.md rules file, derive component contract patterns, generate the DESIGN.md file (Google open spec).
01tokensFrozen DTCG-format token file extracted from the site :root — the single source of truth for colors, spacing, typography, motion
02lintConfigStylelint config object generated from tokens — allowed-values rules, color-no-hex, declaration-property-value-allowed-list
03agentRulesMarkdown rules file (AGENTS.md format) with token allowlist, composition rules, and anti-patterns for AI coding agents
04componentContractAllowed component prop patterns derived from the token system — what props agents can use with which token values
05antiPatternsWhat NOT to do — inline values, fabricated tokens, off-system colors, magic numbers
06designMdDESIGN.md-format file (Google open spec, google-labs-code/design.md, Apache-2.0) — YAML front matter (colors, typography, rounded, spacing, components) + markdown body in canonical section order. The de-facto AI-readable design-context standard
Verification
6 checks — 6 checks. PASS=1, FAIL=0. Score = (points/6) × 100. A≥90, B≥80, C≥70, D≥60, F<60. Note: the guardrail emitter is an output generator, not a scoring engine — the score reflects emission completeness, not design quality.
01g01 · Token extraction — :root custom properties capturedPASS: N tokens extracted and converted to DTCG format · FAIL: No :root custom properties found — nothing to guardrail
02g02 · Lint config generated — Stylelint rules from token valuesPASS: Stylelint config with N rules generated · FAIL: Could not generate lint rules — insufficient token data
03g03 · Agent rules emitted — AGENTS.md format with token allowlistPASS: AGENTS.md rules file generated with N token references · FAIL: Could not generate agent rules
04g04 · Component contract derived — allowed prop patternsPASS: Component contract with N patterns generated · FAIL: Could not derive component patterns — no tokens to derive from
05g05 · Anti-patterns documented — what NOT to doPASS: Anti-pattern list generated from detected inline values · FAIL: No anti-patterns detected — possible if the site has no inline values
06g06 · DESIGN.md emitted — Google open spec (google-labs-code/design.md)PASS: DESIGN.md generated with YAML front matter + markdown body from N tokens · FAIL: Insufficient tokens to generate a DESIGN.md — need ≥5 :root custom properties
Open questions
- The component contract (g04) is heuristic — it infers patterns from token names, not from actual component code
- The lint config targets Stylelint — teams using Lightning CSS or Biome need a different config format
- The agent rules file uses AGENTS.md format — teams using Cursor .cursorrules or Claude CLAUDE.md need format adaptation
- The emitter does not verify that the guardrail file actually prevents drift — that requires running the lint against AI output
Run it
Generate a guardrail bundle for any URL:
The guardrails emitter is the product layer — it turns a design system into the file AI agents read and the lint that enforces it.
Machine export.