Skip to content
UXClaim
Design Systems

Generate Design.md

Create, edit, and validate AI-readable design system files with tokens, colors, typography, and component patterns.

View source More in Design Systems

What it does

generate-design-md creates and maintains DESIGN.md files — machine-readable design system documents that AI agents can understand and follow. Each file combines YAML design tokens (colors, typography, spacing) with markdown rationale.

How it works

The skill offers two generation paths: describe your design vision and let Claude generate tokens, or scan your existing codebase to extract design signals automatically. After generation, it validates your file against Google’s linting rules, checking for broken references, WCAG contrast compliance, and proper structure. You can export tokens to Tailwind CSS or W3C DTCG format.

Use cases

  • Design system documentation: Create single-source-of-truth design files that both humans and AI agents read
  • Design handoff: Give design agents consistent visual rules so generated screens match your brand
  • Token management: Maintain colors, typography, and spacing in one validated format
  • Scaling design: Ensure consistency across AI-generated interfaces and components

Who benefits

Product designers building design systems, design leaders standardizing brand assets, and teams using AI agents for UI generation.

Frequently asked questions

What is DESIGN.md?
DESIGN.md is Google's plain-text design system format that combines YAML design tokens (colors, typography, spacing, components) with markdown documentation. It's machine-readable for AI agents and human-readable for designers—like a counterpart to README.md and AGENTS.md.
How do I install generate-design-md?
Clone the repository into your Claude Code skills directory: `git clone https://github.com/shripunta/generate-design-md.git ~/.claude/skills/generate-design-md`. Then invoke it via the skill menu in Claude Code.
How do I generate a DESIGN.md file?
Type `/generate-design-md` in Claude Code. Choose Option 1 to describe your design vibe, brand, or aesthetic, or Option 2 to scan your codebase for existing design signals. The skill generates the file and automatically lints it.
Can I export tokens to other formats?
Yes. The skill exports to Tailwind CSS and W3C DTCG (design tokens) format using the @google/design.md CLI. Use `npx @google/design.md export --format tailwind DESIGN.md` or `--format dtcg` from the command line.
How does validation work?
The skill uses Google's @google/design.md linter to check 8 rules: token reference validity, WCAG AA contrast ratios, section ordering, required fields, syntax, and more. It automatically fixes errors and reports issues.
Can I edit an existing DESIGN.md?
Yes. The skill can update tokens, add components, adjust typography, and modify other sections of an existing DESIGN.md file. Changes are validated after editing.
Why would a design agent need DESIGN.md?
Design agents read DESIGN.md to understand your color palette, typography rules, spacing system, and component patterns. This ensures every screen they generate follows your visual system consistently.
What design tokens can I define?
You can define colors (with WCAG contrast validation), typography (font family, size, weight, line height), spacing scales, border radius, shadows, and custom component patterns—all in structured YAML.

Glossary

Design token
A named variable that stores a design decision (like a color hex code or font size) in a format both humans and machines can read. Enables consistency across digital products.
DESIGN.md
Google's machine-readable design system format combining YAML front matter with design tokens and markdown documentation. Allows AI agents to understand and follow visual rules.
WCAG contrast ratio
A measure of the difference in brightness between two colors (typically text and background). WCAG AA requires 4.5:1 for normal text; the linter validates this automatically.
Linting
Automated validation of file structure and content against a ruleset. The skill lints DESIGN.md files to catch broken token references, missing fields, and compliance issues.

More in Design Systems

All →
Design Systems

Arcade Prototyper

Build interactive HTML prototypes using DevRev's production design system and Arcade components in Claude Code.

asundiev-devrev
Design Systems

Awesome Design Skill

Access 54+ brand design systems (Linear, Apple, Stripe, Vercel) for Claude Code UI development with complete design specifications.