skills.rest
maopujie10-sys
maopujie10-sysCOMMUNITY
Explore all skills by this author →
GitHub

design-md

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

1|Updated Jun 24, 2026
Search Tags:#design system#design tokens#wcag#tailwind#lint#design.md#dtcg
One-click install
npx skills add https://github.com/maopujie10-sys/Bailongma --skill design-md-maopujie10-sys
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/maopujie10-sys/Bailongma/tree/main/skills/hermes-skills/creative/design-md
Command: npx skills add https://github.com/maopujie10-sys/Bailongma --skill design-md-maopujie10-sys

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @google/design.md.

What problem does it solve? Maintaining a consistent visual identity across projects and AI coding agents is hard when design decisions live in scattered docs. This Skill helps you author, validate, and export Google's DESIGN.md spec files so design tokens and rationale live in one machine-readable file. ## Core Features & Use Cases - Authoring: Create DESIGN.md files combining YAML design tokens (colors, typography, spacing, components) with human-readable rationale in canonical section order. - Validation & Linting: Run the @google/design.md CLI to catch broken token references, duplicate sections, invalid values, and WCAG contrast failures. - Exporting: Convert DESIGN.md to Tailwind theme JSON or W3C DTCG tokens for direct use in build pipelines. - Use Case: A team wants their AI coding agent to always apply the same brand palette and typography. You generate a DESIGN.md with token references, lint it for WCAG AA contrast, and export a tailwind.theme.json for the frontend project. ## Quick Start Create a DESIGN.md design token spec for my project with a primary color, typography scale, and button components, then lint it for WCAG contrast 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 design token file?▼

Write a Markdown file with YAML frontmatter containing name, colors, typography, rounded, spacing, and components tokens, followed by prose sections in canonical order. Use token references like {colors.primary} in components, then validate with npx @google/design.md lint.

How do I export design tokens to Tailwind or DTCG format?▼

Run npx @google/design.md export with the --format flag set to tailwind or dtcg against your DESIGN.md file. The CLI outputs a tailwind.theme.json or W3C DTCG tokens.json that build pipelines can consume directly.

Does the DESIGN.md linter check WCAG color contrast?▼

Yes, the wcag-contrast rule checks each component's textColor against its backgroundColor for WCAG AA (4.5:1) and AAA (7:1) ratios. Findings are reported as warnings or info during lint runs.

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

The broken-ref error occurs when a token reference like {colors.missing} points to a non-existent token path. References resolve by full dotted path, so {primary} fails while {colors.primary} works.

How should component hover states be defined in DESIGN.md?▼

Variants like hover, active, and pressed must be separate sibling component entries such as button-primary-hover, not nested properties. Nesting variants inside a component is rejected by the spec.

When should I use DESIGN.md instead of a regular style guide?▼

Use DESIGN.md when you need a formal, machine-readable spec that coding agents and tools can consume, with linting and export support. For visual inspiration or one-off prototypes, a prose style guide or design exploration approach fits better.

Related Skills

Explore More Design & Creative Skills→
nextlevelbuildernextlevelbuilder
123.5k

brand

Manage brand voice, visual identity, and asset compliance with validation scripts.

Official
Intermediate
i-bebsii-bebsi

design-md

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

Community
Intermediate
nholder88nholder88
2

ui-ux-review

Evaluate frontend UI against design-system rules for consistency and accessibility.

Community
Advanced
dylantarredylantarre
38

style-dictionary

Transform design tokens into CSS, SCSS, Swift, and Android XML outputs.

Community
Intermediate