UI 設計去 AI 味（De-AI UI）
vibe 出來的界面一眼廉價，往往輸在細節上。—— @bruc3van
本 Skill 把 8 位中文設計師在 X 上公開分享的「AI 界面哪裡露餡、該怎麼跟 AI 說」整理成可執行、可檢查的規則。每條規則後面的 [作者] 標註出處，詳細原文摘要與鏈接見 references/sources.md。標註 [通用實踐] 的是為了把規則串起來而補充的常識，不代表任何來源作者的觀點。
何時使用 / When to use
- 用 AI 新建或修改任何界面：登陸頁、後台、儀表盤、設定頁、組件庫、設計 token。
- 用戶說「看起來像 AI 做的 / 廉價 / 沒質感 / 有 AI 味 / slop」，或要求「精緻一點、高級一點」。
- 交付 UI 前的自查（review pass）。
核心原則 / Core principles
- 做減法優先於做加法。 AI 最常見的失敗不是「少了什麼」，而是「多了什麼」：多餘的說明文字、分割線、圖標、標籤、陰影、顏色、動效。對每個元素問一句「它真的有存在的必要嗎？」 [ZaynHao] [dingyi] [yanliudreamer]
- 界面退後，內容出彩。 界面本身只用黑白灰，把顏色留給照片和內容。[ianneo_ai]
- 一致性靠系統，不靠手感。 顏色用成套 token（Radix Colors），間距/圓角走 4px 網格，字號控制在少數幾檔，組件復用現有庫和設計系統。[ZaynHao] [Kubai087] [yanliudreamer]
- 細節要「幾何正確」。 嵌套圓角同心、光學對齊、邊框粗細統一。[Kubai087] [ZaynHao] [dingyi]
- 先定義，再動手；先全貌，再逐塊改。 先寫清給誰用、解決什麼問題、要什麼感覺；出完整一版後列問題、排優先級、每輪只改一處。[Xian0063]
- 不同模式要單獨設計，而不是自動轉換。 蘋果給 Preview 圖標的 Clear 模式單獨加了圖層，因為直接把默認模式圖片轉換過去「會顯得很髒」。深色/夜間/透明模式同理。[remixdesigner] [ianneo_ai]
可檢查的硬規則 / Checkable rules
圓角與邊框（詳見 references/radius-and-borders.md）
- 嵌套圓角：內圓角 = 外圓角 − 間距（r = R − p），內外共用一個圓心；從外往裡推：dialog/card → panel、input、button → chip、tag。例：dialog 32、padding 16 → 內部 16；16 的 panel 裡 padding 8 的 chip → 8。[Kubai087]
- 同一層級的盒子用同一個圓角；最低不低於 4px；pill 與圓形保持全圓。[Kubai087]
- padding、gap、radius 都落在 4px 網格上；有 radius token 就改 token，不要硬編碼。[Kubai087]
- 連續圓角（超橢圓） 作為漸進增強：保留
border-radius，再用@supports (corner-shape: superellipse(1.25))加corner-shape；pill/圓形設corner-shape: round。Chrome/Edge 139+ 生效，Safari/Firefox 自動回退普通圓角。[Kubai087] - 線條與邊框用 0.5px，並且全站粗細統一（「該用 0.5px 的地方用了 1px」是 slop 特徵）。[ZaynHao] [dingyi] —— 注意：ZaynHao 自己說明這是偏個人經驗的提示，沒有專門考慮低分屏/老設備，需要兼容時請做回退（見參考文件）。
- 不要隨意加圓角和陰影；禁止卡片左邊緣的彩色豎線。確需圓角/陰影時，數值要符合功能場景。[ZaynHao] [dingyi]
- 不要疊加過多細節：分割線、多層陰影、半透明疊色、帶邊框的容器、卡片套卡片。[dingyi] [Xian0063]
顏色（詳見 references/color.md）
- 界面 chrome（按鈕、卡片、輸入框）默認只用黑白灰，顏色留給照片、插畫、數據等內容。[ianneo_ai]
- 所有顏色換成 Radix UI Colors，並按其 12 級色階的用途定義來使用。[ZaynHao]（各級對應背景 / 組件 / 邊框 / 實色 / 文字，見 Radix 官方文檔
[通用實踐]） - 為產品挑 3–5 個有辨識度的顏色定基調（可從喜歡的網站/應用裡取色，例如他的應用背景
#f6f4f0）。[ZaynHao] - 不要：紫色/紫藍漸變、漸變按鈕、彩色圖標、一張卡片一個顏色、單獨染色的某一個字。[dingyi] [Xian0063] [ianneo_ai]
字體與排版（詳見 references/typography-cjk.md）
- 字號不超過 4 種，最好 3 種；最小 12px。 層級不夠時用字重、顏色、間距來區分，而不是加字號。[ZaynHao] [dingyi]
- hero 區標題不要大得離譜；不要全大寫小標題、標題上方的小眉標（eyebrow）、章節編號、代碼式麵包屑。[dingyi] [Xian0063]
- 避開被用爛的三款字體：Instrument Serif、Space Grotesk、Bricolage Grotesque；不要濫用等寬字體和斜體。[dingyi]
- 中文 font-family：先西後中，兼顧主流系統，最後
sans-serif兜底；中文字體寫英文名；帶空格的名字加雙引號。現成寫法見參考文件。[ricouii] - 不要默認全部居中排版。[Xian0063]
文案與內容（詳見 references/copy-and-content.md）
- 不要用中點 「·」 當分隔符，有就移除。[ZaynHao] [dingyi]
- 不要加冗餘的解釋性描述文字；正文不塞 Emoji，標題上不頂 emoji 圖標。[ZaynHao] [dingyi] [Xian0063]
- 文案貼合目標人群：易懂但不過度口語化，長短匹配功能場景，不隨意造詞。[ZaynHao] [dingyi]
- 不編造數據與社會證明（如「10,000+ 滿意客戶」），不在結尾硬塞訂閱框。[Xian0063 轉述 Hallmark 的檢查項]
- 圖表別做得「超詳細」；到處都是標籤（tag/badge）也是 slop 特徵。[dingyi]
動效與交互（詳見 references/motion-and-interaction.md）
- 盡量減少過渡動畫；必須加時，基礎設定 ease-out、約 250ms。滾動動效不要多，過渡要收斂。[ZaynHao] [dingyi]
- 進場用 ease-out 而不是 ease-in；下拉菜單從觸發按鈕的位置長出、從 0.96 縮放開始而不是 0；按鈕按下縮到 0.97；toast 疊成一摞不擠內容；長名字截斷、大數字縮寫。[Xian0063 轉述 Emil Kowalski Skills]
- 減少需要用戶停下來判斷的交互；必須有時，放在用戶本來就打算做選擇的地方，並重新排信息優先級。[ZaynHao]
- 下拉菜單按鈕的下拉小圖標要專門修——dingyi 認為這是清單裡「最嚴重」、幾乎沒人修的細節。[dingyi]
組件、資源與圖標（詳見 references/libraries-and-skills.md、references/icons-and-detail.md）
- 優先復用項目已有組件庫 / 設計系統和 token，不重複造輪子；參考成熟產品已驗證的 UX 模式。[yanliudreamer] [Kubai087]
- 一整套界面裡的圖標來自同一個風格體系，線條粗細、圓角、比例、視覺重量一致（例如 Remix Icon）。[yanliudreamer] [Kubai087]
- 深色 / 夜間 / Clear 等模式的素材單獨處理，不要直接濾鏡轉換。[remixdesigner] [ianneo_ai]
工作流 / Workflow
1. 動手前（Before coding）
- 寫清楚：給誰用、解決什麼問題、要給人什麼感覺。說不清就先向用戶提問，這一步不出設計。[Xian0063]
- 讀項目現有的組件庫、design tokens（顏色 / 圓角 / 間距 / 字號）；有就基於它改，沒有就先建一套最小 token（見
examples/tokens.css）。 - 定視覺規則：3–5 個品牌色 + Radix 灰階、≤4 檔字號、4px 網格、圓角層級、0.5px 邊框、中文字體棧。[ZaynHao] [Kubai087] [ricouii]
2. 編碼中（While coding）
- 每加一個元素先問「能不能不要」：說明文字、分割線、圖標、badge、陰影、顏色。[yanliudreamer] [ZaynHao]
- 先出完整頁面全貌，而不是局部修補。[Xian0063] [yanliudreamer]
- 複雜視覺方向可一次出 3–4 個方案對比，避免「原型引力」（已經在代碼裡投入太多就只沿著現方案優化）。[yanliudreamer]
3. 自查（Review pass）
- 逐條過
references/slop-checklist.md，記錄命中項。 - 按重要程度排序，每輪只改一處，確認後再改下一處。[Xian0063]
- 改圓角時按 Kubai087 的要求輸出
element: old -> new變更清單。 - 在至少 3 種寬度下截圖檢查（Taste Skill 的自查方式，[Xian0063] 轉述），並檢查深色模式。
- 給回饋時用「目標」而不是「像素」：在截圖上標問題、說想要的效果，具體數值讓 AI 算。[Xian0063]
可直接複製給 AI 的提示詞 / Copy-paste prompts
完整版（含 Kubai087 的英文原版 prompt、ZaynHao 的 10 條提示詞）見 references/prompts.md。最常用的一段合併版：
請按「去 AI 味」規則重做這個界面，只改我指定的頁面/組件；項目已有 token 或組件庫時改 token、復用組件，不要硬編碼：
1. 界面 chrome 只用黑白灰，顏色留給照片和內容；所有顏色換成 Radix UI Colors 並按其 12 級用途使用。不要紫色漸變、漸變按鈕、彩色圖標、卡片左側彩色豎線。
2. 字號最多 4 種（最好 3 種），最小 12px；層級不夠用字重、顏色、間距解決。不要全大寫小標題、標題上方小眉標、超大 hero 字。
3. 嵌套圓角滿足 內圓角 = 外圓角 − 間距，同層同圓角，最小 4px，pill/圓形保持全圓；padding/gap/radius 都在 4px 網格上。用 @supports 給 corner-shape: superellipse(1.25) 做漸進增強。
4. 線條和邊框統一 0.5px；去掉多餘的分割線、多層陰影、半透明疊色、帶邊框的容器和卡片套卡片。
5. 去掉中點 「·」 分隔符、冗餘解釋文字、正文 Emoji；文案貼合目標用戶，不口語化、不造詞。
6. 動效盡量少，必須時用 ease-out 約 250ms。
7. 中文字體棧先西後中、最後 sans-serif 兜底。
完成後列出你改了些什麼（element: old -> new），以及哪些 slop 特徵已消除。
單句版（來自 [ianneo_ai]）：界面只用黑白灰，顏色留給照片和內容。
參考文件 / References
| 文件 | 內容 |
|---|---|
references/sources.md | 8 位設計師 + @bruc3van 原帖鏈接與要點摘要 |
references/slop-checklist.md | AI slop 自查清單（可逐項打勾） |
references/radius-and-borders.md | 圓角公式、超橢圓、0.5px 邊框與回退 |
references/color.md | 黑白灰 + Radix Colors 用法 |
references/typography-cjk.md | 字號層級、slop 字體、中文 font-family |
references/copy-and-content.md | 文案與內容規則 |
references/motion-and-interaction.md | 動效參數與交互細節（含級聯菜單、拖拽排序、擬物按鈕） |
references/icons-and-detail.md | 圖標一致性、多模式素材 |
references/libraries-and-skills.md | 推薦資源庫與 5 個 AI 設計 Skill |
references/prompts.md | 全部可複製 Prompt |
examples/ | before/after CSS 與最小 token |