Design Token
将颜色、间距、圆角、字体等视觉属性预定义为可复用的变量写入 CLAUDE.md，让 AI 在生成 UI 时自动保持视觉一致性——“AI 不会变美，是你要教它什么叫美，但你只需要教一次”
简介
Design Token 是一套将设计语言数字化的方法论。在传统开发中，Design Token 通常是 CSS 变量或 JSON 配置文件，定义颜色、间距、圆角、字体等基础视觉属性，确保团队所有组件使用同一套视觉语言。
在 AI Coding 语境下，Design Token 有了新的应用方式：将这些视觉属性写入 CLAUDE.md（项目行为规范文件），让 AI 在每次生成 UI 组件时自动套用。这是一种”复利效应”——定义一次，AI 在后续所有组件开发中自动保持一致。
Shawn 在开发阿布时的实践证明，Design Token 是解决”AI 写 UI 默认审美差”的最有效方案。比起说”做漂亮一点”（对 AI 没有信息量），给具体的色彩/间距/圆角数字和参考库名称，能让 Claude 生成审美在线的界面。
关键信息
- 类型：概念 / 设计方法论
- 领域：UI 设计 / AI 编程协作
- 核心机制：视觉属性变量化 → 写入行为规范 → AI 自动套用
- 适用场景：AI 辅助 UI 开发、非技术背景 PM 让 AI 写好看的界面
- 相关概念：Claude Code、AI前端生成、提示词工程
核心特性
定义
Design Token 由四类基础视觉属性构成：
| 属性类型 | 示例（阿布的 Design Token） |
|---|---|
| 主色调 | 克莱因蓝系 |
| 背景色 | 柔白 |
| 文字色 | 温暖灰 |
| 圆角 | 8 / 12 / 16 三档 |
在 CLAUDE.md 中的写法
将 Design Token 写入 CLAUDE.md 后，Claude 在每次创建新组件时自动套用。开发者不需要每次都重复指定视觉规范。
三种给 AI 描述审美的方式
- 贴截图：找一个喜欢的产品（Linear / Vercel / Notion），截图发给 Claude 说”这个风格”
- 定 Design Token：颜色/间距/圆角/字体先约定好写进 CLAUDE.md
- 指定参考库：“用 shadcn 的组件风格”、“间距参照 Apple HIG”
不同素材中的观点
- 2026-05-29-woshipm-shawn-abu-claude-code-6-weeks：Shawn 把 Design Token 定义为解决”AI 写 UI 默认审美差”的核心方案。关键洞察：①不要说”做漂亮一点”——对 AI 没有任何信息量；②Design Token 是”复利效应”——定义一次后 Claude 在所有后续组件中自动保持一致；③几轮迭代后 Claude 甚至能理解用户审美偏好（暗色主题/毛玻璃质感/细边框），但前提是先给具体参照
实用信息
快速上手步骤
- 在项目根目录创建或编辑 CLAUDE.md
- 添加 Design Token 节，定义四类基础属性：主色、背景色、文字色、圆角档位
- 可选：添加参考库名称（如”组件风格参照 shadcn”）
- Claude 在后续 UI 开发中自动套用
常用提示词
- “参考 Linear 的设计风格，定义一套 Design Token 写入 CLAUDE.md”
- “用 Apple HIG 的间距规范”
注意事项
- “做漂亮一点”对 AI 来说没有任何信息量——必须给具体数字或参照
- 第一次定义需要花时间，但后续是零成本复用
- 几轮迭代后 Claude 能学会你的审美偏好，但初始阶段必须明确指定