Skill: Design Tokens
SkillFiles & storageGenerate, 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.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the Skill: Design Tokens skill
What this skill tells your AI
The instructions your AI receives, as published by plugin87/ux-ui-agent-skills in .claude/skills/design-tokens/SKILL.md and read by ahel’s review.
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.
Signals
- GitHub stars
- 1k
- Forks
- 104
- Last commit
- Aug 2026
Advanced
- Catalog kind
- skill
- Gateway key
design-tokens-plugin87- Source
- github.com/plugin87/ux-ui-agent-skills