skills.rest
perasyudha
perasyudhaCOMMUNITY
Explore all skills by this author →
Website𝕏@Nyxora_AIGitHub

design-md

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

5|2|Updated May 26, 2026
Search Tags:#design system#design tokens#wcag#tailwind#lint#design.md#dtcg
One-click install
npx skills add https://github.com/perasyudha/Nyxora --skill design-md-perasyudha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/perasyudha/Nyxora/tree/main/packages/core/playbooks/creative/design-md
Command: npx skills add https://github.com/perasyudha/Nyxora --skill design-md-perasyudha

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 creates and validates a single DESIGN.md file that combines machine-readable design tokens with human-readable rationale, following Google's open spec. ## Core Features & Use Cases - Authoring: Generate a complete DESIGN.md with YAML frontmatter tokens (colors, typography, spacing, rounded corners, components) and canonical Markdown sections in the enforced order. - Validation & Accessibility: Run the @google/design.md CLI to lint structure, catch broken token references, and check WCAG AA/AAA contrast ratios on component colors. - Export & Diffing: Export tokens to Tailwind theme JSON or W3C DTCG format, and diff two versions to detect regressions. - Use Case: A team wants their AI coding assistant to always use the same brand palette. You generate a DESIGN.md, lint it for WCAG contrast failures, and export a tailwind.theme.json so the tokens stay single-source. ## Quick Start Create a DESIGN.md design token spec for my brand with a blue accent color, then lint it and export it to Tailwind format.

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 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 so YAML parses them correctly.

How do I validate design tokens and check WCAG contrast?▼

Run npx -y @google/design.md lint DESIGN.md to validate structure, token references, and color formats. The wcag-contrast rule checks component textColor against backgroundColor for WCAG AA (4.5:1) and AAA (7:1) ratios, reporting warnings or info.

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

Yes, the CLI supports both exports. Use npx @google/design.md export --format tailwind for a Tailwind theme JSON, or --format dtcg for W3C Design Tokens Format Module JSON. All commands also accept stdin via the dash argument.

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

Broken references occur when a token reference like {colors.primary} points to a token that does not exist. References resolve by full dotted path, so {primary} alone will not work. Define the token in frontmatter or fix the path.

How should component variants like hover states be defined?▼

Variants must be separate sibling component entries with related key names, such as button-primary-hover, not nested under the base component. Nesting variants like button-primary.hover is invalid and will not be recognized by the spec.

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
moonzffmoonzff
1

design-md-authoring

Create and audit DESIGN.md visual design system files for AI-assisted UI generation.

Community
Intermediate
jordanhubbardjordanhubbard
9

claude-design

Design custom HTML artifacts using a structured design process.

Community
Advanced