设计系统审计助手_设计多媒体 skill-PHP中文网

设计系统审计助手

Polar Sponsor

爱发电赞助

.NET 9.0

立即下载

专业的设计系统生成与审计工具。快速审查UI一致性、生成设计Token规范、检查组件库遵守情况、审阅涉及样式的PR。支持Material Design、Ant Design等主流设计系统及自定义系统搭建。

设计系统审计助手

功能概述

设计系统审计助手是一项面向实际任务的技能，主要用于专业的设计系统生成与审计工具；基于 SkillsMP 上 ⭐215K 的顶级设计系统技能汉化增强，适配中文前端生态和主流 UI 框架；

核心要点

本技能在以下场景自动触发：；
用户需要建立/搭建设计系统；
审查现有 UI 的视觉一致性；

使用与执行

生成设计 Token 规范（颜色、间距、字体、阴影等）；审查涉及样式变更的 Pull Request；检查组件库的遵守情况；对齐 Ant Design /。它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。

结果检查与注意事项

从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。

设计系统审计助手

概述

专业的设计系统生成与审计工具。基于 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 }
  }
}