skills.rest
agtktID
agtktIDCOMMUNITY
Explore all skills by this author →
GitHub

design-md

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @google/design.md.

What problem does it solve? Maintaining a consistent visual identity across projects and coding agents is hard when design decisions live in scattered style guides. This Skill produces a single DESIGN.md file following Google's open spec, combining machine-readable YAML design tokens with human-readable rationale, and validates it for structural errors and WCAG contrast failures. ## Core Features & Use Cases - Authoring: Generate a complete DESIGN.md with colors, typography, rounded corners, spacing, and component tokens using token references like {colors.primary}. - Linting and Diffing: Run the @google/design.md CLI to catch broken token references, out-of-order sections, and WCAG AA contrast violations, and diff versions to detect regressions. - Exporting: Convert the spec to Tailwind v3 theme JSON, Tailwind v4 CSS @theme blocks, or W3C DTCG design tokens JSON. - Use Case: A team wants every AI coding agent to apply the same brand. You author a DESIGN.md with their palette and typography, lint it to fix a contrast failure on the primary button, then export a tailwind.theme.json for their frontend project. ## Quick Start Create a DESIGN.md design token spec for my brand with a blue accent color and Inter typography, 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 colors, typography, rounded, spacing, and components tokens, followed by canonical prose sections like Overview and Colors. Use token references such as {colors.primary} in component definitions, then validate with npx @google/design.md lint.

How to export design tokens to Tailwind from DESIGN.md?▼

Run npx -y @google/design.md export --format json-tailwind DESIGN.md to produce a Tailwind v3 theme JSON, or use --format css-tailwind for a Tailwind v4 CSS @theme block. A W3C DTCG JSON export is available via --format dtcg.

Does the design.md CLI check WCAG color contrast?▼

Yes, the lint command includes a contrast-ratio rule that warns when a component's textColor versus backgroundColor falls below WCAG AA 4.5:1. Warnings alone exit 0, while errors like broken token references exit 1.

Why does my DESIGN.md lint fail 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 typo-ing typography sub-properties which are silently dropped from exports.

Related Skills

Explore More Design & Creative Skills→
Spectra29115Spectra29115

branding-generator

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

Community
Advanced
reason-machinesreason-machines
4

design-md-format

Create, lint, diff, and export DESIGN.md design system token files.

Official
Intermediate
vesvietvesviet

design-review

Review UX flows, component specs, and design-system token conformance against user goals.

Community
Intermediate
humanerd-drewhumanerd-drew
2

claude-design

Design custom HTML artifacts using brand tokens and system files.

Official
Advanced