風格要配得上用途
問題
AI 寫 UI 有一套慣性審美，不管做什麼都往上套：
- 毛玻璃卡片（
backdrop-filter: blur()+ 半透明白） - 新擬態（neumorphism）的凸起凹陷陰影
- 紫色到藍色的漸變，漸變按鈕、漸變文字、漸變邊框
- 深色背景上飄著幾團模糊的彩色光斑
- 霓虹發光的
box-shadow，懸停時放大、浮起、旋轉 - 每個區塊都是一張 24px 圓角的卡片，標題前面放一個 emoji
- "✨ AI 驅動"、"🚀 立即開始" 式的文案
結果：一個給財務用的報銷審批工具、一個運維用的日誌檢視器，看起來像遊戲啟動器或者加密貨幣落地頁。使用者每天要用八小時，看著花，找東西慢，也顯得不專業、不可信。
反過來也有：一個給朋友玩的小遊戲、一個抽籤轉盤、一個寵物日記，被做成了灰白表格加預設藍按鈕，一點意思都沒有。
風格不是「好不好看」的問題，是「合不合適」的問題。
第一步：看項目裡已經有什麼
優先級從高到低：
- 項目已有的設計系統 / 元件庫 / 主題檔案（
tailwind.config、theme.ts、CSS 變數、Figma 連結、品牌規範）：照著用，不要另起爐灶。 - 項目裡已有的頁面：新頁面要和它們是一家人。
- 平台規範：Windows 原生程式遵循 Fluent / WinUI，macOS 遵循 HIG，Android 遵循 Material。平台規範裡的材質（比如 Windows 11 的 Mica / Acrylic）是正當的，用在平台規定的位置（視窗背景、浮出選單），而不是給每張卡片都加一層模糊。
- 以上都沒有，才輪到你根據場景判斷。
第二步：判斷場景
看這幾個訊號：
| 訊號 | 偏向克制 | 偏向活潑 |
|---|---|---|
| 誰在用 | 員工、專業人士、客戶的客戶 | 普通玩家、朋友、孩子、粉絲 |
| 怎麼用 | 每天長時間用，反覆做同一件事 | 偶爾打開，玩一會兒 |
| 內容 | 表格、數字、表單、日誌、程式碼 | 圖片、角色、故事、成就、互動 |
| 出錯的代價 | 高：錢、資料、合約、生產環境 | 低：重來一次就好 |
| 使用者想要的感受 | 可靠、高效、專業、不打擾 | 有趣、驚喜、有個性、想分享 |
第三步：按場景選方向
商務 / 生產力 / 內部工具 / 資料後台 / 開發者工具
- 配色：中性色為主（白、淺灰、深灰），一個強調色用在主操作和關鍵狀態上；狀態色（成功/警告/錯誤）有固定含義，不拿來裝飾。
- 字型：系統字型或一款成熟的無襯線字型；數字用等寬或
font-variant-numeric: tabular-nums，列能對齊。 - 密度：資訊密度中到高，表格行高緊湊，留白服務於分組，不是為了顯得「高級」。
- 裝飾：幾乎沒有。小圓角（4~8px），細邊框或很淺的陰影，不用漸變、發光、毛玻璃、背景光斑。
- 動效：只用於回饋（載入、展開、狀態變化），150~200ms，不做入場動畫、懸停放大、視差。
- 圖標：一套風格統一的線性圖標（Lucide、Fluent Icons、Material Symbols），不用 emoji。
- 文案：直接、具體：「儲存」、「匯出 CSV」、「3 條記錄待審批」。
娛樂 / 遊戲 / 創意 / 社交 / 兒童 / 個人興趣
- 配色：可以鮮豔、大膽、多彩，有記憶點；可以有主題色系、漸變、插畫背景。
- 字型：標題可以用有個性的展示字型，正文依然要好讀。
- 裝飾：插畫、貼紙、紋理、角色、手繪元素都可以用，但要貼合主題，而不是隨手套一套通用「炫酷」效果。像素風遊戲就做像素風，童話主題就做童話感，而不是統一的紫色霓虹。
- 動效：可以更豐富：彈性、粒子、慶祝動畫、音效，給操作以獎勵感。
- 文案：可以有語氣、有個性、有梗。
中間地帶
面向普通消費者的工具類產品（記帳、待辦、日曆、健身記錄）、作品集、產品落地頁：基調克制、可用性優先，在少數地方（空狀態、完成時刻、品牌色、插圖）加入個性。
活潑不等於 AI 慣性風格。毛玻璃、紫藍漸變、霓虹光斑放到娛樂場景裡，也只是「通用 AI 風」，不是這個產品的風格。好的活潑是有主題的。
不確定時：問使用者
場景不明顯、或者使用者的需求本身就可以有多種做法時，先問，再寫。問法要具體，給出可以直接選的方向，而不是「你喜歡什麼風格？」：
✓ 「這個工具風格上你傾向哪種？
A. 簡潔專業：淺色背景、中性色、緊湊表格，像 Linear / Notion
B. 友好輕鬆：圓潤一些、柔和配色、有少量插圖，像 Duolingo 的設定頁
C. 有個性：大膽配色和動效，適合展示或娛樂
不確定的話我先按 A 做一版。」
如果你所在的環境能直接渲染，也可以做兩三個小樣（只是同一個界面的不同配色和字型）讓使用者選。
不需要問的時候別問：使用者已經說了用途（「給公司財務用的」）、專案裡已有風格、或者需求明顯（「做個俄羅斯方塊小遊戲」）時，直接按判斷做，在結尾說一句你選的方向，方便使用者糾正。
第四步：做完自查
把介面上的每一處裝飾拿出來問：去掉它，使用者會失去什麼？ 如果答案是「什麼都不會失去」，而這是一個工具類介面，就去掉。
逐條對照：
- 搜一下程式碼裡的
backdrop-filter、linear-gradient、box-shadow裡的彩色發光、animation、emoji：每一處都是有意為之嗎？ - 強調色是不是只出現在主操作和關鍵狀態上？還是到處都是？
- 截圖看一眼：第一眼看到的是內容和主操作，還是裝飾？
- 換成使用者的身分想：每天打開它八小時 / 玩它十分鐘，這個風格合適嗎？
邊界
- 使用者明確要求某種風格（「就要賽博龐克風」、「做得炫一點」），按使用者的來，哪怕是工具類。
- 使用者給了參考圖、參考網站、品牌規範，以參考為準。
- 演示、行銷、展示類頁面可以比日常工具更有表現力，但依然要貼合品牌和受眾。
檢查清單
- 專案裡有沒有現成的設計系統、主題、已有頁面？我照著用了嗎？
- 這是什麼場景？誰在用、用多久、出錯代價多大？
- 場景不明確時，我給出具體方向問過使用者了嗎？
- 工具類介面：沒有毛玻璃、紫藍漸變、霓虹發光、光斑背景、emoji 圖標、無意義動效？
- 娛樂類介面：有貼合主題的個性，而不是灰白表格，也不是通用 AI 炫酷風？
- 強調色只用在该用的地方？
- 每一處裝飾都說得出它的用處？