Agent skill · nousresearch
design-md
Author/validate/export Google's DESIGN.md token spec files.
What it needs
About 5k tokens when loaded.
What this skill does
DESIGN.md Skill DESIGN.md is Google's open spec (Apache-2.0, google-labs-code/design.md) for describing a visual identity to coding agents. One file combines: YAML front matter — machine-readable design tokens (normative values) Markdown body — human-readable rationale, organized into canonical sections Tokens give exact values. Prose tells agents why those values exist and how to apply them. The CLI (npx @google/design.md) lints structure + WCAG contrast, diffs versions for regressions, and exports to Tailwind or W3C DTCG JSON. When to use this skill User asks for a DESIGN.md file, design tokens, or a design system spec User wants consistent UI/brand across multiple projects or tools User pastes an existing DESIGN.md and asks to lint, diff, export, or extend it User asks to port a style guide into a format agents can consume User wants contrast / WCAG accessibility validation on their color palette For purely visual inspiration or layout examples, use popular-web-designs instead. For process and taste when designing a one-off HTML artifact from scratch (prototype, deck, landing page, component lab), use claude-design. This skill is for the formal spec file itself. File anatomy Token types Type Format Example ------ -------- --------- Color any CSS color (hex, rgb(), oklch(), named) "#1A1C1E", "oklch(62% 0.18 250)" Dimension number + unit (px, em, rem) 48px, -0.02em Token reference {path.to.token} {colors.primary} Typography object with fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, fontFeature, fontVariation see above Component property whitelist: backgroundColor, textColor, typography, rounded, padding, size, height, width. Variants (hover, active, pressed) are separate component entries with related key names (button-primary-hover), not nested. Canonical section order Sections are optional, but present ones should appear in this order. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nousresearch/design-md--21ebd6