庫存 UI 審查
生成式與入門套件介面共享一種可辨識的外觀：靛藍或 Violet 強調色、紫藍色英雄區漸層、到處都是 Inter 字型、毛玻璃卡片、導覽列中出現表情符號。這些單獨來看都沒有錯，問題在於它們是來自樣板而非產品本身的選擇。這個技能透過靜態掃描器找出這些選擇，再透過判斷進行分類。掃描器產生候選項目，只有經過分類才能確定為發現結果。
這個技能會移除未經選擇的預設樣式，不會發明品牌。如果產品還沒有任何視覺方向，請明確說明並要求定義一個方向，而不是用一個預設樣式取代另一個。
掃描前
- 閱讀需求摘要、設計 Token 以及主題或元件庫設定檔。記錄產品要求的所有顏色、字型和元件。這些即使被掃描器標記也應保留。
- 根據請求決定模式：
- Review：僅報告發現結果，不編輯任何內容。
- Cleanup：修正已確認的發現結果，僅限於使用者指定的範圍（頁面、元件資料夾或整個應用程式）。對於範圍外注意到的任何問題，僅報告而不修正。
- 選擇掃描範圍：僅包含渲染 UI 的原始碼資料夾，而非整個儲存庫。
執行掃描器
bun <此技能目錄>/scripts/scan.mjs [--json] [--fail-on high|medium|low] <路徑>...
Node 22 或更新版本也可使用。它會走訪目錄，跳過依賴、建置和覆蓋率輸出以及最小化檔案，並讀取 .html .css .scss .js .ts .jsx .tsx .vue .svelte .astro。它會顯示掃描的檔案數量。結束代碼 0 表示沒有任何項目達到失敗嚴重性（預設為 high），1 表示有項目達到，2 表示用法錯誤或掃描了零個檔案。結束代碼 2 永遠不是乾淨的結果。當 Violet 強調色、單一字型或表情符號圖示應使掃描失敗時，請傳遞 --fail-on medium。除非被要求，否則不要將掃描器加入 CI 閘道。
| 規則 | 嚴重性 | 捕捉內容 |
|---|---|---|
purple-blue-gradient | high | 漸層停止點均為冷色調且至少包含一個 Violet，無論是 CSS 還是 Tailwind 的 from-/to- 類別 |
violet-accent | medium | 任何計算後的色相落在靛藍到紫色範圍內的 hex、rgb、hsl、oklch 或裸 HSL Token，以及 Tailwind 的 indigo/violet/purple 類別 |
gradient-text | medium | background-clip: text 和 bg-clip-text |
single-stock-font | medium | 在掃描集中，只有一個庫存無襯線字體（Inter、Roboto、Poppins 等）作為唯一的命名字型，出現在兩個或更多宣告中 |
emoji-icon | medium | 在標題、按鈕、連結、導覽項目或 icon/label/title 欄位中的表情符號 |
neon-glow | medium | 零偏移、大模糊半徑的飽和色陰影，以及 Tailwind 的彩色陰影 |
frosted-glass | low | backdrop-filter: blur() 和 backdrop-blur |
library-default-token | low | 來自 Bootstrap、Material、MUI、Ant Design、Chakra、shadcn/ui 和 Vite 入門套件的未經修改的預設主要顏色 |
tracked-caps | low | 大寫文字搭配較寬的字距 |
字型規則會在一次執行中檢查所有檔案，因此請將整個 UI 範圍一起掃描；一次掃描一個檔案會隱藏此規則。
分類每個匹配項目
打開每個被標記的行，閱讀足夠的上下文以了解該元素的目的。每個匹配項目只能有一個判定：
- 未經選擇的預設樣式：需求摘要、Token 或歷史記錄中都沒有要求，且看起來像入門套件。這是發現結果。
- 刻意選擇：需求摘要、Token 檔案、品牌指南或提交訊息顯示有人選擇了它。保留它並指出證據。
- 誤報：匹配項目並非規則所假設的情況，例如語法高亮主題中的 Violet 色調、忙碌內容上模態背景的模糊效果，或用戶生成的範例資料中的表情符號。保留它並說明原因。
- 無法確定：無法判斷是否有人選擇了它。這不是發現結果，也不做任何更改。報告缺失的資訊以及能夠解決問題的問題。
修正真正的問題
- 修正原因，而非那一行。五個 Violet 十六進位碼通常意味著缺少一個強調色 Token；一次性定義產品的調色板和字型，並讓元件指向它們。
- 選擇有助於內容的替代方案：持久的對比度、標記唯一重要操作的強調色、適合閱讀負荷的字型。
- 永遠不要為了避開掃描器的範圍而微調數值，例如將色相偏移幾度，或將十六進位碼替換為等效的
oklch()。如果顏色錯誤，就更改它；如果顏色正確，就保留它並記錄原因。 - 永遠不要更改品牌顏色、狀態顏色（成功、警告、錯誤）或焦點指示器以使掃描通過。這些具有意義，請將它們記錄為刻意選擇。
- 用專案現有的圖示集取代表情符號圖示。僅在使用者同意後才新增新的圖示依賴項。
掃描器無法看到的內容
透過閱讀渲染後的頁面來檢查這些，因為沒有模式匹\n配能找到它們：
- 每個部分都由相同的中置標題、副標題和兩個按鈕組成
- 一個三卡片的特色網格，每張卡片都有一個圖示、標題和一行文字
- 一個位於主標題上方的小徽章或藥丸形狀
- 卡片用粗的彩色左邊框標記
- 一個包含大數字（「10k+ 使用者」、「99.9% 正常運行時間」）的統計橫幅
- 編號的「1、2、3」步驟區段
- 強制啟用深色主題但沒有需求摘要要求的淺色選項
- 每個表面都有相同的大圓角和柔和陰影
- 忽略專案比例尺度的間距和字型大小
- 可以描述任何產品的文案
驗證
- 在同一範圍內重新執行掃描器，確認每個剩餘的匹配項目都有記錄的判定。
- 在重要的尺寸（窄手機寬度和至少一個桌面寬度）下查看渲染後的 UI，以及產品提供的每個主題。
- 乾淨的掃描結果並不代表無障礙、佈局或整體品質。檢查您修改過的任何內容的對比度和焦點狀態。
如果您無法渲染 UI，請說明審查僅限於靜態分析。
報告
按以下順序撰寫報告：
- 掃描範圍、掃描的檔案數、模式以及掃描器的結束代碼。
- 已修正（或在 Review 模式下為建議的）發現結果，每個都包含
file:line、規則以及取代的內容。 - 保留為刻意選擇的匹配項目，每個都附上證據。
- 無法確定的匹配項目，每個都說明缺失的資訊以及能夠解決問題的問題。
- 誤報，每個都附上一行說明原因。
- 掃描器無法看到的問題（如果有的話）。
- 驗證方式：重新執行的結果、檢視的尺寸和主題，或「僅限靜態分析」。