设计系统必须通过工具链将Design Token自动转换为可运行、可验证、可部署的CSS代码，而非人工同步；核心路径是将Figma等设计源导出为JSON/YAML结构化数据，再经Style Dictionary或PostCSS（配合postcss-custom-properties）生成:root变量，确保单一数据源驱动全平台样式，杜绝硬编码与手动维护。
设计系统不是靠人手动同步的，而是靠工具链把设计Token自动转成可运行、可验证、可部署的CSS代码。 手动维护颜色变量、间距单位、断点值，迟早出错；自动化才是唯一能保证设计一致性与工程可维护性的路径。
Design Token如何转成CSS自定义属性
核心是把设计规范（如Figma里的颜色、字号、阴影）导出为结构化数据（JSON/YAML），再用工具生成:root块。不能直接手写--color-primary: #007bff——它必须从单一数据源生成。
- 推荐用
Style Dictionary：支持多平台输出，配置transform和format就能一键生成index.css和tokens.d.ts - 若用
PostCSS，搭配postcss-custom-properties插件，可读取JSON并注入变量，但需自己处理嵌套引用（如"primary": "{colors.blue.500}"） - 注意
var(--spacing-4)这类变量在CSS中不支持计算，别指望calc(var(--spacing-2) * 2)在所有浏览器生效——得提前算好值再输出
PostCSS插件链如何保障样式规范落地
光有变量不够，还得让开发者“不得不”遵守规范。PostCSS在这里不是编译器，而是守门员。
-
stylelint必须接入构建流程，禁用color: #ff0000硬编码，只允许color: var(--error) -
postcss-reporter配合自定义规则，能在构建时报错：“.button使用了未注册的--radius-5，请查tokens.json” - 加前缀不能只靠
autoprefixer——它只管语法兼容；真正要拦截的是“用了gap但目标浏览器不支持”，这得靠cssdb+ 自定义PostCSS插件做语义级检查
Gulp或Webpack里怎么让Token变更触发全量样式重建
设计改一个色值，前端必须立刻感知并重新生成所有依赖它的CSS文件，否则就会出现“新按钮用旧背景”的线上事故。
立即学习“前端免费学习笔记（深入）”；
- Gulp中用
gulp-watch监听tokens/*.json，触发build:tokens→build:css任务链，中间不能有缓存 - Webpack里不能只靠
file-loader，得用webpack-plugin-tokens这类插件，把Token JSON作为模块依赖，一旦变更就强制重编译所有@import "tokens.css"的文件 - 关键陷阱：
mini-css-extract-plugin默认不监听非CSS文件变更，必须显式配置watchOptions或改用webpack watch --watch-options-stdin
真正难的从来不是生成CSS变量，而是让整个团队在任何编辑器、任何提交、任何CI阶段，都绕不开那套规则。自动化不是省事，是设防。
