内容
# 克劳德设计MCP
一个驱动 [克劳德设计](https://claude.ai/design) 网络应用的MCP工具，您可以在编辑器/代理中使用它 - 只需登录一次，然后**创建**、**迭代**和**拉取** 由claude.ai/design生成的设计，这些设计是在**您自己的账户**上生成的（不是本地的模仿）。
## 工作原理
- 它通过CDP使用[`playwright-core`](https://www.npmjs.com/package/playwright-core)驱动**您自己的已登录Chrome**（一个专用的配置文件），并通过浏览器会话以**您**的身份与真正的`claude.ai/design` "Omelette" API进行通信。
- **生成由网站触发** - 您的提示被输入到设计编辑器中并提交；然后工具等待回合结束（`ReleaseTurn`网络信号 + 文件树稳定性）并报告克劳德设计写入的文件。文件在请求时拉回本地。
- 项目元数据、文件、删除和直接文件编辑使用记录的JSON RPC（`CreateProject` / `ListFiles` / `GetFile` / `WriteFiles` / `EditFile` / `DeleteProject`），在页面内运行，因此它们共享您的会话 + Cloudflare 清除。
- **不是`claude -p` 模仿**。每个设计都是由claude.ai/design本身生成的。
## 工具
| 工具 | 功能 |
|------|------|
| `design_login` | 一次性：打开Chrome登录claude.ai/design（会话持续） |
| `design_list` | 列出您的claude.ai/design项目 |
| `design_create` | 创建项目并根据提示生成设计 - `prompt`, `name?` |
| `design_iterate` | 发送后续提示修改设计 - `projectId`, `prompt` |
| `design_pull` | 下载项目的本地文件 - `projectId` 或 `name`, `dir?`, `zip?` |
| `design_preview` | 将项目的自包含HTML渲染为完整页面的PNG进行审查 - `projectId` 或 `name`, `path?`, `dir?`, `width?` |
| `design_get` | 读取项目中的一个文件 - `projectId`, `path` |
| `design_status` | 报告项目的聊天/回合状态 - `projectId` |
| `design_edit` | 应用直接文件编辑 - `projectId`, `path`, `edits` |
| `design_delete` | 删除项目 - `projectId` |
## 安装
```bash
npm install # 安装playwright-core（无需浏览器下载 - 使用您的Chrome）
node src/server.mjs login # 打开Chrome一次；登录claude.ai（然后会话被重复使用，无形中）
```
注册为本地MCP（开源示例）：
```json
{ "mcp": { "claude-design": { "type": "local", "command": ["node", "/abs/path/claude.design-mcp/src/server.mjs"], "enabled": true } } }
```
## 命令行界面
```bash
node src/server.mjs login
node src/server.mjs list
node src/server.mjs create "咖啡店的最小化登陆页面" coffee
node src/server.mjs iterate <projectId> "在头部添加一个黑暗模式切换按钮"
node src/server.mjs pull <projectId|name>
node src/server.mjs preview <projectId|name> [outDir] [width]
node src/server.mjs delete <projectId>
```
一次性`login`后，`list`/`create`/`iterate`/`pull`在**无可见窗口**（离屏Chrome）下运行，并重复使用持续的会话。
## 要求
- Node.js 22+（使用内置`fetch`/`WebSocket`；`playwright-core`是唯一的npm依赖）
- Google Chrome（工具驱动一个专用的Chrome配置文件）
- 具有设计访问权限的claude.ai账户（您通过`design_login`登录一次）
## 环境变量
- `CLAUDE_DESIGN_PROFILE` — 专用的Chrome配置文件目录（默认`~/.cache/claude-design-mcp/chrome-profile`）
- `CLAUDE_DESIGN_CHROME` — Google Chrome的路径（默认：macOS Google Chrome）
- `CLAUDE_DESIGN_CDP_PORT` — 远程调试端口（默认`9377`）
- `CLAUDE_DESIGN_DIR` — `design_pull` / `design_preview`写入的位置（默认：工作文件夹）
- `CLAUDE_DESIGN_HEADLESS` — 设置`1`以驱动无头Chrome而不是离屏Chrome
- `CLAUDE_DESIGN_TURN_TIMEOUT_MS` — 每回合的硬上限（创建~420s，迭代~300s默认值）
- `CLAUDE_DESIGN_QUIET_MS` — 回合网络必须保持沉默多长时间，然后生成被视为完整（默认`45000`）
## 何时生成“完成”？
`claude.ai/design`驱动生成作为**回合**：您的提示通过`Chat` RPC流式传输，通过`RenewTurn`保持活动（~每10秒）和`ReleaseTurn`结束。`design_create` / `design_iterate`在文件**稳定且回合网络保持沉默** `CLAUDE_DESIGN_QUIET_MS`后返回 - 舒适地长于保持活动间隔，因此生成**永远不会在写入中间被切断**（您始终获得完整、连贯的设计，而不是半渲染的设计）。
注意，claude.ai通常在第一个设计稳定后约30秒运行一个**自动精炼传递**，因此设计在工具返回其第一个完整版本后继续在服务器上改进。为了获得最精炼的输出， **`design_pull` / `design_preview`始终获取最新状态**，或提高`CLAUDE_DESIGN_QUIET_MS`（例如`60000`）以使`create`等待后续精炼传递（代价是等待时间更长）。
