# MCP 安装指南

> 按需启用。不是每个 MCP 都需要装 —— 看你的实际需求。
> **推荐顺序**：即时设计 > Playwright > Fal > MasterGo

---

## 1. 即时设计 MCP（强烈推荐）

**作用**：让 Claude 直接读写你的即时设计文件，产出专业 .jspd 设计稿。
**国内直接用，无需翻墙**。

### 方案 A：`@jiujiang/jishi-mcp-server`（推荐，npm 包）

官方插件市场收录，安装简单。

**安装步骤**：

```bash
# 1. 全局安装 MCP 服务
npm i -g @jiujiang/jishi-mcp-server
```

**配置 Claude Code**（编辑 `.claude/settings.json`）：

```json
{
  "mcpServers": {
    "jishi-design": {
      "command": "npx",
      "args": ["-y", "@jiujiang/jishi-mcp-server"]
    }
  }
}
```

**使用流程**：

1. 打开即时设计（https://js.design）并进入你的设计文件
2. 在即时设计中启用"九匠即时MCP"插件（插件市场搜索安装）
3. 等待插件状态显示"已连接到 MCP Server"（绿色指示）
4. 启动 Claude Code（会看到 `jishi-design` MCP 可用）
5. Claude 即可读写你的设计文件

**能力**：读取页面节点、读取设计 tokens、创建元素、修改元素、批量操作

**注意事项**：
- 即时设计客户端必须打开，插件必须激活
- 没有 API token 认证，靠本地连接
- 文档主要中文

### 方案 B：`jsdesign-mcp`（Python，开源）

GitHub: https://github.com/zhucue/jsdesign-mcp

```bash
pip install jsdesign-mcp
```

暴露工具：`get_page_overview`、`get_design_tokens`、`get_component_detail`、`get_node_css`、`list_components`

---

## 2. Playwright MCP（推荐，截图预览）

**作用**：Claude 可以自动打开浏览器、截图、点击 —— 用于自动截图给你看设计稿效果、自动化测试。

### 官方包

```bash
npm i -g @playwright/mcp@latest
```

**配置**：

```json
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  }
}
```

**使用场景**：
- `/ui-design` 完成后自动截图保存到文件
- 让你不用手动打开浏览器就能看效果
- 对比多次迭代的效果

**注意事项**：
- 需要 Chromium 浏览器（首次运行会自动下载）
- 截图默认存到当前目录

---

## 3. Fal MCP（可选，AI 生图）

**作用**：调用 Fal.ai 的图像生成 API，用于：
- 生成 mockup 用的配图（真实感产品图、场景图）
- 生成装饰插画、IP 形象
- 生成纹理、背景

**需要 Fal API Key**：https://fal.ai/dashboard/keys

```bash
npm i -g @fal-ai/mcp
```

**配置**：

```json
{
  "mcpServers": {
    "fal": {
      "command": "npx",
      "args": ["-y", "@fal-ai/mcp"],
      "env": {
        "FAL_KEY": "<你的 Fal API Key>"
      }
    }
  }
}
```

**使用场景**：
- 客户要独特配图，Unsplash 找不到合适的
- 需要品牌 IP 形象
- 需要特殊风格的插画

**注意事项**：
- Fal 是按调用量付费的（有免费额度）
- 图像生成需要时间（10-60 秒/张）
- 多数情况下 Unsplash 已经够用，不必装这个

---

## 4. MasterGo MCP（备选，生态更成熟）

**作用**：和即时设计 MCP 类似，但是对接 MasterGo 平台。
**适合**：已经用 MasterGo 的团队。

### MasterGo Magic MCP（只读）

```bash
npx -y @mastergo/magic-mcp
```

暴露工具：`getDSL`、`getComponentLink`、`getMeta`。主要用于设计稿转代码。

### MasterGo Vibe MCP（Codify，完整读写）

功能更全，支持 `write_component`、`create_page`、`bidirectional_sync` 等 10+ 工具。
安装和配置参考：https://mastergo.com/help/MG/MCP

---

## 5. 配置模板（按需组合）

下面是一个"全副武装"的 `.claude/settings.json` 模板：

```json
{
  "mcpServers": {
    "jishi-design": {
      "command": "npx",
      "args": ["-y", "@jiujiang/jishi-mcp-server"]
    },
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    },
    "fal": {
      "command": "npx",
      "args": ["-y", "@fal-ai/mcp"],
      "env": {
        "FAL_KEY": "<你的 Fal API Key>"
      }
    }
  }
}
```

把 `<你的 Fal API Key>` 替换成真实值；不用的 MCP 整段删掉。

---

## 6. 验证 MCP 是否生效

启动 Claude Code 后，问一句："你现在有哪些 MCP 可用？"

Claude 会列出所有已连接的工具。应该看到：
- 即时设计 MCP：`jishi-design` 相关工具
- Playwright：`browser_*` 相关工具
- Fal：`fal_*` 相关工具

如果没看到，检查：
- 配置文件位置对不对（项目级 `.claude/settings.json` 或全局 `~/.claude/settings.json`）
- npm 包有没有装（`npm list -g`）
- 即时设计客户端和插件有没有打开（针对即时设计 MCP）

---

## 7. 优先级建议

| 阶段 | 装什么 | 目的 |
|---|---|---|
| **起步**（今天） | 什么都不装 | 用 HTML 单文件做设计，验证整套流程 |
| **进阶**（1 周后） | 即时设计 MCP | 输出专业 .jspd 给客户 |
| **舒适**（2 周后） | + Playwright MCP | 自动截图，减少手动操作 |
| **豪华**（按需） | + Fal MCP | AI 生图，独特配图 |

**不要一开始就全装** —— 先用 HTML 流程跑顺，再按需加 MCP。