这是 Scanat 设计系统系列的第二篇。 Part 1 记录最初的 0→1 搭建与文件架构调整； 这一篇记录系统运行三年后的重新治理，以及治理完成后如何把 Token 和组件规范继续推进到现有前端体系。
| 角色 | 设计系统架构 · DesignOps · 规范制定与执行 · AI Agent 协作 |
|---|---|
| 项目类型 | 设计系统治理与工程化交付 |
| 平台 | Web · Mobile App · iPad App |
| 使用者 | 内部设计、产品与开发团队 |
| 团队 | 由我负责整体治理；使用 Figma Agent 辅助诊断、批量整理与复查 |
| 时间跨度 | 设计系统治理约 1.5 个月；工程化交付随后持续推进 |
| 我的贡献 | 1. 重新整理 Token、组件属性和图层命名； |
<aside>
</aside>
刚入职建立的设计系统持续使用三年后，随着产品功能、Web / App 组件数量和 Figma 能力变化，组件库里逐渐并存多种历史写法。命名、属性、图层结构和通用组件 / 业务组件的边界再次出现差异。
我用约 1.5 个月重新治理 Web 和 App 两套组件库：先统一底层 Token 与命名规则，再逐类检查真实组件，重点重构 Modal、Sheet、Panel 这类“外壳稳定、内容多变”的组件，并把文档、Agent 复查和后续新建 / 修改流程固定下来。治理完成后，我继续把设计系统推进到代码侧：建立 Token 导出流程，并整理现有 BootstrapVueNext 组件如何绑定 Scanat Token，通过 Storybook / Showcase 做样式展示和交付。
第一版设计系统持续使用三年后，Web / App 组件数量增加，Figma 的 Variables、Properties、Slot 等能力也陆续变化，组件库中开始并存多种历史写法。主要问题集中在四类：
治理需要在正常产品工作中完成，由我一人负责，无法删除历史组件后整体重做。因此方案需要支持逐步改造旧组件，同时约束后续新增组件。
这次工作分为五个阶段，从 Figma 侧治理一直延伸到工程化交付。
先整理颜色、文字、圆角、阴影和间距等基础 Token，同时统一明显的命名、分组和重复问题。Figma Agent 用于扫描和批量检查，最终保留哪些 Token、如何分组仍根据实际产品使用判断。
根据扫描和整理检查结果，确定组件名、Property、Variant Value 和图层命名的基础规则。第一版只覆盖可以明确判断的部分，后续在真实组件中遇到新的边界情况再补充。
按组件类别检查 Web 和 App 两套组件库，重点看分类是否合理、Variant / Property 是否一致、图层是否有意义，以及旧结构是否仍适合当前产品。
Figma Agent 主要负责扫描、批量命名和复查；组件是否合并、拆分，以及通用和业务边界怎么划分仍由我根据实际使用场景判断。
组件被进一步分成两类：跨业务复用的通用 Component，以及具体功能中稳定复用的业务 Pattern / Component。判断依据不是组件长得是否相似，而是它在不同业务中的复用方式和维护责任。
其中 Modal、Sheet 和部分 Panel 是这一阶段调整最多的一组，这类组件的问题是共用相似外壳，但业务内容差异较大，而且会在多个产品页面重复出现。每个业务场景都建立完整组件会造成大量重复；只保留通用外壳，又难以同步维护业务内容。这三年内尝试了3种调整方法：
| 方案 | 做法 | 实际问题 |
|---|---|---|
| 尝试一 | 每个业务面板单独建立完整组件 | 组件数量持续增加，仅 Web 编辑器面板就有 17 个，公共结构也容易逐渐出现差异 |
| 尝试二 | 合并相近的大组件，把不同内容拆成内部子组件 | 子组件数量增加，很多业务内容很难得到清晰、稳定的通用命名 |
| 尝试三 | 通用组件只保留外壳，所有内容通过 Slot 替换 | 业务内容失去统一实例；同一面板出现在几十个页面时，内容修改需要逐页复制，容易遗漏 |
最终总结前三次经验，决定采用“通用母组件 + 业务子组件 + Slot”的分层方式：母组件只维护稳定外壳，业务子组件承载具体内容，正式 UI 页面再引用业务子组件。这样外壳和业务内容可以分别更新，同时保留实例同步能力。
Slot 只作为连接稳定框架与可替换内容的实现方式，不再承担业务内容本身的维护。
治理完成后，为通用组件补充设计和开发共同参考的使用说明，并把新建 / 修改组件的分类、制作、Agent 复查和文档步骤固定下来。
Figma 侧治理完成后，我继续处理设计系统与代码之间的衔接。开发侧实际使用 Vue + Tailwind + BootstrapVueNext，并计划继续复用现有组件库，因此这里不再重新实现一套 Vue 组件，而是把 Scanat 的设计规范接到现有组件样式上。
第一步是建立可重复执行的 Token 导出流程。使用 Claude Code 读取 Figma 中的颜色、文字、间距、圆角、边框、尺寸和阴影，输出 CSS 与 JSON。目前已有 180+ Token 进入流程。
第二步是逐个整理通用组件的 Token 绑定。Claude Code 辅助读取组件结构，识别背景、文字、边框、圆角、间距和不同状态分别由哪些 Token 控制，再用现有 BootstrapVueNext 组件展示实际样式。
只有 Token 文件并不足以完成交付，因此 组件与 Token 的绑定关系成为这一阶段的主要内容。Storybook / Showcase 用来集中展示 Foundations、组件样式和 Token 绑定结果，作为设计与开发共同查看实际效果的入口。
<aside> 🔗
</aside>
这套协作方式是我自己先验证出来的。在正式整理之前，我用少量 Token 和几个组件做了一版可运行的工程化 demo，拿给开发看。开发认可这个方向后，我们商定了具体分工：
这套模式的直接收益是 Token 绑定效率明显提升，也推动了组件本身的规范化。这部分代码此前先后经过 4 位不同前端的手，写法比较杂，通过统一的 Token 绑定关系，写法逐步收敛了下来。