生成美麗的使用者介面
Cerebras部落格文章探討了AI生成UI的現狀、常見問題與最新進展，並提供了8種實用方法來改善AI輔助設計，強調意圖設定和快速迭代的重要性。
2026年5月8日，Cerebras釋出了一篇由Sarah Chieng撰寫、Sherif Cherfa和Halley Chang貢獻的文章《生成美麗的使用者介面》（Generating Beautiful UIs），深入剖析了AI在UI設計領域的現狀、痛點與突破。
文章指出，人們對AI生成的作品普遍存在直覺性的懷疑，這種模式在寫作中已經顯而易見——比如破折號的濫用——而設計領域也正步其後塵。儘管最新模型能產出更優的介面，但仍需大量人工干預和“提示補丁”。總體而言，AI生成的設計往往缺乏人類設計師帶來的深度滿足感、愉悅或奇思妙想。
作者列舉了AI生成的典型問題：基礎提示詞導致枯燥輸出，例如一個用於電腦配件推薦網站的暗色模式提示，得到的卻是經典暗色背景、大量卡片、圖示、漸變文字等可預測的乏味結果。常見“AI設計痕跡”包括：一切看起來像SaaS儀表板（訓練資料中SaaS產品佔比過高）、卡片巢狀（卡片裡套卡片）、過度編碼和不必要的重構（要求改一個按鈕卻重寫了整個元件樹）、指令洩漏（實現指令變成可見文字）、構建成功但視覺異常（間距錯誤、移動端失常、元件不符）、缺乏構圖感（元素間沒有關聯邏輯）。
然而，近期進展使得AI生成UI不再是噱頭。Cerebras的Codex-Spark模型能達到約1200 tokens/秒，將一次提示到結果的往返時間從3分鐘縮短到30秒，讓使用者可以快速嘗試、丟棄和改進。視覺模型讓AI能“看到”自己生成的內容，並據此自我迭代。更好的工具如shadcn/ui、Figma MCP整合和標準化設計令牌，為AI提供了可操作的約束條件。
文章強調，意圖設定至關重要。最有效的AI輔助設計是將AI作為填補技能空白的中介工具，而非設計師的替代品。具體方法分為三大類、共8條實踐：
- 使用shadcn/ui並連線MCP：先執行shadcn預設，讓AI讀取實際原始碼而不是憑空猜測。MCP整合使模型能查詢即時元件登錄檔，避免過時的屬性推斷。
- 編碼前決定設計：提前確定精確的十六進位制顏色、字型系列、間距比例和佈局邏輯，編碼到Tailwind配置或設計令牌檔案中。Figma MCP可直接讀取Figma元件，減少猜測。
- 讓Tailwind說“不”：透過嚴格的Tailwind配置和lint規則禁止任意值，強制AI使用定義好的顏色、間距等，避免偏離體系。
- 小步迭代：每次只做一個具體調整，如“按鈕內邊距增加4px”，然後立即檢視效果。GPT-5.4的視覺能力進一步加速了“截圖-描述-修正”迴圈。
- 先採訪我：與其自己編寫完整的樣式指南，不如讓模型透過提問來引導使用者明確目標受眾、頁面目標等，從而生成更貼合需求的指南。
- 先生成選項，再深入：先要求模型給出多個粗略方向，選擇其中一個並深耕細作。這種方法比從極端細節開始更自由、更高效。
文章還提及了其他具體案例，如用FigmaMake自動實現鋁箔壓紋效果，或利用Flora.ai生成高度定製化的設計模型照片。作者總結道，設計歸根結底是另一種形式的視覺問題解決，AI的潛力在於豐富創意視角，而非替代人類。