内容
<div align="center">
# 拼接 MCP 服务器
**适用于 [Google Stitch](https://stitch.googleapis.com) 的最全面的 MCP 服务器 — 36 个适用于设计到代码工作流的工具。**
[](https://opensource.org/licenses/Apache-2.0)
[](https://nodejs.org/)
[](#完整工具参考)
[](https://modelcontextprotocol.io/)
</div>
---
一个模块化的 TypeScript MCP（模型上下文协议）服务器，封装了 Google Stitch 的设计生成 API，并提供了 36 个跨 9 个类别的工具 — 从上游代理和代码生成到设计分析、导出和项目管理。
通过结合 [davideast/stitch-mcp](https://github.com/davideast/stitch-mcp) 和 [GreenSheep01201/stitch-mcp-auto](https://github.com/GreenSheep01201/stitch-mcp-auto) 的优点，并扩展了高级设计到代码实用程序而构建。
## 功能
### 核心
- **完整的上游代理** — 直接访问所有 Google Stitch MCP 工具
- **工作区管理** — 通过 `.stitch-project.json` 持久化项目关联到目录
- **自动项目解析** — 工具自动从会话、工作区或参数中检测活动项目
### 设计智能
- **设计上下文提取** — 从任何屏幕提取颜色、字体、间距和组件模式
- **设计系统验证** — 检查屏幕是否符合批准的令牌以进行合规性评分
- **暗模式生成** — 自动生成具有可配置对比度的暗变体
- **响应式变体** — 使用布局策略在移动、平板电脑和桌面之间适配屏幕
- **组件变体** — 为 A/B 测试生成组件的多个视觉样式
### 代码生成
- **屏幕到 React** — 将 Stitch HTML 转换为具有类型化道具和 Tailwind 类的 TSX
- **屏幕到 Tailwind 配置** — 从设计中提取完整的 `tailwind.config.ts`
- **屏幕到 CSS 变量** — 生成具有可选暗模式块的语义 `:root` 自定义属性
- **设计令牌** — 以 CSS 变量、Tailwind 配置、SCSS 或 JSON 导出
### 分析和导出
- **无障碍审计** — 使用严重性评分进行 WCAG 2.1 合规性检查
- **设计比较** — 两个屏幕的并排差异（颜色、字体、布局、组件）
- **设计差异** — 用于跟踪迭代的结构化元素/样式/文本/类差异
- **批量导出** — 从项目中导出所有屏幕（HTML + 截图）
- **样式指南生成** — 从屏幕生成视觉或 Markdown 设计文档
- **项目摘要** — 具有一致性评分和建议的高级概述
### 集成
- **PM 问题生成** — 从屏幕设计为 Plane、Linear、Jira 创建结构化问题数据
- **模板库** — 10 个预定义的 UI 模板（仪表板、登录、看板、聊天等）
- **趋势设计** — 应用现代设计趋势（玻璃态、贝托网格、极光渐变等）
## 快速开始
```bash
# 1. 克隆并安装
git clone https://github.com/oogleyskr/stitch-mcp-server.git
cd stitch-mcp-server
npm install
# 2. 构建
npm run build
# 3. 设置身份验证（选择一种）
export STITCH_API_KEY="your-api-key"
# 或
export STITCH_ACCESS_TOKEN="your-access-token"
# 或配置 gcloud CLI
```
## 身份验证
支持三种方法，按优先级顺序检查：
| 优先级 | 方法 | 环境变量 | HTTP 头 |
|:--------:|--------|---------------------|-------------|
| 1 | **API 密钥** | `STITCH_API_KEY` | `X-Goog-Api-Key: <key>` |
| 2 | **访问令牌** | `STITCH_ACCESS_TOKEN` | `Authorization: Bearer <token>` |
| 3 | **gcloud CLI** | *(自动检测)* | `Authorization: Bearer <token>` |
### 方法 1：API 密钥（推荐）
```bash
export STITCH_API_KEY="AIza..."
```
### 方法 2：访问令牌
```bash
export STITCH_ACCESS_TOKEN="ya29...."
export GOOGLE_CLOUD_PROJECT="my-project-id" # 可选，用于计费
```
### 方法 3：gcloud CLI
```bash
gcloud auth login
gcloud auth application-default login
export GOOGLE_CLOUD_PROJECT="my-project-id" # 可选
```
服务器会自动运行 `gcloud auth print-access-token` 并验证令牌格式。
## 完整工具参考
### 上游 Stitch 工具（7）
直接代理到 Google 的 Stitch MCP 端点。
| 工具 | 描述 | 必需参数 |
|------|-------------|-------------------|
| `list_projects` | 列出所有可访问的 Stitch 项目 | — |
| `get_project` | 获取项目详情 | `projectId` |
| `list_screens` | 列出项目中的屏幕 | `projectId` |
| `get_screen` | 获取屏幕详情和下载 URL | `projectId`, `screenId` |
| `generate_screen_from_text` | 从文本提示生成屏幕 | `projectId`, `prompt` |
| `edit_screens` | 编辑现有屏幕并附上文本说明 | `projectId`, `screenIds[]`, `prompt` |
| `generate_variants` | 生成屏幕的设计变体 | `projectId`, `screenId` |
### 代码和构建工具（4）
| 工具 | 描述 | 必需参数 | 可选 |
|------|-------------|-------------------|----------|
| `get_screen_code` | 获取屏幕的原始 HTML 代码 | `projectId`, `screenId` | — |
| `get_screen_image` | 获取截图为 base64 PNG | `projectId`, `screenId` | — |
| `build_site` | 映射屏幕到路由，获取所有 HTML | `projectId`, `routes[]` | — |
| `list_tools` | 列出所有可用的工具及其模式 | — | — |
### 工作区工具（3）
| 工具 | 描述 | 必需参数 |
|------|-------------|-------------------|
| `get_workspace_project` | 检查工作区是否有关联项目 | — |
| `set_workspace_project` | 将项目链接到当前工作区 | `projectId` |
| `clear_workspace_project` | 删除工作区项目链接 | — |
### 设计工具（6）
| 工具 | 描述 | 必需参数 | 可选 |
|------|-------------|-------------------|----------|
| `extract_design_context` | 提取颜色、字体、间距、组件 | `projectId`, `screenId` | `includeComponents`, `includeTypography`, `includeColors`, `includeSpacing` |
| `apply_design_context` | 使用提取的设计上下文生成屏幕 | `projectId`, `designContext`, `prompt` | `deviceType` |
| `generate_design_tokens` | 生成 CSS 变量 / Tailwind / SCSS / JSON 令牌 | `projectId`, `screenId` | `format`, `includeSemanticNames` |
| `generate_responsive_variant` | 为不同视口创建响应式版本 | `projectId`, `screenId`, `targetDevice` | `adaptationStrategy` |
| `batch_generate_screens` | 一致性生成多个相关屏幕 | `projectId`, `screens[]` | `sharedDesignContext`, `deviceType` |
| `generate_from_template` | 从 10 个预定义的 UI 模板生成 | `projectId`, `template` | `customization`, `deviceType`, `style` |
**可用模板：** `dashboard`, `settings`, `login`, `profile`, `pricing`, `landing-hero`, `data-table`, `kanban-board`, `chat-interface`, `file-manager`
**可用样式：** `modern`, `minimal`, `corporate`, `playful`, `elegant`
### 分析工具（4）
| 工具 | 描述 | 必需参数 | 可选 |
|------|-------------|-------------------|----------|
| `analyze_accessibility` | WCAG 2.1 无障碍分析 | `projectId`, `screenId` | `level` (A/AA/AAA), `includeRecommendations` |
| `compare_designs` | 比较两个屏幕的设计不一致性 | `projectId`, `screenId1`, `screenId2` | `compareAspects[]` |
| `extract_components` | 提取可重用的 UI 组件 | `projectId`, `screenId` | `componentTypes[]`, `outputFormat` (json/react/html/vue) |
| `design_diff` | 两个屏幕之间的结构化差异 | `projectId`, `screenId1`, `screenId2` | `includeStyleDiff`, `includeTextDiff` |
### 导出工具（4）
| 工具 | 描述 | 必需参数 | 可选 |
|------|-------------|-------------------|----------|
| `generate_style_guide` | 从屏幕生成视觉样式指南 | `projectId`, `screenId` | `sections[]`, `format` (visual/documentation/both) |
| `export_design_system` | 导出完整的设计系统包 | `projectId` | `screenIds[]`, `includeTokens`, `includeComponents`, `tokenFormat`, `componentFormat` |
| `suggest_trending_design` | 在提示上应用现代设计趋势 | `projectId`, `prompt`, `trends[]` | `intensity`, `deviceType` |
| `export_all_screens` | 批量导出所有屏幕（HTML + 截图） | `projectId` | `includeHtml`, `includeScreenshots`, `maxScreens` |
**可用趋势：** `glassmorphism`, `bento-grid`, `gradient-mesh`, `aurora-gradients`, `3d-elements`, `micro-interactions`, `dark-mode`, `minimalist`, `brutalist`, `neomorphism`, `retro-futurism`, `organic-shapes`, `bold-typography`
### 代码生成工具（1）
| 工具 | 描述 | 必需参数 | 可选 |
|------|-------------|-------------------|----------|
| `screen_to_react` | 将屏幕转换为 React/TSX 和 Tailwind CSS | `projectId`, `screenId` | `componentName`, `includeResponsive` |
### 集成工具（1）
| 工具 | 描述 | 必需参数 | 可选 |
|------|-------------|-------------------|----------|
| `screen_to_plane_issue` | 从屏幕生成 PM 问题数据 | `projectId`, `screenId` | `screenName`, `workspaceSlug`, `planeProjectId`, `priority`, `additionalContext` |
### 高级工具（6）
| 工具 | 描述 | 必需参数 | 可选 |
|------|-------------|-------------------|----------|
| `screen_to_tailwind_config` | 提取完整的 `tailwind.config.ts` | `projectId`, `screenId` | `prefix`, `includePlugins` |
| `screen_to_css_variables` | 提取具有语义名称的 CSS 自定义属性 | `projectId`, `screenId` | `includeDarkMode`, `namespace` |
| `validate_design_system` | 检查屏幕是否符合设计令牌 | `projectId`, `screenId` | `approvedColors[]`, `approvedFonts[]`, `approvedSpacing[]`, `approvedRadii[]`, `strictMode` |
| `generate_dark_mode` | 生成屏幕的暗模式版本 | `projectId`, `screenId` | `preserveAccents`, `contrast`, `deviceType` |
| `generate_component_variants` | 生成组件的视觉变体 | `projectId`, `screenId`, `componentType` | `variantCount`, `variantStyles[]`, `deviceType` |
| `project_summary` | 项目的高级概述，一致性得分 | `projectId` | `analyzeConsistency`, `maxScreensToAnalyze` |
## 架构
```
src/
├── index.ts # 入口点 — MCP 服务器设置、工具路由、项目解析
├── auth.ts # 身份验证（API 密钥、访问令牌、gcloud CLI 回退）
├── stitch-client.ts # JSON-RPC 客户端、下载帮助程序、屏幕列表解析器
├── types.ts # TypeScript 接口（身份验证、RPC、工具、设计上下文）
└── tools/
├── helpers.ts # 共享实用程序（extractUnique、extractCssValues、validators）
├── upstream.ts # 上游 Stitch 工具的代理（7 个工具）
├── code.ts # 屏幕代码/图像检索、站点构建（4 个工具）
├── workspace.ts # 工作区项目管理（3 个工具）
├── design.ts # 设计上下文、令牌、响应式、批量、模板（6 个工具）
├── analysis.ts # 无障碍、比较、组件、设计差异（4 个工具）
├── export.ts # 样式指南、设计系统导出、趋势、批量导出（4 个工具）
├── codegen.ts # 屏幕到 React 转换（1 个工具）
├── integration.ts # 屏幕到 PM 问题桥接（1 个工具）
└── advanced.ts # Tailwind 配置、CSS 变量、验证、暗模式、变体、摘要（6 个工具）
```
### 关键设计决策
- **模块化工具文件** — 每个类别都有自己的文件，包含定义和处理程序
- **共享帮助程序** — 公共 HTML 提取函数集中在 `helpers.ts`
- **输入验证** — 所有必需参数都使用 `requireString`/`requireNonEmptyArray` 进行验证
- **自动项目解析** — 三级查找：参数 > 会话缓存 > `.stitch-project.json`
- **超时保护** — 所有 HTTP 请求（RPC、下载）都有可配置的超时
- **不可变模式** — 工具定义是 `readonly`，参数被扩展（从不变）
## 集成
### Claude Code / Claude Desktop
将以下内容添加到您的 MCP 配置文件（`.mcp.json` 或 Claude Desktop 设置）：
```json
{
"mcpServers": {
"stitch": {
"command": "node",
"args": ["/path/to/stitch-mcp-server/dist/index.js"],
"env": {
"STITCH_API_KEY": "your-api-key"
}
}
}
}
```
### MCPJungle
```json
{
"name": "stitch",
"command": "node",
"args": ["/path/to/stitch-mcp-server/dist/index.js"],
"env": {
"STITCH_API_KEY": "your-api-key"
},
"tags": ["design", "ui", "stitch", "google"]
}
```
### Cursor
添加您的 `.cursor/mcp.json` 到您的项目：
```json
{
"mcpServers": {
"stitch": {
"command": "node",
"args": ["/path/to/stitch-mcp-server/dist/index.js"],
"env": {
"STITCH_API_KEY": "your-api-key"
}
}
}
}
```
### VS Code (Copilot MCP)
将以下内容添加到您的 VS Code 设置：
```json
{
"mcp.servers": {
"stitch": {
"command": "node",
"args": ["/path/to/stitch-mcp-server/dist/index.js"],
"env": {
"STITCH_API_KEY": "your-api-key"
}
}
}
}
```
## 环境变量
| 变量 | 必需 | 描述 |
|----------|----------|-------------|
| `STITCH_API_KEY` | 三个之一 | Google Stitch 访问的 API 密钥 |
| `STITCH_ACCESS_TOKEN` | 三个之一 | OAuth2 访问令牌 |
| `GOOGLE_CLOUD_PROJECT` | 可选 | 用于计费的 GCP 项目 ID（Bearer 身份验证） |
| `GCLOUD_PROJECT` | 可选 | `GOOGLE_CLOUD_PROJECT` 的别名 |
| `STITCH_HOST` | 可选 | 覆盖 Stitch API 端点 URL（默认：`https://stitch.googleapis.com/mcp`) |
## 示例
### 1. 设计到代码工作流
```
用户：”生成一个仪表板屏幕并将其转换为 React”
1. `generate_screen_from_text` → 在 Stitch 中创建设计
2. `get_screen_code` → 获取 HTML
3. `screen_to_react` → 转换为 React/TSX 组件与 Tailwind
4. `screen_to_tailwind_config` → 提取匹配的 tailwind.config.ts`
```
### 2. 设计系统审计
```
用户：”检查我们的屏幕是否符合设计系统”
1. `project_summary` → 所有屏幕的高级概述
2. `validate_design_system` → 检查每个屏幕是否符合批准的令牌
3. `compare_designs` → 比较不一致的屏幕并排
4. `export_design_system` → 导出纠正后的设计系统进行交接`
```
### 3. 暗模式生成
```
用户：”创建我们应用的暗模式版本”
1. `list_screens` → 查找项目中的所有屏幕
2. `extract_design_context` → 提取当前的 DNA
3. `generate_dark_mode` → 为每个屏幕生成暗变体
4. `screen_to_css_variables` -> 导出 CSS 变量和暗模式覆盖`
```
### 4. 组件库构建
```
用户：”从我们的设计中构建一个组件库”
1. `extract_components` -> 拉取按钮、卡片、表单、导航栏
2. `generate_component_variants` -> 为每个组件创建 3-5 个视觉变体
3. `screen_to_react` -> 将每个变体转换为 React
4. `generate_style_guide` -> 创建视觉文档`
```
### 5. 批量项目导出
```
用户：”导出该项目中的所有内容，以便进行交接”
1. `project_summary` -> 获取完整的项目概述
2. `export_all_screens` -> 批量导出所有 HTML + 截图
3. `export_design_system` -> 导出令牌、组件和文档
4. `generate_design_tokens` -> 生成 CSS 变量和 Tailwind 配置`
```
### 6. 使用模板进行快速原型设计
```
用户：”创建一个 SaaS 应用原型”
1. `generate_from_template` -> “仪表板”主题为“暗色，分析重点”
2. `generate_from_template` -> “设置”主题为“简约风格，暗色主题”
3. `generate_from_template` -> “定价”主题为“3 个层级，年付切换”
4. `generate_from_template` -> “登录”主题为“社交身份验证，暗色背景”
5. `build_site` -> 将所有屏幕映射到路由`
```
## 贡献
### 添加新工具
1. **选择合适的模块** — 选择与类别匹配的工具文件，或创建一个新的文件
2. **定义工具** — 在模块的定义数组中添加 `ToolDefinition`
3. **实现处理程序** — 编写一个异步函数，返回 `McpToolResult`
4. **在调度器中注册** — 在模块的 switch 语句中添加一个 `case`
5. **连接到 index.ts** — 如果是一个新模块，请导入它并将其添加到路由逻辑中
6. **添加到 `TOOLS_REQUIRING_PROJECT`** — 如果工具需要 `projectId`
7. **构建和测试** — 运行 `npm run build` 并验证工具出现在 `list_tools`
### 工具处理程序模式
```typescript
async function handleMyNewTool(
args: Record<string, unknown>,
creds: AuthCredentials,
projectId?: string
): Promise<McpToolResult> {
// 1. 验证输入
const pid = requireString(args.projectId, "projectId");
// 2. 获取数据
const html = await fetchScreenHtml(pid, screenId, creds, projectId);
// 3. 处理
const result = analyzeHtml(html);
// 4. 返回结构化结果
return {
content: [{
type: "text",
text: JSON.stringify({ success: true, ...result }, null, 2),
}],
};
}
```
## 许可
[Apache-2.0](LICENSE) -- 欢迎贡献。
MCP 配置
以下是此 MCP Server 的配置信息，可直接复制到 Cursor 或其他 MCP 客户端中使用。
mcp.json
连接信息
猜你喜欢
暂无推荐服务器