设计系统审计助手

概述

专业的设计系统生成与审计工具。基于 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
• 小程序开发注意微信/支付宝/字节平台差异