Designmdme Cli

designmdme CLI

designmdme turns any public website into a DESIGN.md — a structured Markdown spec of that site's design system (color tokens, typography scale, spacing, border radius, shadows/elevation, and component patterns). It can optionally also produce a self-contained HTML preview that renders those tokens as live visual specimens.

The DESIGN.md is built to be fed to coding agents: when a user asks you to build or restyle a UI to match a real brand, generate the spec first, read it, then write code against its exact token values instead of guessing colors and fonts.

When to use this skill

Use it whenever the task depends on an accurate, real design system from a live site:

• "Build a landing page in the style of stripe.com" → generate stripe.com, read the

DESIGN.md, then implement using its actual hex values and font stack.

• "Match our marketing site's design" / "make this look on-brand" → extract that URL.
• "What's linear.app's color palette / font?" → generate and read the relevant section.
• Setting up a new project's design tokens from an existing reference site.

If the user only wants a quick visual impression and no code, the HTML preview (--html) is the shareable artifact. For everything code-related, the Markdown is the source of truth.

Install

The binary is designmdme, published as @crowdlinker/designmdme.

# One-off (no install)
npx @crowdlinker/designmdme stripe.com

# Or install globally so the `designmdme` command is always available
npm install -g @crowdlinker/designmdme

Authentication (one-time, interactive)

The CLI is account-gated; generation requires a logged-in token. Auth uses a browser device-code flow and stores a token at ~/.designmdme/auth.json (token + expiry only, no other PII). Tokens default to a 30-day lifetime.

designmdme login     # opens a browser, prints a fallback URL + code, then polls
designmdme whoami    # prints the logged-in email + token expiry
designmdme logout    # deletes ~/.designmdme/auth.json

login is interactive (it opens a browser and waits up to 10 minutes for the user to approve). Do not run it unattended. If a command fails with "Not logged in" or "Token expired", stop and ask the user to run designmdme login themselves — you cannot complete the browser approval for them.

Generate a DESIGN.md (the default command)

The URL may be passed as a positional argument or via -w/--website; both are equivalent. http/https and www. are normalized automatically.

designmdme stripe.com
designmdme --website https://stripe.com

What happens: the CLI checks the token, verifies the URL is reachable, scans the site, streams the spec, and writes the file. Default output name is DESIGN-.md in the current directory, where ` is the hostname with www. stripped and non-alphanumeric characters collapsed to hyphens (e.g. stripe.com → DESIGN-stripe-com.md`).

Options

| Flag | Meaning | |------|---------| | -w, --website | Website URL — alias for the positional argument. | | -o, --output | Write to a specific path instead of DESIGN-.md. Parent dirs are created if missing. | | --html | Also generate an HTML preview alongside the Markdown (+8 credits — see [Credit costs](#credit-costs)). Written to the same path with .html instead of .md. |

designmdme stripe.com --output ./docs/stripe-design.md
designmdme --website stripe.com --html        # writes DESIGN-stripe-com.md + .html

Important: avoid the interactive overwrite prompt

If the target file already exists, the CLI interactively prompts "Replace or create a copy? (replace/copy)" and blocks waiting for input. When running non-interactively (which is the normal case for an agent), this will hang. To stay safe:

• Pass an explicit, unique --output path that doesn't already exist, or
• Check for / remove the default DESIGN-.md first.

If the prompt is answered "copy" (the default), the copy is named DESIGN--YYYYMMDD.md (date-stamped).

Generate an HTML design preview

Add --html to also produce a self-contained HTML page that renders the extracted design system as live visual specimens: color swatches with hex labels, type-scale specimens set in the site's actual fonts, spacing and radius bars, shadow/elevation cards, and a copy-ready :root CSS-variables block. It is a single standalone .html file with all CSS inlined and no external dependencies — useful for sharing with designers, dropping into a wiki, or eyeballing the brand before building.

designmdme stripe.com --html     # writes DESIGN-stripe-com.md AND DESIGN-stripe-com.html

Behavior:

• The HTML is written alongside the Markdown — same path, .html instead of .md

(control the base path with --output). It is subject to the same overwrite prompt.

• HTML is generated from the Markdown spec, so the Markdown is always produced

first. If the HTML step fails (e.g. not enough credits), the .md file is still saved.

• For code tasks, prefer the Markdown — it is the machine-readable source of truth.

Reach for --html only when the user wants a visual artifact to view or share.

Credit costs

Generation consumes account credits. Exact costs:

| What you generate | Credits | |-------------------|---------| | DESIGN.md — Markdown only (the default) | 4 | | HTML preview — the --html add-on | 8 | | Markdown + HTML together (--html) | 12 total (4 + 8) |

Notes:

• The HTML preview is billed once per generation and cached — re-running --html

for the same site serves the cached file and does not charge again (the CLI prints "HTML preview ready (cached)").

• If --html reports "Insufficient credits", the Markdown has already been saved

successfully — only the HTML add-on was skipped. Do not retry in a loop; tell the user to top up at https://designmd.me/pricing.

Inspect history and usage

designmdme list      # recent generations (CLI + web), with share URLs and local file paths
designmdme usage     # credit balance, credits used vs received, generation counts, recent transactions

Check designmdme usage before a batch of generations to confirm there are enough credits (4 per Markdown, 8 more per --html). If the balance is empty, stop and tell the user to top up at https://designmd.me/pricing — do not retry in a loop.

Recommended agent workflow

1. Confirm auth only if needed: a generate call will fail fast with a clear message if

not logged in. Don't preemptively run login (it's interactive).

1. Generate to a known path: designmdme --output .md.
2. Read the generated DESIGN.md and pull exact values — hex codes, font families

and sizes, spacing units, radii, shadow values, component styles. Use those verbatim in the code you write; do not approximate.

1. If the user wants a visual reference too, add --html and open the .html file.

Troubleshooting

| Symptom | Cause / action | |---------|----------------| | Not logged in / Token expired / Token is no longer valid | Ask the user to run designmdme login. Auth is interactive; you can't do it for them. | | Hangs after "already exists" | Interactive overwrite prompt — re-run with a unique --output path. | | Insufficient credits for HTML preview | Out of credits for --html; the Markdown may still have succeeded. Tell the user to top up at https://designmd.me/pricing. | | URL reachability failure | The site is down, blocking bots, or the URL is wrong. Confirm the URL with the user. | | Empty output | Generation returned nothing — retry once; if it persists, report it. |

Quick reference

designmdme login                              # one-time browser auth
designmdme whoami                             # who am I + token expiry
designmdme stripe.com                         # → DESIGN-stripe-com.md
designmdme --website stripe.com               # same, via flag
designmdme stripe.com --output ./docs/s.md    # custom path (avoids overwrite prompt)
designmdme stripe.com --html                  # also write .html preview (+8 credits)
designmdme list                               # recent generations
designmdme usage                              # credits + generation stats
designmdme logout                             # remove stored credentials

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: CrowdLinker
• Source: CrowdLinker/Skills
• License: MIT

Install and usage instructions live in the source repository linked above.