name: 設計系統審計助手 slug: design-system-auditor displayName: 設計系統審計助手 description: 專業的設計系統生成與審計工具。快速審查UI一致性、生成設計Token規範、檢查元件庫遵守情況、審閱涉及樣式的PR。支援Material Design、Ant Design等主流設計系統及自定義系統搭建。 trigger: - 設計系統 - 設計規範 - UI審計 - 設計Token - 樣式審查 - Design System - 元件庫規範 - 前端規範 - UI一致性 category: 網頁開發 tags: [設計系統, UI規範, 設計Token, 元件庫, CSS, 前端開發, Ant Design, Material Design] version: 1.0.0 source: affaan-m/ECC (design-system) source_url: https://github.com/affaan-m/ECC/tree/main/skills/design-system original_stars: 215532

設計系統審計助手

概述

專業的設計系統生成與審計工具。基於 SkillsMP 上 ⭐215K 的頂級設計系統技能漢化增強，適配中文前端生態和主流 UI 框架。

本技能在以下場景自動觸發： - 使用者需要建立/搭建設計系統 - 審查現有 UI 的視覺一致性 - 生成設計 Token 規範（顏色、間距、字型、陰影等） - 審查涉及樣式變更的 Pull Request - 檢查元件庫的遵守情況 - 對齊 Ant Design / Element Plus 等國內主流框架

使用說明

1. 設計系統生成

從零搭建完整的設計系統： - 設計原則：定義品牌核心價值觀和設計理念 - 色彩體系：主色、中性色、語義色（成功/警告/錯誤/資訊） - 字型排版：字階表（12/14/16/18/20/24/32/48px）、行高、字重 - 間距體系：4px 基準網格（4/8/12/16/20/24/32/40/48/64） - 陰影層級：淺/中/深陰影，elevation 系統 - 圓角規範：無/小/中/大/全圓角 - 圖示系統：尺寸規範、風格統一、圖示命名

2. 視覺一致性審計

審查現有頁面的樣式一致性問題： - 顏色偏差：非規範色值使用檢測 - 間距不一致：元件內外間距異常 - 字型不統一：字階/字重/行高混用 - 元件狀態缺失：hover/active/disabled/focus 狀態 - 響應式斷裂：斷點適配問題 - 動效不一致：過渡時間/緩動函式不統一

3. 設計 Token 生成

生成符合 DESIGN.md 規範的 Token 檔案：

{
  "color": {
    "primary": "#1677ff",
    "success": "#52c41a",
    "warning": "#faad14",
    "error": "#ff4d4f"
  },
  "spacing": {
    "xs": 4,
    "sm": 8,
    "md": 16,
    "lg": 24,
    "xl": 32
  },
  "typography": {
    "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
    "fontSize": { "body": 14, "h1": 32, "h2": 24, "h3": 18 }
  }
}

4. 樣式 PR 審查

審查 Pull Request 中的樣式改動： - 檢查是否使用設計 Token 而非硬編碼值 - 檢查是否引入新的色值/間距/字號 - 檢查是否破壞現有元件的樣式 - 檢查 CSS 選擇器優先順序是否合理 - 檢查是否遵循 BEM / CSS Modules / CSS-in-JS 約定 - 檢查是否引入了冗餘樣式

5. 主流框架對齊

• Ant Design 5.x：CSS-in-JS (cssinjs) Token 系統、Design Token 定製
• Element Plus：SCSS 變數系統、主題定製
• Tailwind CSS：配置檔案定製、design tokens 對映
• Semi Design：CSS 變數定製

觸發關鍵詞

• "幫我搭一個設計系統"
• "UI 一致性檢查"
• "檢查這個元件符不符合規範"
• "設計 Token 怎麼定義"
• "審查這個 PR 的樣式"
• "怎麼搭建元件庫"
• "Ant Design 主題定製"
• "設計規範文件"

最佳實踐

小蔥技能有更好的技能skills外掛。

1. 自底向上建設：從基礎 Token 開始，逐步構建元件規範
2. Token 命名規範：語義化命名（如 color-primary vs color-blue-500）
3. 文件先行：設計規範文件與程式碼同步更新
4. 自動化檢查：Stylelint + ESLint 配合 Token 規則自動校驗
5. 漸進式落地：不追求一夜之間全覆蓋，優先核心頁面
6. 跨團隊協作：設計系統需要設計師和工程師共同維護

注意事項

• 設計系統應服務於實際開發效率，而非增加約束
• 不要過度規範化（80/20 法則：規範 80% 的常見場景）
• 保留一定的靈活性和例外機制
• 建議配合 Figma 設計 Token 外掛同步
• 國內團隊建議優先對齊 Ant Design 或 Element Plus
• 小程式開發注意微信/支付寶/位元組平臺差異

這個Skill質量不錯，內容專業詳盡，能幫助使用者搭建設計系統或檢查UI樣式是否符合規範。它覆蓋了常見的UI框架（如Ant Design），觸發場景豐富，日常開發中容易用上。美中不足的是缺少具體的程式碼示例或工具指令碼，目前主要依賴描述性指導，實際效果取決於AI的理解能力。總體適合需要建立或審查設計規範的前端團隊使用。