Design Tokens

设计原则

• 限制选择：只使用预定义的 7 档间距，避免随意值（如 18px、22px）
• 8px 网格：所有间距都是 8 的倍数，确保对齐和视觉节奏
• 10-Foot 优化：相比桌面端放大 1.5 倍，确保远距离可识别

动效设计原则

• 限制选择：只使用 3 档时长，避免随意值（如 280ms、350ms）
• 可组合性：Duration + Easing 可以组合出 90% 的场景
• 性能优先：根据设备芯片能力自动降级动效复杂度

在代码中使用 Tokens

/* ✅ 正确：使用 Token */
.button {
  padding: var(--spacing-md);
  background: var(--color-primary);
  border-radius: var(--radius-md);
  transition: all var(--duration-normal) var(--ease-out);
}

/* ❌ 错误：硬编码数值 */
.button {
  padding: 16px;
  background: #0066ff;
  border-radius: 8px;
  transition: all 300ms ease-out;
}

AI Coding 中使用 Tokens

将 Tokens 定义保存为 design-tokens.json，放在项目根目录。使用 Cursor 或 Claude 时，在 Prompt 中说明：

"使用项目中的 Design Tokens（见 design-tokens.json），
为这个按钮添加样式。
- 使用 --spacing-md 作为内边距
- 使用 --color-primary 作为背景色
- 使用 --duration-normal 作为动画时长"

AI 会读取 Token 定义，生成符合规范的代码。

Token 命名规范

• 语义优先：使用 --color-primary 而不是 --color-blue
• 层级清晰：分类-属性-变体，如 --spacing-md、--color-primary-hover
• 避免缩写：使用 --duration-normal 而不是 --dur-norm