Will your coding agent read your DESIGN.md the way you meant it?
Paste a DESIGN.md written to Google's format. Your browser runs the official
@google/design.md linter on it, checks every component's contrast and exports
your tokens - free, nothing uploaded. A paid run then reviews what an agent
would get wrong or repairs the file, and the browser re-lints the repair.
Each example has a saved model run, so you can see the whole page for free.
Your recent runs
What this does, and what it does not
DESIGN.md is Google's open format for describing a visual identity to coding agents: YAML
front matter with the tokens an agent must use, and Markdown that says why. The page runs the
official linter, @google/design.md 0.4.0, built unmodified from its published
source for the browser. It was checked against the published command-line tool on 410 files -
Google's own examples plus hundreds of broken variants - and its lint report, diff and all four
exports matched the CLI's output byte for byte in 2,868 of 2,868 comparisons. Contrast is the
WCAG 2 ratio of each component's text colour on its background, against the 4.5:1 AA minimum
the linter uses; it does not cover borders, focus rings or text drawn on images.
The four page checks are this page's, not Google's, and say so: a hex colour in the prose
that matches no token, a {group.token} reference in the prose that resolves to
nothing, a core colour role the prose never names, a component the prose never names. The
paid run reads the file and those results, is told never to compute a contrast ratio of its
own, and must answer every finding. A repaired file is linted again here and diffed with the
CLI's own diff before you take it; nothing is written back to your repository. Derived from
the agent skill
@nousresearch/design-md
(Hermes Agent). The linter is Apache-2.0, Copyright 2026 Google LLC - see the
notice. The two example design systems are fictional and written for this page.