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.
- Category
- Design systems
- Status
- Experimental
- Use when
- generate a color palette
- set up design tokens
- define a type scale
- validate our token files
- multi-brand theming
- Works on
- An existing tokens/ directory to extend, or a brief for a new palette
- Target platforms/brands needing theming
- Produces
- DTCG-format token JSON (primitive/semantic/component tiers) with $description preserved
- A validation pass confirming JSON validity and alias resolution
- Requires
- python
- Works with
- Claude Code, Codex, Cursor, OpenCode, Amp, Gemini CLI, GitHub Copilot, VS Code
- Tags
- design-tokens, token-naming, semantic-tokens, design-system, color, typography, spacing, dark-mode, multi-brand
- Source
- plugin87/ux-ui-agent-skills by plugin87 · MIT · adapted for this repository
- Related skills
- token-buildextract-design-mddesign-system-governancebetter-colorstoken-naming
Instructions from SKILL.md
Skill: Design Tokens
Produce and maintain DTCG ($type/$value) tokens following the project's 3-tier system.
Steps
- Read
.claude/rules/tokens-and-color.md→ "Token System" + "Color Guidelines" and.claude/rules/typography-and-spacing.mdfor the rules (4px base, Major Third scale, OKLCH palette generation, dark-mode-at-semantic-layer). - Read the relevant existing files in
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. - 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-auditskill /scripts/contrast.py. - Multi-brand/density →
theming.json.
- Validate: run
python3 scripts/validate_tokens.py(JSON validity + alias resolution).
Output
DTCG JSON. Preserve $description on every token. Reference, never hardcode.
Supporting files
3 more files in this skill's folder. Markdown opens as a page, other text files open as source, and anything else downloads as it is.