anti-slop 是做什麼的？
由模板生成的 UI 總是以同樣可預測的方式失敗。這個技能將三件事整合成一個工作流程： 來自 unslop 的逐項修復方法、來自 taste-skill 的設計指導機制，以及一份包含 20 個過時痕蹟的清單，並附帶一個能自動偵測機械化痕跡的腳本。
致謝與授權
- 該方法改編自 unslop，作者 Damir Sokolovsky (https://github.com/heydamir/unslop)，
採用 CC BY 4.0 授權 (https://creativecommons.org/licenses/by/4.0/)。改編內容：精簡並與
Leonxlnx 的 taste-skill 以及 Molveau 在
references/playbook.md中的痕跡清單合併。在任何複製或改編版本中皆需保留此致謝。原始版本未經修改存放在references/vendor/unslop/中。 - 設計執行、內部規則與檢查工具來自 taste-skill，作者 Leonxlnx
(https://github.com/Leonxlnx/taste-skill)，採用 MIT 授權，未經修改存放在
references/vendor/taste/中。 - 20 項痕跡清單與
scripts/detect-tells.mjs為 Molveau 的原創作品（MIT 授權）。 scripts/story.mjs改編自 unslop 的渲染器（CC BY 4.0，其標頭中列出了修改內容）；它仍採用 CC BY 4.0 授權，其本機伺服器scripts/story-server.mjs亦同。scripts/story-contrast.mjs為 Molveau 的原創作品（MIT 授權）。
從這裡開始
請先閱讀 references/playbook.md，從其「Do this first」區塊開始；僅在需要深入了解或查看實作範例時才打開供應商檔案。 這本手冊是合併後的指導方針（包含方向、修復工序、文案、間距、色彩、排版、圖標、細節、資料、應用程式畫面、圖片、動畫、檢查清單），並附有來源標籤以及在來源意見不一致時的決策說明。下方的「何時閱讀什麼」表格是深度索引。
重疊說明：這是消除 AI 痕蹟的工序。ui 技能的審查項目是較輕量的通用設計審查，而 design-grill 是深度的多重透鏡審計；在評估超越痕蹟的設計品質時使用它們。
方向閘門
在為新頁面或畫面撰寫任何程式碼之前執行此步驟，並在每次重度反模板化修復（heavy-slop run）的步驟 3 執行，即使需求只有一行或使用者說直接做。這個技能的其餘部分在於移除錯誤；它不會賦予畫面個性。如果跳過此步驟，結果將是所有模型都會產出的中位數頁面：細節正確，但毫無歸屬感。
- 五行描述。 產品：做什麼的，為誰而做。個性：兩到三個具體的文字（例如
冷靜、精確、帶點溫暖），絕不使用乾淨、現代、時尚、極簡或高級這類詞。世界：產品所屬的場所或物質；它會影響中性色並設定強調色。亮點時刻：一兩個能夠獲得豐富色彩與細節的地方。標誌性細節：一個只有這個產品擁有的小細節，並持續使用。 一個亮點時刻是用心描繪的，而不僅僅是清理乾淨：重新繪製一個圖表以呈現它必須表達的內容（平滑的線條、鏡像比較、真實比例），或者用重量與光影渲染產品本身的物體。 - 盤點，然後是想法。 列出 8 到 12 個競爭對手沒有的東西（名稱、街道、簡報中的數字、材料、工具、儀式、該行業印刷的文件）。寫下：「在這個畫面上，[其中一個項目] 變成了 [那個裝置]」。那個裝置就是亮點時刻。
- 拒絕二階預設值，除非品牌已經擁有它們。這些是模型在明顯的痕跡被禁止後會轉而使用的東西：
- 奶油色、石色或暖白色的頁面，搭配燒橙色、赤陶色、鼠尾草色或森林綠的強調色，有或沒有襯線字體作為標題（「紙墨」風格已是新的預設值，而非一種方向）；
- 反射性地使用 Fraunces、Instrument Serif、Playfair 或 Georgia 作為標題字體；使用 system-ui 作為唯一字體；
- 在白色背景上使用 Inter 或 Geist，搭配一種靛藍色或藍色強調色；
- 毫無理由地按照 Hero、三個功能特色、用戶推薦、行動呼籲的順序排列；在應用程式畫面中，四個等大的統計卡片放在一個長條圖上方；
- 一個置中的 Eyebrow、標題和兩個按鈕組成整個首屏。
- 替換測試。 將產品名稱與行業替換成競爭對手的。如果畫面仍然適用，則更改主張、亮點時刻和標誌性細節，然後再次測試。
- 展示並等待。 展示五行描述和想法，然後等待負責人。如果你無法提問（使用者說直接做，或者你在沒有真人參與的情況下執行），請將它們作為註解寫在主檔案頂部，並完全按照該描述進行建構。
深度參考：anti-slop 手冊 §2（方向）和 §12（應用程式畫面）；實際參考資料請見 design-inspiration-index 技能。
核心概念
模板化將色彩與效果散佈在鍍鉻元素上：背景、按鈕、邊框、標籤。工藝則讓這些鍍鉻元素保持低調，並將豐富性投入到一兩個令人難忘的內容亮點時刻。移除模板化僅完成了一半的工作；一個乾淨但可以屬於任何產品的畫面只是下一個模板。每次修復的結束，都應該產出一個只有這個產品才能擁有的畫面。
工作順序
- 是從頭開始的頁面還是深度重新設計？ 按照 taste-skill 的執行流程（
references/vendor/taste/taste-skill.md）進行，並套用手冊中的覆蓋規則。應用程式畫面：請參閱手冊 §12。 - 查看畫面，如果可能的話以渲染後的狀態查看，而不僅僅是看程式碼。
- 審計 根據跡象清單（
references/vendor/unslop/unslop/references/signs.md）和 20 項痕跡清單（references/tells.md）進行。每個跡象一行，並指出其所在位置。 - 評估工作量（重度、輕度、無模板化）並撰寫方向，然後等待負責人（手冊 §1 和 §2）。
- 分九道工序修復，每一道都針對整個畫面：間距、顏色、圖標、文案、排版、佈局、細節、視覺效果、動畫（手冊 §3 至 §14）。
- 檢查 使用手冊的檢查清單，執行檢測腳本，並與審計結果比較（手冊 §15）。
- 報告 方向、每道工序的幾行說明，以及你移除或無法驗證的每一項主張。
20 項常見痕跡
包含替代方案的完整表格：references/tells.md。摘要及腳本可檢測的項目：
| # | 痕跡 | 腳本檢測 |
|---|---|---|
| 1 | 紫色/紫紅色/靛藍色漸層 | 是 |
| 2 | 漸層文字 | 是 |
| 3 | 文案中的表情符號 | 是 |
| 4 | 到處都是 Inter 或 Space Grotesk | 否 |
| 5 | 彩色側條邊框 | 是 |
| 6 | 裝飾性玻璃態效果 | 是 |
| 7 | 低對比度深色模式 | 否 |
| 8 | 三個一排的圖標框 | 否 |
| 9 | 標題上方的 Eyebrow pill | 否 |
| 10 | 預設使用 Lucide 圖標 | 是 |
| 11 | 未經修改的 shadcn/ui | 否 |
| 12 | 滾動淡入效果 | 是 |
| 13 | 跟隨游標的發光效果 | 否 |
| 14 | 按鈕懸停淡出效果 | 是 |
| 15 | 不一致的間距 | 否 |
| 16 | 文案中的長破折號 | 是 |
| 17 | 充斥流行語的文案 | 是 |
| 18 | 襯線斜體強調詞 | 否 |
| 19 | Space Grotesk 搭配其常見的展示襯線字體配對（配對列表見 references/tells.md） | 是 |
| 20 | 疊加在漸層上的顆粒紋理 | 否 |
檢測腳本
node <skill folder>/scripts/detect-tells.mjs [--json] [--include-tests] <paths...>
零依賴，需要 Node 20 或更新版本，無需匯入此技能資料夾之外的套件，因此在技能單獨安裝時也能運作。退出碼 0 表示乾淨，1 表示有發現，2 表示用法錯誤。它會跳過 node_modules .git .next dist build .open-next coverage 和測試檔案。報告格式為 path:line #tell label match。限制條件列在 references/tells.md 末尾；發現命中的地方請視為「到此處查看」。
專案中的齒輪測試
齒輪測試固定了今天的計數，並在數字上升時使測試失敗，因此模板化痕跡只會減少。使用 node:test 的草稿（請調整路徑和基準）：
import { test } from 'node:test';
import assert from 'node:assert/strict';
import { readFileSync, globSync } from 'node:fs'; // globSync 需要 Node 22；在 Node 20 上請自行遍歷資料夾
import { detectTells } from './.agents/skills/anti-slop/scripts/detect-tells.mjs';
const BASELINE = { 10: 8, 5: 1 }; // 痕跡編號 -> 今日允許的發現數量
test('no new vibe-coded tells', () => {
const files = globSync('{app,components}/**/*.{ts,tsx,css}').map((path) => ({ path, text: readFileSync(path, 'utf8') }));
const now = {};
for (const f of detectTells(files)) now[f.tell] = (now[f.tell] ?? 0) + 1;
for (const [tell, n] of Object.entries(now)) assert.ok(n <= (BASELINE[tell] ?? 0), `tell ${tell}: ${n} findings, baseline ${BASELINE[tell] ?? 0}`);
});
每當你修復一個問題時就降低基準；永遠不要提高它。
故事影片
一個約 10 秒的正方形片段，畫面逐步自我反模板化，並附有紅線標記。僅在被要求時製作。請完全按照 unslop 的「Story video」章節所述建構故事檔案（references/vendor/unslop/unslop.md：一個 story.html，頂層使用 .s1 到 .s5 的 CSS，data-gap、data-radius、data-slop、替換操作），然後使用此技能改編後的渲染器進行渲染：
node <skill folder>/scripts/story.mjs unslop-story/story.html unslop-story.mp4 # --wide 用於 16:9，--play 用於觀看
它對 unslop 的渲染器新增了以下功能：
- 一個無障礙步驟。 名稱中包含 Accessibility 的步驟會顯示即時測量值。在兩到四個文字元素上放置
data-contrast，這些元素的對比度會發生變化；每個元素會顯示其 WCAG 比率，低於 4.5:1（大字型為 3:1）時顯示紅色，通過後顯示帶有AA的白色，當無法讀取顏色（例如lab()或color(display-p3 ...)）時顯示灰色?：在那些元素上使用 sRGB、十六進制或oklch()顏色。在一到兩個控制項上放置data-target；每個控制項會顯示其大小，小於 24x24 像素時顯示紅色。選擇在「之前」狀態中失敗的元素；切勿標記在「之後」狀態中仍然失敗的元素。 - 一個標題，
<meta name="story-caption" content="...">，位於左下角。只陳述與此次執行相符的事實，例如使用的模型以及畫面未經人工編輯。 - 致謝
molveau/skills · unslop method by @heydamir會繪製在每一幀上，這是 unslop 的 CC BY 4.0 授權要求。請勿移除它。
故事是真實檔案的呈現：步驟 0 是原始的「之前」狀態，最後一個步驟等於你出貨時的最終乾淨檔案。不要為了故事而美化已出貨的畫面以外的內容。
何時閱讀什麼
| 需求 | 閱讀 |
|---|---|
| 合併後的規則、數值與衝突解決方案 | references/playbook.md |
| 20 項常見痕蹟及其替代方案與檢測腳本的限制 | references/tells.md |
| unslop 的完整方法、方向、九道工序、檢查清單、故事影片 | references/vendor/unslop/unslop.md |
| 確切數值（間距、字體比例、漸層曲線、動畫曲線） | references/vendor/unslop/unslop/references/tokens.md（其動畫數值已被取代：以 ui 手冊 §10 和 motion §5 為準，請參閱手冊衝突 19） |
| 審計跡象清單 | references/vendor/unslop/unslop/references/signs.md |
| Hero 視覺效果、圖片提示、適用的風格 | references/vendor/unslop/unslop/references/visuals.md |
| 字形、半色調、抖動與雙色調程式碼 | references/vendor/unslop/unslop/references/effects.md |
| 完整的參考畫面（圖片） | references/vendor/unslop/unslop/references/refs.md |
| 擷取即時網址以在副本上工作 | references/vendor/unslop/unslop/scripts/snapshot.mjs |
| 從頭開始的頁面或深度重新設計：盤點、處理後的方向、想法、內部規則、閘門 | references/vendor/taste/taste-skill.md |
| 深入的儀表板、後台與設定畫面 | references/vendor/taste/taste-skill/references/app-screens.md |
| 文案庫、雙行算術、不憑空編造的驗證 | references/vendor/taste/taste-skill/references/copy.md |
| 字體比例、顯示設定、字型載入 | references/vendor/taste/taste-skill/references/type.md |
| 調色盤角色、欄位、深色頁面、對比度 | references/vendor/taste/taste-skill/references/colour.md |
| 邊界、留白、框架、區塊、手機版 | references/vendor/taste/taste-skill/references/layout.md |
| 尋找、致謝、放置與處理圖片和影片 | references/vendor/taste/taste-skill/references/imagery.md |
動畫配方（選用：motion 手冊 §9）與滾動場景 | references/vendor/taste/taste-skill/references/motion.md、references/vendor/taste/taste-skill/references/scenes.md |
| 使用評分標準評估結果 | references/vendor/taste/taste-skill/references/critique.md |
| 按波次分類的過時痕跡登記表 | references/vendor/taste/taste-skill/references/tells.md |
| taste 數字背後的基礎研究 | references/vendor/taste/taste-skill/references/research.md |
供應商檔案保留了其上游的佈局，因此內部的一些相對連結可能無法在此處正常運作。taste-skill 的腳本會讀取其 library/ 資料夾（請勿整體讀取；請執行 draw.mjs）；部分腳本需要 Node 22、瀏覽器、Playwright、ffmpeg 或網路存取權限。應該執行哪些視覺檢查由 ui 手冊中的衝突 14 決定（此手冊的衝突 14 指向那裡）。