多产品线设计系统

背景

公司五条产品线各自维护一套 UI，同一个按钮在不同产品里有四种样式，同一个报错提示有三种措辞。设计师大量时间花在重复画基础组件上，新页面的平均交付周期是两周。

我做了什么

• 盘点全公司已有的 UI 资产，合并去重后定义 48 个基础组件与 12 种页面模板
• 建立设计令牌体系：颜色、间距、圆角、字号、阴影全部收敛成变量，支持明暗两套主题
• 与前端约定组件 API，保证设计稿里的属性名和代码里的 props 完全一致，减少沟通损耗
• 搭建组件文档站，每个组件都带用法说明、反例和可复制的代码片段
• 建立贡献流程：任何产品线都可以提组件需求，经评审后进入主干，避免各改各的

结果

新页面的平均交付周期从两周缩短到三天，设计稿与实现的返工率下降约六成。组件覆盖了公司约 85% 的界面场景，2023 年该体系被推广到另外两条新业务线。