mcpField
D
design-tokens

design-tokens

github.com/plugin87设计与 UI3.1k558 次安装3 天前更新
代码仓库

关于 design-tokens

design-tokens 是用于在三层体系中创建和维护 DTCG 设计令牌的技能。它遵循项目令牌规范，并验证 JSON 结构与别名解析。

主要功能

  1. 01生成和更新 DTCG 令牌
  2. 02三层令牌组织方式
  3. 03生成 OKLCH 色板
  4. 04检查对比度阈值
  5. 05验证 JSON 与别名

适用场景

  1. 01为新色板创建令牌
  2. 02扩展现有令牌集
  3. 03验证令牌文件与别名

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill design-tokens

安装后在 Claude Code 中输入/design-tokens确认已加载。

详细介绍

技能：设计令牌

第 0 步：工具包是否存在？ 此技能会读取工具包中的文件。检查一次： ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING 仅当结果为 KIT_MISSING 时，表示只安装了技能文件夹，这是 npx skills add 的行为。请明确说明这一点，建议用户使用 npx ux-ui-agent-skills init 或安装插件，然后停止。不要猜测 无法打开的文件内容。

按照项目的 3 层系统生成并维护 DTCG（$type/$value）令牌。

步骤

  1. 阅读 ${CLAUDE_SKILL_DIR}/../../../.claude/rules/tokens-and-color.md 中的“令牌系统”和“颜色指南”，以及 ${CLAUDE_SKILL_DIR}/../../../.claude/rules/typography-and-spacing.md，了解规则（4px 基础单位、Major Third 比例、OKLCH 调色板生成、在语义层实现深色模式）。
  2. 阅读 ${CLAUDE_SKILL_DIR}/../../../tokens/ 中相关的现有文件，以匹配其结构：colors.json、typography.json、spacing.json、shadows.json、borders.json、breakpoints.json、motion.json、gradients.json、opacity.json、blur.json、sizing.json、states.json、theming.json。
  3. 生成或扩展令牌：
    • 原始令牌 = 原始值（不得直接使用）。语义令牌 = 用途别名。组件令牌 = 按组件划分。
    • 新调色板：生成 11 个 OKLCH 色阶；使用 a11y-audit 技能 / ${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py 验证 500 阶在白色背景上的对比度 ≥ 4.5:1（文本），600 阶 ≥ 3:1（UI）。
    • 多品牌/密度 → theming.json。
  4. 验证：运行 python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.py（检查 JSON 有效性 + 别名解析）。

输出

DTCG JSON。保留每个令牌上的 $description。使用引用，不要硬编码。

评论

支持 Markdown