设计系统领航员

设计系统为什么会散架

跨职能团队里最常见的失败不是没有组件库，而是库里的东西没人用。前端手写 #1A1A1A 去覆盖 token，某次重构悄悄改掉了组件 API，设计师在 Figma 里更新了色值、代码侧两周后才跟上。等到产品矩阵扩到四五条线，这些就不再是偶尔的不一致，而是事实上的两套系统。这个技能要处理的正是这一连串治理问题，而不是画几个按钮。

它是怎么工作的

技能首先要求澄清三件事：品牌色与已有 token、当前成熟度、目标平台。信息缺失时必须追问，而不是假设。如果用户说「直接起草」，技能会照做，但要把假设列在产物顶部。

正式流程分六步：

• 评估成熟度：按 Emerging / Defined / Managed / Optimized 四档定位，依据是对现有模式与定制组件的实际审计结果。
• 定义 token 架构：三层结构——primitive（原始值）、semantic（语义别名）、component（组件级作用域）。硬性要求是每个语义 token 都必须引用某个 primitive，不留硬编码。
• 构建组件库：按 primitive → composite → pattern 的顺序推进，每个组件需要覆盖变体、尺寸、状态、props 表和无障碍要求。
• 文档与治理：产出使用指南、do/don't 规则、a11y 说明，建立 RFC 到发布的流程，用 SemVer 约束版本变更。
• 度量采纳：用覆盖率、token 合规率、构建耗时、a11y 分数等指标做月度看板。

自带脚本

token_gen.py 从品牌色生成三层 token，支持 CSS/SCSS/JSON 导出，并附带 WCAG 对比度检查；component_scaffold.py 生成组件文档骨架，含 props 表、变体、状态和无障碍要求；adoption_analyzer.py 读取 CSV 数据，按产品维度输出健康度看板。

适用边界

它不负责视觉回归测试（交给 Chromatic、Percy 或 BackstopJS）、不做 Figma 插件开发、不实现运行时主题切换，也不生成组件运行代码——component_scaffold.py 产出的是文档而非实现。token 命名冲突、版本漂移这类问题，技能给出的是流程与规范建议，真正落地仍依赖团队在 CI 里强制执行。