Typeflow 设计系统

背景

四条产品线各自维护一套组件，颜色、间距与交互行为不一致，设计走查成本高。目标是建立单一令牌来源与可组合的组件层。

我的职责

• 定义令牌命名与主题切换机制
• 实现表单、弹层、导航等基础组件
• 建立无障碍验收清单并接入 CI

方案与取舍

令牌分三层：原始值、语义值、组件值。业务只允许引用语义层，避免直接写死色值。主题切换通过 data-theme 覆盖 CSS 变量，不引入运行时样式库。

结果与复盘

组件复用率提升到 78%，无障碍问题从 214 个降到 9 个。最大的教训是文档比组件更重要：没有可搜索的示例，组件再好在业务侧也会被绕开。