skills.rest
Chensihakniroth
ChensihaknirothCOMMUNITY
Explore all skills by this author →
GitHub

design-md

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

Updated Jun 7, 2026
Search Tags:#accessibility#WCAG#design system#design tokens#tailwind#lint#dtcg
One-click install
npx skills add https://github.com/Chensihakniroth/ANAKOT-AGENT --skill design-md-chensihakniroth
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/Chensihakniroth/ANAKOT-AGENT/tree/main/skills/creative/design-md
Command: npx skills add https://github.com/Chensihakniroth/ANAKOT-AGENT --skill design-md-chensihakniroth

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 that combines machine-readable design tokens with human-readable rationale, then validates it for structural errors and WCAG contrast issues. ## Core Features & Use Cases - Authoring: Generate a complete DESIGN.md spec with colors, typography, spacing, rounded corners, and component tokens using token references like {colors.primary}. - Validation & Diffing: Run the @google/design.md CLI to lint structure, catch broken token references, detect WCAG AA/AAA contrast failures, and diff versions for regressions. - Exporting: Convert the spec to Tailwind theme JSON or W3C DTCG design tokens JSON for direct use in build pipelines. - Use Case: A team wants every AI coding agent to apply the same brand. You author a DESIGN.md with their palette and type scale, lint it to confirm contrast compliance, and export a tailwind.theme.json for their frontend repo. ## Quick Start Create a DESIGN.md design token spec for my brand with a blue accent color and Inter typography, 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 version, name, colors, typography, rounded, spacing, and components tokens, followed by canonical sections like Overview, Colors, and Typography. Always include name and colors, and quote hex values and negative dimensions.

How to validate design tokens for WCAG contrast?▼

Run npx -y @google/design.md lint DESIGN.md to check component textColor against backgroundColor ratios. The CLI reports warnings for WCAG AA (4.5:1) and AAA (7:1) failures along with structural errors like broken token references.

Can I export DESIGN.md to Tailwind config?▼

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

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

Broken references occur when a token path like {colors.primary} points to a token that does not exist in the frontmatter. References must use full dotted paths; shorthand like {primary} does not resolve.

How should component variants be defined in DESIGN.md?▼

Define variants as separate sibling component entries with related key names, such as button-primary-hover next to button-primary. Nesting variants like button-primary.hover is invalid and rejected by the linter.

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

Use DESIGN.md when coding agents or multiple tools need to consume your design system programmatically, since it pairs normative machine-readable tokens with prose rationale. For one-off visual prototypes or layout inspiration, a formal spec file is unnecessary.

Related Skills

Explore More Design & Creative Skills→
hjemmesidekongenhjemmesidekongen
1

visual-identity

Generate color palettes, typography, and spacing rules into tokens.yml and identity.yml.

Community
Advanced
AI-Foundry-CoreAI-Foundry-Core
4

tailwind-design-system

Build scalable design systems with Tailwind CSS v4 design tokens and CVA components.

Official
Advanced
HellKaiser45HellKaiser45

frontend-design-review

Analyze UI implementations against design system tokens and accessibility guidelines.

Community
Advanced
rickyanandarickyananda
1

claude-design

Design local HTML artifacts with embedded CSS and JavaScript from briefs or screenshots.

Community
Advanced