Source authority
- Contract shift
treat the design system as an API, not a library... CI fails if either side breaks the agreement
- DLS Lead
- Tokens as types
tokens are types... you're removing the off-brand options from the API it consumes
- davekurian (dev.to)
- Adoption data
- 86% token adoption, 2026 report; the 2025 report measured a rise from 56% to 84% 60% have no token automation and sync tokens by hand (2026 report: only 40% of teams have a token pipeline)
- zeroheight Design Systems Reports 2025 and 2026
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 a file in the open DESIGN.md format.
01 tokens Frozen DTCG-format token file extracted from the site :root: the single source of truth for colors, spacing, typography, motion DTCG JSON tokens.json
02 lintConfig Stylelint config object generated from tokens: allowed-values rules, color-no-hex, declaration-property-value-allowed-list Stylelint stylelint.json
03 agentRules Markdown rules file (AGENTS.md format) with token allowlist, composition rules, and anti-patterns for AI coding agents Markdown AGENTS.md
04 componentContract Allowed component prop patterns derived from the token system: what props agents can use with which token values JSON components.json
05 antiPatterns What NOT to do: inline values, fabricated tokens, off-system colors, magic numbers JSON anti-patterns.json
06 designMd DESIGN.md-format file (the open DESIGN.md format, google-labs-code/design.md, Apache-2.0, for describing a visual identity to coding agents): YAML front matter (colors, typography, rounded, spacing, components) + markdown body in canonical section order Markdown DESIGN.md
Verification
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 rather than a scoring engine; the score reflects emission completeness rather than design quality.
01 g01 · Token extraction: :root custom properties captured Pass N tokens extracted and converted to DTCG format Fail No :root custom properties found (nothing to guardrail)
02 g02 · Lint config generated: Stylelint rules from token values Pass Stylelint config with N rules generated Fail Could not generate lint rules (insufficient token data)
03 g03 · Agent rules emitted: AGENTS.md format with token allowlist Pass AGENTS.md rules file generated with N token references Fail Could not generate agent rules
04 g04 · Component contract derived: allowed prop patterns Pass Component contract with N patterns generated Fail Could not derive component patterns (no tokens to derive from)
05 g05 · Anti-patterns documented: what NOT to do Pass Anti-pattern list generated from detected inline values Fail No anti-patterns detected (possible if the site has no inline values)
06 g06 · DESIGN.md emitted: the open DESIGN.md format (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 rather than 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.