design-md
design-md helps you create and maintain formal design token specifications using Google's open DESIGN.md format. Write machine-readable tokens in YAML paired with human-readable guidance, then lint for WCAG contrast compliance, diff versions for regressions, and export to Tailwind or W3C DTCG JSON formats.
design-md creates and validates Google's DESIGN.md token spec files for consistent design systems across projects.
AI-generated summary based on this skill's SKILL.md
Install
NousResearch/hermes-agent/design-md · repository language: Python
git clone https://github.com/NousResearch/hermes-agent
cp -r hermes-agent/skills/creative/design-md ~/.claude/skills/design-mdFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
What is design-md and what can it do?
design-md helps you create and maintain formal design token specifications using Google's open DESIGN.md format. Write machine-readable tokens in YAML paired with human-readable guidance, then lint for WCAG contrast compliance, diff versions for regressions, and export to Tailwind or W3C DTCG JSON formats.
Can design-md validate design tokens and check WCAG compliance?
Yes. design-md lints your design token files to catch errors and regressions, and ensures design system colors meet WCAG accessibility contrast standards. You can validate your tokens before exporting them to other tools or sharing across projects.
How do I export design tokens to Tailwind from design-md?
design-md generates Tailwind or DTCG JSON exports directly from your design.md file. Once you've authored your tokens in the DESIGN.md format, the tool can convert them to Tailwind configuration or W3C DTCG JSON for use in your projects.
What export formats does design-md support?
design-md supports export to Tailwind configuration and W3C DTCG JSON formats. This lets you standardize UI and brand tokens across multiple projects and tools while maintaining a single source of truth in your DESIGN.md file.
How does design-md help with design system version control?
design-md includes diff and linting capabilities to catch regressions and errors when you update your design token files. You can track changes across versions and ensure your design system stays consistent as it evolves.
Is design-md open source and what license does it use?
Yes, design-md is open source under the MIT license, making it free to use, modify, and distribute in both commercial and personal projects.
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
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
skills/creative/design-md/SKILL.md
skills/creative/design-md/templates/starter.md