关于 tokens
tokens 是 ui-craft 的子技能，用于审查或建立项目的设计令牌。它检查令牌层级、类别覆盖、暗色模式意图、命名和任意值；若未发现令牌，则提出涵盖明暗模式的基础方案。
主要功能
- 01盘点七类设计令牌
- 02审查三层令牌覆盖
- 03检查暗色模式意图
- 04检查令牌命名和原始值
- 05提出明暗模式令牌基础方案
适用场景
- 01审查现有令牌系统
- 02发现绕过设计令牌的值
- 03为项目建立令牌基础
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/tokens确认已加载。
详细介绍
上下文： 此子技能是更广泛的 ui-craft 技能的一个视角。如果也安装了 ui-craft 技能，请先阅读其 SKILL.md，了解发现 + 反劣质设计 + 工艺测试，然后再应用以下特定视角。
继续之前，请阅读 references/tokens.md。其中定义了三层约定（原始值 → 语义 → 组件）和深色模式意图测试。
步骤 1：检测现有设计令牌
扫描项目中的设计令牌定义：
:root、[data-theme]、[data-mode]或主题包装选择器中的 CSS 变量theme.extend或theme下的 Tailwind 配置（tailwind.config.js/ts）- CSS-in-JS 主题对象（
theme.ts、*.styles.ts、styled.d.ts、ThemeProvider） design-tokens.json或tokens.json（Style Dictionary / Theo）globals.css、variables.css、tokens.css
建立清单：7 个类别（颜色 / 间距 / 字体 / 圆角 / 阴影 / 动效 / z-index）中有哪些，包含哪些层（原始值 / 语义 / 组件），以及是否定义了浅色和深色主题。
步骤 2：根据 $ARGUMENTS 和清单选择路径
- "audit" → 仅执行审计（步骤 3）。不提出方案。
- "establish" → 跳过审计，转到步骤 4。
- "color" / "spacing" / "type" / "radii" / "shadows" / "motion" / "z-index" → 审计和任何方案都聚焦于该类别。
- 留空 → 如果存在设计令牌，则执行审计；如果未找到任何设计令牌，则建立设计令牌。
步骤 3：审计（存在设计令牌）
根据 references/tokens.md 中的约定进行评估。按严重程度列出差距，不要先提出代码方案。
检查：
- 三层覆盖情况 — 是否具备原始值、语义和组件这三层？最常见的缺口是缺少语义层：虽然有原始值，但没有任何设置会随深色模式切换，也没有定义表面层级。
- 七类覆盖情况 — 颜色 / 间距 / 字体 / 圆角 / 阴影 / 动效 / z-index 中是否有缺失项？标记每个缺失类别。
- 有意设计的深色模式 — 执行深色模式意图测试：深色模式是否不只是反转
--text-primary？--surface-canvas是否为带色调的近黑色（而非#000）？强调色的色度是否降低了 10-15%？阴影是否替换为边框环？ - 命名规范 — 原始值是否按数值命名（
--gray-500），而非按用途命名（--button-bg）？语义是否按用途命名（--text-primary），而非按数值命名（--gray-900-text）？ - 避免任意值 — 是否存在绕过设计令牌系统的内联颜色、间距或 z-index 值？
输出格式：
| 严重程度 | 类别 | 发现 |
|---|---|---|
| 严重 | 深色模式 | --surface-canvas 为 #000 — 未通过深色模式意图测试 |
| 高 | 语义 | 未定义表面层级 — 组件使用原始值 |
| 中 | 阴影 | 仅使用单层阴影 — 缺少环境光层 |
| 低 | Z-index | 3 个组件中存在任意值（z-index: 999） |
指出缺失项。除非用户提出要求，否则审计期间不要提出代码方案。
步骤 3b — 收敛模式（明确选择加入）
加载 skills/ui-craft/references/loops.md 中的 token-consistency 预设（预算 = loops.md 中定义的默认循环预算）。输出运行前成本提示。修复系统外的最高优先级取值（原始十六进制颜色、任意圆角或魔法间距）后，重新扫描，直至系统外取值为零或预算耗尽。
第 4 步：建立基础（未找到令牌）
直接提出一个最精简的基础方案。覆盖全部 7 个类别。始终同时包含浅色和深色区块——两者都是有意设置的。
最精简的基础顺序：
- 基础值 — 中性色阶（gray-50 至 gray-950）、一个强调色阶、语义颜色基础值、间距比例、字号比例、圆角、阴影、动效、z-index。
- 语义 — 表面层级（5 个层级）、文本角色、边框角色、强调色角色、状态角色（成功 / 警告 / 错误 / 信息）。
- 组件令牌 — 除非已经在构建特定组件，否则暂缓处理。
除非项目全程使用 sRGB，否则颜色请使用 OKLCH——如果项目全程使用 sRGB，请标出这一差距并建议使用 OKLCH，但不要自动转换。
写入文件前，先询问要写入哪个文件。 根据项目结构进行判断，并建议一个文件：
- Tailwind 项目 →
globals.css（在:root中放置 CSS 变量） - CSS-in-JS →
theme.ts（导出的主题对象） - 原生 CSS →
tokens.css（独立的变量文件） - 跨平台 / 多使用方 →
design-tokens.json（Style Dictionary 格式）
写入前请与用户确认。
第 5 步：绝不覆盖
如果项目已有令牌文件，请以补丁形式提出新增内容——在差异块中展示改动：
:root {
+ /* ── Semantic surface stack (new) ── */
+ --surface-canvas: var(--gray-50);
+ --surface-raised: var(--gray-100);
+ --surface-overlay: #fff;
+ --surface-sunken: var(--gray-200);
+ --surface-inverse: var(--gray-900);
}
让用户自行应用。除非用户批准，否则不要直接写入。
限制
- 不要将 Tailwind 强加给原生 CSS 项目。遵循项目现有语法。
- 如果项目始终使用 sRGB，不要强加 OKLCH——标出这一点并建议迁移，但不要强制执行。
- 遵循现有命名约定——如果项目使用
--color-primary而不是--accent-500，请沿用该模式，而不要引入并行的命名方案。
下一步： /craft — 基于你刚建立的基础（第 1 阶）继续构建。