skills.rest
hulusi-tunc
hulusi-tuncCOMMUNITY
Explore all skills by this author →
GitHub

design-token

Define and organize design tokens for consistent cross-platform UI.

3|Updated Mar 28, 2026
Search Tags:#theming#documentation#design-system#design-token#ui-consistency#token-naming
One-click install
npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill design-token-hulusi-tunc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-token
Source: https://github.com/hulusi-tunc/unicorn-skills/tree/main/.claude/skills/design-systems--design-token
Command: npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill design-token-hulusi-tunc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

A guideline-driven approach to defining, organizing, and maintaining design tokens that ensure visual consistency across platforms.

Core Features & Use Cases

  • Token Categories: Color, Spacing, Typography, Elevation, Border, and Motion with explicit naming and usage rules.
  • Token Tiers and Naming: Global, Alias, and Component tokens with a consistent {category}-{property}-{variant}-{state} naming pattern to enable themeable systems.
  • Theming and Versioning: Supports theming and versioned token sets to manage evolution of design systems.
  • Documentation and Governance: Encourages comprehensive documentation of usage contexts and governance around token definitions.

Quick Start

Define your first token set by documenting color, spacing, and typography tokens in your design system and reference them in your UI code.

Frequently Asked Questions about design-token

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure design tokens for consistent UI across web and mobile?▼

Structure design tokens using global, alias, and component tiers to drive UI consistency across web and mobile. Organize tokens by category, applying a consistent naming pattern to enable themeable systems.

What is the naming convention for design tokens in a themeable system?▼

The naming convention for design tokens follows a {category}-{property}-{variant}-{state} pattern. This structure enforces consistent naming and enables themeable design systems across global, alias, and component tiers.

What design token categories do I need for a complete UI design system?▼

Design token categories needed for a complete UI design system include color, spacing, typography, elevation, border, and motion. Each category includes explicit naming and usage rules to maintain visual consistency.

Can I manage theming and versioning for design tokens?▼

You can manage theming and versioned token sets to handle the evolution of your design system. Versioning design tokens allows teams to track changes and maintain governance over token definitions across platforms.

How do I document design token usage and governance?▼

Document design token usage by comprehensively recording usage contexts and establishing governance around token definitions. This approach ensures teams apply color, spacing, and typography tokens correctly across platforms.

Related Skills

Explore More Design & Creative Skills→
simotasimota
68

Muse

Define and manage design tokens for colors, spacing, and typography.

Community
Advanced
d0d012d0d012
9

figma-design

Extract tokens, styles, and constraints from Figma design files.

Community
Advanced
PTKDrakePTKDrake
1

intentui

Enforce Intent UI component library conventions for React UI elements.

Community
Advanced
anthrilanthril
3

design-tokens

Generate W3C Design Tokens JSON and export CSS variables, Tailwind v4, and Style Dictionary formats.

Official
Advanced