設計系統 — 產生與審核視覺系統 是做什麼的？
使用時機
- 開始需要設計系統的新專案
- 審核現有程式碼庫的視覺一致性
- 在重新設計之前，了解你現有的內容
- 當 UI 看起來「不對勁」但你無法 pinpoint 問題時
- 審查涉及樣式的 Pull Request
運作方式
模式 1：產生設計系統
分析你的程式碼庫並產生一致的設計系統：
1. 掃描 CSS/Tailwind/styled-components 中的現有模式
2. 提取：色彩、排版、間距、邊框圓角、陰影、斷點
3. 研究 3 個競爭者網站以獲得靈感（透過 browser 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