技能介绍

你在解决什么问题

团队里常见的情况是：颜色、间距、字号各写各的，PR 里随手加 #3b82f6 和 margin: 13px，组件 hover 状态缺一半，Ant Design 主题只改了一半变量。设计系统要么没有文档，要么文档和代码长期脱节。这个技能面向建立/审计设计系统、生成 Token、审查样式 PR 这几类具体任务，并尽量对齐国内常用的 UI 栈。

技能如何工作

触发后，它会按场景走不同路径：

从零生成：输出设计原则、色彩（主色/中性/语义色）、字阶与行高、4px 基准间距、阴影与圆角、图标尺寸与命名等可落地的规范骨架。
一致性审计：对照既有规范，查非规范色值、间距异常、字阶混用、交互状态缺失、断点与动效参数不统一等问题。
Token 产出：按 DESIGN.md 思路整理颜色、间距、字体、阴影等 Token，减少硬编码。
样式 PR 审查：检查是否用 Token、是否引入新魔法数、是否破坏组件样式、选择器优先级、BEM / CSS Modules / CSS-in-JS 约定，以及冗余样式。
框架对齐：针对 Ant Design 5.x（cssinjs Token）、Element Plus（SCSS 变量）、Tailwind、Semi Design 等说明定制与映射方式。

典型说法包括：「帮我搭一个设计系统」「UI 一致性检查」「审查这个 PR 的样式」「设计 Token 怎么定义」。

适用边界与注意点

设计系统是为了减少重复决策，而不是给每个像素立法。技能材料里强调 80/20：先规范高频场景，保留例外机制；文档与代码要同步，最好配合 Stylelint 等规则做自动化。国内项目往往优先对齐 Ant Design 或 Element Plus；小程序还需单独考虑各平台差异。Figma Token 插件可作为设计侧同步手段，但本技能核心是规范与代码层面的对话与审查，不能替代你们团队对品牌与产品的最终拍板。