AI 去味 (AI de-slop)
目標：讓頁面看起來像是由有觀點的人設計的。統一的字體風格、真實的內容取代佔位標籤、只有承載意義的裝飾。移除痕跡只是第一步；另一半工作是證明移除後沒有任何東西壞掉。
按此順序進行，不可跳過步驟：範圍界定 → 審核 → 保留清單 → 編輯 → 修復 → 驗證 → 報告。只有當「完成定義」中的每一項都達成時，才算完成一次處理。
1. 範圍界定
- 列出範圍內的所有網站、頁面、共享元件、資料檔案和縮圖。包含父網站，而不僅僅是示範頁或子頁面。如果使用者說「全部」，就表示全部；永遠不要只處理子集就回報完成。
- 內容存在於三個地方：樣式表、標記/元件、以及資料檔案（標題陣列、字體資訊、導航標籤、後設資料）。這三個地方都要審核。
- 如果範圍真的不明確，可以問一次。否則直接進行下一步。
2. 使用腳本審核，再以人工審核
首先執行內建的掃描器。它會列出每個候選項目（檔案:行號），並按特徵分組，當仍有需修復的特徵時會以 exit 1 結束。
python3 <skill-dir>/scripts/audit.py <路徑...> --keep-caps ".wordmark,.logo,.heroTitle"
python3 <skill-dir>/scripts/audit.py src --only caps,tracking,period # 聚焦
python3 <skill-dir>/scripts/audit.py src --json > audit.json # 機器可讀
fix類型特徵必須歸零（或帶有合理的deslop-keep標記）。check類型特徵（漸層、發光、counter-css、eyebrow、條紋、em-heading、形狀）每項都需要人工判定，並記錄在報告中。- 掃描器會跳過註解和 node_modules/build 輸出。它無法判斷意圖、無法找到版面破損、也無法看到渲染後的文字；這些是步驟 5 和 6 的工作。
- 腳本未涵蓋的額外搜尋，請參考
references/audit.md。
3. 20 項特徵：精確動作與保留規則
| # | 特徵 | 精確動作 | 僅在以下情況保留 |
|---|---|---|---|
| 1 | 標籤與膠囊 | 圓角 999px → 3 到 4px，或將標籤改為純色文字 | 它承載讀者會採取行動的狀態（緊急、狀態、作用中篩選） |
| 2 | 過度斜體 | 刪除 font-style: italic、italic 工具類、用於裝飾的 <em>/<i> | 真正的作品標題、引用的外文詞彙、商標字 |
| 3 | 預設 AI 字型 | 當 Instrument Serif、Instrument Sans、Geist、Geist Mono、Space Grotesk、IBM Plex Mono、JetBrains Mono、Space Mono 作為頁面主要字體時進行替換 | 絕不作為主要字體；請參閱字體規則 |
| 4 | 負字距 | 刪除所有負的 letter-spacing 和 tracking-[-…]、tracking-tight(er) | 絕不 |
| 5 | 過度詳細的 UI | 刪除小工具：即時狀態點、假追蹤器、游標透鏡、磁性按鈕、滾動傾斜跑馬燈、旋轉計數器、裝飾性電平表 | 該小工具是產品本身（計算機、計劃工具、配置器） |
| 6 | 過度使用分隔線 | 每個列表最多保留一條結構分隔線；刪除僅用於分隔的線 | 分隔線用於分組表格或列表中的行 |
| 7 | 陰影與透明度 | 使用純色色票；刪除發光、模糊、backdrop-filter、模糊半徑超過 40px 的陰影 | 遮罩用於保持照片上的文字可讀；真正的覆蓋層（對話框、選單）上的一個細微陰影 |
| 8 | 邊框容器 | 取消僅用邊框裝飾的卡片；刪除左側的強調色條紋（border-left ≥ 3px） | 該框是真實物件（表單、收據、票券、工作表、表格），或條紋表示狀態（表單成功/錯誤） |
| 9 | 過度詳細的圖表 | 刪除「Plate I」、「Fig. 2」、不具解釋意義的圖例和標籤 | 每個元素都對應到真實事物 |
| 10 | 囉嗦、重複的文字 | 頁尾使用一行揭露文字，取代重複的「sample」註解；刪除重複說明標題的句子 | 該註解提供了其他地方未陳述的資訊 |
| 11 | 程式碼痕跡 | 刪除 // LABEL、/services 連結文字、[1]、EV-01、R-03、STATUS:、TEL/MAIL/AREA 大寫標籤 | 真正的導覽麵包屑（「首頁 / 關於」） |
| 12 | 章節編號 | 刪除標記和 CSS counter() 中的「01 /」、「§」、「Chapter 1」、羅馬數字、「Z1」、補零計數器 | 順序是內容本身：說明、時間線、表單步驟、測驗題目、與圖表標記對應的數字。然後使用純 1. 而非 01 |
| 13 | 眉毛 | 刪除標題上方的小標籤；如果它包含事實（地點、交易、價格），則將其移至標題或第一句 | 它是功能性標籤：表單標籤、圖例、dt、表格標題、頁尾欄位標題 |
| 14 | 抖動、噪點 | 刪除抖動和噪點紋理 | 紋理即是藝術方向（孔版印刷、紙張邊緣）；標記為 deslop-keep |
| 15 | ASCII 圖片 | 刪除 | 預設情況下絕不保留 |
| 16 | 方圓角 | 半徑 12px 及以上 → 4 到 6px（區段、卡片、圖片、對話框） | 正圓（寬高相等：頭像、圖示點、圓形勾選）、刻意造型（拱形窗戶、管端）並標記 deslop-keep |
| 17 | 等寬字型 | 替換為網站的文字字體，加上 font-variant-numeric: tabular-nums | 頁面上的真實程式碼 |
| 18 | 全大寫副標題 | 刪除 text-transform: uppercase、uppercase 工具類、原始字串中的大寫；同時刪除其正字距 | 商標字、真正的標示（危險/警告/注意、管道標記），以及基於壓縮顯示標題的品牌（保留 --keep-caps 上的那些選擇器） |
| 19 | 漸層背景 | 純色 | 資料刻度（溫度、季節）、照片遮罩、硬邊界線 |
| 20 | 標題中的句號 | 移除 h1 到 h3、頁面標題、卡片和資料標題、顯示尺寸的單句頁尾行的結尾句號 | 正文句子、多句段落、縮寫（「Co.」、「Inc.」） |
同時移除：標題內的重點色短語（與 #2 相同特徵）、輪廓或描邊的巨大商標字、裝飾性斑點和圓圈、空的邊框和膠片條。
4. 字體
- 永遠不要將預設 AI 字型（#3）作為主要字體。根據頁面主題選擇字體：標示行業使用公路或窄體字體，傳統行業使用 Caslon 或 Didone，工作室則使用編輯風格襯線字體搭配簡潔無襯線字體。
- 一個顯示字體加上一個文字字體，或一個字體家族。標籤不使用第三個家族。
- 數字在文字字體中使用
font-variant-numeric: tabular-nums，絕不使用等寬字體。 - 更換字體時，同時更新：字體匯入、CSS 變數、版面類別列表、提及字體名稱的標頭註解，以及任何顯示字體名稱的資料（目錄卡片、風格指南）。然後重新檢查每個依賴舊字體寬度或行數的標題。
- 移除斜體後，不要載入斜體或未使用的字重。
5. 文案規則
- 標題：無結尾句號、無
<em>、無重點色 span、使用句子大小寫。 - 將斷裂式的兩句標題改寫成一個自然句：
- 「關閉閥門。然後打電話。」 → 「關閉閥門，然後打電話」
- 「找到漏水處。規劃屋頂。」 → 「找到漏水處，然後規劃屋頂」
- 「快速、簡潔、清晰。」 → 「快速、簡潔且清晰」
- 「專業的網站。明確的價格。」 → 「價格明確的專業網站」
- 「七層。你看見一層。」 → 「七層，而你看見一層」
- 提問加指示可以保留為兩部分：「沒水了？預約早上拜訪」。
- 當移除承載事實的眉毛時，該事實必須存在於某個可見的地方。
- 遵循專案自身的風格規則（拼寫變體、禁用詞、破折號樣式）。編輯後檢查拼寫一致性。
- 絕不捏造證據：沒有假評論、假計數、假標誌、假獎項。樣本在頁尾標示一次即可。
6. 編輯
- 機械式修改（大小寫、字距、斜體、圓角、標題句號）使用腳本；需要判斷的改寫（改寫、小工具、版面）則手動處理。
- 使用小型解析器逐條編輯 CSS 規則（匹配
selector { body }區塊，修改 body，寫回）。不要在整個樣式表上執行一個大型回溯正則表達式。 - 先建立保留清單，再進行編輯。記錄哪些選擇器保留大寫、哪些數字保留，然後將該清單傳遞給腳本。
- 在行內標記刻意保留的例外，以便未來審核時跳過：CSS 中使用
/* deslop-keep: reason */，JSX 中使用{/* deslop-keep: reason */}，位於同一行或上一行。
7. 修復移除造成的破損
每次移除都可能留下缺口。針對每個網站，檢查以下每一項：
- 具有小第一欄的網格（
44px 1fr、80px 1fr 360px、90px 1fr 1.4fr），用於放置數字或程式碼：在每個斷點移除該欄位。 p、dd、h3、li上 28 到 60px 的左外邊距或內邊距，用於讓文字對齊到已移除的數字右側：設為 0。- 遺留的
counter-reset/counter-increment、li > span/dt span規則、僅用於間隔數字的標題上的display: flex; gap。 - 不再被標記引用的死類別（跳過動態類別，例如
s[\badge_${x}`]）、空的規則、未使用的index` 參數和 props、未使用的匯入和字體變數、過時的註解。 - 與圖片重疊或依賴行數的標題，在字體變更後。
- 絕不要在未閱讀規則的情況下，移除
::before/::after內的邊框：左邊框加底部邊框旋轉 45° 就是一個繪製的勾選標記。
8. 驗證
- 在 1440 和 390 寬度下，對每個頁面進行渲染檢查，使用
prefers-reduced-motion: reduce讓動畫區段以完成狀態渲染。擷取前滾動整個頁面，確保懶加載圖片已載入；移除開發者覆蓋層。空白圖片區域可能是懶加載或卡住的開發圖片最佳化工具，在與正式環境比較之前，不要將其視為錯誤。 - 在兩種寬度下，對每個路由進行自動化檢查：零控制台錯誤、零水平溢出（
scrollWidth > innerWidth）。 - 專案檢查：型別檢查、lint（零新警告）、專案的文案或禁用詞檢查、正式環境建置。
- 重新執行審核腳本：
fix總數必須為 0。 - 更新顯示舊設計的縮圖、預覽圖和展示廳圖片，並重新檢查它們。
- 在提交前，恢復被建置或開發伺服器改寫的檔案（例如
tsconfig.json、next-env.d.ts）。
9. 完成定義
所有條件都必須為真：
- 範圍內的每一項都經過審核（樣式表、標記、資料、縮圖）。
-
audit.py報告fix: 0；每個剩餘的check命中有判定結果。 - 每個例外都在保留清單上，或帶有
deslop-keep標記並附上原因。 - 每個頁面都已渲染並被檢視過，在 1440 和 390 寬度下。
- 每個路由上零控制台錯誤和零水平溢出。
- 型別檢查、lint、文案檢查和正式環境建置通過。
- 預覽圖和縮圖已更新。
- 未經使用者同意，不推送或發布任何內容。
10. 報告
最後以簡短報告結尾，格式如下：
- 範圍： 涵蓋哪些內容（網站和頁面數量）。
- 已移除： 按特徵列出，哪些變更以及大致數量。
- 刻意保留： 每個例外及其原因。
- 已修復： 發現並修正的版面破損。
- 已驗證： 每項檢查及其結果。
- 未完成項目： 任何未完成或未驗證的事項，清楚陳述。
實務中常見陷阱
- 無頭瀏覽器設定檔會快速填滿磁碟。一次擷取一個頁面，刪除每個設定檔，監控可用空間。磁碟滿載會破壞 shell 和開發伺服器。
- 不要終止使用者的開發伺服器。在另一個連接埠啟動你自己的伺服器，並在完成後停止它。
- 僅匹配類別名稱會移除功能性標籤；應根據位置和元素類型進行匹配。
- 資料驅動的標題和模板字面量的頁面標題，會被僅針對 JSX 的標題掃描遺漏；腳本也會檢查
title:、heading:和title=。 - 跳過父網站、資料檔案或縮圖的處理，不算完成。
設計新作品，避免這些痕跡
從主題開始，而不是從模板開始：一個為行業或受眾選擇的顯示字體和一個文字字體，一個具有意義的重點色，0 到 6px 的圓角，句子大小寫的標籤，沒有句號的標題，沒有眉毛，除非順序重要否則沒有編號區段，使用真實內容代替佔位標籤，以及每個裝飾元素都與關於該業務的真實事物相關。在交付前執行 audit.py。