觸發範例

"將我的 Stitch 設計拉到程式碼中"
"用 Stitch 做個落地頁"
"把這個截圖的風格用到我的網站上"
"從我的 Stitch 專案匯出 design.md"
"將 Stitch 設計轉換為 ShadCN 元件"

Google Stitch 整合技能

核心概念：design.md

Stitch 的設計系統會擷取到一個 design.md 檔案中 — 顏色、字型、主題、元件樣式。這個檔案具有以下特性：

代理最佳化 — 使用比原始 CSS 更容易讓語言代理理解的目標語言
可轉移 — 提供給 Claude Code、Cursor 或任何代理，它們都能完美重現風格
自動建立 — Stitch 會為每個專案自動產生一個，即使沒有要求

預設工作流程：始終先建立 design.md，然後在其基礎上建立頁面。

MCP 伺服器

社群套件：davideast/stitch-mcp npm：@_davideast/stitch-mcp

設定

先決條件

已安裝 Google Cloud CLI (gcloud)
已啟用 Stitch API 的 GCP 專案

驗證（OAuth — 不支援 API 金鑰）

gcloud auth login
gcloud auth application-default login
gcloud config set project <YOUR_PROJECT_ID>
gcloud auth application-default set-quota-project <YOUR_PROJECT_ID>
gcloud beta services mcp enable stitch.googleapis.com --project=<YOUR_PROJECT_ID>

MCP 設定

新增至您的 MCP 客戶端設定（例如 .kiro/settings/mcp.json）：

{
  "stitch": {
    "command": "npx",
    "args": ["@_davideast/stitch-mcp", "proxy"],
    "env": {
      "STITCH_USE_SYSTEM_GCLOUD": "1",
      "GOOGLE_CLOUD_PROJECT": "<YOUR_PROJECT_ID>"
    }
  }
}

關鍵：必須使用 proxy 模式 + STITCH_USE_SYSTEM_GCLOUD=1。直接使用 serverUrl 模式不穩定。

驗證設定

npx @_davideast/stitch-mcp doctor

如果 doctor 在 API 測試時逾時，請直接使用以下方式確認：

ACCESS_TOKEN=$(gcloud auth application-default print-access-token)
curl -s -w "\nHTTP:%{http_code}" \
  -H "Authorization: Bearer $ACCESS_TOKEN" \
  -H "x-goog-user-project: <YOUR_PROJECT_ID>" \
  "https://stitch.googleapis.com/v1/projects"

MCP 工具

工具	用途
`list_projects`	列出所有 Stitch 專案
`get_screen_code`	取得畫面的 HTML/CSS
`get_screen_image`	取得畫面截圖（base64）
`build_site`	將畫面對應到路由，產生 Astro 專案

CLI 工具（非 MCP）

npx @_davideast/stitch-mcp view --projects          # 瀏覽專案
npx @_davideast/stitch-mcp serve -p <project-id>    # 本地預覽
npx @_davideast/stitch-mcp site -p <project-id>     # 產生 Astro 網站

工作流程

路徑 A：從頭設計（預設）

建立設計系統 — 在 Stitch 中建立或提供 design.md（若不指定則自動建立）
產生畫面 — 根據您的需求提示 Stitch；它會基於設計系統建立
拉取到本地 — get_screen_code → HTML/CSS，get_screen_image → 截圖
實作 — 轉換為目標框架（Next.js/Astro/React）
驗證 — 視覺比對（請參閱「階段：驗證」章節）

路徑 B：依參考重新設計

當您有現有網站/截圖的風格想要採用（而非複製）時使用：

擷取參考 — 對您喜歡的網站進行全頁面截圖（使用 GoFullPage 或類似工具）
在 Stitch 中重新設計 — 上傳截圖；Stitch 會萃取出設計語言、元件模式和版面配置，然後套用到您的內容上
替代方案：透過網址匯入 — 在 Stitch 的設計系統面板中，從任何網站網址匯入。Stitch 會爬取該網站並將字型和顏色萃取為 design.md
精煉 — 上傳線框圖或標註特定區塊進行調整

路徑 C：代理整合式建置（Claude Code + Stitch）

使用 Google 官方 Stitch 技能進行自主的端到端建置：

強化提示 — 將模糊的使用者提示轉換為 Stitch 最佳化提示（Stitch 依賴形容詞表達氛圍，而非精確描述）
Stitch 循環 — 使用 Chrome DevTools 進行自主建置循環，跨階段維護提示追蹤
React 元件 — 將 Stitch 的單體 HTML 匯出轉換為模組化的 React 元件，並進行驗證

claude.md 中的工作流程順序：

強化提示 → Stitch 循環 → React 元件轉換

需要已連接 Stitch MCP。安裝方式請參閱 Google 的 Stitch 技能倉庫。

路徑 D：ShadCN UI 轉換

Stitch 產生的純 React/HTML 缺乏互動性。使用 ShadCN 來獲得生產級元件：

連接 ShadCN MCP
使用 Google 的 ShadCN UI 技能將 Stitch 設計轉換為 ShadCN 元件
使用元件庫擴充（例如 glassmorphism、motion-primitives）以獲得高級質感
在 claude.md 中指定元件庫，以便自動進行轉換

階段：驗證（靈感來自 gstack design-review）

實作完成後，執行多層驗證。目標：找出人眼遺漏的問題。

第 1 層：多視口螢幕截圖

在 3 個斷點下進行截圖，以捕捉響應式問題：

npx playwright screenshot --viewport-size=375,812 http://localhost:3000 impl-mobile.png
npx playwright screenshot --viewport-size=768,1024 http://localhost:3000 impl-tablet.png
npx playwright screenshot --viewport-size=1440,900 http://localhost:3000 impl-desktop.png

檢查：文字溢位、版面崩潰、元素重疊、內容未適應。

第 2 層：設計系統一致性檢查

從實作中擷取實際渲染的值，並與 design.md 比對：

# 擷取實際使用的字型（在瀏覽器主控台或 Playwright 中執行）
npx playwright evaluate http://localhost:3000 \
  "JSON.stringify([...new Set([...document.querySelectorAll('*')].slice(0,500).map(e => getComputedStyle(e).fontFamily))])"

# 擷取使用中的調色盤
npx playwright evaluate http://localhost:3000 \
  "JSON.stringify([...new Set([...document.querySelectorAll('*')].slice(0,500).flatMap(e => [getComputedStyle(e).color, getComputedStyle(e).backgroundColor]).filter(c => c !== 'rgba(0, 0, 0, 0)'))])"

將擷取的值與 design.md 代號比對。標記差異。

第 3 層：像素差異比對

npx pixelmatch design.png impl-desktop.png diff.png 0.1

第 4 層：AI 生成模式偵測

檢查實作中是否存在以下 10 種 AI 生成模式（來自 gstack 的黑名單）：

預設的紫/紫羅蘭漸層背景
三欄功能網格，包含圓圈圖示 + 標題 + 描述
圓圈內的彩色圖示作為區塊裝飾
全部文字置中 (text-align: center)
所有元素都使用統一的圓形邊框半徑
裝飾性塊狀物、波浪 SVG 分隔線
表情符號作為設計元素
卡片上的彩色左邊框
通用的主視覺文案（"歡迎使用 X"、"釋放...的力量"）
千篇一律的區塊節奏（主視覺 → 功能 → 推薦 → 定價 → 行動呼籲）

如果偵測到 ≥3 種模式，則標記為「AI 生成模式風險」，並建議具體的修正。

第 5 層：AI 視覺比對

將 design.png 和 impl-desktop.png 提供給 LLM 進行比較。特別詢問：

層級結構是否相符？
間距比例是否保持一致？
是否有任何遺漏的區塊或元素？

精煉循環

驗證後，進行迭代：

向使用者展示螢幕截圖 + 差異結果
使用者提供回饋
進行局部編輯（不要重新產生整個檔案）
重新驗證
重複直到「完成」（最多 10 輪）

design.md 技巧

範本：從 Google 官方技能儲存庫取得代理最佳化的範本
轉移：將 design.md 提供給任何代理（Claude Code、Cursor）以獲得一致的樣式
萃取：使用 Google 的「design MD 技能」從現有的 Stitch 專案中萃取出 design.md
自訂：使用顏色/字型/主題建立您自己的 design.md，並貼入 Stitch 的設計系統面板

已知問題

API 金鑰驗證失敗 — Stitch API 拒絕 API 金鑰，必須使用 OAuth（社群於 2026-02 確認）
doctor 擷取逾時 — 取決於網路環境；直接使用 curl 測試更可靠
不需要啟用計費 — Stitch API 可在未啟用計費的專案上運作
實驗模式無 Figma 匯出 — 僅標準模式支援 Figma 匯出

KaimingWan/oh-my-kiro

oh-my-kiro 是什麼？

在你喜歡的 AI 中提問

說明文件