設計系統 — 生成與審計視覺系統
使用時機
- 啟動一個需要設計系統的新專案
- 審計現有程式碼庫的視覺一致性
- 在重新設計之前，了解現有資產
- 當 UI 看起來「不對勁」但找不出原因時
- 審查涉及樣式的 PR
運作方式
模式 1：生成設計系統
分析你的程式碼庫並生成統一的設計系統：
1. 掃描 CSS / Tailwind / styled-components 中現有的模式
2. 提取：顏色、排版、間距、邊框圓角、陰影、斷點
3. 研究 3 個競爭對手的網站以獲取靈感（透過瀏覽器 MCP）
4. 提出一套設計 token（JSON + CSS 自訂屬性）
5. 生成 DESIGN.md，說明每個決策的理由
6. 建立一個互動式 HTML 預覽頁面（獨立檔案，無依賴）
輸出：DESIGN.md + design-tokens.json + design-preview.html
模式 2：視覺審計
從 10 個維度為你的 UI 評分（每個維度 0-10 分）：
1. 色彩一致性 — 是否使用你的色板，還是隨機的十六進制色碼？
2. 排版層級 — h1 > h2 > h3 > body > caption 是否清晰？
3. 間距韻律 — 使用一致的級距（4px / 8px / 16px）還是隨意設定？
4. 元件一致性 — 相似的元素是否看起來相似？
5. 響應式行為 — 在各斷點下流暢還是破版？
6. 深色模式 — 完整支援還是半成品？
7. 動畫 — 有意義還是過度裝飾？
8. 可及性 — 對比度、焦點狀態、觸控目標
9. 資訊密度 — 雜亂還是簡潔？
10. 精緻度 — 懸浮狀態、過渡效果、載入狀態、空白狀態
每個維度都會有分數、具體範例，以及包含檔案:行數的修正建議。
模式 3：AI 生成設計偵測
辨識常見的 AI 生成設計模式：
- 到處都是不必要的漸層
- 預設紫色到藍色的配色
- 毫無目的的「毛玻璃」卡片
- 不該圓角的元素卻加了圓角
- 滾動時過度的動畫
- 千篇一律的置中文字搭配純色漸層的英雄區
- 沒有個性的無襯線字型堆疊
範例
為 SaaS 應用生成：
/design-system generate --style minimal --palette earth-tones
審計現有 UI：
/design-system audit --url http://localhost:3000 --pages / /pricing /docs
檢查 AI 生成內容：
/design-system slop-check