设计系统搭建与设计 Token 管理体系：选型别只看功能清单

设计系统搭建与设计 Token 管理体系选型别只看功能清单范围说明本文给出 Token 治理示例编译、注入和兼容策略应在目标构建链路中验证。1. 商业化上线前夕暗黑模式 CSS 产物突然暴增 4MB一次主题方案接入后全局样式从 120KB 增长到 4.2MB网络加载也多了约 1.8 秒。先查构建产物往往比继续调网络参数更有效。构建产物显示新增的 Token 编译配置展开了过多主题组合。工具支持的导出格式和主题层级并不等于适合当前工程。若编译阶段把每个 Theme、Brand 和 Level 都展开成静态 CSS 类名产物会随着组合数快速变大。选型看功能清单 ➔ 引入复杂 Token 工具 ➔ 暴力展开全量 Theme ➔ CSS 体积暴增 4MB ❌ 选型看工程契约 ➔ W3C Token 标准 Tree-shaking ➔ CSS Custom Properties 按需注入 ➔ 体积稳定在 45KB ✅2. 分析 Style Dictionary 构建树节点展开膨胀为了找出 Token 编译展开的内存与体积膨胀瓶颈我们在 Node.js 构建脚本中注入诊断标记npx style-dictionary build --config ./tokens.config.json --verbose控制台输出的日志揭露了膨胀细节[Style Dictionary] Processing tokens for brand: brand-a, mode: dark... [Style Dictionary] Generated 14,200 CSS variable declarations. [Style Dictionary] Duplicated node paths detected across 12 nested theme groups.这里的症结不是某个工具“功能不够”而是 Web 端产物选择了静态展开。CSS 变量能够在运行时覆写主题没必要为每种组合复制整套选择器。flowchart TD A[W3C 标准 Token JSON 源码] -- B[Token 编译转换引擎] B --|错误范式: 全量静态展开| C[生成 14000 冗余 CSS 类名 4.2MB] B --|正确范式: 语义分层 Tree-shaking| D[提取 Semantic Tokens 集合] D -- E[生成全局根 CSS 变量 Root Var] E -- F[按需注入动态 Theme Override 45KB]3. 生产级 Token 编译与按需注入源码实现真正高效的设计 Token 体系应当严格区分Global Tokens原始标量、Semantic Tokens语义标记与Component Tokens组件绑定。下面是经过重构后的轻量化 Token 转换引擎核心代码// build-tokens.ts import fs from fs; import path from path; interface TokenNode { $value: string; $type: string; $description?: string; } type TokenGroup Recordstring, TokenNode | Recordstring, any; export class LightweightTokenCompiler { private semanticCssBuffer: string[] []; // 仅编译和注入语义层 Token避免全量展开 Global Tokens public compileToCssVariables(tokens: TokenGroup, prefix ds): string { this.semanticCssBuffer []; this.semanticCssBuffer.push(:root {); this.walkTokenTree(tokens, prefix); this.semanticCssBuffer.push(}); return this.semanticCssBuffer.join(\n); } private walkTokenTree(obj: Recordstring, any, currentPath: string): void { for (const key of Object.keys(obj)) { if (key.startsWith($)) continue; // 过滤元数据 const val obj[key]; const newPath ${currentPath}-${key}; if (val typeof val object $value in val) { // 解析引用值如 {color.primitive.blue.500} 转换为 var(--ds-color-primitive-blue-500) const cssValue this.resolveTokenReference(val.$value); this.semanticCssBuffer.push( --${newPath}: ${cssValue};); } else if (typeof val object) { this.walkTokenTree(val, newPath); } } } private resolveTokenReference(value: string): string { if (value.startsWith({) value.endsWith(})) { const pathKeys value.slice(1, -1).split(.); return var(--ds-${pathKeys.join(-)}); } return value; } } // 运行编译器 const compiler new LightweightTokenCompiler(); const rawTokens JSON.parse(fs.readFileSync(./tokens/semantic.json, utf8)); const cssOutput compiler.compileToCssVariables(rawTokens); fs.writeFileSync(./dist/tokens.css, cssOutput);配合前端框架的增量主题切换机制无需加载多余样式// theme-loader.ts export function applyDynamicTheme(themeName: light | dark): void { // 仅通过修改 html 根节点属性触发 CSS 变量替换无任何 CSS 文件体积增加 document.documentElement.setAttribute(data-theme, themeName); }/* tokens.css - 极度精简的增量覆写 */ :root { --ds-color-bg-primary: #FFFFFF; --ds-color-text-main: #0F172A; } [data-themedark] { --ds-color-bg-primary: #0F172A; --ds-color-text-main: #F8FAFC; }4. 选型时应确认的三项工程指标评估 Token 方案时重点看下面三项工程指标产物组织方式确认工具不会把 Token 全部编译成静态类名Web 端优先输出 CSS Custom Properties。数据格式兼容性确认 Token 源文件可使用$value与$type等标准字段并能和现有设计工具对接。主题切换成本主题切换应尽量只修改根节点属性或加载少量覆盖变量避免在运行时递归计算整套样式对象。先量化产物体积、构建时间和主题切换成本再比较功能清单选型会更贴近实际需求。