design-md
Installation
SKILL.md
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
Related skills
More from keejkrej/design-skills
sketch
Throwaway HTML mockups: 2-3 design variants to compare.
3p5js
p5.js sketches: gen art, shaders, interactive, 3D.
3excalidraw
Hand-drawn Excalidraw JSON diagrams (arch, flow, seq).
3claude-design
Design one-off HTML artifacts (landing, deck, prototype).
3popular-web-designs
54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.
3architecture-diagram
Dark-themed SVG architecture/cloud/infra diagrams as HTML.
3