design-system

設計系統 — 生成與審核視覺系統

使用時機

• 啟動需要設計系統的新專案
• 審核現有程式碼庫的視覺一致性
• 在重新設計之前 — 了解你現有的內容
• 當 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