Stitch 2.0 搭 Claude Code，AI app 終於不再每頁長不一樣

AI 做的 app 每頁長不一樣？問題不是 AI，是缺少共享設計規範。拆解 Google Stitch 2.0 如何自動產出 design.md，搭配 Claude Code 鎖定設計一致性的完整 workflow。 ⭐ 文章深度讀：列出了這套工作流的四大限制與最適合的開發階段 → https://heymaibao.com/stitch-claude-code-design-workflow/ ⚡ 章節重點 你的 app 為什麼越做越醜 00:00 砸錢請設計師？隱形成本更可怕 01:16 design.md 怎麼鎖定設計語言 02:23 三步驟工作流拆解 03:41 誠實的限制與現實查核 04:53 比工具更重要的啟示 06:13 📝 懶人包 ∙ Google Stitch 2.0 在生成 UI 設計時，會自動產出完整 design system，全部寫進一個叫 design.md 的 markdown 檔案。把這份檔案餵給 Claude Code，它每次開發都參考同一套規則，解決畫面越做越亂的問題。 ∙ 透過 MCP 連接 (一種讓 AI 工具存取外部資料的協定)，Claude Code 可以直接讀取 Stitch 設計稿的 HTML/CSS 原始碼，重建出來的 UI 更貼近原始設計。 ∙ 這套工作流把過去花數千美元、等好幾週的設計流程，壓縮到一個人一個下午就能完成。 ∙ 我的觀察：這套工作流最適合 MVP (最小可行產品) 到早期產品階段的獨立開發者或小團隊。它不是設計師替代品，字型色彩仍可能需要手動調整，複雜設計 Claude 也可能誤讀。但比起什麼都沒有，這已經是巨大的進步。 📚 參考資料 Claude Code + NEW Stitch 2.0 just changed how I design apps → https://x.com/prajwaltomar_/status/2037104246647382058