skills.rest
loteiron
loteironCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-md

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

Updated Sep 10, 2026
Search Tags:#WCAG#design system#design tokens#tailwind#export#design.md#dtcg
One-click install
npx skills add https://github.com/loteiron/ZeusAgent --skill design-md-loteiron
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/loteiron/ZeusAgent/tree/main/skills/creative/design-md
Command: npx skills add https://github.com/loteiron/ZeusAgent --skill design-md-loteiron

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @google/design.md.

What problem does it solve? Design teams and developers struggle to communicate visual identity to coding agents in a consistent, machine-readable way. This Skill creates and validates DESIGN.md files — Google's open spec combining YAML design tokens with Markdown rationale — so colors, typography, spacing, and components stay consistent across projects and tools. ## Core Features & Use Cases - Authoring: Generate complete DESIGN.md files with YAML front matter tokens (colors, typography, rounded, spacing, components) and canonical Markdown sections, using token references like {colors.primary} for single-source palettes. - Validation & Diffing: Run the @google/design.md CLI to lint structure, catch broken token references, check WCAG AA contrast ratios, and diff versions to detect regressions. - Exporting: Convert DESIGN.md to Tailwind v3 theme JSON, Tailwind v4 CSS @theme blocks, or W3C DTCG design tokens JSON. - Use Case: A user pastes their brand guidelines and asks for a design system spec. The Skill writes a DESIGN.md with quoted hex colors and sibling variant components, lints it for contrast failures, and exports tailwind.theme.json for their existing project. ## 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 front matter containing version, name, colors, typography, rounded, spacing, and components tokens, followed by canonical sections like Overview, Colors, and Components. 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 structure, broken token references, and WCAG AA contrast ratios between component textColor and backgroundColor. Lint exits 1 on errors; warnings alone exit 0.

Can I export DESIGN.md to Tailwind config?▼

Yes, the CLI exports to Tailwind v3 theme JSON with --format json-tailwind and to a Tailwind v4 CSS @theme block with --format css-tailwind. It also supports W3C DTCG JSON via --format dtcg.

Why does the design.md command not work 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: npx -y -p @google/design.md designmd lint DESIGN.md.

How should component variants like hover states be defined?▼

Define variants as separate sibling component entries with related key names, such as button-primary-hover, not as nested properties. Nesting like button-primary.hover is invalid per the spec.

What are the limitations of the DESIGN.md spec?▼

The spec is marked alpha (CLI 0.3.0), so breaking changes are possible. Typography sub-property typos are silently dropped without lint findings, and token references must use full dotted paths like {colors.primary}.

Related Skills

Explore More Design & Creative Skills→
Spectra29115Spectra29115

branding-generator

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

Community
Advanced
rbudiharsorbudiharso
2

design-md

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

Community
Intermediate
TekLabsVNTekLabsVN
1

ui-design

Generate HTML and React previews for UI components using Tailwind, MagicUI, Shadcn, and Phosphor icons.

Official
Advanced
LuminaVaultLuminaVault

claude-design

Design custom HTML artifacts like landing pages and prototypes.

Official
Advanced