Communitygithub.com

plugin87/token-build

设置或运行 Token 构建流水线——将 DTCG tokens/*.json（事实源）转换为平台产物（CSS 变量、Tailwind @theme、JS/TS、iOS 资源目录、Android、Compose），使用 Style Dictionary / Tokens Studio / W3C DTCG 导出。当用户需要从 Token 生成平台主题文件、搭建 Token CI 或多平台 Token 输出时使用。

token-build 是什么？

此技能用于搭建或运行基于 DTCG 格式 Token 的多平台构建流水线。它读取 tokens/*.json 作为唯一数据源，通过 Style Dictionary（默认）、Tokens Studio（配合 Figma 集成）或 W3C DTCG 导出等工具，将设计 Token 自动转换为平台可用的产物，包括 CSS 变量、Tailwind v4 @theme 配置、类型化 JS/TS 代码、iOS 资源目录（Color.DS、Spacing）、Android colors.xml 及 Compose 主题。流水线严格遵循别名解析规则：解析所有别名得到平台最终值，暴露语义 Token 和组件 Token（基础 Token 保持内部），仅以增量形式生成基础/暗色/品牌/密度覆盖。CI 集成方面，当 tokens/*.json 发生变化时，自动执行验证脚本（scripts/validate_tokens.py），重新生成所有产物，并检查提交的产物是否过时；同时利用 scripts/contrast.py 对颜色进行对比度把关。该技能通过统一的数据源和工作流，确保多平台主题的一致性与可维护性，适用于开发工具如 Claude Code、Cursor 或 Codex 中的自动化任务。

兼容平台~Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/token-build
查看原文→浏览所有技能

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

文档

技能：Token 构建

将 DTCG Token 事实源转换为平台就绪的输出。Token 只需编写一次；每个平台的输出自动生成。

步骤

  1. 阅读 workflows/token-build.md（架构、工具选项、解析规则、输出目标、CI）。
  2. 选择工具：Style Dictionary（多平台，默认）、Tokens Studio（Figma 拥有的 Token —— 与 figma-integration 配合使用）、W3C DTCG 导出，或小型自定义脚本（参考 scripts/validate_tokens.py）。
  3. 遵循解析规则：将别名解析为每个平台的最终值；暴露语义 Token + 组件 Token（基础 Token 保持内部）；仅以增量形式输出基础/暗色/品牌/密度覆盖（tokens/theming.json）；按 $type 格式化。
  4. 生成请求的目标：CSS :root 变量、Tailwind v4 @theme、类型化 JS/TS、iOS 资源目录 + Color.DS/Spacing、Android colors.xml/Compose 主题。
  5. 配置 CI：当 tokens/*.json 发生更改时，运行 scripts/validate_tokens.py，重新生成产物，如果提交的产物已过时则失败；使用 scripts/contrast.py 对颜色进行把关。

验证（完成定义）

  • python3 scripts/validate_tokens.py 通过（无未解析的别名）。
  • 重新生成与已提交产物相比无差异。
  • 暗色/品牌/密度输出仅包含增量，而不是完整副本。

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

plugin87/design-tokens

Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.

plugin87/governance

Govern how the design system evolves — SemVer for tokens/components, the contribution workflow, deprecation policy, and change communication. Use when the user wants to add/promote/deprecate a component or token, decide a version bump, set up a contribution process, or keep the system from fragmenting.

plugin87/image-to-code

Turn a reference image, screenshot, or mockup into token-driven, accessible code — infer the design system from the reference (palette, type scale, spacing, radius, layout archetype), map it to the 3-tier tokens, rebuild it, then verify with the kit's gates. Use when the user provides a design/screenshot and wants matching UI code.

plugin87/performance

Optimize UI performance against Core Web Vitals — LCP, INP, CLS — with loading/code-split strategy, layout-shift prevention, and animation performance rules. Use when the user wants to improve speed, fix jank or layout shift, hit Web Vitals budgets, or make a UI feel fast on low-end devices.

plugin87/prototype

Move an idea up the fidelity ladder (content-first → wireframe → low-fi → high-fi → code) with a validation plan at each level, plus user-journey mapping and usability-testing scripts. Use when the user wants to prototype, wireframe, map a user flow, or plan/run usability testing.

plugin87/redesign

Upgrade an existing website or app to premium quality without breaking functionality — audit the current design, identify generic/AI tells, then apply taste and system rules surgically. Use when the user wants to improve, modernize, polish, or "make better" an existing UI/codebase.

plugin87/ux-writing

Write or review UI copy — buttons, errors, empty states, microcopy, notifications, labels — using the voice & tone system (clear, concise, useful, human, honest) with the what→why→how error formula and inclusive-language rules. Use when the user needs interface copy, error messages, empty-state text, or a copy review.

相关技能

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community