Google Stitch 2.0 太牛了！UI 醜的問題有救了

之前寫過 Google 的一個頁面設計工具 Stitch 的介紹，當時就覺得這工具太牛了。我現在做的網站基本上設計這塊都靠它，AI 直出的還是不得行。

前不久 Google 發佈了一個大更新，必須要體驗一下，寫下來給大家參考。

網址是這個：https://stitch.withgoogle.com/

它網站的背景改了，現在看上去就更加高級，有科技感。使用方式沒什麼變化，還是在對話框裡面描述你想要的設計，或者給出你的參考圖，可以選擇生成 App 還是Web 端的設計圖。

我注意到還有一個選項可以選擇主題，有十來種色彩搭配吧，選擇你中意的，也可以讓stitch決定。

什麼是 Vibe Design

Google 這次發佈的核心概念叫 “vibe design”，類比“vibe coding”來的。

Vibe coding 的意思是你不用一行一行寫代碼，描述清楚你要什麼，AI 幫你寫。

Vibe design 同理，你不用在設計軟件裡拖拖點點，描述你想要的風格、想給用戶的感受、想解決的業務問題，AI 直接生成高保真的 UI 設計稿。

其實它之前的版本就已經可以做到了。

體驗一下

有主題色卡了，看著非常專業。

右鍵編輯就可以自己調整相應的配色，這對於審美比較好的人，或者有些美術功底的人，就是神助。

而且你改完主題色，它是會自動給你更新已經設計好的頁面的，相當於你的顏色調整可以應用到全局，輕鬆達到統一的效果。

還有一種更改主題色的方式，對話框裡面選擇其它主題，選擇保存並應用。解決了配色不好看的問題。

另外還有一些細節，比如可以編輯設計圖上的文本內容。自己改或者AI生成。不過我感覺這個問題不大，後期網站開發的時候都可以調整。

**無限畫布。**界面整個重新設計了，現在是一個可以無限延展的畫布，有點像 Figma 的感覺，交互效果更好了。

拿到設計圖之後，我的習慣是全選下載，得到的是一個壓縮包，裡面有每個頁面的html代碼以及設計圖。

文件夾給到你的編程工具，讓它根據設計圖重構頁面。

這裡有一個技巧，有時候AI復刻頁面會跑偏，用下面的指令親測效果比較好，因為加上了subagent驗證的邏輯。一個改一個校驗，直到全部做完沒問題了才會結束，一步到位，比較節省時間。

指令是這個：

**DESIGN.md。**這個功能我覺得挺好用的。它新增了一種叫 DESIGN.md 的文件格式，是個 AI 友好的 Markdown 文件，裡面存的是你的設計規範，字體、顏色、組件風格這些。你可以從一個已有的網站 URL 直接提取出設計系統，也可以在不同項目之間導入導出這個文件。這樣每次開新項目不用重頭來過，風格一致性也好控制。

**即時可交互原型。**設計稿生成之後，可以把多個頁面“Stitch”在一起，就點擊畫布右上角的一個播放按鈕就能預覽完整的跳轉流程。而且它能自動推斷你點了某個按鈕應該跳到哪個頁面，不用手動連線。快速驗證交互邏輯挺方便的。

**MCP Server。**Stitch 現在有了 MCP 服務器，可以在 Claude Code 或 Cursor 裡直接調用 Stitch 的能力。也就是說你可以邊寫代碼邊生成對應的 UI，兩邊同步。

這個我還沒試過 ，感興趣可以試一下。

它能解決什麼問題

總結一下，我自己的用法是這樣的：做產品的時候，我先用 Stitch 生成整套 UI 設計稿，然後把下載的代碼和設計圖丟給編程工具（比如 Claude code 或者 codex）繼續開發。

Stitch 幫我解決了UI圖醜的問題，一句話出個原型，不滿意繼續改，改到差不多了再交給開發工具。

當然，Stitch 生成的 UI 有時候也需要調整。如果你對設計有很高要求，還是要花時間校對一下。但對於獨立開發者或者小團隊來說，它的門檻和效率已經很不錯了。

⬇️ 新封面圖（AI 生成）

⬇️ 舊封面圖（保留對比）