design-token — Claude Code skill for design system tokens
Defines and organises colour, spacing, type and elevation tokens with naming and usage rules. Useful when you are laying down the token layer.
npx skills add Owl-Listener/designer-skills --skill design-token -a claude-codeWhat design-token does
The skill has the agent work as a design token architect. It covers the categories: colour (global palette, alias tokens for surface, text and border, component tokens), spacing (base unit, a scale from xs to 3xl, contextual inset and stack), typography, elevation with a z-index scale, border radius and width, plus motion durations and easing.
There are three tiers. Global tokens hold raw values, alias tokens give a semantic reference such as color-action-primary, component tokens stay scoped to one place. Naming follows the pattern {category}-{property}-{variant}-{state}. The skill advises starting from global values and building semantic aliases on top, and never referencing raw values inside components.
Auditing tokens you already have is a different job — that is design-token-audit from designer-toolkit. Mapping across several brands goes to theming-system. This one is for the point where the token layer is still being set up.
What it helps with
- split a palette into global values and semantic aliases
- set a spacing scale from a base unit
- define shadow levels and a z-index scale
- design a naming scheme for state tokens
- write down usage rules for each token
Example prompts for the agent
- help me define colour and spacing tokens for a new project
- propose a naming scheme following category-property-variant-state
- separate our current values into global tokens and aliases
How to install design-token
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-token -a claude-code2Manually: put the files in place
~/.claude/skills/design-token/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/design-token/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-token -a codex2Manually: put the files in place
.agents/skills/design-token/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-token -a cursor2Manually: put the files in place
.cursor/skills/design-token/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills design-token2Manually: put the files in place
.github/skills/design-token/SKILL.md1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-token -a gemini-cli2Platform CLI
gemini skills install https://github.com/Owl-Listener/designer-skills --path design-systems/skills/design-tokenManually: put the files in place
.devin/skills/design-token/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill design-token -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-token
How do I install design-token in Claude?
Run npx skills add Owl-Listener/designer-skills --skill design-token -a claude-code. The skill lands in ~/.claude/skills/design-token/SKILL.md.
What does design-token do?
It helps define and organise tokens for colour, spacing, typography, elevation, border and motion, and sets naming and usage rules for them.
How is design-token different from design-token-audit?
design-token establishes the token layer from scratch, while design-token-audit from designer-toolkit checks existing usage. For multi-brand mapping there is theming-system.
Source text
SKILL.md · MIT
---
name: design-token
description: Define and organise tokens for colour, spacing, type, and elevation with naming and usage rules. Use when establishing the token layer. For auditing existing usage use `design-token-audit` (designer-toolkit); for multi-brand mapping use `theming-system`.
---
# Design Token
You are an expert in design token architecture and systematic design foundations.
## What You Do
You help define, organize, and document design tokens — the atomic values that drive visual consistency. You understand token taxonomies, naming hierarchies, and cross-platform mapping.
## Token Categories
- **Color**: Global palette, alias tokens (surface, text, border), component tokens
- **Spacing**: Base unit (4px/8px), scale (xs through 3xl), contextual (inset, stack, inline)
- **Typography**: Font families, size scale, weights, line heights
- **Elevation**: Shadow levels, z-index scale
- **Border**: Radius scale, width scale, style options
- **Motion**: Duration scale, easing functions
## Token Tiers
1. **Global tokens** — Raw values (e.g., blue-500: #3B82F6)
2. **Alias tokens** — Semantic references (e.g., color-action-primary)
3. **Component tokens** — Scoped usage (e.g., button-color-primary)
## Naming Convention
Pattern: {category}-{property}-{variant}-{state}
## Best Practices
- Start with global tokens, then create semantic aliases
- Never reference raw values in components
- Document each token with usage context
- Version tokens alongside your design system
- Support theming by keeping alias tokens abstract
© Owl-Listener · MIT · Owl-Listener/designer-skills
