设计令牌Design Token
你可能会说
把主色、间距和圆角整理成设计令牌，别在每个组件里重复写一组数值。
设计令牌是集中命名和复用颜色、间距、字体等设计值的变量。例如把主按钮颜色命名为
color.brand.primary、常用间距命名为 space.16，组件引用名称而不是各自硬写色值和像素。改主题或统一调整时，令牌能让同一规则在网页、组件库或其他界面保持一致；它不是任意 CSS 变量的别名，也不替代设计决定本身。也常被叫作设计变量Design Tokens
一个品牌色怎样从令牌流向多个组件
12 --color-action: #374151;三个组件都引用同一个命名值。
设计令牌怎样保持一致
先命名稳定的设计决定：令牌应表达角色或尺度，例如品牌主色、危险提示色、卡片圆角和间距等级；名称比单个 # 色值或像素更能说明它为什么存在。
组件引用同一个来源：按钮、链接和选中状态从共享令牌读取值，主题或品牌调整时可集中更新。单个例外应先判断是否真是新的可复用规则。
你可以这样告诉 AI Agent
请把重复使用的品牌主色、错误色、间距和圆角整理为有语义的设计令牌，并让按钮、输入框和卡片引用它们。不要把只出现一次的临时值都建成令牌；改完后修改一个品牌色令牌，检查所有相关组件和深色主题是否同步。
接下来学什么
延伸阅读 · 权威出处
快速练习