nyrthoughts/anti-slop-ui

anti-slop-ui 是做什麼的？

一個用於 Claude Code、Codex CLI 和 Cursor 的技能，能稽核 UI 中的 AI 生成痕跡，並依序修正。它不會從頭重新設計，而是讓現有內容看起來更有意圖。

使用時機

使用者要求你清理、去 AI 味 (de-slop)、打磨 (polish) 一個看起來像 AI 生成的畫面、頁面或元件。或者，使用者指著一個檔案、目錄或 URL，說它看起來很普通、很預設、像是 vibecoded 出來的。

工作流程

步驟 1：讀取設計方向

在專案根目錄尋找 DESIGN.md，然後在 templates/ 中尋找。如果存在，就載入它。接下來的所有決定都必須與它保持一致。如果沒有 DESIGN.md，告知使用者，並提議在繼續之前一起填寫一份。必須要有方向指引；不可跳過此步驟。

步驟 2：稽核

掃描目標（檔案、目錄或已渲染頁面）。列出你找到的所有 AI 生成痕跡，並按類別分組。使用此檢查清單：

• 紫藍色漸層、發光效果、模糊斑點
• 預設字型 (Inter/Roboto/system) 且無字級設定
• 每個標題上方都有全大寫間距的小字眉
• 標題中有一個字被加上顏色、斜體或漸層
• 使用 Emoji 當作圖示
• 卡片湯：相同的圓角、相同的陰影，卡片裡面包卡片
• 置中英雄區塊 + 三個功能卡片的佈局
• 空洞的文案：「超加速」、「解鎖」、「歡迎回來」、驚嘆號
• 捏造的數據、標誌、客戶見證
• 帶有火花 emoji 的「新品」徽章、脈動點點
• 在非載入器上使用 transition-all、animate-pulse，在卡片上使用 hover:scale
• 任意間距 (mt-[13px]、gap-[11px])
• 裝飾性 01/02/03 編號、中間點分隔符、每個 CTA 按鈕上的箭頭
• 替代性陳腔濫調（米白 + 襯線字 + 陶土色；黑色 + 螢光綠）
• 缺少空狀態/載入狀態/錯誤狀態，在 375px 寬度以下壞掉

對於每個發現，記錄檔案和行號（如果是來自 URL，則記錄選擇器）。

步驟 3：提出方向

撰寫一個簡短的方向（3-5 行），回答以下問題：

1. 這個產品是什麼（一句話）。
2. 性格 -- 一個不是「乾淨」、「現代」或「簡約」的形容詞。
3. 重點色 -- 一種顏色，來自產品或品牌，而非來自趨勢。
4. 標誌性細節 -- 一個微小的、具體的、只有這個產品才會有的東西。

將方向呈現給使用者。在編輯任何程式碼之前，等待使用者批准。 如果使用者更改了某些內容，更新方向並再次確認。

步驟 4：依序修正

按此順序套用修正。完成一個階段後再開始下一個。每個階段結束時，簡要說明變更了什麼。

第一階段：間距

• 將任意值（mt-[13px]）替換為最接近的 4px 網格步進。
• 將間距標準化為專案的規模（Tailwind 預設值或 DESIGN.md 中的規模）。
• 確保容器內的內距一致。

第二階段：顏色

• 移除漸層、發光效果、模糊斑點、有色陰影。
• 套用 DESIGN.md 中的中性色階（或自行推導一個：一種單一色調的灰色）。
• 僅在互動元素上套用方向中定義的重點色。
• 檢查文字對比度：內文至少 4.5:1，大字型至少 3:1。

第三階段：圖示

• 將 emoji 替換為專案的圖示系列（預設：Lucide，16-18px，筆畫寬度 1.5）。
• 移除文字內容中的裝飾性 emoji。
• 確保整個專案使用同一種圖示系列。

第四階段：文案

• 移除誇大詞：「超加速」、「解鎖」、「無縫地」、「輕鬆地」、「AI 驅動」、「革新」、「次世代」。
• 移除 UI 文字中的驚嘆號。
• 移除附有揮手 emoji 的「歡迎回來」。
• 將「了解更多」/「開始使用」等 CTA 替換為具體的動詞 + 成果。
• 移除捏造的數據、標誌、客戶見證。替換為真實數據或刪除該區塊。
• 移除「新品」徽章，除非該功能是在過去一週內推出的。

第五階段：字型

• 設定 DESIGN.md 中的字型（或方向中選擇的字型；絕不將 Inter 作為預設值）。
• 鎖定字重：內文 400，強調 500，主要動作最高 600。
• 標題中不使用斜體。不使用全大寫間距的標籤（移除 uppercase tracking-widest）。
• 套用一致的字級縮放。在數據上使用 tabular-nums。

第六階段：版面

• 打破出現的置中英雄區塊 + 三卡片的模式。
• 移除卡片巢狀結構。在保留卡片的地方改變卡片尺寸。
• 套用巢狀圓角規則：內部圓角 = 外部圓角 - 內距。
• 檢查版面在 375px、768px 和 1280px 寬度下是否正常。

第七階段：狀態與行動裝置

• 為每個依賴資料的元件添加空狀態（如果缺少的話）。
• 在取得資料的地方添加載入骨架。
• 在 API 呼叫可能失敗的地方添加錯誤狀態。
• 確認在 375px 寬度下沒有內容溢出或折行。

第八階段：動態效果

• 將 transition-all 替換為具體屬性（transition-colors、transition-opacity、transition-transform）。
• 從非骨架載入器的元素上移除 animate-pulse。
• 從卡片上移除 hover:scale。
• 為專案設定一個緩動曲線（預設：cubic-bezier(0.22, 1, 0.36, 1)）。
• 設定一個載入時的入場動畫：不透明度 + 小幅度的 translateY，200-300ms，只執行一次。

步驟 5：自我檢查

在所有階段完成後，重新執行步驟 2 的稽核檢查清單。如果仍有任何痕跡，修復它，或向使用者解釋為何保留它（例如：「這個漸層是實際的品牌顏色，已在 DESIGN.md 中確認」）。

向使用者確認：變更了哪些內容、找到了多少痕跡、修復了多少，以及任何保留的痕跡及其原因。

規則

• 絕不以另一種陳腔濫調取代一種。如果一個修正引入了米白 + 襯線字 + 陶土色，或黑色 + 螢光綠，請還原它，並嘗試從產品中衍生出來的方案。
• 絕不編造內容。不要添加看起來真實的虛假數據、標誌、客戶見證或佔位符名稱。
• 一次只做一個變更，一個階段完成後再進行下一個。不要超前。
• 尊重現有設計系統。如果專案使用具有特定 token 的元件庫，請將修正調整為使用那些 token，而不是覆蓋它們。
• 在編輯程式碼之前，一定要等待使用者對方向的批准。

致謝

此技能融合了開源設計技能社群的觀點。它為原創作品；以下來源沒有複製任何文字。

靈感來源：

• Unslop 作者 Damir Sokolovsky (CC-BY-4.0) -- 逐階段工作流程和多個痕跡類別（間距網格、圖示一致性、文案禁詞、動態規則）改編自 Unslop 的方法。依據 CC-BY-4.0：感謝 Damir Sokolovsky，原文位於 https://github.com/heydamir/unslop，採用 CC-BY-4.0 授權。
• Impeccable 作者 Paul Bakaus (Apache-2.0) -- 先稽核再處理的方法和確定性檢測概念。
• frontend-design 作者 Anthropic (Apache-2.0) -- 陳腔濫調目錄（米白 + 襯線字、黑色 + 綠色、全大寫間距字眉）。
• Hallmark 作者 Nutlope / Together AI (MIT) -- 底線規則和在不同寬度下測試的想法。
• Taste Skill 作者 Leonxlnx (MIT) -- 嚴格禁止裝飾性編號和極細線條。
• ai-design-skills 作者 elayadesign (MIT) -- 數值規則方法和字型禁令。
• 本倉庫 docs/ai-tells.md 中的 15 個痕跡目錄。