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 社區精心打造