skills.rest
AvaTar-ArTs
AvaTar-ArTsCOMMUNITY
Explore all skills by this author →
GitHub

design-md

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

Updated Jul 10, 2026
Search Tags:#design system#design tokens#wcag#tailwind#lint#design.md#dtcg
One-click install
npx skills add https://github.com/AvaTar-ArTs/.Agent-skills --skill design-md-avatar-arts
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/AvaTar-ArTs/.Agent-skills/tree/main/skills/creative/design-md
Command: npx skills add https://github.com/AvaTar-ArTs/.Agent-skills --skill design-md-avatar-arts

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams need a single, machine-readable source of truth for visual identity that coding agents can consume. This Skill creates and validates DESIGN.md files following Google's open spec, combining YAML design tokens with human-readable rationale, and catches broken token references and WCAG contrast failures before they reach production. ## Core Features & Use Cases - Authoring: Generate complete DESIGN.md files with colors, typography, spacing, rounded corners, and component tokens using {path.to.token} references. - Validation & Diffing: Run npx @google/design.md lint to catch broken references, duplicate sections, invalid values, and WCAG AA/AAA contrast issues; diff two versions to detect regressions. - Export: Convert the spec to Tailwind theme JSON or W3C DTCG design tokens JSON for use in existing projects. - Use Case: A user pastes their brand palette and asks for a design system. The Skill writes a valid DESIGN.md, lints it for contrast compliance, and exports tailwind.theme.json ready for their app. ## 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 version, name, colors, typography, rounded, spacing, and components tokens, followed by canonical sections like Overview, Colors, and Components. Always quote hex colors and negative dimensions, and use {colors.primary} style references in component definitions.

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 value 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 findings.

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

Yes, the CLI exports to both formats. 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-ref errors?▼

A broken-ref error means 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. Fix the reference or add the missing token to the frontmatter.

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

Define variants as separate sibling component entries, not nested objects. Use button-primary-hover alongside button-primary rather than button-primary.hover. Component properties are limited to a whitelist including backgroundColor, textColor, typography, rounded, padding, size, height, and width.

Related Skills

Explore More Design & Creative Skills→
Spectra29115Spectra29115

branding-generator

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

Community
Advanced
nickstradnickstrad

tailwind-design-system

Build scalable design systems with Tailwind CSS and design tokens.

Community
Intermediate
swcstudiospaceswcstudiospace

sketch

Generates 2-3 interactive HTML design variants for side-by-side comparison before committing to a direction.

Official
Intermediate
AradotsoAradotso
3

figma-design-md-plugin

Convert Figma design styles and variable collections into DESIGN.md and SKILL.md documentation.

Official
Intermediate