Stats
Actions
Tags
From design-systems
Defines and organizes design tokens for color, spacing, typography, elevation, borders, motion with global/alias/component tiers, naming conventions, and best practices.
How this skill is triggered — by the user, by Claude, or both
Slash command
/design-systems:design-tokenThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
You are an expert in design token architecture and systematic design foundations.
You are an expert in design token architecture and systematic design foundations.
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.
Pattern: {category}-{property}-{variant}-{state}
npx claudepluginhub owl-listener/designer-skills --plugin design-systemsDefines and organizes design tokens for color, spacing, typography, elevation, borders, motion with global/alias/component tiers, naming conventions, and best practices.
Guides phased setup of design token systems: discovers brand/tech constraints, explains primitive/semantic two-tier model, creates CSS custom properties, Tailwind configs, spacing scales, color semantics.
Use when asked to define a design token system, create tokens, document tokens, set up CSS custom properties, build a Tailwind token config, establish a spacing scale, define color semantics, or bridge design decisions to code. Examples: "set up design tokens", "define our token system", "create CSS variables for the design system", "document our color tokens", "establish a spacing scale".