JinDaGe - stitch-mcp-auto MCP Details

article

README

🚀 Stitch MCP Auto 🎨

一键操作，即刻拥有用户界面。这是适用于 Google Stitch 的最自动化的 MCP 服务器。

English | 한국어

一键操作，即时生成 UI 这是 Google Stitch 最自动化的 MCP 服务器。

💡 只需将此链接分享给你的 AI：https://github.com/GreenSheep01201/stitch-mcp-auto

🚀 快速开始

在安装 Node.js 和 gcloud CLI 之后：

npx stitch-mcp-auto-setup

设置向导将执行以下操作：

在 http://localhost:51121 打开基于 Web 的设置页面。
引导你完成 Google 登录。
帮助你选择或创建一个项目。
启用 Stitch API。
保存你的配置。

注意：当直接启动 MCP 服务器（npx stitch-mcp-auto 或通过你的编辑器）时，设置向导将在 http://localhost:8086 运行。

🤖 AI 代理注意事项（WSL 环境）：如果在 WSL 中运行，浏览器无法自动打开。请在你的 Windows 浏览器中打开终端中显示的 URL（通常 setup.js 为 http://localhost:51121，MCP 服务器启动时为 http://localhost:8086）：
# 在 PowerShell 中运行（而非 WSL 终端）
Start-Process "http://localhost:51121"
# 如果你看到的是 8086：
Start-Process "http://localhost:8086"
或者指示用户手动在其 Windows 浏览器中打开显示的 URL。

✨ 主要特性

为何选择 stitch-mcp-auto？

| 特性 | stitch-mcp | stitch-mcp-auto | |---------|------------|-----------------| | 设置时间 | ~30 分钟（手动） | ~2 分钟（向导式） | | gcloud 配置 | 手动 | 自动 | | MCP 注册 | 手动 | 自动 | | 多 CLI 支持 | ❌ | ✅ Claude/Gemini/Codex | | AI 图像生成 | ❌ | ✅ Gemini 3 Pro | | 自定义命令 | ❌ | ✅ 7 个工作流 |

功能特性：

自动设置 - 一条命令即可安装所有内容（gcloud 认证、API 启用、MCP 配置）
多 CLI 支持 - 可与 Claude Code、Gemini CLI、Codex CLI 配合使用
19 个自定义工具 + Stitch 核心 - 设计生成、可访问性检查、令牌、响应式变体和设计系统导出
7 个工作流命令 - /design、/design-system、/design-flow、/design-qa、/design-export、/generate-asset、/design-full
🎨 AI 图像生成 - 通过 Gemini 3 Pro 生成徽标、图标、英雄图像（使用 Antigravity - 谷歌的实验性图像生成 API）
🎭 编排模式 - 一个提示即可生成资源并完成 UI 设计
🌐 国际化支持 - 自动检测系统语言（英语/韩语）以用于设置向导和控制台消息

📦 安装指南

前提条件（先安装这些）

1. 安装 Node.js（v18 或更高版本）

Windows

# 使用 winget（Windows 10/11）
winget install OpenJS.NodeJS.LTS

# 或者从以下网址下载安装程序：https://nodejs.org/

macOS

# 使用 Homebrew
brew install node@22

# 或者从以下网址下载安装程序：https://nodejs.org/

Linux / WSL

# 使用 nvm（推荐）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
source ~/.bashrc
nvm install 22
nvm use 22

# 或者使用 apt（Ubuntu/Debian）
curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
sudo apt-get install -y nodejs

验证 Node.js 安装：

node --version   # 应显示 v18.x.x 或更高版本
npm --version    # 应显示 9.x.x 或更高版本

2. 安装 Google Cloud CLI（gcloud）

Windows

选项 A：安装程序（推荐）

从 Google Cloud SDK 下载。
运行安装程序（勾选“运行 gcloud init”选项）。
重启你的终端。

选项 B：PowerShell

(New-Object Net.WebClient).DownloadFile("https://dl.google.com/dl/cloudsdk/channels/rapid/GoogleCloudSDKInstaller.exe", "$env:TEMP\gcloud.exe")
Start-Process "$env:TEMP\gcloud.exe" -Wait
# 安装后重启终端

macOS

# 使用 Homebrew（推荐）
brew install --cask google-cloud-sdk

# 或者直接安装
curl https://sdk.cloud.google.com | bash
exec -l $SHELL

Linux / WSL

# 下载并安装
curl -sSL https://sdk.cloud.google.com | bash -s -- --disable-prompts --install-dir=$HOME

# 添加到 PATH
echo 'export PATH="$HOME/google-cloud-sdk/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc

验证 gcloud 安装：

gcloud --version
# 应显示：Google Cloud SDK xxx.x.x

AI 代理快速开始（半自动化）

此仓库支持 半自动化设置，但有一些不可避免的手动步骤（OAuth 登录）。

清单（对代理友好）：

运行设置：npm run setup（或 npx -p stitch-mcp-auto stitch-mcp-auto-setup）
打开终端中显示的 URL（通常为 http://localhost:51121）
在浏览器中完成 Google 登录（gcloud + Stitch API 启用）
⚠️ 关键：验证 MCP 注册（见下文）
启动服务器：npm start 或让编辑器启动它

仅需手动操作的步骤：

浏览器 OAuth 同意（Google 登录）
WSL 浏览器打开（必须手动打开 URL）

特定环境命令：

Windows（PowerShell）：
- 打开设置 URL：Start-Process "http://localhost:51121"（或 http://localhost:8086）
macOS：
- 打开设置 URL：open "http://localhost:51121"（或 http://localhost:8086）
Linux：
- 打开设置 URL：xdg-open "http://localhost:51121"（或 http://localhost:8086）
WSL（Windows 主机）：
- 在 Windows PowerShell 中运行：Start-Process "http://localhost:51121"

⚠️ 安装后 MCP 验证（必需）

设置完成后，始终验证 MCP 服务器是否已注册：

# Claude Code
claude mcp list | grep stitch

# Gemini CLI
gemini mcp list | grep stitch

# Codex CLI
codex mcp list | grep stitch

如果未列出 stitch，请手动注册：

| CLI | 手动注册命令 | |-----|----------------------------| | Claude Code | claude mcp add -e GOOGLE_CLOUD_PROJECT=YOUR_PROJECT_ID -s user stitch -- npx -y stitch-mcp-auto | | Gemini CLI | gemini mcp add stitch -- npx -y stitch-mcp-auto --env GOOGLE_CLOUD_PROJECT=YOUR_PROJECT_ID | | Codex CLI | codex mcp add stitch -- npx -y stitch-mcp-auto --env GOOGLE_CLOUD_PROJECT=YOUR_PROJECT_ID |

为什么需要验证：设置向导会直接写入配置文件（~/.claude.json、~/.gemini/settings.json、~/.codex/config.toml），但验证可确保配置正确。始终进行验证以避免“未找到 MCP 服务器”错误。

其他验证（可选）：

node auth.js --status（显示令牌 + 项目状态）
npm start（服务器启动并打印“Ready”）

手动安装（替代方法）

步骤 1：运行自动设置

npx -p stitch-mcp-auto stitch-mcp-auto-setup

或者，如果你克隆了仓库：

node setup.js

设置过程

欢迎页面 - 点击“使用 Google 登录”按钮
Google 登录 - 打开一个新的浏览器窗口进行身份验证

登录后，你可能会看到“连接被拒绝”页面 - 只需关闭它
设置页面将自动检测你的登录状态

项目选择 - 选择现有项目或创建一个新项目
API 激活 - 点击按钮启用 Stitch API

等待激活（可能需要几秒钟）

完成 - 将 MCP 配置复制到你的编辑器

⚠️ WSL 用户 - 重要提示： WSL 无法直接打开浏览器。当设置向导启动时：

复制 URL http://localhost:51121

在你的 Windows 浏览器（Chrome、Edge 等）中手动打开它

或者在 PowerShell 中运行：Start-Process "http://localhost:51121"

身份验证将正常工作，因为 WSL 与 Windows 共享本地主机。

步骤 3：配置 MCP 客户端

设置完成后，将配置添加到你的 MCP 客户端。

Claude Desktop

macOS：~/Library/Application Support/Claude/claude_desktop_config.json Windows：%APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "stitch-mcp-auto"],
      "env": {
        "GOOGLE_CLOUD_PROJECT": "YOUR_PROJECT_ID"
      }
    }
  }
}

Claude Code

🌐 方法 1：CLI 命令（推荐）

设置向导会自动写入 ~/.claude.json。要通过 CLI 手动添加：

claude mcp add -e GOOGLE_CLOUD_PROJECT=YOUR_PROJECT_ID -s user stitch -- npx -y stitch-mcp-auto

或者直接编辑 ~/.claude.json：

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "stitch-mcp-auto"],
      "env": {
        "GOOGLE_CLOUD_PROJECT": "YOUR_PROJECT_ID"
      }
    }
  }
}

📁 方法 2：按项目设置

在项目根目录创建 .mcp.json：

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "stitch-mcp-auto"],
      "env": {
        "GOOGLE_CLOUD_PROJECT": "YOUR_PROJECT_ID"
      }
    }
  }
}

Gemini CLI

🌐 方法 1：CLI 命令（推荐）

gemini mcp add stitch -- npx -y stitch-mcp-auto --env GOOGLE_CLOUD_PROJECT=YOUR_PROJECT_ID

或者直接编辑 ~/.gemini/settings.json：

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "stitch-mcp-auto"],
      "env": {
        "GOOGLE_CLOUD_PROJECT": "YOUR_PROJECT_ID"
      }
    }
  }
}

Codex CLI

🌐 方法 1：CLI 命令（推荐）

codex mcp add stitch -- npx -y stitch-mcp-auto --env GOOGLE_CLOUD_PROJECT=YOUR_PROJECT_ID

或者直接编辑 ~/.codex/config.toml：

[mcp_servers.stitch]
command = "npx"
args = ["-y", "stitch-mcp-auto"]

[mcp_servers.stitch.env]
GOOGLE_CLOUD_PROJECT = "YOUR_PROJECT_ID"

Cursor

转到 设置 > MCP > 添加新服务器 并添加：

命令：npx
参数：-y stitch-mcp-auto
环境：GOOGLE_CLOUD_PROJECT=YOUR_PROJECT_ID

可选：GOOGLE_CLOUD_PROJECT 仅用于 Stitch 图像回退和 auth.js --status。设置向导将活动项目存储在 ~/.stitch-mcp-auto/config.json 中，工作区工具会在当前文件夹中保存 .stitch-project.json。

💻 使用示例

创建新项目

创建一个名为 "My App" 的新 Stitch 项目

生成屏幕

生成一个带有电子邮件和密码字段、“忘记密码”链接以及 Google 和 Apple 社交登录按钮的登录页面。
使用现代渐变背景。

按特定风格生成

创建一个仪表盘屏幕，具备以下元素：
- 黑暗主题
- 侧边栏导航
- 顶部有 4 个统计卡片
- 一个显示每周数据的折线图
- 一个最近活动列表

多语言支持

创建一个韩语电子商务产品详情页面，具备以下元素：
- 产品图片轮播
- 价格和折扣徽章
- 尺寸选择器
- 添加到购物车按钮
- 客户评论部分

“设计师流程”

为了在多个屏幕上实现一致的 UI：

从现有屏幕提取上下文：

从项目 X 的主页屏幕获取设计上下文

使用相同风格生成新屏幕：

使用该设计上下文，生成一个具有相同视觉风格的设置屏幕

使用设计令牌

为你的开发工作流程导出设计令牌：

从仪表盘屏幕的设计中生成 CSS 变量

根据主页屏幕创建 Tailwind 配置

流行设计生成

自动应用现代 UI/UX 趋势：

创建一个具有玻璃质感和渐变网格效果的定价页面

使用便当网格布局和黑暗模式设计一个仪表盘

批量屏幕生成

一次性创建多个具有一致样式的屏幕：

生成一个完整的入职流程：欢迎、功能介绍、注册和确认屏幕

可访问性检查

确保你的设计是可访问的：

检查登录页面是否符合 WCAG AA 标准

设计系统导出

导出以交付给开发人员：

从该项目中导出完整的设计系统，包括令牌和组件

AI 图像生成（v1.1.0 新增）

使用 AI 生成设计资源：

/generate-asset logo "名为 GreenBite 的环保有机食品配送服务"

/generate-asset hero "展示金融增长的现代金融科技应用" --style gradient --ratio 16:9

/generate-asset icon "带有对勾的购物车" --style flat --colors "#4CAF50"

完整设计编排（v1.1.0 新增）

一个提示即可完成设计 - 自动生成资源并创建 UI：

/design-full "环保有机食品购物商城主页。绿色主题，清新感觉，现代设计"

/design-full "人工智能驱动的项目管理工具着陆页。专业，蓝色渐变主题，带有定价部分"

注意：编排模式会自动执行以下操作：

分析所需资源（徽标、英雄图像、图标）

使用 Gemini 3 Pro 生成每个资源（需要 Antigravity 认证）

使用 Stitch API 创建完整的 UI 屏幕

在一个响应中返回所有资源 + 最终 UI

没有 Antigravity 认证：仍然会生成 UI 屏幕，但没有自定义图像资源。

📚 详细文档

可用工具

🔄 自动项目管理（新增）

无需再手动传递 projectId！ 服务器会自动管理项目上下文：

自动检测：当你调用 generate_screen_from_text 等工具而不传递 projectId 时，它会自动使用工作区项目。
自动保存：当你 create_project 时，它会自动保存到当前文件夹的 .stitch-project.json 中。
会话连续性：稍后返回同一文件夹，你的项目会自动加载。

工作原理：

┌─────────────────────────────────────────────────────────────┐
│  调用工具时未传递 projectId                              │
│                      ↓                                      │
│  1. 检查活动会话项目                            │
│  2. 如果没有 → 从 .stitch-project.json 加载                │
│  3. 如果没有 → 返回 "PROJECT_REQUIRED" 并提供选项        │
│                      ↓                                      │
│  用户创建/选择项目 → 自动保存到工作区     │
└─────────────────────────────────────────────────────────────┘

手动工作区工具（可选）：

| 工具 | 描述 | |------|-------------| | get_workspace_project | 🔍 检查当前工作区项目状态 | | set_workspace_project | 💾 手动将项目与工作区关联 | | clear_workspace_project | 🗑️ 清除工作区项目关联 |

核心 Stitch 工具（API + 便捷包装器）

| 工具 | 描述 | |------|-------------| | create_project | 创建一个新的 Stitch 项目。项目是 UI 设计和前端代码的容器。 | | get_project | 使用项目名称检索特定 Stitch 项目的详细信息。 | | list_projects | 列出用户可访问的所有 Stitch 项目。默认情况下，列出用户拥有的项目。 | | list_screens | 列出给定 Stitch 项目中的所有屏幕。 | | get_screen | 检索项目中特定屏幕的详细信息。 | | generate_screen_from_text | 根据文本提示在项目中生成一个新屏幕。 | | fetch_screen_code | 检索屏幕的实际 HTML/代码内容。 | | fetch_screen_image | 检索屏幕的截图/预览图像。 |

🎨 专业网页设计工具

设计一致性工具

| 工具 | 描述 | |------|-------------| | extract_design_context | 从现有屏幕中提取设计 DNA（颜色、排版、间距、组件），以确保多个屏幕之间的视觉一致性。 | | apply_design_context | 使用先前提取的设计上下文生成新屏幕，以保持视觉一致性。 | | compare_designs | 比较两个屏幕，以识别设计差异、不一致之处并提出协调建议。 |

生产力工具

| 工具 | 描述 | |------|-------------| | generate_design_tokens | 从屏幕设计中生成设计令牌（CSS 变量、Tailwind 配置、SCSS、JSON）。 | | generate_responsive_variant | 为现有屏幕创建不同设备类型的响应式变体。 | | batch_generate_screens | 一次操作中生成多个相关屏幕，保持一致的设计。 |

质量与分析工具

| 工具 | 描述 | |------|-------------| | analyze_accessibility | 分析屏幕是否符合 WCAG 2.1 可访问性标准，并提供可操作的建议。 | | extract_components | 提取可重用的 UI 组件模式（按钮、卡片、表单）及其样式。 |

设计增强工具

| 工具 | 描述 | |------|-------------| | suggest_trending_design | 将 2024 - 2025 年的 UI 趋势（玻璃质感、便当网格、渐变网格等）应用于屏幕生成。 | | generate_style_guide | 从现有设计中生成全面的样式指南/设计文档。 | | export_design_system | 导出完整的设计系统包（令牌、组件、文档），以便交付给开发人员。 |

🎨 AI 图像生成工具（v1.1.0）

这些工具具有不同的认证要求：

| 工具 | 认证要求 | 描述 | |------|---------------|-------------| | generate_design_asset | Antigravity | 使用 Gemini 模型生成设计资源（徽标、图标、插图、英雄图像、线框图、背景、图案）。需要 Antigravity 认证。支持模型选择（gemini-3-pro、gemini-2.5-pro）和强制认证。 | | orchestrate_design | Stitch + Antigravity | 完整编排：自动生成资源（徽标、图标、英雄图像），然后创建完整的 UI。仅使用 Stitch 的用户可以在不使用自定义资源的情况下生成 UI 页面。 | | check_antigravity_auth | 无 | 检查 Antigravity OAuth 认证状态，以使用图像生成功能。 |

支持的图像生成模型

| 模型 | 状态 | 图像生成 | 描述 | |-------|--------|------------------|-------------| | gemini-3-pro | ✅ 可用 | ✅ 支持 | 默认。最新的 Gemini 3 Pro 模型，支持图像生成 | | gemini-2.5-pro | ✅ 可用 | ✅ 支持 | Gemini 2.5 Pro 模型，支持图像生成 |

另请参阅：ANTIGRAVITY-MODELS.md（英文）/ ANTIGRAVITY-MODELS.ko.md（韩文）以获取完整的模型列表、思维变体和端点详细信息。

💡 模型选择：你可以在调用 generate_design_asset 时指定模型：
{
  "assetType": "logo",
  "prompt": "现代科技公司徽标",
  "model": "gemini-3-pro"
}

关键参数 (generate_design_asset)：

assetType：徽标、图标、插图、英雄图像、线框图、背景、图案
aspectRatio：1:1、16:9、9:16、4:3、3:4
saveToFile：默认 true（保存到当前目录）
forceAntigravityAuth：true 触发浏览器登录

📋 角色分离：

Stitch API（gcloud 认证）：UI 页面/屏幕生成 - 所有用户均可使用

Antigravity OAuth：图像资源生成（徽标、图标、英雄图像） - 需要单独认证

仅使用 Stitch 的用户仍然可以使用 generate_screen_from_text 创建完整的 UI 页面。Antigravity 在此基础上增加了自定义 AI 生成的资源。

🔲 背景去除（新增）

generate_design_asset 支持为透明资源自动去除背景：

| 参数 | 类型 | 默认值 | 描述 | |-----------|------|---------|-------------| | removeBackground | 布尔值 | false | 启用自动背景去除 | | backgroundRemovalMode | "white" | "auto" | "white" | white：去除白色背景。auto：自动检测纯色背景。 | | backgroundThreshold | 数字 | 240 | 检测阈值（0 - 255）。值越高，去除越激进。 |

示例：

{
  "assetType": "logo",
  "prompt": "带有抽象形状的现代科技公司徽标",
  "removeBackground": true,
  "backgroundRemovalMode": "white",
  "backgroundThreshold": 240
}

这将生成一个透明的 PNG，适用于：

徽标 - 放置在彩色背景上时没有白色边框
图标 - 干净地集成到 UI 设计中
插图 - 无缝叠加在任何背景上

MCP 提示（自动发现）

MCP 提示在服务器连接时自动可用 - 无需安装。这些提示会出现在你的 MCP 客户端的提示列表中。

| 提示 | 描述 | |--------|-------------| | /stitch:design | 智能 UI 设计生成，自动检测样式 | | /stitch:design-system | 创建新屏幕时保持设计一致性 | | /stitch:design-flow | 生成完整用户流程的多个屏幕 | | /stitch:design-qa | 可访问性（WCAG 2.1）和设计质量检查 | | /stitch:design-export | 导出设计系统包，以便交付给开发人员 |

在 Claude Code 中的使用示例：

/stitch:design 带有黑暗模式的登录页面
/stitch:design-system 设置页面
/stitch:design-flow 入职流程：欢迎 -> 注册 -> 完成
/stitch:design-qa 所有页面 --level AA
/stitch:design-export --token_format tailwind

注意：MCP 提示包含详细的工作流说明，可自动引导 AI 完成复杂的设计任务。

自定义命令（多 CLI 支持）

当你运行 npx -p stitch-mcp-auto stitch-mcp-auto-setup 时，设置向导会自动为所有主要的 AI CLI 工具（Claude Code、Gemini CLI 和 Codex CLI）安装自定义命令。

支持的 CLI

| CLI | 命令格式 | 安装路径 | |-----|----------------|-------------------| | Claude Code | /design | ~/.claude/commands/ | | Gemini CLI | /stitch:design | ~/.gemini/commands/stitch/ | | Codex CLI | $stitch-design | ~/.codex/skills/stitch/ |

可用命令

| 命令 | Claude Code | Gemini CLI | Codex CLI | 描述 | |---------|-------------|------------|-----------|-------------| | design | /design | /stitch:design | $stitch-design | 智能 UI 设计生成 | | design-system | /design-system | /stitch:design-system | $stitch-design-system | 保持设计一致性 | | design-flow | /design-flow | /stitch:design-flow | $stitch-design-flow | 生成用户流程 | | design-qa | /design-qa | /stitch:design-qa | $stitch-design-qa | 可访问性和质量检查 | | design-export | /design-export | /stitch:design-export | $stitch-design-export | 导出设计系统 | | generate-asset | /generate-asset | /stitch:generate-asset | $stitch-generate-asset | AI 图像生成（v1.1.0） | | design-full | /design-full | /stitch:design-full | $stitch-design-full | 完整编排模式（v1.1.0） |

CLI 使用示例

Claude Code：

/design 带有黑暗模式的登录页面
/design-system 设置页面
/design-flow 入职流程：欢迎 -> 注册 -> 完成

Gemini CLI：

/stitch:design 带有黑暗模式的登录页面
/stitch:design-system 设置页面
/stitch:design-flow 入职流程：欢迎 -> 注册 -> 完成

Codex CLI：

$stitch-design 带有黑暗模式的登录页面
$stitch-design-system 设置页面
$stitch-design-flow 入职流程：欢迎 -> 注册 -> 完成

命令安装位置

命令会自动安装到所有 CLI 目录：

~/.claude/commands/          # Claude Code（Markdown）
├── design.md
├── design-system.md
├── design-flow.md
├── design-qa.md
├── design-export.md
├── generate-asset.md        # v1.1.0 新增
└── design-full.md           # v1.1.0 新增

~/.gemini/commands/stitch/   # Gemini CLI（TOML）
├── design.toml
├── design-system.toml
├── design-flow.toml
├── design-qa.toml
├── design-export.toml
├── generate-asset.toml      # v1.1.0 新增
└── design-full.toml         # v1.1.0 新增

~/.codex/skills/stitch/      # Codex CLI（技能）
├── design.md
├── design-system.md
├── design-flow.md
├── design-qa.md
├── design-export.md
├── generate-asset.md        # v1.1.0 新增
└── design-full.md           # v1.1.0 新增

🔧 技术细节

架构

┌──────────────────────────────────────────────────────────────┐
│                        用户请求                          │
│              "创建一个带有...的登录页面"                   │
│              "/design-full 环保商店"                │
└──────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌──────────────────────────────────────────────────────────────┐
│                    AI 编辑器（Claude/Cursor）                 │
│                         MCP 客户端                           │
└──────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌──────────────────────────────────────────────────────────────┐
│                     stitch-mcp-auto                          │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐           │
│  │ setup.js    │  │ index.js    │  │ auth.js     │           │
│  │ (自动设置)│  │ (MCP 服务器)│  │ (OAuth)     │           │
│  └─────────────┘  └─────────────┘  └─────────────┘           │
│                          │                                   │
│           ┌──────────────┼──────────────┐                    │
│           ▼              ▼              ▼                    │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐           │
│  │ 设计工具│  │ 图像生成   │  │ 编排 │           │
│  │ (UI + QA)   │  │ (Antigrav.) │  │ (资源+UI) │           │
│  └─────────────┘  └─────────────┘  └─────────────┘           │
└──────────────────────────────────────────────────────────────┘
                              │
            ┌─────────────────┼─────────────────┐
            ▼                                   ▼
┌─────────────────────────────┐   ┌─────────────────────────────┐
│   谷歌云平台     │   │   Antigravity（可选）    │
│  ┌─────────┐  ┌─────────┐   │   │  ┌─────────────────────┐    │
│  │ gcloud  │  │ Stitch  │   │   │  │ Gemini 3 Pro        │    │
│  │ CLI     │  │ API     │   │   │  │ (图像生成)  │    │
│  │ (认证)  │  │ (UI 生成)│   │   │  │ 免费通过 OAuth      │    │
│  └─────────┘  └─────────┘   │   │  └─────────────────────┘    │
└─────────────────────────────┘   └─────────────────────────────┘

📋 角色分离：

Stitch API（gcloud）：处理所有 UI 页面/屏幕生成

Antigravity OAuth：处理图像资源生成（徽标、图标、英雄图像）

没有 Antigravity 认证，generate_design_asset 将返回错误。使用 Stitch 的 generate_screen_from_text 生成 UI 页面。

文件结构

stitch-mcp-auto/
├── index.js               # 主 MCP 服务器（带有 Antigravity OAuth）
├── setup.js               # 基于 Web 的自动设置向导
├── auth.js                # OAuth 辅助工具
├── package.json           # 依赖项和脚本
├── README.md              # 文档（英文）
├── README.ko.md           # 文档（韩文）
├── ANTIGRAVITY-MODELS.md  # Antigravity 模型列表（英文）
├── ANTIGRAVITY-MODELS.ko.md # Antigravity 模型列表（韩文）
├── AGENTS.md              # 仓库指南
└── skills/                # 命令源（Claude/Gemini/Codex）
    ├── design.md
    ├── design-system.md
    ├── design-flow.md
    ├── design-qa.md
    ├── design-export.md
    ├── generate-asset.md    # 新增：AI 图像生成
    └── design-full.md       # 新增：完整编排

配置文件

| 文件/目录 | 位置 | 用途 | |----------------|----------|---------| | tokens.json | ~/.stitch-mcp-auto/ | OAuth 访问令牌（gcloud） | | antigravity_tokens.json | ~/.stitch-mcp-auto/ | Antigravity OAuth 令牌（可选） | | config.json | ~/.stitch-mcp-auto/ | 项目设置 | | .stitch-project.json | 工作区根目录（你运行 AI CLI 的地方） | 此工作区的自动保存项目映射 | | MCP 设置 | | | | .claude.json | ~/ | Claude Code MCP 服务器（用户范围） | | settings.json | ~/.gemini/ | Gemini CLI MCP 服务器 | | config.toml | ~/.codex/ | Codex CLI MCP 服务器（TOML 格式） | | 命令 | | | | commands/ | ~/.claude/commands/ | Claude Code 命令（自动安装） | | commands/stitch/ | ~/.gemini/commands/stitch/ | Gemini CLI 命令（自动安装） | | skills/stitch/ | ~/.codex/skills/stitch/ | Codex CLI 技能（自动安装） |

脚本

| 命令 | 描述 | |---------|-------------| | npm start | 启动 MCP 服务器 (node index.js) | | npm run setup | 运行设置向导 (node setup.js，打开 http://localhost:51121) | | npm run auth -- --status|--login|--logout|--setup|--project <id> | OAuth 辅助命令 | | npx -p stitch-mcp-auto stitch-mcp-auto-setup | 运行交互式设置向导 | | npx stitch-mcp-auto | 启动 MCP 服务器（供编辑器使用） | | node auth.js --status | 检查认证状态 | | node auth.js --login | 手动登录 | | node auth.js --logout | 清除保存的令牌 | | node auth.js --setup | 显示 OAuth 设置指南 | | node auth.js --project <id> | 保存项目 ID（可选） |

要求

Node.js：18.0.0 或更高版本
Google Cloud CLI：最新版本
Google 账户：具有访问 Google Cloud 控制台的权限
MCP 客户端：Claude Desktop、Claude Code、Cursor 或兼容的编辑器

安全说明

本项目使用 Google 的公共 OAuth 客户端进行身份验证。源代码中可见的客户端 ID 故意公开（根据 OAuth 2.0 规范为桌面应用类型）。你的令牌存储在本地 ~/.stitch-mcp-auto/ 中，不会传输给第三方。

📄 许可证

Apache 2.0 - 开源且可免费使用。

鸣谢

作者：GreenSheep01201 (Wongil Seo)
基于：stitch-mcp 由 Kargatharaakash 开发
概念：MCP（模型上下文协议）文件拼接系统的自动化实现。

支持

问题反馈：GitHub Issues
文档：Google Stitch API

为 AI 社区精心打造

stitch-mcp-auto

README

🚀 Stitch MCP Auto 🎨

🚀 快速开始

✨ 主要特性

为何选择 stitch-mcp-auto？

功能特性：

📦 安装指南

前提条件（先安装这些）

1. 安装 Node.js（v18 或更高版本）

Windows

macOS

Linux / WSL

2. 安装 Google Cloud CLI（gcloud）

Windows

macOS

Linux / WSL

AI 代理快速开始（半自动化）

⚠️ 安装后 MCP 验证（必需）

手动安装（替代方法）

步骤 1：运行自动设置

设置过程

步骤 3：配置 MCP 客户端

Claude Desktop

Claude Code

Gemini CLI

Codex CLI

Cursor

💻 使用示例

创建新项目

生成屏幕

按特定风格生成

多语言支持

“设计师流程”

使用设计令牌

流行设计生成

批量屏幕生成

可访问性检查

设计系统导出

AI 图像生成（v1.1.0 新增）

完整设计编排（v1.1.0 新增）

📚 详细文档

可用工具

🔄 自动项目管理（新增）

核心 Stitch 工具（API + 便捷包装器）

🎨 专业网页设计工具

设计一致性工具

生产力工具

质量与分析工具

设计增强工具

🎨 AI 图像生成工具（v1.1.0）

支持的图像生成模型

🔲 背景去除（新增）

MCP 提示（自动发现）

自定义命令（多 CLI 支持）

支持的 CLI

可用命令

CLI 使用示例

命令安装位置

🔧 技术细节

架构

文件结构

配置文件

脚本

要求

安全说明

📄 许可证

鸣谢

支持

Runtime guide

Hosted runtime

Local runtime / other methods