AI 寫 UI 總是風格跑偏？Google 的 DESIGN.md 可能是關鍵補丁

哈嘍，大家好，我是 Max King。

最近我用 AI 做 UI，越來越明顯感受到一個問題：

AI 不是不會寫頁面。

它能畫圖，也能寫 React，也能生成一套看起來還不錯的後台頁面。

但真正做成一個項目時，問題很快就來了。

第一個頁面是深色金融風。
第二個頁面突然變成極簡白色風。
第三個頁面按鈕圓角變了。
第四個頁面卡片陰影又不一樣。
到了設置頁，表格密度、字體層級、按鈕樣式全都開始漂。

你讓它修一個按鈕，它可能順手改了整個佈局。你讓它調一個卡片間距，它可能把字體也換了。你讓它還原參考圖，它可能重新發明一套組件。

這時候你會發現：

所以我現在越來越確定一件事：AI 寫 UI 最缺的，不一定是更強的出圖工具，而是一份能讓 AI 長期遵守的設計規則文件。

而 Google Stitch 推出的 DESIGN.md，剛好補上了這個缺口。

很多人現在做 AI UI，第一步就是：

這一步看起來很快。

但後面很容易失控。

因為你沒有告訴 AI 一件最重要的事：

這個項目的設計規則是什麼？

沒有這層規則，AI 每次做頁面，都像重新開了一個新項目。

你讓它做首頁，它可能發揮一次。你讓它做設置頁，它又發揮一次。你讓它做數據表格頁，它再發揮一次。

每一次單獨看，好像都還不錯。

但放到同一個產品裏，就會發現：

這不是某一個模型的問題，而是 AI UI 工作流裏缺了一層東西。

缺的是：項目級設計規則。

很多人以為，只要給 AI 一張圖，它就能還原 UI。

但這其實不夠。

一張圖只能告訴 AI：

但它沒有明確告訴 AI：

主色是什麼；
輔助色是什麼；
危險色怎麼用；
背景色應該到什麼程度；
卡片圓角是多少；
表格密度應該多緊湊；
按鈕有幾種層級；
字體大小怎麼分層；
哪些效果可以用；
哪些效果不能出現。

比如一個後台頁面裏有一個藍色按鈕。

AI 看到截圖以後，能猜出來它是藍色的。

但它不知道這個藍色到底是主按鈕色、連結色、當前選中態、數據強調色，還是隻是這張圖裏偶然出現的裝飾色。

如果不寫清楚，AI 就只能猜。

這也是 image-to-code 最大的問題之一：它不是在讀取設計系統，而是在根據圖片猜設計結構。

這裏先說清楚：

DESIGN.md 不是我自己起的名字，也不是一個普通 Prompt 模板。

它來自 Google Stitch。

Google 對 DESIGN.md 的定位，是讓設計規則可以在不同項目之間導入和導出，讓 AI 理解設計系統背後的原因，從而生成符合品牌的 UI。

Google Labs 的開源倉庫裏，對 DESIGN.md 的定義也很直接：

這句話很重要。

過去我們做 UI，設計規則可能藏在 Figma 文件裏、品牌手冊裏、設計師腦子裏、項目截圖裏、前端組件庫裏，或者一堆歷史代碼裏。

但 AI coding agent 不一定真正理解這些東西。

它看到截圖，只知道“這個頁面看起來像這樣”。它看到代碼，只知道“這裏寫了這些樣式”。但它未必知道：

DESIGN.md 要解決的，就是這個問題。

我現在對 DESIGN.md 的理解是：

它不是某一張頁面的說明，而是一份寫給 AI 的項目級設計系統文件。

它要告訴 AI：

這個產品是什麼類型；
整體視覺氣質是什麼；
顏色怎麼用；
字號怎麼分層；
按鈕、卡片、表格應該長什麼樣；
頁面信息密度應該高還是低；
哪些組件要複用；
哪些風格不要出現。

比如你要做一個交易儀表盤。

如果只對 AI 說：

這句話其實很模糊。

AI 可能會給你一個很酷的金融大屏：大量霓虹漸變、發光線條、複雜背景、巨大的圖表裝飾、很多沒意義的動態感元素。

第一眼看起來很震撼。

但真的放到產品裏，就會很難用。

因為真實交易後台最重要的不是炫，而是數據清晰、風險突出、持倉信息容易掃描、盈虧狀態一眼可見、表格密度合理，不能為了視覺效果犧牲可讀性。

如果先寫 DESIGN.md，就可以把規則提前說清楚：

這時候 AI 再去出圖、寫代碼，就不是自由創作。

它是在一套明確的設計系統裏完成任務。

這裏也要說清楚：

DESIGN.md 不是萬能的。

它不負責把某個頁面的所有模塊都拆出來。它也不負責告訴 Codex / Cursor 這次具體要寫哪個組件。它更不負責最後的截圖對比和頁面修正。

在我的 AI UI 工作流裏，它只解決第一層問題：

後面還需要繼續往下拆。

這幾層不能混在一起。

如果一上來就跳到 image-to-code，AI 很容易猜錯結構。

如果一上來就讓 Codex 寫頁面，AI 很容易自由發揮。

如果沒有 DESIGN.md，後面 UI Spec 寫得再細，也可能缺少一個統一的風格底座。

所以我現在不太建議一上來就讓 AI 自由出圖。

也不建議直接把一張圖丟給 image-to-code，然後期待它變成可交付頁面。

不是這些工具沒用。

而是如果前面沒有設計規則，後面的圖、代碼、修正都會變成一次次隨機發揮。

這也是為什麼我覺得 Google 的 DESIGN.md 值得關注。

它真正重要的地方，不是多了一個 Markdown 文件。

它背後的變化是：

過去，設計規則藏在 Figma、品牌手冊、截圖和人的經驗裏。

現在，我們開始需要把這些規則整理成 AI agent 能長期讀取的設計上下文。

這就是為什麼 AI 寫 UI 總是風格跑偏時，DESIGN.md 可能會成為一個關鍵補丁。

但它還不是完整答案。

它只是 AI UI 交付鏈路裏的第一層。