Why it is worth attention

It provides a fully local, auditable alternative to Claude's hosted Design feature without reverse engineering or extra billing.

Who it is for

Claude Code users who need rapid UI prototyping
Developers wanting to generate HTML designs from the CLI
Privacy-conscious users who prefer local execution
Teams looking to integrate AI-generated designs into their workflow

Use cases

Quickly prototype landing pages or dashboards with natural language prompts
Iterate on existing HTML designs by describing changes
Generate multiple design variants in parallel for A/B testing
Capture screenshots of generated designs for documentation or review

Strengths

Zero extra cost – uses your existing Claude subscription
Fully auditable – all prompts and system prompts are logged locally
Single-file server with no npm dependencies
Supports plain HTML output and optional Playwright-based screenshots

Considerations

Requires the Claude Code CLI to be installed and configured
Screenshot functionality depends on Playwright being installed separately
No built-in preview or live reload – designs are static HTML files

README quick start

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)

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)

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)

Related repositories

Similar projects matched by category, topics, and programming language.

gnipbao

Featured

story-to-handdrawn-video

A Remotion-based tool that converts Chinese story text or ordered hand-drawn images into vertical hand-drawn diary-comic animation with handwritten captions, left-to-right reveals, optional page-curl transitions, and silent H.264 output for post-production dubbing.

AI & Machine LearningAI Agents

683

0xwilliamortiz

Featured

ponytail-improved

Ponytail is a plugin for AI coding agents that enforces a disciplined ladder of reuse before writing code, reducing code volume by roughly 54% while preserving safety.

AI & Machine LearningAI Agents

545

mereyabdenbekuly-ctrl

Featured

clodex-ide

Clodex is an open-source, local-first agentic IDE that combines persistent AI tasks, code, terminal, browser, Git, models, memory, and governed execution in one Electron workspace, currently in technical preview.

AI & Machine LearningAI Agents

859