设计令牌与组件规则
定义
设计令牌与组件规则是设计系统中两类可执行的约束信息：设计令牌（design tokens）定义颜色、圆角、间距、字体等可复用的视觉参数；组件规则则规定按钮等界面组件应具备的外观、结构及适用方式。二者共同将原本依赖设计师或前端经验判断的视觉决策，转化为团队成员和 AI 都能读取、复用的明确规则。
在本文档中的语境
在 awesome-design-md 实践分享 摘要 所述的实践中，项目可引入包含既有设计规范的 DESIGN.md，让 AI 根据文档生成与目标风格匹配的 UI。原文以电商后台为例，认为在设计规则已被写清的情况下，生成的样式可较早达到预期，减少后续反复修改。
这类文档特别用于替代“按钮圆角大点”“配色高级点”之类的口头要求。此类表达缺少可验证的数值、色值或适用范围，不同人或模型容易做出不同理解；令牌和组件规则将这些要求改写为可引用的设计决策。
关键组成
设计令牌
设计令牌用于统一可重复出现的视觉参数，例如：
- 颜色：定义界面主色、背景色、文字色、状态色等可复用取值。
- 圆角：规定按钮、卡片、输入框等元素使用的圆角尺度。
- 间距：定义组件内部留白、组件间距与页面布局的间距体系。
- 字体：规定字号、字重、行高或不同文本层级的排版取值。
令牌的重点不是单独列出若干样式，而是让相同语义或相同层级的界面元素复用同一套参数，避免页面各处出现彼此无关的颜色、间距和圆角。
组件规则
组件规则在令牌之上约束具体组件的实现与使用方式。以按钮为例，规则可明确其颜色、圆角、内边距、文字样式等外观，也可进一步规定按钮的组成、状态和使用场景，例如主操作与次要操作的区分、是否允许图标、何时使用禁用态或危险操作样式。
因此，令牌回答“可使用哪些设计参数”，组件规则回答“某类界面组件应如何组合这些参数、在何种情况下使用”。
对 AI 界面生成的作用
当 Claude、Cursor 等 AI 编码工具能够读取项目中的设计令牌和组件规则时，它们生成代码不必只依赖即时提示词猜测风格，而可复用已有的颜色、间距、圆角和组件约束。这有助于提高 设计规范驱动的 AI 界面生成 的一致性与稳定性，并减少因反复描述样式要求产生的沟通和返工。
原文将这种方式与“纯靠 prompt 碰运气”对比：对于缺少专职设计师的小团队，现成或整理好的规则可作为页面设计基线，至少避免不同页面在视觉上明显失控。
细节与边界
- 规则应写得足够具体。仅写“高级”“大一点”“简洁”等主观词，不能消除理解偏差；应尽可能落到可复用的令牌、组件结构或使用条件。
- 规则不是一次性配置。设计系统演进后，旧令牌、旧组件规则或重复规则若未同步维护，可能形成过时甚至相互冲突的约束，反而使 AI 和开发者难以判断应遵循哪一种。
- 文档能提高一致性，但不能替代所有设计判断。新业务场景、无既有组件覆盖的交互，仍需要补充规则或进行人工评审。
- 规则的效果取决于工具确实获得并遵循文档上下文；未向 AI 提供相关文档时，AI 仍可能按通用经验生成不符合项目体系的样式。