📦 Design Systems — 设计系统工作流

# 设计系统（深度工作流） 设计系统是共享的 UI 基础设施：tokens、components、patterns 与 governance，让产品保持一致性而不扼杀创新。 ## 何时启用本工作流 触发条件： - 多个应用视觉出现分叉；可访问性债务不断累积 - 启动或重构 component library；token 需要刷新 - Figma 与线上代码逐渐脱节 初始提案：采用六个阶段：（1）战略与原则，（2）design tokens，（3）components & API，（4）accessibility & content，（5）docs & tooling，（6）governance & adoption）。确认前端框架（React/Vue/Svelte）与设计工具。 --- ## 阶段 1：战略与原则 目标： 明确系统存在的原因（速度、a11y、品牌）；同时声明非目标（不是每个像素都要中心化）。 退出条件： 一页纸原则：density、tone、motion philosophy。 --- ## 阶段 2：Design Tokens 目标： 语义化的 color、type、space、radius、motion——用 surface.default 这样的名称，而不是到处写死十六进制。 ### 实践 - 尽早规划 light/dark 与 density 主题 --- ## 阶段 3：Components & API 目标： 可组合的 primitives 而非臃肿的“厨房水槽”组件；稳定的 props API 并遵循 semver。 ### 实践 - 优先使用 composition/slots，避免 prop 爆炸 --- ## 阶段 4：Accessibility & Content 目标： 每个组件满足 WCAG 基线：focus rings、labels、错误模式、必要时添加 live regions。 --- ## 阶段 5：Docs & Tooling 目标： Storybook 或同类工具；使用指南；代码片段；正/反示例。 --- ## 阶段 6：Governance & Adoption 目标： 贡献指南；废弃策略；每条产品线设 champions 或 office hours。 --- ## 最终审核清单 - [ ] 战略与原则达成一致 - [ ] Token 层语义化且可主题化 - [ ] Component APIs 稳定且可组合 - [ ] 每个组件满足可访问性基线 - [ ] 文档与实时示例完整 - [ ] 贡献与废弃治理机制就绪 ## 有效指导小贴士 - Figma ↔ code 的同步必须有负责人与固定节奏。 - 未通过键盘与屏幕阅读器测试的组件禁止上线。 ## 处理偏差 - 小团队：先落地 tokens + 少量 primitives——完整目录可延后。