Google Stitch + Claude Code，DESIGN.md讓Vibe Design更有設計感
整理版優先睇
Google Stitch + Claude Code 結合，DESIGN.md 串連設計與開發
呢篇文章係由陸徐洲寫嘅，佢係一家 LIMS 公司嘅 AI 算法負責人。佢之前用 Claude Code 做過 UI 設計，今次 Google Stitch 更新咗 Vibe Design 功能，佢就決定測試一下。同一段中文提示詞，佢試咗四種方案：Stitch 用三次（每次風格唔同）、Claude Code 裸跑同埋加咗 frontend-design skill 嘅版本。結果發現，Stitch 設計審美在線，兩分鐘出圖，但同一個提示詞每次結果唔一樣，而且導出嘅 HTML 結構粗糙。Claude Code 寫代碼可靠，但自己做設計決策就一般。
最關鍵嘅發現係：Stitch 導出嘅 ZIP 入面有一個 DESIGN.md，唔係簡單嘅參數表，而係一套完整嘅設計體系，例如「The Modern Calligrapher」主題、字體雙軌制、禁用 1px 邊框等。將呢個 DESIGN.md 直接交畀 Claude Code 去生成頁面，效果係四組裏面最好嘅。因為 Stitch 負責設計直覺，Claude Code 負責工程實現，中間由 DESIGN.md 做橋樑。作者推薦嘅工作流係：用 Stitch 生成設計規範，然後將 DESIGN.md 俾 Claude Code 按規範寫代碼。呢個組合目前係佢試過最高質量嘅做法。
- Stitch 設計直覺強但每次結果唔穩定，Claude Code 工程實現可靠但設計決策弱，兩者結合互補。
- 方法：用 Stitch 生成 DESIGN.md 設計規範，再交 Claude Code 嚴格按規範編寫落地頁。
- 差異：Stitch 導出 HTML 結構粗糙，Claude Code 寫嘅代碼結構好、可直接運行。
- 啟發：設計規範文件（DESIGN.md）係連結設計同開發嘅關鍵橋樑。
- 可行動點：嘗試 Stitch + Claude Code 工作流，提升 UI 開發效率同設計品質。
Google Stitch 更新 Vibe Design，作者測試動機
3 月 18 號，Google 俾 Stitch 嚟咗一次大更新，加咗個新概念叫 Vibe Design：唔話俾 AI 知畫咩組件，而係話俾佢知你想用戶「感受到咩」。AI 自己決定配色、字體、佈局。免費，每月 350 次生成額度。消息一出，Figma 股價即跌。
作者陸徐洲之前用 Claude Code 分別做過 Web 同移動端 UI 設計，並寫過兩篇文章。今次見到 Google 出新嘢，自然要拉出嚟試嚇。佢用同一個中文提示詞，測試四種方案，任務係為一款叫「墨流 InkFlow」嘅 AI 寫作助手做中文落地頁。
四種方案測試：Stitch 設計強但唔穩定，Claude Code 執行好但設計弱
先睇 Stitch 嘅表現。同一段提示詞連發三次，三次風格完全唔同：第一版綠色系白底，靈動大方；第二版預覽有問題，得文字排布冇 UI 效果；第三版直接變暗黑風。Stitch 嘅 設計審美確實在線，第一版配色、版面節奏、留白都好舒服，而且 兩分鐘出圖，速度碾壓。
不過 Stitch 有兩個明顯短板：同一個提示詞每次結果唔一樣，同埋導出只有 HTML/CSS，代碼結構比較粗糙，直接開發唔太現實。
再講 Claude Code。先唔裝任何插件直接跑，Claude 自己調咗 Pencil MCP，6 分 20 秒出結果，配色偏藍黑，對比度低，設計感唔強。裝上 12.4 萬安裝量嘅官方 frontend-design skill 再跑，4 分 37 秒，整體明亮啲但提升有限。結論：Claude Code 寫代碼靠譜，自己做設計決策就差啲。
關鍵發現：DESIGN.md 係設計同開發嘅橋樑
轉折點嚟喇。Stitch 導出嘅 ZIP 裏面，除咗 HTML 同截圖，仲有一個 DESIGN.md。作者打開一睇，唔係「主色綠色、圓角 8px」呢啲參數表，而係一整套 設計體系：起咗個名叫「The Modern Calligrapher」，定位中國水墨畫美學；禁用 1px 邊框，用背景色層級差做分隔；字體雙軌制：Noto Serif SC 管標題氣質，Manrope 管正文效率；按鈕漸變模擬「濕墨光澤」，動畫要似「墨喺水中暈開」。
呢次測試最大嘅感受係：Stitch 強喺設計直覺，畀一段描述就能快速揾到有品味嘅視覺方向，配色、字體、組件風格都想得好到位；Claude Code 強喺工程實現，畀一份清晰嘅設計規範，生成嘅代碼結構好、可讀性高、瀏覽器打開就跑到。而 DESIGN.md 就係連接兩者嘅橋。
推薦工作流：Stitch 做設計總監，Claude Code 做前端工程師
操作好簡單：打開 stitch.withgoogle.com，輸入頁面需求，揀一版滿意嘅導出 ZIP；將 ZIP 裏面嘅 DESIGN.md 丟畀 Claude Code，叫佢按規範生成頁面。Stitch 當設計總監，Claude Code 當前端工程師。
作者係陸徐洲，一家 LIMS 公司嘅 AI 算法負責人。佢希望同讀者一齊喺 AI 落地實踐路上走得更遠，並歡迎加微信交流。
3 月 18 號，Google 幫 Stitch 做咗一次大更新。
加咗個新概念叫 Vibe Design：唔係話畀 AI 畫啲乜嘢組件，而係話畀佢你想用戶「感受到啲乜」嘅。AI 自己揀配色、字體、佈局。
免費，每個月有 350 次生成額度。消息一出當日 Figma 股價就跌咗。
我之前用 Claude Code 分別做過 Web 同移動端嘅 UI 設計，寫咗兩篇文章。
Claude + Pencil，IDE 裏面最強嘅產設研工具
Claude + Pencil，必備嘅移動端 UI 設計工具
而家 Google 呢邊出咗新嘢，自然要拎出嚟試嚇。
大家好，我係陸徐洲。
今次我用同一個中文提示詞，試咗四種方案。任務係幫一款叫「墨流 InkFlow」嘅 AI 寫作助手做中文落地頁，內容包括導航欄、首屏、功能卡片、用戶評價、數據展示、定價區、FAQ、底部導航。
先睇嚇 Stitch 嘅表現。
同一段提示詞我連續發咗三次，三次風格完全唔同。第一版綠色系白底，靈動大方。第二版預覽有問題，得文字排列冇 UI 效果，要手動㩒入編輯狀態先正常。做過 Pencil 嘅朋友應該熟呢種情況。第三版直接變暗黑風。
Stitch 嘅設計審美確實在線。 第一版嘅配色體系、版面節奏、留白處理都好舒服，唔係嗰種「安全但無聊」嘅套路。兩分鐘出圖，速度都碾壓。
迭代測試我叫佢改三處佈局。畫布上睇落好似重新生成咗一版，我一度以為內容冇咗。導出 ZIP 打開 HTML 睇，三處修改全部到位。
問題在於畫布預覽體驗，設計同生成能力本身冇問題。
不過 Stitch 有兩個明顯短板：同一個提示詞每次結果都唔同，同埋導出得 HTML/CSS，代碼結構比較粗糙，拎去直接開發唔太現實。
講返 Claude Code。
我先唔裝任何設計插件直接跑，Claude 自己調用咗 Pencil MCP，6 分 20 秒出結果。配色偏藍黑，被「墨流」兩個字帶咗去，對比度低，設計感唔強。
再裝上 12.4 萬安裝量嘅官方 frontend-design skill 跑咗一次，4 分 37 秒。比裸跑好啲，整體更明亮，但提升有限。
Claude Code 寫代碼可靠，自己做設計決策就差啲意思。
轉折嚟喇。
Stitch 導出嘅 ZIP 裏面除咗 HTML 同截圖，仲有一個 DESIGN.md。
我㩒開嚟睇，唔係啲乜嘢「主色綠色、圓角 8px」嘅參數表。佢係一整套設計體系。
起咗個名叫 "The Modern Calligrapher"，定位中國水墨畫美學。禁用 1px 邊框，用背景色層級差做分隔。字體雙軌制：Noto Serif SC 管標題氣質，Manrope 管正文效率。按鈕漸變模擬「濕墨光澤」，動畫要似「墨喺水中暈開」。
Stitch 用兩分鐘諗出嚟嘅呢套嘢，比 frontend-design skill 嘅設計指導具體十倍。
我直接將 DESIGN.md 掉畀 Claude Code，叫佢嚴格跟規範生成落地頁。
4 分 38 秒。字體、排版、色彩層次明顯提升，四組裏面視覺效果最好。
簡單睇嚇效果對比。
今次測試落嚟我最大嘅感受係，Stitch 同 Claude Code 各有好強嘅長板。
Stitch 強在設計直覺。畀佢一段描述，佢可以好快揾到一個有品味嘅視覺方向，配色、字體、組件風格都想得好到位。呢個係目前 Claude Code 無論裝咩 skill 都做唔到嘅。
Claude Code 強在工程實現。畀佢一份清晰嘅設計規範，生成嘅代碼結構好、可讀性高、瀏覽器打開就識行。呢個係 Stitch 導出嘅 HTML 做唔到嘅。
DESIGN.md 係連接兩者嘅橋樑。 Stitch 將設計決策寫成結構化嘅規範文件，Claude Code 拎住呢份規範去寫代碼。設計還設計，代碼還代碼，各自做自己嘅強項。
操作好簡單。打開 stitch.withgoogle.com，輸入你嘅頁面需求，揀一版滿意嘅導出 ZIP。將 ZIP 裏面嘅 DESIGN.md 掉畀 Claude Code，叫佢跟規範生成頁面。
Stitch 做設計總監，Claude Code 做前端工程師。呢套組合目前係我試過嘅、出嘢質量最高嘅工作流程。
我係陸徐洲，一間 LIMS 公司嘅 AI 算法負責人。關注我，等我哋一齊喺 AI 落地實踐嘅路上，行得更遠。
多謝你睇我嘅文章。有任何關於 AI 提效或者工程落地實踐方面嘅問題都可以加我微信，交個朋友，一齊探討，共同進步。
3 月 18 號，Google 給 Stitch 來了一次大更新。
加了個新概念叫 Vibe Design：不告訴 AI 畫什麼組件，告訴它你想讓用戶"感受到什麼"。AI 自己決定配色、字體、佈局。
免費，每月 350 次生成額度。消息出來當天 Figma 股價就跌了。
我之前用 Claude Code 分別做過 Web 端和移動端的 UI 設計，寫了兩篇文章。
現在 Google 這邊出了新東西，自然要拉出來試試。
大家好，我是陸徐洲。
這次我用同一個中文提示詞，測了四種方案。任務是給一款叫"墨流 InkFlow"的 AI 寫作助手做中文落地頁，內容包括導航欄、首屏、功能卡片、用戶評價、數據展示、定價區、FAQ、底部導航。
先看看Stitch 的表現。
同一段提示詞我連發了三次，三次風格完全不同。第一版綠色系白底，靈動大方。第二版預覽有問題，只有文字排布沒有 UI 效果，得手動點進編輯狀態才正常。做過 Pencil 的朋友應該熟悉這種情況。第三版直接變暗黑風。
Stitch 的設計審美確實在線。 第一版的配色體系、版面節奏、留白處理都很舒服，不是那種"安全但無聊"的套路。兩分鐘出圖，速度也碾壓。
迭代測試我讓它改三處佈局。畫布上看着像重新生成了一版，我一度以為內容丟了。導出 ZIP 打開 HTML 一看，三處修改全部到位。
問題出在畫布預覽體驗，設計和生成能力本身沒毛病。
不過 Stitch 有兩個明顯短板：同一個提示詞每次結果不一樣，以及導出只有 HTML/CSS，代碼結構比較粗糙，拿去直接開發不太現實。
說回 Claude Code。
我先不裝任何設計插件直接跑，Claude 自己調了 Pencil MCP，6 分 20 秒出結果。配色偏藍黑，被"墨流"兩個字帶跑了，對比度低，設計感不強。
又裝上 12.4 萬安裝量的官方 frontend-design skill 跑了一遍，4 分 37 秒。比裸跑好一些，整體更明亮，但提升有限。
Claude Code 寫代碼靠譜，自己做設計決策就差點意思。
轉折來了。
Stitch 導出的 ZIP 裏除了 HTML 和截圖，還有一個 DESIGN.md。
我點開一看，不是什麼"主色綠色、圓角 8px"的參數表。它是一整套設計體系。
起了個名字叫 "The Modern Calligrapher"，定位中國水墨畫美學。禁用 1px 邊框，用背景色層級差做分隔。字體雙軌制：Noto Serif SC 管標題氣質，Manrope 管正文效率。按鈕漸變模擬"濕墨光澤"，動畫要像"墨在水中暈開"。
Stitch 花兩分鐘想出來的這套東西，比 frontend-design skill 的設計指導具體十倍。
我直接把 DESIGN.md 丟給 Claude Code，讓它嚴格按規範生成落地頁。
4 分 38 秒。字體、排版、色彩層次明顯提升，四組裏視覺效果最好。
簡單看下效果對比。
這次測試下來我最大的感受是，Stitch 和 Claude Code 各有一塊很強的長板。
Stitch 強在設計直覺。給它一段描述，它能快速找到一個有品位的視覺方向，配色、字體、組件風格都想得很到位。這是目前 Claude Code 不管裝什麼 skill 都做不到的。
Claude Code 強在工程實現。給它一份清晰的設計規範，生成的代碼結構好、可讀性高、瀏覽器打開就能跑。這是 Stitch 導出的 HTML 做不到的。
DESIGN.md 是連接兩者的橋。 Stitch 把設計決策寫成結構化的規範文件，Claude Code 拿着這份規範去寫代碼。設計歸設計，代碼歸代碼，各幹各的強項。
操作很簡單。打開 stitch.withgoogle.com，輸入你的頁面需求，選一版滿意的導出 ZIP。把 ZIP 裏的 DESIGN.md 丟給 Claude Code，讓它按規範生成頁面。
Stitch 當設計總監，Claude Code 當前端工程師。這套組合目前是我試過的、出活質量最高的工作流。
我是陸徐洲，一家 LIMS 公司的 AI 算法負責人。關注我，讓我們一起在 AI 落地實踐的路上，走得更遠。
感謝您閲讀我的文章。有任何關於AI提效或者工程落地實踐方面的問題都可以加我微信，交個朋友，一起探討，共同進步。