design-tokens · plugin87 — Claude Code skill: tokens and setup
Create, extend, and validate DTCG design tokens with a three-tier structure. Useful for palettes, typography, theming, and other interface values.
npx skills add plugin87/ux-ui-agent-skills --skill design-tokens -a claude-codeWhat design-tokens does
The skill builds tokens across primitive, semantic, and component tiers. It reads the project rules and relevant files under tokens/, then returns DTCG JSON using $type, $value, and $description. Supported categories include color, typography, spacing, shadows, borders, breakpoints, motion, and more.
For a new palette, it generates 11 OKLCH shades and checks contrast with a11y-audit or contrast.py; validate_tokens.py checks JSON and alias resolution. The project’s rules, token files, and scripts must be present. If you install only the skill with npx skills add, it stops when that kit is missing. Multi-brand and density settings go in theming.json.
What it helps with
- generate an OKLCH color palette
- organize tokens into primitive, semantic, and component tiers
- add typography and spacing values
- configure tokens for multiple brands
- validate JSON and resolve aliases
Example prompts for the agent
- Create an OKLCH palette and check contrast for text and interface elements.
- Add semantic and component typography tokens to the existing structure.
- Validate the token files and fix alias errors.
How to install design-tokens
1Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill design-tokens -a claude-code2Manually: put the files in place
~/.claude/skills/design-tokens/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/design-tokens/
1Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill design-tokens -a codex2Manually: put the files in place
.agents/skills/design-tokens/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill design-tokens -a cursor2Manually: put the files in place
.cursor/skills/design-tokens/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install plugin87/ux-ui-agent-skills design-tokens2Manually: put the files in place
.github/skills/design-tokens/SKILL.md1Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill design-tokens -a gemini-cli2Platform CLI
gemini skills install https://github.com/plugin87/ux-ui-agent-skills --path .claude/skills/design-tokensManually: put the files in place
.devin/skills/design-tokens/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add plugin87/ux-ui-agent-skills --skill design-tokens -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about design-tokens
How do I install design-tokens in Claude Code?
Run npx skills add plugin87/ux-ui-agent-skills --skill design-tokens -a claude-code. The skill file will be available at ~/.claude/skills/design-tokens/SKILL.md.
What does design-tokens do?
It creates, extends, and validates DTCG tokens across primitive, semantic, and component tiers. Its output is JSON with token descriptions.
What does the skill need to run?
It reads project rules and files under tokens/, and runs Python scripts for validation. If you install only the skill folder without the project kit, it stops; its instructions point to npx ux-ui-agent-skills init or plugin installation.
Source text
SKILL.md · MIT
---
name: design-tokens
description: 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.
---
# Skill: Design Tokens
> **Step 0: is the kit here?** This skill reads files from the kit. Check once:
> `ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING`
> On `KIT_MISSING` only the skill folders were installed, which is what
> `npx skills add` does. Say so plainly, point the user at
> `npx ux-ui-agent-skills init` or the plugin install, and stop. Do not guess the
> contents of a file you could not open.
Produce and maintain DTCG (`$type`/`$value`) tokens following the project's 3-tier system.
## Steps
1. Read `${CLAUDE_SKILL_DIR}/../../../.claude/rules/tokens-and-color.md` → "Token System" + "Color Guidelines" and `${CLAUDE_SKILL_DIR}/../../../.claude/rules/typography-and-spacing.md` for the rules (4px base, Major Third scale, OKLCH palette generation, dark-mode-at-semantic-layer).
2. Read the relevant existing files in `${CLAUDE_SKILL_DIR}/../../../tokens/` to match structure: `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. Generate/extend tokens:
- Primitives = raw values (never used directly). Semantic = purpose aliases. Component = component-scoped.
- New palettes: generate 11 OKLCH shades; verify 500 ≥ 4.5:1 on white (text), 600 ≥ 3:1 (UI) using the `a11y-audit` skill / `${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py`.
- Multi-brand/density → `theming.json`.
4. **Validate**: run `python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.py` (JSON validity + alias resolution).
## Output
DTCG JSON. Preserve `$description` on every token. Reference, never hardcode.
© plugin87 · MIT · plugin87/ux-ui-agent-skills
Similar skills
Everything for Design →design-tokens by other authors comes first.
