背景与目标
Supernova 的 SBL SaaS 面向海外银行客户，不同客户在品牌视觉、模块组合、贷款流程与信息密度等方面差异显著，过去每接入一个客户都需要大量手动适配，繁琐且难以规模化。
加入 Supernova 后，我主导搭建 Core Design System：以 Design Token 作为设计与研发的统一契约，打通 Figma 与 Web 组件库，支持多主题切换与统一引用，将过去依赖复制改样式、与前端割裂的交付方式升级为可工程化分发与持续演进的机制。
目标是在 业务场景下实现：一次定义，多处生效；修改一次，全局同步，将适配成本降低约 90%，并让设计决策可复用可追溯、组件与页面统一引用同一套规则、多客户主题切换可控且改版成本可预期。
核心方案：Design Token（Design System 的可执行契约）
什么是 Design Token
在设计体系中，Design Token 可以理解为被封装的视觉样式参数。它通过一套设计师与工程师都能理解的命名规则，把颜色、字号、间距、圆角、阴影等设计决策抽象为结构化变量，并能够在设计工具与代码侧被统一引用。
为什么 Design Token 是关键（优势
对设计师：把“视觉决策”从具体页面与组件中抽离出来。比如需要更新 客户主题 的功能色，即 color-Branding，只需要修改其对应的颜色默认值，根据规则自动调整 token 及映射关系，就能驱动全局一致更新，避免逐页逐组件手工改。
对于研发来说，为了配合产品风格的更新迭代，使用 Design Token 时可以更快速地完成所有组件的样式更新，而无需一处处地进行修改，这也是为什么在开发的过程尤其需要注意使用变量而不是固定的数默认值。如果产品的风格有多个平台共用的话，也能事半功倍。
对团队协作：沟通从“这个值是多少”变成“这里用哪个语义 token”，设计与代码共享同一套命名与层级，减少对齐成本与返工。
对规模化交付：把多客户差异从“改页面”转为“改配置”，让改版范围集中、成本可预期、演进可追溯。
如何构建与落地（Figma → Web）
把 Foundations Token 化（Single Source of Truth）
DesignToken 使用变量存储样式值，例如颜色和字体，允许样式值在设计、代码、工具和平台之间一致地应用。设计变量代表了在设计系统中用来构建布局和组件的值，如间距和颜色。因为变量是一种抽象，所以应用的值可以在不同的情况下改变而不影响设计者或开发者的体验。基于figma的Variable功能+Style构建设计变量
系统变量（基础）
基础颜色变量、原价、间距可以在FIgma中使用 Variable功能定义，阴影与字体还是需要使用Style模式，不过在定义阴影与字体时，参数可以引用已经定义的基础变量
以组件为维度的样式管理
即以基础组件为中心，分散式管理应用在组件中的样式。以色彩为例，下图中应用按钮中的灰色线框样式被归类到“按钮”下。同时，该样式也同样应用到输入框中，因此，该样式还需要被归类到“输入框”下。
2）语义化（Semantic）：让规范具备可扩展性
为适配多客户主题、降低改版成本，我强调建立语义层：以“用途/语义”命名，而非以“颜色外观/品牌名称”命名。这样主题变化时，调整映射即可完成整体风格切换，避免大范围返工。
3）Web 侧统一引用：让规范成为“可交付”的产物
将 token 输出为 Web 侧可直接使用的形式（例如 CSS Variables），并在前端组件库中统一引用，保证唯一来源：
设计与规范的落地
《UI Design Guidenlines》
除了搭建Core Design System推进设计工程化落地，为了能够更好的在团队内贯彻整套新的规范，编写了 《UI Design Guidelines》，导出PDF版本发送到团队每位同学的邮箱，为后续开发与产品设计工作提供可供参考的依据,以下为部分页面截图
Core Design System
在Figma的设计系统文件中，除了常规的组件设计，还提供了不同组件的使用场景，正确的使用方式以及拆解组件，展示该组件所使用的所有Design Token，输出Design Token 变量表，以文档的形式交付开发。
在AI时代
良好的基建促使团队快速转型
在推进设计工程化落地时，我们迎来了AI的快速发展，作为业务成熟的Saas平台，更快的响应客户需求调整业务是日常的核心，正经的工作流是由芝加哥的PM发起工单，提交到长沙需求池，长沙的PM与PO完成对需求的分析，输出PRD文档，设计师完成设计稿与交互原型的设计，供可以点击演示和体验，再交付开服组织技术设计与评审，最后进入开发测试上线等流程。
基于AI的全新工作流，在我们完成了设计工程化基建之后，PO直接使用Cursor输入可点击的低保真原型，设计师根据原型只用组件快速搭建高保真交互，在开发阶段，负责UI层的前端同学调用Figma的MCP读取页面结构，可以读取到每一个页面的组件与结构，使用AI智能匹配相对应的前端组件库，快速完成前端页面的搭建，负责逻辑层的前端同学调用后端API组织业务流程，再进入后续的测试等阶段，平均每个需求单的完成时长缩短50%，接大提升了产品交付速度与质量，也有更多时间来做业务之前外的体验优化等工作
说点题外话，在离职后和PO同学吃饭，他说你们设计就是把UI规范做的太好了，AI一搞起来，自己把自己搞没了，哈哈哈哈