skills.rest
Junkfooooood
JunkfoooooodCOMMUNITY
Explore all skills by this author →
GitHub

design-md

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

Updated May 4, 2026
Search Tags:#accessibility#yaml#wcag#tailwind#design-system#design-tokens#dtcg
One-click install
npx skills add https://github.com/Junkfooooood/hermes-governance --skill design-md-junkfooooood
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/Junkfooooood/hermes-governance/tree/main/skills/creative/design-md
Command: npx skills add https://github.com/Junkfooooood/hermes-governance --skill design-md-junkfooooood

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @google/design.md.

What problem does it solve? Design teams struggle to communicate visual identity to coding agents in a machine-readable way. This Skill creates and validates DESIGN.md files that combine YAML design tokens with human-readable rationale, ensuring consistent UI across projects and catching accessibility issues before they ship. ## Core Features & Use Cases - Authoring: Generate complete DESIGN.md files with colors, typography, spacing, rounded corners, and component tokens using token references like {colors.primary}. - Validation: Lint files for broken token references, duplicate sections, invalid values, and WCAG contrast failures using the @google/design.md CLI. - Export: Convert DESIGN.md to Tailwind theme JSON or W3C DTCG format for direct use in build pipelines. - Use Case: A designer defines a brand palette once in DESIGN.md, lints it to confirm all button text meets WCAG AA contrast, then exports Tailwind config so every project uses identical tokens. ## Quick Start Ask the agent to create a DESIGN.md file for your brand with your preferred colors and typography, then lint it for accessibility issues.

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 file for my design system?▼

Write YAML frontmatter with version, name, colors, typography, and component tokens, followed by Markdown sections explaining rationale. Use token references like {colors.primary} in component definitions instead of repeating hex values.

How to validate design tokens for WCAG accessibility?▼

Run npx @google/design.md lint DESIGN.md to check contrast ratios between component textColor and backgroundColor against WCAG AA (4.5:1) and AAA (7:1) standards. The CLI reports violations as warnings with specific token locations.

Can I export DESIGN.md to Tailwind config?▼

Yes, run npx @google/design.md export --format tailwind DESIGN.md to generate a tailwind.theme.json file. You can also export to W3C DTCG format using --format dtcg for design token pipelines.

Why does my DESIGN.md lint fail with broken references?▼

Broken references occur when token paths like {colors.primary} point to non-existent tokens. Ensure all referenced tokens exist in the YAML frontmatter and use full dotted paths, not shorthand names.

What section order does DESIGN.md require?▼

Sections must appear in canonical order: Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts. Duplicate headings cause errors, but unknown sections are preserved without failing validation.

Related Skills

Explore More Design & Creative Skills→
Grupo-6-ADS-BGrupo-6-ADS-B
2

ckm:brand

Manage brand voice, visual identity, and asset compliance across marketing content.

Official
Intermediate
i-bebsii-bebsi

design-md

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

Community
Intermediate
ChangZhou-xjChangZhou-xj

design-md

Lint DESIGN.md token specs for references and WCAG contrast compliance.

Community
Advanced
yonatangrossyonatangross
217

figma-design-handoff

Extract Figma design tokens and generate TypeScript component interfaces.

Community
Advanced