Content
# claude-design-mcp
A tiny, local "design studio" that lets Claude Code generate, iterate on, and
screenshot HTML designs from the CLI — the practical equivalent of prompting
Claude Design and getting a result back, but fully on your machine.
## How it works (and why it's trustworthy)
- **Engine = your local `claude -p`.** Every design is generated by shelling out
to the Claude Code CLI you already have, using your existing subscription.
No API key. No extra billing.
- **No reverse engineering.** It does *not* call any private claude.ai endpoint.
The desktop "Design" feature is just a window onto `claude.ai/desktop-design`
(a hosted web app); its generation API is internal and undocumented, so this
tool deliberately does not touch it.
- **Auditable.** One file (`server.mjs`), zero npm dependencies. Every model
call — full prompt + system prompt — is appended to `designs/.requests.log`.
- Outputs are plain `.html` files saved under `designs/`.
## Tools (MCP)
| Tool | Does |
|------|------|
| `design_create` | brief → complete self-contained HTML |
| `design_iterate` | refine a saved design (new versioned file, lineage kept) |
| `design_variants` | N distinct alternatives for one brief, in parallel |
| `design_render` | screenshot a design to PNG (Playwright) |
| `design_list` / `design_get` | browse / read saved designs |
## Use it right now (CLI mode, no restart needed)
```bash
node server.mjs create "modern dashboard for a crypto trading bot, dark, dense, trustworthy"
node server.mjs iterate mydesign.html "make the hero calmer and increase whitespace"
node server.mjs variants 3 "landing page for a Korean ADHD-friendly diary app"
node server.mjs render mydesign.html 1440,900
node server.mjs list
```
## Register as an MCP (for future Claude Code sessions)
```bash
claude mcp add --scope user claude-design -- node "/path/to/claude-design-mcp/server.mjs"
```
MCP servers load at session start, so restart Claude Code after adding. Then the
`design_create` / `design_iterate` / etc. tools are callable in-session.
## Requirements
- Node.js (uses only built-ins)
- `claude` CLI on PATH (the engine)
- `playwright` CLI on PATH — only for `design_render` (optional)
## Env overrides
- `CLAUDE_DESIGN_BIN` — path to the claude binary (default `claude`)
- `CLAUDE_DESIGN_PLAYWRIGHT` — path to the playwright binary (default `playwright`)
