Design tokens 应显式绑定到 tailwind.config.js 的 theme.extend，统一收口颜色、间距等值，禁用 CSS 变量直写和内联样式，通过工具链强制约束使用路径。
大型团队的设计规范 Token 不是靠“加更多配置”管住的，而是靠约束 class 使用路径、统一 token 来源、切断绕过体系的快捷方式来守住边界的。
如何把 design tokens 显式绑定到 tailwind.config.js 的 theme.extend
设计系统里的颜色、间距、字体这些值，必须全部收口进 theme.extend，不能散落在 theme.colors 或直接写死在组件里。比如品牌色不能只配 blue: '#0066cc'，而要组织成语义化命名空间：
-
colors.brand.primary对应主品牌色，colors.brand.secondary对应辅助色 -
spacing.container、spacing.section替代裸写的px-8、py-12 - 所有数组类值（如
fontSize、borderRadius）用对象形式定义，方便后续被 JS 消费或导出到 Figma
这样做的好处是：VS Code 插件能提示 bg-brand-primary，PurgeCSS 能准确识别哪些类实际被用到，TypeScript 类型插件也能基于 theme 生成 twMerge 兼容的类型定义。
为什么不能让设计师直接改 CSS 变量再 bg-[var(--brand-primary)]
这种写法看起来灵活，但会立刻破坏三个关键链路：
立即学习“前端免费学习笔记（深入）”；
Openclaw Token Memory Optimizer
下载
{"answer":"OpenClaw Agent 优化套件，防止令牌泄露与上下文膨胀。适用于需实现后台任务隔离或重置与摘要工作流（RAG）的场景。"}
-
bg-[var(--brand-primary)]不会被 PurgeCSS 删除，哪怕项目里一次都没用过，也会打进生产包 - VS Code 的 Tailwind IntelliSense 对
var(--xxx)零提示，无法跳转、无法补全、无法校验拼写 - 无法在 JS 层通过
theme.colors.brand.primary获取值——这意味着你没法自动生成设计文档、没法做主题预览、也没法和 Style Dictionary 同步
真正需要运行时换肤（比如用户选色）才用 CSS 变量；静态设计系统请坚持走 theme 驱动。
怎么让多主题（light/dark）token 在一个 key 下自动切换
别写两套类名，比如 bg-surface-light 和 bg-surface-dark。正确做法是在 theme.extend.colors.surface 里定义明暗双值：
surface: {
DEFAULT: '#ffffff',
dark: '#1a1a1a'
}
然后统一用 bg-surface，配合 darkMode: 'class' 和 data-theme="dark" 触发切换。这样：
- 组件代码不感知主题，
bg-surface在 light 下取DEFAULT，在 dark 下自动 fallback 到dark - 所有响应式类（如
md:bg-surface）、状态类（如hover:bg-surface）都天然继承该行为 - 避免出现
dark:bg-surface-dark这种冗余写法，降低维护成本
团队协作中如何防止成员绕过 token 体系写内联样式
最有效的不是靠 Code Review 提醒，而是从工具链堵死出口：
- 在 ESLint 中启用
@nextjs/next/no-html-link-for-pages类似逻辑的自定义规则，禁止style={{}}和className="bg-[#0066cc]"这类写法 - CI 流程里跑
grep -r "bg-\[" src/ | grep -v "bg-brand\|bg-surface"，发现就报错 - 提供
classNames工具函数（如classNames.button.primary），并在 TypeScript 接口中锁定可选值，让非法组合在编辑器里直接报错
Token 管理最难的不是配置，而是让所有人**没有绕过的理由和能力**——一旦出现 text-[14px] 或 border-[1.5px]，说明体系已经松动了。
