skills.rest
vivekgoquest
vivekgoquestCOMMUNITY
Explore all skills by this author →
GitHub

design-md

Author, lint, and export Google DESIGN.md design token specification files.

Updated Aug 22, 2026
Search Tags:#WCAG#design system#design tokens#tailwind#lint#design.md#dtcg
One-click install
npx skills add https://github.com/vivekgoquest/hermes-agent-stable --skill design-md-vivekgoquest
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/vivekgoquest/hermes-agent-stable/tree/main/skills/creative/design-md
Command: npx skills add https://github.com/vivekgoquest/hermes-agent-stable --skill design-md-vivekgoquest

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @google/design.md.

What problem does it solve? Teams struggle to keep visual identity consistent across projects and coding agents. This Skill creates and validates DESIGN.md files — Google's open spec that combines machine-readable design tokens with human-readable rationale — so agents and tools consume one canonical style source. ## Core Features & Use Cases - Authoring: Generate a complete DESIGN.md with YAML token front matter (colors, typography, rounded, spacing, components) and canonical Markdown sections, using token references like {colors.primary} for a single-source palette. - Linting & Diffing: Run the @google/design.md CLI to check broken token references, WCAG AA contrast ratios, section order, and regressions between versions. - Exporting: Convert the spec to Tailwind v3 theme JSON, Tailwind v4 CSS @theme blocks, or W3C DTCG design tokens JSON. - Use Case: A user pastes their brand palette and asks for a design system; the Skill writes DESIGN.md, lints it for contrast failures, and exports tailwind.theme.json and tokens.json next to it. ## Quick Start Create a DESIGN.md design token spec for my brand with a blue accent color, then lint it and export a Tailwind theme.

Frequently Asked Questions about design-md

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a DESIGN.md design token file?▼

Write a Markdown file with YAML front matter containing version, name, colors, typography, rounded, spacing, and components tokens, followed by canonical sections like Overview, Colors, and Components. Use token references such as {colors.primary} in component definitions to keep the palette single-source.

How do I validate design tokens and WCAG contrast?▼

Run npx -y @google/design.md lint DESIGN.md to check structure, broken token references, and WCAG AA contrast ratios between component textColor and backgroundColor. The lint command exits 1 on errors; warnings alone exit 0.

Can I export DESIGN.md to Tailwind or DTCG format?▼

Yes, the CLI exports to Tailwind v3 theme JSON, a Tailwind v4 CSS @theme block, or W3C DTCG design tokens JSON. Use npx -y @google/design.md export --format json-tailwind, css-tailwind, or dtcg followed by the file path.

Why does the design.md command not work on Windows?▼

On Windows the design.md bin name collides with the .md file association, causing a silent no-op or opening the file in an editor. Use the dot-free alias instead: npx -y -p @google/design.md designmd lint DESIGN.md.

What are common DESIGN.md authoring mistakes?▼

Common pitfalls include nesting component variants instead of using sibling keys like button-primary-hover, leaving hex colors unquoted so YAML misparses them, and typoing typography sub-properties which are silently dropped from exports. Token references must use full dotted paths like {colors.primary}.

Related Skills

Explore More Design & Creative Skills→
Spectra29115Spectra29115

branding-generator

Generate brand identity kits with logos, color palettes, typography, and style guides.

Community
Advanced
AissenLiuAissenLiu

design-md

Validate DESIGN.md files and export design tokens to Tailwind or DTCG JSON.

Community
Advanced
qodex-aiqodex-ai
39

aesthetic-analysis

Analyze visual references and implement matching React Native designs.

Official
Advanced
kngender5kngender5

claude-design

Guide HTML artifact design with UX/UI principles and in-browser previews.

Community
Intermediate