skills.rest
yakeworld
yakeworldCOMMUNITY
Explore all skills by this author →
GitHub

design-md

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

6|1|Updated May 11, 2026
Search Tags:#design system#design tokens#visual identity#wcag#tailwind#lint#design.md
One-click install
npx skills add https://github.com/yakeworld/Synthos --skill design-md-yakeworld
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md
Source: https://github.com/yakeworld/Synthos/tree/main/skills/extended/external-automation/creative/diagrams/design-md
Command: npx skills add https://github.com/yakeworld/Synthos --skill design-md-yakeworld

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @google/design.md.

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 — Google's open spec combining YAML design tokens with Markdown rationale — so colors, typography, and components stay consistent across projects and tools. ## Core Features & Use Cases - Authoring: Generate a complete DESIGN.md with YAML front matter tokens (colors, typography, rounded, spacing, components) and canonical Markdown sections in the enforced order. - Linting & Validation: Run npx @google/design.md lint to catch broken token references, duplicate sections, invalid colors/dimensions, and WCAG contrast failures. - Export & Diff: Convert tokens to Tailwind theme JSON or W3C DTCG format, and diff two versions to detect regressions. - Use Case: A user asks for a design system for a minimalist academic brand with a specific palette and Inter font; the Skill writes a valid DESIGN.md, lints it to exit code 0, and reports WCAG contrast results. ## Quick Start Ask the agent to create a DESIGN.md for your brand with your primary color, accent color, and font, then lint it with the Google design.md CLI.

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 name and colors tokens, plus optional typography, rounded, spacing, and components sections. Follow the canonical section order from Overview through Do's and Don'ts, then validate with npx @google/design.md lint.

How do I validate design tokens for WCAG contrast?▼

Run npx -y @google/design.md lint DESIGN.md, which checks component textColor against backgroundColor ratios against WCAG AA (4.5:1) and AAA (7:1). Contrast findings appear as warnings or info in the lint output.

Can I export DESIGN.md tokens to Tailwind?▼

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 tooling interoperability.

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 token that does not exist in the front matter. Fix it by defining the missing token or correcting the dotted reference path to an existing token.

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

Define variants as separate sibling component keys such as button-primary-hover, not as nested properties under the parent component. Nested variants trigger unknown-component-property warnings because hover is outside the property whitelist.

When should I use DESIGN.md instead of a visual design mockup?▼

Use DESIGN.md when you need a formal, machine-readable spec that coding agents can consume for consistent UI across projects. For visual inspiration or one-off prototypes, layout examples and design exploration tools are a better fit.

Related Skills

Explore More Design & Creative Skills→
samChang72samChang72
1

ads-dna

Extract brand DNA from a website URL into a JSON file.

Community
Advanced
aivos-xieaivos-xie
1

design-md

Generate and validate Google DESIGN.md design tokens with WCAG accessibility checks.

Community
Intermediate
wondelaiwondelai
1.9k

refactoring-ui

Generate design tokens and layout patterns for web UI systems.

Official
Basic
rp4rirp4ri

design-token-extractor

Extracts design tokens from CSS, SCSS, JavaScript, and Tailwind config files into CSS custom properties, Tailwind config, and Style Dictionary JSON.

Community
Advanced