claude.design-mcp

An MCP that drives the real Claude Design web app from your editor/agent — log in once, then create, iterate on, and pull designs that claude.ai/design generates on your own account (not a local imitation).

How it works

• It drives your own logged-in Chrome (a dedicated profile) over CDP with playwright-core, and talks to the real claude.ai/design "Omelette" API as you, through your browser session.

• Generation is triggered the way the website does it — your prompt is typed into the design composer and submitted; the tool then waits for the turn to finish (the ReleaseTurn network signal + file-tree stability) and reports the files Claude Design wrote. Files are pulled back to local on request.

• Project metadata, files, deletes, and direct file edits use the documented JSON RPCs (CreateProject / ListFiles / GetFile / WriteFiles / EditFile / DeleteProject), run in-page so they share your session + Cloudflare clearance.

• Not a claude -p mimic. Every design is produced by claude.ai/design itself.

Related MCP server: Browser Agent MCP

Tools

Setup

npm install                  # installs playwright-core (NO browser download — uses your Chrome)
node src/server.mjs login    # opens Chrome once; log into claude.ai (session is then reused, invisibly)

Register as a local MCP (opencode example):

{ "mcp": { "claude-design": { "type": "local", "command": ["node", "/abs/path/claude.design-mcp/src/server.mjs"], "enabled": true } } }

CLI

node src/server.mjs login
node src/server.mjs list
node src/server.mjs create "minimal landing page for a coffee shop" coffee
node src/server.mjs iterate <projectId> "add a dark mode toggle to the header"
node src/server.mjs pull <projectId|name>
node src/server.mjs preview <projectId|name> [outDir] [width]
node src/server.mjs delete <projectId>

After the one-time login, list/create/iterate/pull run with no visible window (off-screen Chrome) and reuse the persisted session.

Requirements

• Node.js 22+ (uses built-in fetch/WebSocket; playwright-core is the only npm dependency)

• Google Chrome (the tools drive a dedicated Chrome profile)

• A claude.ai account with Design access (you log in once via design_login)

Env

• CLAUDE_DESIGN_PROFILE — dedicated Chrome profile dir (default ~/.cache/claude-design-mcp/chrome-profile)

• CLAUDE_DESIGN_CHROME — path to Google Chrome (default: macOS Google Chrome)

• CLAUDE_DESIGN_CDP_PORT — remote-debugging port (default 9377)

• CLAUDE_DESIGN_DIR — where design_pull / design_preview write (default: the working folder)

• CLAUDE_DESIGN_HEADLESS — set 1 to drive headless Chrome instead of off-screen

• CLAUDE_DESIGN_TURN_TIMEOUT_MS — hard cap per generation turn (create ~420s, iterate ~300s defaults)

• CLAUDE_DESIGN_QUIET_MS — how long the turn network must stay silent before a generation is judged complete (default 45000)

When is a generation "done"?

claude.ai/design drives generation as turns: your prompt streams in over a Chat RPC, kept alive by RenewTurn keepalives (~every 10s) and ended by a ReleaseTurn. design_create / design_iterate return once the files have settled AND the turn network has gone quiet for CLAUDE_DESIGN_QUIET_MS — comfortably longer than the keepalive interval, so a generation is never cut off mid-write (you always get a complete, coherent design, not a half-rendered one).

Note that claude.ai often runs an automatic refine pass that starts ~30s after the first design settles, so the design keeps improving on the server after the tool has returned its first complete version. To get the most-refined output, design_pull / design_preview always fetch the latest state, or raise CLAUDE_DESIGN_QUIET_MS (e.g. 60000) to make create wait through later refine passes (at the cost of a longer wait).