看到 X 上有人寫出如何用 AI Vibe 出優秀的 UI 設計，覺得寫得不錯，這邊就翻譯一下給大家參考。
1\ 先畫草圖，再寫提示詞（prompt）
不要一開始就用文字描述。
先用 Excalidraw 畫一個快速的線框圖，例如方框、按鈕、圖片的位置配置。
把它匯出後，告訴 AI：「請完全依照這個結構製作」。
AI 在「模仿」上遠比「憑空想像」更準確。
2\ 截圖你喜歡的設計
到 Dribbble、Mobbin，或任何你覺得設計乾淨好看的網站。
截圖你想要的特定區塊，例如導覽列（nav bar）、價格卡片（pricing card）、首屏區塊（hero section）。
貼給 AI 並說：「請複製這種風格」。
光是這一步就會帶來巨大差異。
3\ 用情緒板（mood board）提供配色參考
你有沒有試過跟 AI 說「做出現代又溫暖的感覺」？結果它幾乎每次都給一樣的藍色。
改用像 Nano Banner 這類情緒板產生工具，生成一張色彩風格圖，再把圖片丟給 AI，並說：「配色請參考這張圖」。
這樣得到的結果會比單靠文字描述更有特色，也更穩定。
4\ 在開發前先建立設計系統（Design System）
在寫任何程式碼之前，先定義品牌色、字體（Typography）與間距規則（Spacing）。
把這些規範提供給你的 AI 工具，讓所有元件保持一致。
多數「AI 生成感很重」的應用，看起來不協調，往往就是因為各頁面之間完全沒有一致的設計規則。
5\ 搭配設計技能與反模式（Anti-pattern）規則
GitHub 上有一個開源工具叫做「ui/ux pro max skill」，是為 Claude 設計的，會在生成 UI 程式碼前強制進行推理。
它會依據你的產業自動生成設計系統，並內建規則避免使用過於通用的 AI 漸層風格。
等於是在告訴 AI：「不要再做出看起來像所有 AI App 一樣的設計」。
6\ 以截圖作為主要溝通方式
AI 很擅長「複製」，但不擅長「憑空想像」。
你提供的視覺資訊越多，它猜測的成分就越少。
不要再只打「做得簡潔一點」，而是直接展示「你認為的簡潔設計」長什麼樣子。
7\ 字體與圖示比你想像中更重要
AI 通常會預設使用同一套組合：Inter 字體 + Lucide 圖示，這幾乎是 AI 生成介面的明顯特徵。
可以從 Google Fonts 選擇更有特色的字體，並把 Lucide 換成像 Phosphor 這類較有風格的圖示庫。
這只是小改動，但能立刻讓你的應用看起來不再像制式模板。
真正的問題其實不在 AI，
而是大多數人只輸入「幫我做一個 landing page」，然後就期待最佳結果。
