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

设计系统审计助手

本技能来自小葱技能站7w4.net。

概述

专业的设计系统生成与审计工具。基于 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 主题定制"
• "设计规范文档"

最佳实践

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的理解能力。总体适合需要建立或审查设计规范的前端团队使用。