@designmdcc/cli

Extract design tokens and generate a DESIGN.md spec from any URL. Pipe-friendly. Built for AI coding agents (Cursor, Claude Code, Windsurf, Aider).

npm install -g @designmdcc/cli

dmd stripe.com > DESIGN.md

What it does

dmd <url> extracts a website's design system — colors, typography, spacing, breakpoints, CSS variables, component patterns — and streams a production-grade DESIGN.md markdown spec to stdout. The output is the kind of file a senior engineer would actually use to rebuild the brand.

Under the hood it calls the designmd.cc API. Same backend that powers the web app and the benchmark catalog.

Usage

dmd <url>                 # stream DESIGN.md to stdout
dmd <url> --out=PATH      # write DESIGN.md to a file
dmd <url> --json          # token JSON only (no LLM call — instant + free)
dmd <url> --force         # bypass cache; re-extract + re-generate
dmd <url> --quiet         # silence progress messages
dmd --help
dmd --version

Examples

# Standard: pipe markdown straight into a file
dmd stripe.com > DESIGN.md

# Copy to clipboard
dmd https://linear.app | pbcopy

# Write to a project subfolder
dmd cursor.com --out=./design/cursor.md

# Token-only extraction (free, instant — no LLM)
dmd vercel.com --json | jq .colors

# Override the API endpoint for self-hosting
DESIGNMD_API=https://my-designmd.internal dmd notion.so

How AI coding agents use it

Cursor / Claude Code / Windsurf / Aider (terminal-based agents)

Just ask:

"Extract the design system from stripe.com and put it in ./DESIGN.md."

The agent will run dmd stripe.com > DESIGN.md and then read the file to reason about colors, typography, components when generating UI code.

Inside a workflow

# Apply Stripe's design system to your project
dmd stripe.com > DESIGN.md
# Now ask your AI agent to rebuild a component using DESIGN.md as the spec

Output format

dmd <url> produces a 9-section DESIGN.md:

1. Visual Theme & Atmosphere
2. Color Palette & Roles
3. Typography Rules
4. Spacing & Layout
5. Components
6. Visual Character
7. Motion & Interaction
8. Responsive Breakpoints
9. Accessibility & Contrast

dmd <url> --json returns the raw extracted tokens (colors, typography families, breakpoints, CSS variables, etc.) as JSON — useful for programmatic consumption.

Exit codes

| Code | Meaning | | --- | --- | | 0 | Success | | 1 | User error (bad URL, unsupported flag, refused extraction) | | 2 | Transient — try again (rate limit, server busy, timeout) | | 3 | Network error |

Rate limits (v0.1)

Anonymous use: 5 generations / day per IP-bucket, shared across all anonymous users on the same IP /64 block. --json extraction does NOT count against this — only LLM-backed DESIGN.md generation does.

Per-user API keys (higher quotas) ship when auth lands.

Environment

| Variable | Default | Purpose | | --- | --- | --- | | DESIGNMD_API | https://designmd.cc | Override the API base URL — useful for self-hosters |

Requirements

• Node.js 18+

License

MIT