mcp-design

A local MCP server named claude_design that bridges Claude Design projects into existing Claude Desktop (Cowork) sessions.

The problem it solves

Claude Design has a "Share to Claude Code" button. It copies a snippet to your clipboard:

Make sure the claude_design MCP connector (https://api.anthropic.com/v1/design/mcp) is connected...
Then use the claude_design MCP tools to import this project: https://claude.ai/design/p/<uuid>?file=...
Implement: <filename>

Pasting that into Claude Desktop should work — but it doesn't, for three reasons:

1. The real claude_design MCP uses OAuth through claude.ai, which is behind Cloudflare bot protection. mcp-remote (the standard bridge) hits a Cloudflare JS challenge instead of the OAuth metadata JSON and fails immediately.

2. The only workaround was downloading a ZIP and uploading it as a file — but that opens a new session, losing all conversation context. And the ZIP doesn't include the design chat history anyway (requirements, iterations, decisions), which is often the most valuable part.

3. Claude Cowork had no way to receive a design at all. The "Send to Claude Code" file-transfer path creates a new session by design. There was no sharing path for existing Cowork sessions.

Related MCP server: MCP-Claude Code Bridge

How this fixes it

This server registers itself as claude_design in Claude Desktop. When you paste the "Share to Claude Code" snippet, Claude Desktop calls this server's tools instead of trying the broken OAuth flow.

The server:

• Reads the designOauth access token written by /design-login from the macOS Keychain (Claude Code-credentials entry) — no hardcoded secrets

• Calls https://api.anthropic.com/v1/design/ directly with that token

• Decodes the base64-encoded project data field to extract the full chat history (requirements, iterations, back-and-forth) — the ZIP bundle omits this entirely

• Fetches all code files (HTML, JS, JSX, CSS, SVG) and lists binary assets by name

• Exposes a download_bundle tool that saves the full ZIP (code + images + screenshots + uploads) to ~/Downloads

The result: paste the snippet into any existing Claude Desktop session, Claude sees the design files and the conversation that produced them, and implements in-context.

Setup

1. Clone and install

git clone https://github.com/kuatecno/mcp-design.git ~/mcp-design
cd ~/mcp-design
npm install

2. Authorize Claude Design access

In Claude Code CLI (terminal):

/design-login

This writes a designOauth token into your macOS Keychain. The MCP reads it from there at runtime — no config file needed.

3. Add to Claude Desktop

Edit ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "claude-design": {
      "command": "/path/to/node",
      "args": [
        "/Users/you/mcp-design/node_modules/.bin/tsx",
        "/Users/you/mcp-design/src/index.ts"
      ]
    }
  }
}

Use the absolute path to node from your Node version manager (e.g. ~/.nvm/versions/node/vX.Y.Z/bin/node). Claude Desktop runs with a restricted PATH so bare node won't resolve.

Restart Claude Desktop.

4. Use it

Click "Share to Claude Code" in Claude Design, paste the clipboard text into any Claude Desktop session. Done.

Tools

Token lifecycle

The designOauth token is written by /design-login and expires after ~8 hours. When it expires, run /design-login again in Claude Code CLI — it refreshes the Keychain entry and the MCP picks it up automatically on the next call (no restart needed).

Requirements

• macOS (Keychain is macOS-only)

• Claude Code CLI installed and logged in

• Node.js 18+

• Claude Desktop (for the Cowork session use case)