design-md
design-md lets you create and validate DESIGN.md files—Google's open spec for encoding design systems as machine-readable tokens plus human-readable rationale. The included CLI lints structure, checks WCAG color contrast, diffs versions for regressions, and exports to Tailwind or W3C DTCG JSON formats.
design-md authors and validates Google's DESIGN.md token spec files for consistent design systems.
AI-generated summary based on this skill's SKILL.md
Install
mateaix/mateclaw/design-md · repository language: Java
git clone https://github.com/mateaix/mateclaw
cp -r mateclaw/mateclaw-server/src/main/resources/skills/design-md ~/.claude/skills/design-mdFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I write a design.md token spec?
design-md provides tooling to author DESIGN.md files—Google's open spec for encoding design systems as machine-readable tokens with human-readable rationale. The CLI guides you through creating token sections (colors, typography, spacing, etc.), validates syntax, and ensures all tokens are properly structured. You can start from a template or port an existing style guide into the spec format.
Can design-md validate my DESIGN.md file for errors?
Yes. design-md includes a linter that checks your DESIGN.md files for structural errors, missing required fields, and malformed token definitions. It also performs regression detection by diffing two versions to catch unintended changes. The CLI reports all issues with line numbers and remediation hints.
How do I export design tokens to Tailwind?
design-md can export your DESIGN.md tokens directly to Tailwind configuration format. The export command transforms your design system into a Tailwind-compatible config file, letting you use your tokens immediately in your build pipeline. You can also export to W3C DTCG JSON format for broader ecosystem compatibility.
Does design-md check WCAG contrast compliance?
design-md includes accessibility validation that checks color token contrast ratios against WCAG AA and AAA standards. When you lint your DESIGN.md file, it automatically flags color pairs that fail to meet your target compliance level, helping you catch accessibility issues before deployment.
What formats can design-md export to?
design-md supports export to Tailwind configuration and W3C Design Token Community Group (DTCG) JSON formats. Both exports preserve your token structure and metadata, letting you integrate your design system into different toolchains and frameworks.
Can I convert an existing style guide to design-md?
design-md helps port existing style guides into machine-readable DESIGN.md spec format. While the conversion process requires mapping your current tokens and rationale into the spec structure, the CLI provides validation and export tools to ensure the result is complete and correct.
SKILL.md
rendered from the published skill — quoted content, verbatim
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
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
mateclaw-server/src/main/resources/skills/design-md/SKILL.md
mateclaw-server/src/main/resources/skills/design-md/templates/starter.md