mcpField
D
design-tokens-skill

design-tokens-skill

github.com/podo设计与 UI29178 次安装2 天前更新
代码仓库

关于 design-tokens-skill

design-tokens-skill 提供 W3C Design Token Community Group 规范及相关工具链的指导，适用于构建或迁移设计令牌系统的团队，也涵盖多主题管线。

主要功能

  1. 01DTCG 文件结构与值类型
  2. 02色彩空间与复合令牌指导
  3. 03令牌引用与别名
  4. 04主题解析器相关指导
  5. 05涵盖 jq、JSONata 和 Terrazzo
  6. 06Figma 令牌导出指导

适用场景

  1. 01设计令牌系统架构规划
  2. 02将令牌迁移至 DTCG 格式
  3. 03配置多主题令牌管线

安装

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

$npx skills add https://github.com/podo/design-agent-skills --skill design-tokens-skill

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

附带文件stub.yaml

详细介绍

design-tokens-skill

目录占位条目 — 完整技能：ilikescience/design-tokens-skill

决策树

  1. 是否已安装完整技能？ 检查此位置的技能是否仍包含 das: 块：

    • 全局：grep -q "^das:" ~/.agents/skills/design-tokens-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
    • 项目：grep -q "^das:" .agents/skills/design-tokens-skill/SKILL.md 2>/dev/null && echo "pointer" || echo "installed"
    • 没有 das: 块 → 已安装完整技能，调用它并继续
    • 存在 das: 块 → 转到第 2 步

  2. 检测范围，然后安装：

    检测范围：

    [ -e ~/.agents/skills/design-tokens-skill ] && echo "global" || echo "project"

    全局（使用 -g 安装）：

    npx skills add ilikescience/design-tokens-skill --skill design-tokens-skill -g -y

    项目（不使用 -g 安装）：

    npx skills add ilikescience/design-tokens-skill --skill design-tokens-skill -y

    **Claude Code：**发送任一命令作为以 ! 开头的聊天消息，即可在不离开当前对话的情况下运行该命令。

安装后调用

  • 技能名称：design-tokens-skill
  • 触发词："design tokens"、"DTCG tokens"、"W3C tokens"、"Terrazzo"、"token aliasing"

功能

深入掌握 W3C Design Token Community Group（DTCG）规范。涵盖令牌文件结构、值类型、色彩空间处理（sRGB、Display P3、OKLCH）、令牌间的引用与别名、复合令牌、主题解析器，以及完整工具链：jq、JSONata、Terrazzo 和从 Figma 导出。适用于设计令牌系统、将令牌迁移至 DTCG 格式，或配置多主题令牌流水线。

不适用场景

  • 不涉及令牌结构的 OKLCH 颜色生成 — 使用 color-expert
  • Figma 专用令牌变量 UI — 使用 figma-variables-tokens-generator
  • Figma 官方操作 — 使用 figma-official-skills

评论

支持 Markdown