# 去 AI 設計味規則書（雷蒙三十版）

> 改編自 [yetone/kill-ai-slop](https://github.com/yetone/kill-ai-slop)（33 條 AI slop 目錄，[killaislop.com](https://killaislop.com) 有互動示範，Apache 2.0）。
> 雷蒙 2026-07-18 逐條審定分級。**本檔與 `DESIGN.md` 是團隊與 AI agent 做視覺產出的共同守則**；跟原版判斷不同時，以本檔為準。
> 核心原則（原作者說得對）：slop 是「沒有做決定」。同一個元素，有意識地選、講得出理由，就不是 slop。

## 🔴 一律禁止

| # | 症狀 | 說明 |
| :-- | :-- | :-- |
| 17 | **圓角＋彩色左邊框 callout** | 淡底圓角卡配 4px 彩色左邊條（含 Tip/Note 樣式、清單每列包 callout、彩色粗 ring 圈卡片）。雷蒙講過好幾次，零容忍。替代：清單就讓它是清單；真正的引用用素面淡底卡（`DESIGN.md` §4 Quote 新規範：背景 `--brand-softer`、border 與圓角同層、一頁最多 1-2 個） |

> **例外（2026-07-20 雷蒙裁決）**：WordPress 自有外掛 `raymond/callout` 的左側色條**要保留**，它是刻意模仿 GitHub Alert（`> [!NOTE]` / `> [!WARNING]`）的樣式，屬於「有意識地選、講得出理由」，不是 slop。第 17 條針對的是 AI 反射式替每個提示框加彩色邊條。**AI 不要再建議把 `rmc_css()` 的 `border-left` 拿掉。** 其他新做的 callout 仍照第 17 條走素面卡。

## 🟠 同意避免（照修正法做）

| # | 症狀 | 修正 |
| :-- | :-- | :-- |
| 01* | 預設靛藍→紫羅蘭漸層（`#6366f1→#a855f7` 出廠色） | 封殺預設漸層；品牌允許的漸層見下方 🟢 |
| 04 | 預設語意配色（藍·黃·綠·紅框架色直出）；Google 風多彩高飽和 | 語意色用品牌定義的 `--success/--warning/--danger/--info`；多數提示根本不需要顏色 |
| 05 | 同色系狀態框（紅字紅框紅底 10% 透明） | 狀態先靠文字與字重；要上色就一個品牌色放中性表面上 |
| 07 | sans 標題挑一個字換 serif 斜體 | 用字重、位置、斷行強調；一句話一個聲音 |
| 10 | 每個標題戴小眉標（FEATURES / HOW IT WORKS） | 眉標只在補真資訊時用；section 開場交給字級與留白 |
| 12 | 扁平字級層級（全頁 14-18px 靠灰階分層） | 字級刻度要有真對比（≥1.25×）；最重要的東西給像樣的字級 |
| 21 | 巢狀圓角同值、內外角不同心 | **內圓角 = 外圓角 − 內邊距**，或內層不給圓角；全站一套小而克制的圓角刻度，讓每個角與父級同心 |
| 22 | 框線一到圓角就斷 | border 和 border-radius 寫在**同一個元素**；外層真要裁剪內容，就把邊框也搬到裁剪層。反之：本來是分隔線就保持直線、貫通到邊、填充不加圓角 |
| 23 | 徽章／藥丸標籤泛濫（✨ New、🔥 Popular） | badge 只給真實狀態（版本、庫存）；品牌 pill 也要克制、帶資訊才用 |
| 30 | 卡片套卡片 | 一個區域一個表面；內部用間距、對齊、hairline 分組；子元素是真正獨立物件（預覽、embed）才配自己的表面 |
| 31 | 間距一個值用到底 | 間距表達歸屬：組內緊、組間鬆；用 8px rhythm 刻度但刻意不均勻 |
| 25 | 每個 icon 反射性套同色半透明底磚、鋪滿一排（藍 icon 配淡藍磚、綠配淡綠） | 避免的是這種 AI 反射動作；**替代做法不寫死**——icon 要不要容器、加不加圓角，依設計需求判斷（雷蒙 2026-07-18 補充）。預設傾向：品牌色 stroke＋文字 label |
| 20/26 | 巨大彌散陰影／一碰就彈的 hover | 既有品牌規則已覆蓋（`DESIGN.md` §6：極淡陰影、hover translateY(-2px)、不放大）；CTA 與按鈕也不用漸層填充與彩色 glow（flat 品牌色＋hover 深一階） |

## 🟢 品牌允許（原版視為 slop，雷蒙拍板保留）

| # | 原版說法 | 雷蒙的判斷 |
| :-- | :-- | :-- |
| 01/06 | 漸層當氛圍＝slop | **克制的 Apple 風漸層、光影、氛圍底可以用**：品牌色系內、一頁一個重點、有方向有理由。「過多就沒有重點，反而雜亂」——禁的是無腦預設，不是漸層本身 |
| 09 | 給文字劃線、highlight 當裝飾＝slop | **重點字螢光筆 highlight（含動畫）是品牌特色**：像雜誌螢光筆劃線，吸引讀者注意。原則：只給真正的重點字與標語、一段最多一處；整段亂劃就變成原版 13 的病 |

## ⚪ 未列入強制（參考判斷）

02、03、08、11、13、14、16、18、19、24、27、28、29、32、33 未列入強制清單，掃到時個案判斷、不強改。其中 15（emoji 泛濫）、19（過度圓角＋毛玻璃）已被 `DESIGN.md` §7 既有規則覆蓋，照 DESIGN.md 做。逐條原文見 [原版 taxonomy](https://github.com/yetone/kill-ai-slop/blob/main/skill/references/taxonomy.md)。

## 對照表（人看的版本）

<https://cis.lifehacker.tw/#versus> — 同一個設計需求，左欄「一般 AI 預設」、右欄「雷蒙三十作法」並排對照，13 組，右卡可展開「查看程式碼」直接複製 CSS。給團隊與協作者快速建立眼力用；AI agent 判斷仍以本檔與 `DESIGN.md` 為準。

## 怎麼掃

Claude Code 環境有個人化 skill：說「**去 AI 設計味**」或「**kill ai slop**」即觸發（vault `000_Agent/skills/kill-ai-slop/`，內含零依賴掃描器 `scripts/scan.mjs`，可 `--only=17,04,05,07,10,12,21,22,23,30,31` 鎖定強制條目）。流程：掃描 → 逐一判斷 slop vs 有意的選擇（對照本檔分級）→ 報告 → 再動手修。

_最後更新：2026-07-18 · 維護：lifehacker-tw/brand-cis_