# claude-design-mcp

Unofficial **stdio MCP proxy** for Anthropic’s Claude Design MCP  
(`https://api.anthropic.com/v1/design/mcp`).

Works with **Cursor**, **Claude Code**, **Codex**, and any MCP host that can launch a local stdio server.

> Not affiliated with Anthropic. Claude Design’s public MCP OAuth discovery is currently broken for generic clients. This tool uses the same Design OAuth login flow as Claude Code’s `/design-login` (including Anthropic’s Design OAuth client id). Anthropic may change or revoke that flow.

## Quick start

### 1. Login once

```bash
npx -y github:erdnj/claude-design-mcp login
```

Replace `erdnj` with this repository’s GitHub user or org. Approve in the browser, then paste the full `CODE#STATE` value.

### 2. Add the MCP server

**Cursor / Claude Code** — `.cursor/mcp.json` or `.mcp.json`:

```json
{
  "mcpServers": {
    "claude-design": {
      "command": "npx",
      "args": ["-y", "github:erdnj/claude-design-mcp"]
    }
  }
}
```

**Codex** — `~/.codex/config.toml`:

```toml
[mcp_servers.claude-design]
command = "npx"
args = ["-y", "github:erdnj/claude-design-mcp"]
enabled = true
```

Reload MCP / restart the agent. No Connect button is needed; the proxy injects your Design token.

After clone, `npx -y . snippets` prints ready-to-paste configs using this package’s `repository` field.

## Commands

| Command | Purpose |
|---------|---------|
| *(default)* / `server` | Start MCP stdio proxy |
| `login` | Browser OAuth + paste `CODE#STATE` |
| `status` | Credential status |
| `token` | Print access token (auto-refresh) |
| `env` | `export CLAUDE_DESIGN_OAUTH_TOKEN=…` |
| `logout` | Delete stored credentials |
| `snippets` | Print install snippets |

Credentials are stored at:

```text
~/.config/claude-design-mcp/credentials.json
```

Override path with `CLAUDE_DESIGN_MCP_CREDENTIALS`.

## How it works

1. `login` runs Anthropic’s Design OAuth (PKCE, manual redirect).
2. Tokens are saved locally and refreshed when needed.
3. The MCP server proxies stdio ↔ `https://api.anthropic.com/v1/design/mcp` with `Authorization: Bearer <design-token>`.

## Requirements

- Node.js 20+
- A Claude account with Claude Design access (Pro / Max / Team / Enterprise, as applicable)

## Disclaimer

Community workaround for multi-agent use. Prefer Anthropic’s official connector when it supports third-party MCP clients properly.