# 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.

## 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

```bash
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`:

```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

| Tool | Description |
|---|---|
| `import_project(url)` | Fetches all code files + chat history for a project. Main entry point for the "Share to Claude Code" flow. |
| `get_chats(project)` | Returns the full design conversation: requirements, iterations, decisions. |
| `get_file(project, path, offset?, limit?)` | Reads one file with optional chunked paging for large files. |
| `list_files(project)` | Lists all files in a project with sizes and content types. |
| `get_project(project)` | Returns project metadata. |
| `list_projects()` | Lists all your Claude Design projects. |
| `download_bundle(project, dest?)` | Downloads the full ZIP bundle (code + images + uploads) to `~/Downloads`. |

## 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](https://claude.ai/code) installed and logged in
- Node.js 18+
- Claude Desktop (for the Cowork session use case)