An AI skill for building UI using design.md design systems — works with Claude Code and any agent that supports skills.
design.md is a machine-readable spec that encodes a complete design system — colors, typography, spacing, radius, shadows, and components — in a single YAML file. This skill teaches Claude to fetch those tokens and apply them faithfully when generating any UI.
| Source | Example |
|---|---|
Any design.md URL |
https://yoursite.com/design.md |
| Vercel / Geist | https://vercel.com/design.md + design.dark.md |
| designsmd.vercel.app gallery | 156+ curated design systems by aesthetic category |
| Description / images | Describe a vibe, Claude synthesizes the spec |
| Figma file | Claude extracts variables and styles via Figma MCP |
Just describe what you want — Claude triggers automatically:
use vercel.com/design.md to build a login page
help me pick a design from the gallery and make a dashboard
/design-md https://designsmd.vercel.app/design/dark--3d-sculpt build a departures board
here's my Figma file: figma.com/design/xxx — build a card component from it
Copy the skill folder to your Claude skills directory:
git clone https://github.com/Ray0907/design-md-skill.git
cp -r design-md-skill/design-md ~/.claude/skills/design-mdRestart Claude Code — the skill will be available immediately.
design-md/
├── SKILL.md # Main skill instructions
└── references/
└── geist.md # Geist/Vercel token fallback reference
- designsmd.vercel.app — Gallery of 156+ design systems
- vercel.com/design.md — Geist light theme tokens
- vercel.com/design.dark.md — Geist dark theme tokens