# Designmdme Cli

> Generate a DESIGN.md design-system spec (color tokens, typography, spacing, shadows, components) and optional HTML preview from any website URL using the designmdme CLI. Use when the user wants to extract, capture, replicate, or reference a website's design system or visual style — e.g. "build a UI like stripe.com", "match this brand's look", "get the design tokens for linear.app", "make my app l…

- **Type:** Skill
- **Install:** `agentstack add skill-crowdlinker-skills-designmdme-cli`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [CrowdLinker](https://agentstack.voostack.com/s/crowdlinker)
- **Installs:** 0
- **Category:** [Productivity](https://agentstack.voostack.com/c/productivity)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [CrowdLinker](https://github.com/CrowdLinker)
- **Source:** https://github.com/CrowdLinker/Skills/tree/main/designmdme-cli

## Install

```sh
agentstack add skill-crowdlinker-skills-designmdme-cli
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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`.

```bash
# 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.

```bash
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.

```bash
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`. |

```bash
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.

```bash
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

```bash
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).
2. Generate to a known path: `designmdme  --output .md`.
3. **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.
4. 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

```bash
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](https://github.com/CrowdLinker)
- **Source:** [CrowdLinker/Skills](https://github.com/CrowdLinker/Skills)
- **License:** MIT

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-crowdlinker-skills-designmdme-cli
- Seller: https://agentstack.voostack.com/s/crowdlinker
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.