Drop any DESIGN.md into your repo in one command.
design-md is a tiny CLI — built agent-first — for pulling DESIGN.md files
from this directory into your project. Spec ↗.
No install, just run it.
Install once, use everywhere.
- 01
Discover commands
Print the full menu — every command and flag the CLI exposes. Agents can always rediscover the surface this way.
$ design-md --help - 02
List every design
Prints each design's id, name, and tags — the full catalog in one shot. Pipe to grep / fzf to fuzzy-pick.
$ design-md list - 03
Browse categories
Without a name, lists every category with a count of designs. With a name, lists every design in that category.
$ design-md category [name] - 04
Add a design to your repo
Writes the chosen DESIGN.md into your current working directory.
$ design-md add <slug>Flag Default Description -o, --out <path> DESIGN.md Where to write the file. -f, --force false Overwrite the output file if it exists. - 05
Extract a DESIGN.md from any URL
Open a real production site, lift its tokens, and write a draft DESIGN.md you can commit. The killer feature designdotmd doesn't have.
$ design-md extract <url>Flag Default Description -o, --out <path> <host>.md Where to write the draft. --token-only false Skip prose synthesis; emit only the YAML frontmatter. - 06
Interactive picker
Pick a design via @clack/prompts — fuzzy-search, preview tags + swatches, install in one keystroke.
$ design-md init - 07
Validate a file
Wraps @google/design.md lint. Returns broken refs, missing primary, contrast warnings, missing sections, and section order issues.
$ design-md lint <file>Flag Default Description --format=json|text text Output format (use json for piping into CI). - 08
Diff two files
Token-level diff between any two DESIGN.md files. Shows added / removed / modified per category, plus regression in lint findings.
$ design-md diff <a> <b>Flag Default Description --format=json|text text Output format. - 09
Export to another format
Convert tokens to Tailwind 4 config, CSS variables, DTCG JSON, or Figma Variables JSON.
$ design-md export <file> --to <format>Flag Default Description --to tailwind — theme.extend block for tailwind.config.js --to css — :root { --bg, --text, --brand, … } CSS variables --to dtcg — W3C Design Tokens Community Group JSON --to figma — Figma Variables panel import format - 10
Generate a dark variant
Compute a dark-mode counterpart of any light design (or vice versa). Useful for retrofitting older systems.
$ design-md theme <slug> --dark - 11
Open in browser
Open the directory detail page for this design in your default browser. Bring up the kitchen sink + token tables instantly.
$ design-md preview <slug>
Skip the CLI. Let your agent install designs directly.
We ship a Model Context Protocol server that exposes the entire catalog as native tools. Connect it once in Claude Desktop, Claude Code, Cursor, or any MCP-aware client — then ask your agent "install Stripe's DESIGN.md here" and it does. Browse, search, diff, export, install — all from chat.
Install in Claude Desktop / Cursor
{
"mcpServers": {
"design-md": {
"command": "npx",
"args": ["-y", "@webdesignhot/design-md-mcp"]
}
}
}