What is the design-token skill?
The design-token skill is a short instruction file in the design-systems plugin of Owl-Listener's designer-skills pack. It makes your agent define and document the atomic values behind a design system in global, alias and component tiers, using one naming pattern, so components never reference raw values directly.
The design-token skill belongs to the design-systems plugin in Owl-Listener's designer-skills pack. Its SKILL.md calls the agent an expert in design token architecture and systematic foundations, and asks it to define, organize and document the atomic values that drive visual consistency.
It applies when you are establishing the token layer. Auditing how tokens are already used goes to design-token-audit in the designer-toolkit plugin, and mapping tokens across multiple brands goes to theming-system, according to the skill description.
Three tiers of tokens
- Global tokens hold raw values, such as blue-500 set to #3B82F6.
- Alias tokens give those values meaning, such as color-action-primary.
- Component tokens scope a value to one part of the interface, such as button-color-primary.
The naming pattern is category, property, variant, state. Components should never point at a raw value, which keeps theming possible because alias tokens stay abstract.
Token categories it covers
- Color: a global palette, alias tokens such as surface, text and border, and component tokens.
- Spacing: a 4px or 8px base unit, an xs to 3xl scale, and inset, stack and inline contexts.
- Typography: font families, size scale, weights and line heights.
- Elevation: shadow levels and a z-index scale.
- Border: radius and width scales and style options.
- Motion: a duration scale and easing functions.
Who the design-token skill is for
Best for
- Starting a token layer for a new product or cleaning up a pile of hard-coded values.
- Teams that need every token documented with its usage context.
- Systems where tokens will be versioned along with the rest of the design system.
Not for
- Auditing token usage that already exists. Use design-token-audit for that.
- Mapping tokens across several brands. The description points to theming-system.
Use it with UiChemy
Tokens give the names to apply in your Figma file or page build. UiChemy Figma to WordPress converts a design into a WordPress site, and Composer writes HTML, CSS and JS in Elementor or Gutenberg. Click Get Started on uichemy.com. Related pages: tailwind-design-system and color-system.
How to install Design Token Skill: Name and Tier Your Tokens
/plugin marketplace add Owl-Listener/designer-skillsRegister the source
Paste the command above into the agent. It only records where the skills are stored, and nothing is installed yet.
Install design-systems
Use
/plugin install <name>@designer-skillswith design-systems as the name, or open /plugin and tick the plugin on the Discover tab. design-token comes with it.Gemini CLI users
Per the README, clone the repository somewhere temporary, create .gemini/extensions in your project and copy the repo's .gemini/extensions contents there.
Brief the agent
Describe your product and ask it to define design tokens, or paste a stylesheet and ask for the values to be organised into tiers.
Check that it loaded
Ask for a token set for one small product. The reply should separate global, alias and component tokens and name each one with the category, property, variant, state pattern.
Key features
- Six token categoriesColor, spacing, typography, elevation, border and motion are each defined, so the token layer covers more than a palette.
- Global palette tierRaw values sit at the base, with blue-500 as #3B82F6 given as the example.
- Alias tierSemantic references such as color-action-primary give raw values a purpose and carry theming.
- Component tierScoped tokens such as button-color-primary tie a value to one component.
- Naming conventionOne pattern, category, property, variant, state, so every token name can be read the same way.
- Spacing systemA 4px or 8px base unit, an xs to 3xl scale and contextual inset, stack and inline spacing.
- Elevation and borderShadow levels, a z-index scale, radius and width scales, and style options.
- No raw values in componentsA best practice says components never reference raw values, which keeps alias tokens free to change with a theme.
- Documented usageEach token is documented with its usage context, and tokens are versioned alongside the design system.
Frequently asked questions
What is the design-token skill?
It is a skill in the design-systems plugin of Owl-Listener's designer-skills pack. It instructs an AI agent to define, organize and document design tokens across color, spacing, typography, elevation, border and motion, in three tiers with a consistent naming pattern. Its aim is visual consistency across a product.
How do I install design-token?
Run /plugin marketplace add Owl-Listener/designer-skills, then /plugin install <name>@designer-skills with design-systems as the name, or choose the plugin on the Discover tab. Gemini CLI users copy the repository's .gemini/extensions folder into their project, following the README. The design-token skill ships inside that plugin.
What are the three token tiers?
Global tokens are raw values like blue-500. Alias tokens are semantic references like color-action-primary. Component tokens are scoped to one component, like button-color-primary. The rule that follows is to start global, add semantic aliases, and never let a component reference a raw value.
What naming pattern does the skill use?
It gives one pattern: category, property, variant, state. The aim is for every token name to read the same way, so people can predict a name without looking it up. The skill also asks for each token to be documented with its usage context.
Which AI coding agents can use design-token?
The pack's README is written for Claude Code, and each plugin also works as a Gemini CLI extension. No other agent is named. The skill is plain instruction text, so another agent that reads skill folders may work, but the README does not promise it.
When should I use design-token instead of theming-system?
Use design-token when you are establishing the token layer itself. The skill description says to use theming-system for mapping tokens across multiple brands, and design-token-audit in the designer-toolkit plugin for auditing existing usage. Design-token comes first in the order of work.
Can design-token read tokens from my existing CSS?
The SKILL.md does not describe extracting tokens. That job belongs to the /design-systems:tokenize command in the same plugin, which the README says extracts tokens from an existing design or stylesheet. Related page: extract-design-system.
What license does the design-token skill use?
The designer-skills repository is MIT licensed according to GitHub. That covers reading and reusing the skill text, and you should check the repository for the full license text before you reuse it in anything you distribute.