Design Token
Define color, spacing, typography, elevation, border, and motion tokens with global, alias, and component tiers.
Overview
Design Token is an agent skill most often used in Build (also Validate, Operate) that defines and organizes multi-tier design tokens with naming and usage guidance.
Install
npx skills add https://github.com/owl-listener/designer-skills --skill design-tokenWhat is this skill?
- Six token categories: color, spacing, typography, elevation, border, motion
- Three-tier model: global, alias, and component-scoped tokens
- Naming pattern {category}-{property}-{variant}-{state}
- Spacing base unit and xs–3xl scale with inset, stack, inline context
- Theming via abstract alias tokens instead of raw values in components
- 6 token categories
- 3 token tiers (global, alias, component)
Adoption & trust: 579 installs on skills.sh; 1.5k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your UI uses one-off colors and spacing values so theming, dark mode, and cross-platform handoff break whenever you ship a new screen.
Who is it for?
Builders creating or refactoring a token set before implementing shared components in code or Figma variables.
Skip if: Throwaway prototypes with no reuse plan, or teams that only consume a third-party token package they cannot edit.
When should I use this skill?
Defining or reorganizing design tokens for color, spacing, typography, elevation, border, and motion with semantic tiers.
What do I get? / Deliverables
You get a tiered token map with documented categories and semantic aliases components can consume without hard-coded raw values.
- Token taxonomy by category
- Tiered global and alias token definitions
- Usage documentation per token group
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Token architecture is decided when visual foundations are built and referenced across later UI changes and theming. Frontend design-system work needs semantic tokens so components never bind to raw hex or pixel values.
Where it fits
Lock a minimal color and spacing scale before high-fidelity prototype screens multiply unique values.
Export alias and component tokens into CSS variables or a token JSON for the component library.
Bump token versions and remap aliases when introducing dark theme without touching every component file.
How it compares
Foundation architecture for token tiers and semantics—not a Figma plugin installer or CSS framework picker.
Common Questions / FAQ
Who is design-token for?
Solo founders and designers shipping consistent UIs who need structured color, spacing, and typography tokens for web or mobile.
When should I use design-token?
In Validate when scoping a prototype’s visual system, in Build when exporting tokens to code, and in Operate when versioning tokens for theme or rebrand updates.
Is design-token safe to install?
It provides design guidance only; review the Security Audits panel on this Prism page for the skill package before use.
Workflow Chain
Then invoke: naming convention
SKILL.md
READMESKILL.md - Design Token
# 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