用 AI 寫 app 最頭痛的不是功能,是設計一直漂移。Google Stitch 2.0 自動產出 design.md 設計系統檔,讓 Claude Code 每次都照同一套規則。操作步驟與限制分析。
⭐ 文章深度讀:整理了 design.md 模式的操作步驟和踩坑清單
→ https://heymaibao.com/ai-app-design-md/
⚡ 章節重點
AI 做的 app 為什麼一眼就被認出來 00:00
設計漂移的真正原因:AI 根本不記得 01:04
design.md 一個檔案鎖住設計語言 02:09
實戰四步驟:Stitch 到 Claude Code 03:21
MCP 讓 AI 直接讀設計原始碼 04:14
Reality check:限制和踩坑清單 05:27
📝 懶人包
∙ Google Stitch 2.0 會自動產出一個叫 design.md 的設計系統檔案,包含字型規則、配色、元件規範。把這個檔案放進專案,Claude Code 每次寫程式都會參照同一套設計規則,不再每個畫面各做各的
∙ Claude Code 還能透過技術橋接直接讀取 Stitch 設計稿的 HTML/CSS 原始碼來還原 UI,不用靠文字描述猜
∙ 設計問題解決之後,同一個工作流還能繼續串接認證、付款、郵件到部署,全在同一個工作階段完成
∙ 我的觀察:design.md 這個模式的價值其實大於 Stitch 這個特定工具。任何能把設計系統輸出成結構化文件的工具,都能套用同樣的邏輯。重點不是用哪個工具,是你有沒有給 AI 一個可參照的設計標準
📚 參考資料
Claude Code + NEW Stitch 2.0 just changed how I design apps
→ https://x.com/prajwaltomar_/status/2037104246647382058