Steven's Knowledge Base

Google Stitch vs Figma 研究報告

6 min read

Google Stitch vs Figma — YouTube 研究報告

🕐 分析咗 14 條片 | 2026-04-09

🧠 主要共識（12/14 條片共識）

  • 定位係補充而非取代：幾乎所有 creator 都同意 Stitch 係 Figma 嘅「起點工具」，唔係終點。Stitch 負責快速生成，Figma 負責精修
  • design.md 係殺手鐧功能：Stitch 自動生成 design system markdown 文件，可以直接餵入 Claude Code / Cursor，令整個 app 保持視覺一致性
  • 目標用戶係非設計師：創辦人、PM、開發者用嚟快速出原型，唔需要請設計師
  • Copy to Figma 係必學流程：Stitch 生成 → 直接 paste 入 Figma 做 auto-layout，係最常被推薦嘅工作流

🔀 唔同方法對比

  • 「Stitch + Claude Code」派：用 Stitch 出 design.md，再叫 Claude Code 用 MCP 直接讀圖轉 React/Next.js 組件，整個流程唔需要手動 coding
  • 「Stitch → Figma 接力」派：Stitch 起草，Figma 精修，各司其職
  • 「AI Studio → Stitch」派：先喺 Google AI Studio 寫 backbone script（app 骨架），再入 Stitch 出 UI，係最完整嘅 end-to-end 流程

👥 Creator 立場地圖

  • 技術系 YouTuber（普遍）：「Figma 岌岌可危，Stitch 自動化咗前端設計師嘅工作」——傾向誇大革命性
  • UI Collective（懷疑派）：「我依家唔係每日用，仲未入我工作流」，預測 Figma 會推出更強 AI 反擊
  • DesignCourse（專業設計師派）：測試高端 editorial layout，直斥結果「遠差過原來 prompt 嘅輸出」，認為設計師暫時唔使擔心
  • Codex Community（最慘）：用咗半年時間建立類似工具嘅初創，Google 發布 Stitch 當日直接宣告「我個 startup 係咁死㗎喇」

📊 觀點比例

  • 共識（12/14 條片都講）：Stitch = 快速原型工具，Figma = 專業精修工具，兩者係互補關係
  • 爭議（約半數提及）：Stitch 嘅設計質量係咪夠好？技術人話「好勁」，專業設計師話「mid」
  • 獨特觀點（只有 1-2 條）：Figma 係上市公司，唔可能出一個完全取代設計師嘅功能（會衝擊股價）；Stitch voice AI 叫佢「make it pop」結果一塌糊塗

🔍 跨片洞察

  • 最新趨勢：design.md + MCP server 組合係 2026 最熱嘅設計工作流，Stitch 直接連 Claude Code，設計同開發嘅邊界消失緊
  • 市場盲點：大多數片只示範「生成」，少人討論 Stitch 嘅 編輯體驗極差——冇真正 visual builder，改文字有 bug，改背景色要 click 入個別元素
  • 爭議核心：「AI 設計係咪夠好」嘅標準係主觀嘅。對非設計師嚟講「夠用」；對專業設計師嚟講係「mid」

⚠️ 主要限制（重要）

  • Copy to Figma 限制：只有 Standard mode（Gemini 2.5 Flash）可以 export to Figma；Experimental mode（Gemini 2.5 Pro）唔得。生成 variants 後，那些 variant 亦冇法 export
  • 編輯介面難用：冇真正 visual builder，改 section 背景色要 click 入個別 component，唔直觀
  • Figma 匯入後嘅 layer 結構：Auto-layout 要 click 好多層先到，layer 命名混亂需要清理
  • 冇複雜組件：如 date picker 等常用 UI 組件仍然欠缺
  • Voice AI 不穩定：模糊指令（例如「make it pop」）效果差
  • 每月使用上限：Standard 每月 350 個畫面，Pro 200 個畫面

🏆 最值得深入睇嘅片（Top 3）

  1. 「Google Stitch Just Became an AI Figma (And It’s Free)」（6 萬+ views）— 最全面嘅功能示範，涵蓋 Copy to Figma 完整流程
  2. 「Google Stitch + Claude Code = Insane App Design」（10 萬+ views）— 展示 Stitch MCP + Claude Code 整合，係最實用嘅開發工作流
  3. 「The New Google Stitch - Are Designers Finished?」（11 萬+ views）— 最客觀平衡，設計師視角，有真實局限分析

💡 對 Steven 嘅直接啟示

你而家已經用緊 Google Stitch（feedback memory 有記錄，係首選推薦）。

最值得試嘅新工作流：

Google AI Studio → 寫 app backbone script
        ↓
Google Stitch → 生成 UI + 匯出 design.md
        ↓
Claude Code (MCP) → 直接讀 Stitch 設計圖
        ↓
React / Next.js 組件自動生成

design.md 係關鍵——如果你未試過用 Stitch 生成 design.md 再餵入 Claude Code，呢個係而家最值得試嘅功能。

分析咗嘅影片：14 條 | Keywords：google stitch vs figma 2026、google stitch UI design tool review、google stitch design workflow ai、Google Stitch Figma 比較、Google Stitch 設計工具 教學

Graph View