2026 年 3 月，Google 推出了 Stitch 2.0 的 Web 模式，搭配 Anthropic 的 Claude Code 透過 MCP（Model Context Protocol）串接，形成了一套從設計到部署的完整工作流程。這套組合的核心價值在於：讓不擅長前端設計的開發者，能在 30 分鐘內從零產出一個可用的網頁原型。
開發者 Prajwal Tomar 近期在 X 上分享了他的實測心得，文章標題直接點出「Claude Code + Stitch 2.0 徹底改變了我設計 App 的方式」。他的核心論點是：如果你的應用程式看起來像「AI 量產品」，問題出在工作流程，不在工具本身。
Stitch 2.0 到底解決了什麼問題
AI 編碼工具目前面臨的一個實際困境是：程式邏輯寫得出來，但前端介面一做就走樣。你在 prompt 裡描述了配色和間距，AI 生成了一個按鈕元件，再要求做一張卡片時，字體大小、顏色、留白全跑掉了。
問題的根源在於 AI 編碼工具沒有持久的設計系統意識。每次生成新元件時，它都從頭猜測你要什麼風格。
Stitch 2.0 用 design.md 檔案解決了這件事。這份 Markdown 文件記錄了完整的設計系統規格，包括色彩、字型、間距、元件模式。Claude Code 讀取後，就能在整個專案中一致地套用同一套視覺語言。
兩條主要工作流程
目前實務上有兩種串接方式，適合不同場景：
流程一：design.md 手動匯出
- 在 Stitch 2.0 的 Web 模式中描述你要的 UI——建議選 Gemini Pro 模型，品質明顯高於 Flash
- 匯出
design.md檔案，內含色彩代碼、字型規格、元件佈局等完整設計參數 - 將檔案餵給 Claude Code，指定技術棧（例如 React + Tailwind CSS）
- Claude Code 依照設計規格生成前端程式碼，過程中可以即時修正
這條路線適合單一專案。你失去了即時同步的能力，但設定過程最簡單。
流程二：MCP 直接串接
透過 stitch-mcp 工具，Claude Code 可以直接存取 Stitch 的設計資源——HTML、CSS、截圖、設計 token 全部即時取用。設定方式是在 Claude Code 的 MCP 設定檔中加入：
{
"mcpServers": {
"stitch": {
"command": "npx",
"args": ["@_davideast/stitch-mcp", "proxy"]
}
}
}
MCP 串接的優勢在於雙向同步。你在 Stitch 裡調整設計，Claude Code 那邊會即時反映。Google Labs 也釋出了官方的 Stitch Skills 套件，包含 prompt 強化、設計系統文件生成、React 元件轉換等功能。
關於 MCP 的更多技術細節，可以參考這篇完整指南。
實際操作中的注意事項
用過這套流程的開發者普遍回報幾個共同經驗：
效果好的場景包括：Landing Page、行銷頁面、簡易儀表板、個人作品集、React 標準應用。有團隊實測在 10 分鐘內完成一個高端室內設計網站，從設計系統到視覺元件全部到位。
容易出問題的地方也不少。間距（padding 和 margin）經常「接近但不精確」。圖片都是佔位符，需要手動替換。Stitch 的設計是靜態的，任何 hover 效果、動畫、轉場都需要額外指定。多頁面應用中共享導覽列的狀態管理，目前還是個痛點。
對於 Vibe Coding 愛好者來說，這套流程最大的改變在於「設計品質的下限」被大幅提高了。過去用 AI 從頭寫前端，成品往往看得出機器味。現在有了 Stitch 做設計輸入，加上 Claude Code 的程式碼生成能力，產出的品質至少達到「可以拿去給人看」的水準。
與既有工具生態的比較
過去設計師和開發者的協作，通常經過 Figma 設計→開發者手動還原的流程，中間的落差是出了名的大。Cursor + Figma MCP 是另一條路線，走的是把 Figma 設計稿直接餵給 AI 編碼工具的思路。
Stitch 2.0 的差異點在於它從一開始就為 AI 消費設計。design.md 檔案不是設計師的交付物轉檔，而是 AI 原生可讀的結構化規格。這讓設計到程式碼的轉換損耗比較小。
不過要注意，Stitch 目前還在 Google Labs 階段，每月免費額度是 350 次生成。Claude Code 則需要 Pro 方案（約 NTD 640/月）。對照 Bolt.new、Lovable 等一站式 AI 開發工具，Stitch + Claude Code 的優勢在於設計品質更高、技術棧更彈性；劣勢是設定步驟多、學習曲線稍陡。
從工作流程看 AI 輔助開發的走向
21st.dev 提供 AI Coding 專用的 UI 元件庫，Andrew Ng 的 Claude Code 課程涵蓋了 Agentic Workflow 的實作基礎——這些工具和教育資源的出現，指向一個共同趨勢：AI 輔助開發正從「寫程式碼」延伸到「做設計」。
Prajwal Tomar 在文章中的觀察值得關注：真正區分「AI 量產品」和「專業產品」的，是開發者是否有一套結構化的設計輸入流程。單純靠 prompt 描述 UI，結果難以控制。有了 Stitch 這類工具生成的設計規格做錨點，AI 才有辦法在整個專案中維持一致性。
對團隊來說，這套流程的潛在價值在於壓縮設計與開發之間的來回次數。過去一個 Landing Page 從設計到上線可能要設計師半天加開發者一整天。現在同一個人在一個下午就能完成原型。那個省下來的時間可以花在用戶測試和內容優化上，對最終品質的影響可能更大。
引用來源
- Google Stitch 官方文件 — Google Labs
- stitch-mcp GitHub Repository — David East
- Stitch Skills Agent Library — Google Labs Code
- Model Context Protocol 規範 — Anthropic
- MindStudio: Design.md + Claude Code Workflow — MindStudio
我在測試這套流程時最意外的發現是：design.md 不只對 Claude Code 有用。把同一份設計規格丟給任何 AI 編碼工具——Cursor、Copilot、甚至是 ChatGPT 的 Canvas——出來的介面一致性都會明顯提升。這代表 Stitch 的真正價值不在於它是哪家公司的產品，而在於「結構化設計規格」這個概念本身。從前你可能花兩小時在 Figma 上排版，然後再花三小時跟開發者溝通「這裡的間距不對」。現在整個過程壓縮到一杯咖啡的時間。這不是魔法，但確實是個實際的效率跳升。
若你正在考慮導入 AI 工具來加速產品開發流程，或是需要從 UI 設計到前端部署的完整規劃，歡迎與 Tenten 團隊預約諮詢，一起討論最適合你團隊的方案。
