← ClaudeAtlas

claude-designlisted

Drive Anthropic's Claude Design (claude.ai/design) through the claude-design MCP server to create, generate, iterate, inspect, edit, and export design systems and design projects. Use this skill whenever the user wants to build or change a design system, generate UI screens/components/prototypes, pull design tokens or generated files into a repo (e.g. packages/ui), attach a design system to a project, revise a generated design with a new prompt, or manage Claude Design projects — even if they just say "design system", "Claude Design", "generate the UI kit", "export the tokens", or name a project on claude.ai/design without mentioning the tool.
e-brokenc0de/claude-design-mcp · ★ 0 · AI & Automation · score 72
Install: claude install-skill e-brokenc0de/claude-design-mcp
# Claude Design (via MCP) The `claude-design` MCP server automates claude.ai/design — which has no public API — by attaching to a real Chrome over CDP and calling its internal RPC. It exposes clean tools (prefix `mcp__claude-design__*`) so you can build and pull design systems straight into a repo instead of clicking through the web app. ## Before anything: the session must be authenticated Every tool drives a logged-in Chrome. If a tool returns `NOT_AUTHED` (or anything mentions login), the CDP Chrome isn't signed into claude.ai. Tell the user to run, once: ```bash cd <claude-design-mcp repo> && pnpm run chrome:cdp ``` …then log into claude.ai in the window that opens. The session persists, so this is a one-time step per machine (or after logout). Don't try to work around auth failures — surface this instruction. Generation is **asynchronous** (a full design system takes ~5 min; small projects are faster). Never block waiting — start it, then either poll `get_status`, or watch in the background and get auto-woken when it finishes (see below). ## Waiting for generation (background + auto-wake) After `generate`, `iterate`, or `send_message`, don't sit and re-poll every few seconds — that burns turns. Two options: - **Quick manual check:** call `get_status({ projectId })` → `generating` | `ready`. Good for a one-off "is it done yet?". - **Background watch with automatic wake-up (preferred for long runs):** run the watcher as a background command. The harness sends