Claude Code tokens 技能：生成多格式界面设计令牌
EnglishClaude Code 安装步骤
- 打开 GitHub 固定提交的 `.claude/skills/tokens/SKILL.md`，核对内容与使用条件。
- 在自己的项目中创建 `.claude/skills/tokens/`，把核对后的文件保存为 `.claude/skills/tokens/SKILL.md`。
- 在该项目根目录启动 Claude Code，在斜杠菜单中选择 `/tokens`。
中文摘要
从品牌色、字号比例和间距基准生成色彩、文字、间距、阴影、圆角与断点令牌，并导出四种格式。
SKILL.md 中文导读
可复现示例
在配套技能可用后调用 /tokens，把以下虚构项目设置作为生成输入。
design `Route Cards` | brand color `#336699` | body base `16px` | typography ratio `1.250`
spacing base `4px` | use formats requested by the skill工作步骤
- 准备品牌色及字号、间距基准。
- 用配套技能形成色板、语义色和量级。
- 补充圆角、阴影、断点，逐一核对输出格式。
验收方法
将 `#336699` 用作品牌色，正文使用 `16px`，基础间距为 `4px`。圆角中档使用 `8px`，统一输出 `CSS custom properties`、`Tailwind config`、`SCSS variables` 和 `W3C Design Tokens JSON`。
GitHub 原文 · 更新日期
适用环境
本地 Claude Code 项目。将同一 GitHub 固定版本的 Optik palette、semantic-color、type-scale 和 spacing 配套技能放入项目技能目录。
常见问题
多个前端消费者怎样检查令牌是否一致？
比对各格式的等效名称与数值。先核对基准色、字号、间距与圆角，再核对语义状态。