Google Stitch & Claude Code：6 個設計稿，10 分鐘搞定
整理版優先睇
Google Stitch 免費生成高保真 UI，結合 Claude Code 由文檔到設計稿 10 分鐘搞掂
呢篇文章係作者分享佢用 Google Stitch 同 Claude Code 整 App 設計嘅經驗。作者本身做緊一個叫 BodyMate 嘅 iOS 健康 App，用咗 Stitch 已經有 5 個基本頁面，但隨住功能增加需要整多幾個新頁面。佢想揾一個免費方案，而 Stitch 就免費唔使設計底子。
作者嘅做法係用 Claude Code 分析產品計劃文檔（.md）同現有 Stitch 設計，自動交叉對比出缺咗邊啲頁面，再為每個新頁面生成好詳細嘅設計 prompt。然後佢手動將 prompt 貼去 Stitch 網頁端生成設計，最後由 5 個頁面擴展到 11 個，成個過程大約 10 分鐘。
不過佢遇到一個大問題：Claude Code 連咗 Stitch MCP 後，用 API Key 只能讀數據（list、get），寫入操作（generate、edit）會靜默失敗，以為成功但其實乜都冇產生。原來 API Key 權限唔夠，要改用 OAuth2 認證先得。作者最後揀咗方案 B：用 Claude Code 生成 prompt，手動喺 Stitch 貼上執行，反而更實用。
- Stitch 係 Google 免費嘅 AI 設計工具，用文字描述就出高保真 UI，仲有完整設計系統，可以匯出 Figma、AI Studio 或經 MCP 連接 Claude Code。
- 作者用 Claude Code 同時讀取計劃文檔同現有設計，自動分析缺口並生成精確嘅設計 prompt，將原本 5 個頁面擴充到 11 個，節省大量對比時間。
- Stitch MCP 用 API Key 連線後，讀取功能正常，但寫入（生成新頁面、編輯現有頁面）會靜默失敗，原因係 API Key 唔支援寫入操作，需要 OAuth2 認證。
- 相比 Figma MCP（需付費），Stitch 免費但寫入要 OAuth2，適合快速原型驗證；Figma 適合精細設計同團隊協作，兩者唔衝突。
- 實用建議：設計 prompt 越具體越好；先喺 Stitch 建立項目同設計系統；編輯現有頁面比從頭生成更容易保持風格一致。
內容片段
docs/plan/├── CROSS_INSIGHT_PLAN.md # 運動×體脂交叉洞察├── SLEEP_DETAIL_PLAN.md # 睡眠詳情頁├── MULTI_SCALE_PLAN.md # 多品牌體脂秤適配└── WATCH_PLAN.md # Apple Watch 集成Google Stitch 係乜嘢？免費高保真設計工具
Google Stitch 係 Google 出嘅 AI 設計工具，你只要用文字描述，佢就直接生成一個高保真 UI 設計稿，唔需要畫圖基礎。例如你話「我要一個健康 App 嘅運動詳情頁，頂部放今日概覽，下面係每段運動嘅卡片」，佢就會生一個完整嘅設計，連色彩、字體、間距都幫你搞掂。
核心能力包括文字生成 UI、自動設計系統、編輯現有頁面、生成變體同導出 HTML+CSS 代碼
實戰：由計劃文檔到設計稿，10 分鐘搞掂
作者嘅 BodyMate App 已經有 5 個基礎頁面，但需要新增幾個功能頁面。佢將 4 份計劃文檔放喺 docs/plan/ 目錄，然後叫 Claude Code 做兩件事：讀取 Stitch 項目睇現有頁面，再讀取所有文檔分析缺邊啲頁面。
Claude Code 自動交叉對比後，話要新增 3 個頁面（Workout Detail、Sleep Detail、AI Weekly Report），更新 3 個頁面（Home Dashboard、Measurement Result、Trends History）
- 1 Claude Code 根據計劃文檔嘅具體需求，結合 Stitch 現有設計系統（例如主色 #4A9D5B、紫色 #5B4FA0），為每個頁面生成詳細嘅設計 prompt。
- 2 將 prompt 貼去 Stitch 網頁端，選擇 App 類型，每個頁面生成約 1-2 分鐘，最後由 5 個頁面擴展到 11 個，風格完全統一。
呢個工作流嘅核心係用 Claude Code 做「大腦」（分析、決策、生成指令），用 Stitch 做「手」（執行設計）
踩坑：API Key 只能讀不能寫，靜默失敗
作者配置完 Stitch MCP 後，發現 generate_screen_from_text 同 edit_screens 都返回「completed」，但實際上乜都冇生成。佢試咗幾次都係咁，所有讀取操作正常，寫入操作全部靜默失敗。
解決方案有兩個：一是用 OAuth2 認證（需安裝 gcloud CLI 同開啟 Stitch API），二是作者用嘅方案 B——Claude Code 生成 prompt，手動喺 Stitch 網頁貼上執行
作者認為方案 B 更實用，因為 Claude Code 嘅核心價值係分析需求同生成高質量 prompt，而唔係代替你按掣。手動貼 prompt 只需幾秒鐘，反而更穩陣。
Stitch vs Figma MCP：免費原型 vs 精細協作
作者之前寫過 Claude Code + Figma MCP 嘅教程，今次補返免費方案。兩個工具各有適用場景，唔衝突：
- Stitch：免費，高保真設計，有完整設計系統，MCP 讀寫要 OAuth2（寫入有坑），零基礎可用，適合快速出原型、驗證想法。
- Figma MCP：需要 Figma 付費賬號，讀寫都 OK，需要了解 Figma，適合精細設計同團隊協作。
再往前睇，完整嘅 VibeCoding 工作流可以打通：AI 討論需求 → 需求文檔 → Stitch 生成設計 → Claude Code 讀取設計系統 → 直接前端開發
幾個實用建議，提升設計效率
Prompt 越具體越好，唔好只寫「做一個運動頁面」，要寫清楚每個卡片嘅結構、數據、色值
先建設計系統：喺 Stitch 創建項目、配好主色調同字體，後續生成嘅頁面會自動繼承，風格統一
編輯比新建好用：如果有類似頁面，用編輯功能改，比從頭生成更容易保持風格一致
MCP 配置唔好刪：雖然寫入有問題，但讀取功能好有用，Claude Code 可以直接拎設計系統參數（色值、字體、間距）來生成 prompt
上次寫咗 Claude Code + Figma MCP 畫原型嘅教學，留言區好多人問：有冇免費嘅方案？
有啦。Google 嘅 Stitch，免費，唔需要設計基礎，用自然語言描述就可以出到高保真設計稿。
今次我用 Claude Code 分析產品計劃文檔，叫佢自動計出嚟缺邊啲頁面，然後批量生成 Stitch 設計 prompt，一口氣由 5 個頁面擴展到 11 個。成個過程大概 10 分鐘。
但中間踩咗個坑 —— Claude Code 連接 Stitch MCP 之後，讀到但寫唔到。呢個坑揾咗好耐先搞明，下面一齊講。
Google Stitch 係咩嚟
簡單講：Google 出嘅 AI 設計工具，文字描述 → 高保真 UI 設計稿。
同 Figma 唔同，Stitch 唔需要你識畫圖。你同佢講"我要一個健康 App 嘅運動詳情頁，頂部放今日概覽，下面係每段運動嘅卡"，佢直接生成一個可以用嘅設計稿，帶完整嘅色彩系統、字體、間距。
幾個核心功能：
• 文字生成 UI — 描述頁面結構，自動生成 • 設計系統 — 自動生成配色、字體、圓角等完整 Design System • 編輯現有頁面 — 揀一個畫面，用文字描述修改內容 • 生成變體 — 對現有設計生成多種風格版本 • 導出代碼 — 每個設計稿都係 HTML + CSS，可以直接用
而且：完全免費。
三種導出方法
生成嘅設計稿唔係剩係得睇，有三種方法用得著：
1. 導出 Figma 文件 — 團隊協作時用呢個，導出之後喺 Figma 度精修。之前有人話 Figma 免費額度有限制，Stitch 目前免費額度仲好充裕。
2. 導出到 Google AI Studio — 唔需要裝額外工具，直接喺 Google 生態裏面整應用程式。
3. 通過 MCP 連接 Claude Code — 我主要用呢種，叫 Claude Code 讀咗設計系統之後輔助開發。
呢篇主要講第三種，但我係喺原有嘅設計稿上面迭代同優化功能，所以需要 Claude 補充下 prompt，但實際上都可以淨係針對呢幾個頁面新增需求文檔，直接 send 畀 Google Stitch 都得。
實戰過程：由計劃文檔到設計稿
我做緊一個 iOS 健康 App（BodyMate），之前喺 Stitch 入面已經有 5 個基本頁面。但隨住功能迭代，需要新增幾個頁面，現有頁面都需要更新。
第一步：叫 Claude Code 分析需求
我嘅項目 docs/plan/ 目錄入面有 4 份計劃文檔：
docs/plan/
├── CROSS_INSIGHT_PLAN.md # 運動×體脂交叉洞察
├── SLEEP_DETAIL_PLAN.md # 睡眠詳情頁
├── MULTI_SCALE_PLAN.md # 多品牌體脂秤適配
└── WATCH_PLAN.md # Apple Watch 集成我叫 Claude Code 做咗兩件事：
1. 讀取 Stitch 項目，睇下而家有邊啲頁面 2. 讀取所有計劃文檔，分析缺邊啲頁面
Claude Code 通過 Stitch MCP 讀取到現有 5 個畫面（Home Dashboard、Measurement Result、Trends History、Settings、AI Assistant），然後逐份讀取計劃文檔，自動交叉對比之後畀咗結論：
需要新增 3 個頁面：Workout Detail、Sleep Detail、AI Weekly Report
需要更新 3 個頁面：Home Dashboard、Measurement Result、Trends History
呢一步完全自動，我冇手動對比任何文檔。
第二步：生成設計 Prompt
Claude Code 根據計劃文檔入面嘅具體需求（頁面結構、數據字段、互動方式），結合 Stitch 項目已經有嘅設計系統（色彩、字體、間距），為每個頁面生成咗一段詳細嘅設計 prompt。
例如運動詳情頁嘅 prompt，佢會將計劃文檔入面嘅具體指標（心率區間顏色、運動類型圖標、2×3 指標網格佈局）全部翻譯成 Stitch 明嘅設計描述，同時引用現有設計系統嘅色值（主色 #5B4FA0、紫色 用於睡眠等）。 #4A9D5B
呢一步嘅價值在於：Claude Code 同時理解產品需求同設計系統，生成嘅 prompt 比我自己寫嘅準確好多。
第三步：喺 Stitch 度生成
將 prompt 貼到 Stitch 網頁端，揀 App 或 Web 類型，撳生成：
新建 3 個頁面 + 編輯 3 個現有頁面。每個頁面生成大概 1-2 分鐘。
最終效果：由 5 個頁面擴展到 11 個，新頁面同原有頁面風格完全統一。
Claude Code 連接 Stitch MCP
設定方法
最簡單嘅方法：喺 Stitch 網頁端打開項目，撳導出，揀 Claude Code MCP，會直接顯示連接設定同 API Key。
複製設定資訊，直接 send 畀 Claude Code，叫佢幫你連接：
都可以手動執行指令：
claude mcp add stitch "https://stitch.googleapis.com/mcp" \
-t http \
-H "X-Goog-Api-Key: 你的API_KEY"設定完用 claude mcp list 確認，見到 stitch: ✓ Connected 就 OK。
可以做啲咩
連上之後，Claude Code 獲得咗 8 個工具：
list_projects | |
get_project | |
list_screens | |
get_screen | |
create_project | |
generate_screen_from_text | |
edit_screens | |
generate_variants |
睇落讀同寫都有，係咪？個坑就喺度。
踩坑：讀到但寫唔到
現象
我叫 Claude Code 直接調用 generate_screen_from_text 生成新頁面，API 調用返咗 "completed"，沒報錯。
但等咗兩分鐘去睇 —— 咩都冇生成到。
又試了 edit_screens 編輯現有頁面，同樣返咗 "completed"，同樣冇生效。
反覆試咗好幾輪，所有讀取操作（list、get）都正常，所有寫入操作都靜默失敗。
原因
刨咗 Google AI 開發者論壇先揾到答案：
"API keys are not supported by this API. Expected OAuth2 access token or other authentication credentials that assert a principal."
翻譯做人話：API Key 只夠用嚟讀數據，生成同編輯需要 OAuth2 認證。
真正陰濕嘅係佢唔報錯，直接返成功，你以為生成好咗，結果咩都冇。
解決方法
有兩條路：
方案 A：轉用 OAuth2 認證（完整方案）
# 1. 確保裝了 gcloud CLI
brew install google-cloud-sdk
# 2. OAuth2 登錄
gcloud auth application-default login
# 3. 啓用 Stitch API
gcloud services enable stitch.googleapis.com然後用 stitch-sdk 嘅 proxy server 代替直接連線，佢會自動處理 OAuth2 token 更新。
方案 B：Claude Code 生成 prompt，手動喺 Stitch 網頁端執行（我用嘅）
講真，方案 B 反而更實用。因為 Claude Code 嘅核心價值唔係"代替你撳掣"，而係分析需求 + 生成高質素 prompt。呢部分佢做得非常好，我手動貼到 Stitch 度只需要幾秒。
我嘅工作流程總結
產品計劃文檔（.md）
↓ Claude Code 讀取分析
現有 Stitch 設計稿
↓ Claude Code 交叉對比
缺口分析（需要新增/編輯哪些頁面）
↓ Claude Code 生成 prompt
Stitch 網頁端粘貼執行
↓ Stitch AI 生成設計
完整設計稿（11 個頁面）核心諗法：用 Claude Code 做"大腦"（分析、決策、生成指令），用 Stitch 做"手"（執行設計）。
對比我之前寫過嘅 Claude Code + Figma MCP 方案：
再往前睇一步，Stitch 接入之後，完整嘅 Vibecoding 工作流程可以打通：
AI 討論需求 → 輸出需求文檔
↓
需求文檔發給 Stitch → 明確主題顏色和樣式 → 生成設計稿
↓
Claude Code 通過 MCP 讀取 Stitch 設計系統
↓
直接進入前端開發（設計稿的色值、字體、間距全部自動繼承）由需求到設計到代碼，一條路打通，中間唔斷纜。
幾個實用建議
1. 個人感覺 Prompt 越具體越好 — 唔好淨係寫"做一個運動頁面"，要寫清楚每個卡嘅結構、數據、色值。Claude Code 幫你生成嘅 prompt 就好詳細，呢個都係點解效果好。——但 Google Stitch 嘅初衷好似係希望可以畀你設計靈感，所以你都可以唔具體，睇下佢可以畀你啲咩意想不到嘅設計。-有興趣嘅可以去試下。 2. 先建立設計系統 — 喺 Stitch 度先建立項目、校好主色調同字體，後續生成嘅頁面會自動繼承呢啲設定，風格統一。 3. 編輯比新建好用 — 如果已經有類似頁面，用編輯功能喺上面改，比從頭生成更容易保持風格一致。 4. MCP 設定唔好刪 — 雖然寫唔到，但讀取功能好有價值。Claude Code 可以直接讀取你嘅設計系統設定（色值、字體、間距），生成 prompt 時會自動引用呢啲參數。
我之前寫過 Claude Code + Figma 畫原型嘅完整教學（嗰篇有 1038 次轉發），今次算係補返免費方案。兩個工具各有適用場景，唔衝突。
如果你都喺度做 App、做獨立開發，Stitch 值得試下。尤其係早期驗證階段，
有問題可以留言，我見到都會回。
上次寫了 Claude Code + Figma MCP 畫原型的教程，評論區好多人問：有沒有免費的方案？
有了。Google 的 Stitch，免費，不需要設計基礎，用自然語言描述就能出高保真設計稿。
這次我用 Claude Code 分析產品計劃文檔，讓它自動算出缺哪些頁面，然後批量生成 Stitch 設計 prompt，一口氣從 5 個頁面擴展到 11 個。整個過程大概 10 分鐘。
但中間踩了一個坑 —— Claude Code 連 Stitch MCP 後，能讀不能寫。這個坑搜了半天才搞明白，下面一起說。
Google Stitch 是什麼
簡單說：Google 出的 AI 設計工具，文字描述 → 高保真 UI 設計稿。
跟 Figma 不同，Stitch 不需要你會畫圖。你告訴它"我要一個健康 App 的運動詳情頁，頂部放今日概覽，下面是每段運動的卡片"，它直接生成一個可用的設計稿，帶完整的色彩體系、字體、間距。
幾個核心能力：
• 文字生成 UI — 描述頁面結構，自動生成 • 設計系統 — 自動生成配色、字體、圓角等完整 Design System • 編輯現有頁面 — 選中一個屏幕，用文字描述修改內容 • 生成變體 — 對現有設計生成多種風格版本 • 導出代碼 — 每個設計稿都是 HTML + CSS，可以直接用
而且：完全免費。
三種導出方式
生成的設計稿不是隻能看，有三種方式用起來：
1. 導出 Figma 文件 — 團隊協作時用這個，導出後在 Figma 裏精修。之前有人說 Figma 免費額度有限制，Stitch 目前免費額度還很充裕。
2. 導出到 Google AI Studio — 不裝額外工具，直接在 Google 生態裏構建應用。
3. 通過 MCP 連接 Claude Code — 我主要用這種，讓 Claude Code 讀取設計系統後輔助開發。
這篇主要講第三種，但我的是在原有的設計稿上面去迭代和優化功能，所以需要claude補充一下prompt，但實際上也可以只針對這幾個頁面新增需求文檔，直接發給google stitch也可以。
實戰過程：從計劃文檔到設計稿
我在做一個 iOS 健康 App（BodyMate），之前在 Stitch 裏已經有 5 個基礎頁面。但隨着功能迭代，需要新增幾個頁面，現有頁面也需要更新。
第一步：讓 Claude Code 分析需求
我的項目 docs/plan/ 目錄裏有 4 份計劃文檔：
docs/plan/
├── CROSS_INSIGHT_PLAN.md # 運動×體脂交叉洞察
├── SLEEP_DETAIL_PLAN.md # 睡眠詳情頁
├── MULTI_SCALE_PLAN.md # 多品牌體脂秤適配
└── WATCH_PLAN.md # Apple Watch 集成我讓 Claude Code 做了兩件事：
1. 讀取 Stitch 項目，看現在有哪些頁面 2. 讀取所有計劃文檔，分析缺哪些頁面
Claude Code 通過 Stitch MCP 讀取到現有 5 個屏幕（Home Dashboard、Measurement Result、Trends History、Settings、AI Assistant），然後逐份讀取計劃文檔，自動交叉對比後給出了結論：
需要新增 3 個頁面：Workout Detail、Sleep Detail、AI Weekly Report
需要更新 3 個頁面：Home Dashboard、Measurement Result、Trends History
這一步完全自動，我沒有手動對比任何文檔。
第二步：生成設計 Prompt
Claude Code 根據計劃文檔裏的具體需求（頁面結構、數據字段、交互方式），結合 Stitch 項目已有的設計系統（色彩、字體、間距），為每個頁面生成了一段詳細的設計 prompt。
比如運動詳情頁的 prompt，它會把計劃文檔裏的具體指標（心率區間色彩、運動類型圖標、2×3 指標網格佈局）全部翻譯成 Stitch 能理解的設計描述，同時引用現有設計系統的色值（主色 #4A9D5B、紫色 #5B4FA0 用於睡眠等）。
這一步的價值在於：Claude Code 同時理解產品需求和設計系統，生成的 prompt 比我自己寫的要準確得多。
第三步：在 Stitch 裏生成
把 prompt 粘貼到 Stitch 網頁端，選擇 App 或 Web 類型，點擊生成：
新建 3 個頁面 + 編輯 3 個現有頁面。每個頁面生成大概 1-2 分鐘。
最終效果：從 5 個頁面擴展到 11 個，新頁面和原有頁面風格完全統一。
Claude Code 連接 Stitch MCP
配置方法
最簡單的方式：在 Stitch 網頁端打開項目，點導出，選擇 Claude Code MCP，會直接顯示連接配置和 API Key。
複製配置信息，直接發給 Claude Code，讓它幫你連接：
也可以手動執行命令：
claude mcp add stitch "https://stitch.googleapis.com/mcp" \
-t http \
-H "X-Goog-Api-Key: 你的API_KEY"配置完用 claude mcp list 確認，看到 stitch: ✓ Connected 就 OK。
能做什麼
連上之後，Claude Code 獲得了 8 個工具：
list_projects | |
get_project | |
list_screens | |
get_screen | |
create_project | |
generate_screen_from_text | |
edit_screens | |
generate_variants |
看起來讀寫都有，對吧？坑就在這裏。
踩坑：能讀不能寫
現象
我讓 Claude Code 直接調用 generate_screen_from_text 生成新頁面，API 調用返回了 "completed"，沒報錯。
但等了兩分鐘去看 —— 啥也沒生成。
又試了 edit_screens 編輯現有頁面，同樣返回 "completed"，同樣沒生效。
反覆試了好幾輪，所有讀取操作（list、get）都正常，所有寫入操作都靜默失敗。
原因
翻了 Google AI 開發者論壇才找到答案：
"API keys are not supported by this API. Expected OAuth2 access token or other authentication credentials that assert a principal."
翻譯成人話：API Key 只夠用來讀數據，生成和編輯需要 OAuth2 認證。
真正坑的是它不報錯，直接返回成功，你以為生成好了，結果啥都沒有。
解決方案
有兩條路：
方案 A：切換到 OAuth2 認證（完整方案）
# 1. 確保裝了 gcloud CLI
brew install google-cloud-sdk
# 2. OAuth2 登錄
gcloud auth application-default login
# 3. 啓用 Stitch API
gcloud services enable stitch.googleapis.com然後用 stitch-sdk 的 proxy server 代替直連，它會自動處理 OAuth2 token 刷新。
方案 B：Claude Code 生成 prompt，手動在 Stitch 網頁端執行（我用的）
說實話，方案 B 反而更實用。因為 Claude Code 的核心價值不是"代替你按按鈕"，而是分析需求 + 生成高質量 prompt。這部分它做得非常好，我手動粘貼到 Stitch 裏只需要幾秒鐘。
我的工作流總結
產品計劃文檔（.md）
↓ Claude Code 讀取分析
現有 Stitch 設計稿
↓ Claude Code 交叉對比
缺口分析（需要新增/編輯哪些頁面）
↓ Claude Code 生成 prompt
Stitch 網頁端粘貼執行
↓ Stitch AI 生成設計
完整設計稿（11 個頁面）核心思路：用 Claude Code 做"大腦"（分析、決策、生成指令），用 Stitch 做"手"（執行設計）。
對比我之前寫過的 Claude Code + Figma MCP 方案：
再往前看一步，Stitch 接入之後，完整的 Vibecoding 工作流可以打通：
AI 討論需求 → 輸出需求文檔
↓
需求文檔發給 Stitch → 明確主題顏色和樣式 → 生成設計稿
↓
Claude Code 通過 MCP 讀取 Stitch 設計系統
↓
直接進入前端開發（設計稿的色值、字體、間距全部自動繼承）從需求到設計到代碼，一條鏈路打通，中間不斷檔。
幾個實用建議
1. 個人感覺Prompt 越具體越好 — 不要只寫"做一個運動頁面"，要寫清楚每個卡片的結構、數據、色值。Claude Code 幫你生成的 prompt 就很詳細，這也是為什麼效果好。——但google stitch的初衷貌似是希望可以給你設計靈感，所以你應該也可以不具體，看看他可以給你一些什麼意想不到的設計。-感興趣的可以去嘗試下。 2. 先建設計系統 — 在 Stitch 裏先創建項目、配好主色調和字體，後續生成的頁面會自動繼承這些設定，風格統一。 3. 編輯比新建好用 — 如果已有類似頁面，用編輯功能在上面改，比從頭生成更容易保持風格一致。 4. MCP 配置別刪 — 雖然寫不了，但讀取功能很有價值。Claude Code 能直接讀取你的設計系統配置（色值、字體、間距），生成 prompt 時會自動引用這些參數。
我之前寫過 Claude Code + Figma 畫原型的完整教程（那篇有 1038 次轉發），這次算是補上了免費方案。兩個工具各有適用場景，不衝突。
如果你也在做 App、做獨立開發，Stitch 值得試試。尤其是早期驗證階段，
有問題可以留言，我看到都會回。