Stitch MCP Auto

🚀 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

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

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

注意：当直接启动 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：安装程序（推荐）

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

选项 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 登录）。

清单（对代理友好）：

1. 运行设置：npm run setup（或 npx -p stitch-mcp-auto stitch-mcp-auto-setup）
2. 打开终端中显示的 URL（通常为 http://localhost:51121）
3. 在浏览器中完成 Google 登录（gcloud + Stitch API 启用）
4. ⚠️ 关键：验证 MCP 注册（见下文）
5. 启动服务器：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

设置过程

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

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

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

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

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

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

1. 复制 URL http://localhost:51121
2. 在你的 Windows 浏览器（Chrome、Edge 等）中手动打开它
3. 或者在 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：

1. 从现有屏幕提取上下文：

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

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

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

使用设计令牌

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

从仪表盘屏幕的设计中生成 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 "人工智能驱动的项目管理工具着陆页。专业，蓝色渐变主题，带有定价部分"

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

1. 分析所需资源（徽标、英雄图像、图标）
2. 使用 Gemini 3 Pro 生成每个资源（需要 Antigravity 认证）
3. 使用 Stitch API 创建完整的 UI 屏幕
4. 在一个响应中返回所有资源 + 最终 UI

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

---

📚 详细文档

可用工具

🔄 自动项目管理（新增）

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

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

工作原理：

┌─────────────────────────────────────────────────────────────┐
│  调用工具时未传递 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
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 社区精心打造