What is the design-tokens skill?
The design-tokens skill is a SKILL.md in the plugin87/ux-ui-agent-skills kit. It produces and maintains design tokens in DTCG format using a primitive, semantic and component hierarchy. It covers colors, type, spacing, shadows, motion and theming, and ends by running a script that validates the JSON and resolves aliases.
The design-tokens skill teaches an agent to write tokens in DTCG format, with a $type and a $value on every entry. It ships in the plugin87/ux-ui-agent-skills kit, beside the token files it edits and the script that checks them.
Use it when you want a color palette, a type scale, spacing, shadow, radius or motion tokens, multi-brand theming, or a check that existing token files are valid.
The three token tiers
- Primitives hold raw values and are never used directly.
- Semantic tokens are purpose aliases, such as the color that means a primary action.
- Component tokens are scoped to one component.
- Dark mode is applied at the semantic layer, so primitives stay constant.
How a palette is produced
New palettes are generated as eleven OKLCH shades. The skill then checks that the 500 shade reaches at least 4.5 to 1 on white for text, and that the 600 shade reaches 3 to 1 for interface elements.
Contrast doubts go to a Python script or to the kit's accessibility audit skill. Spacing starts from a 4 pixel base, and the type scale follows Major Third.
What changes in your agent's output
- Output is DTCG JSON that matches the structure of the existing token files, not a loose list of CSS variables.
- Every token keeps its $description.
- Values are referenced rather than hardcoded, so a theme change touches one layer.
- The run ends with validation of JSON syntax and alias resolution.
Who the design-tokens skill is for
Best for
- Starting a token system from scratch with a sensible hierarchy and accessible palette.
- Adding multi-brand or density variants to existing tokens through the theming file.
- Auditing token files for broken aliases before a release.
Not for
- Standalone use. It reads rules and files from the kit, and stops with a message if the tokens folder is missing.
- Deciding who may change tokens or how releases work. For a broader design system skill, see uiux-design-system.
- Starting from an existing brand. For brand-driven starting points, try brand-extract.
Use it with UiChemy
Tokens define the look, UiChemy delivers it. Figma to WordPress brings Figma frames across as editable pages, and Composer edits the result in Elementor or Gutenberg. For rules inside Figma, read these design system rules. Click Get Started on uichemy.com.
How to install Design Tokens Skill: DTCG Tokens in Three Tiers
/plugin marketplace add plugin87/ux-ui-agent-skillsAdd the marketplace
In Claude Code, run
/plugin marketplace add plugin87/ux-ui-agent-skills.Install the plugin
Run
/plugin install ux-ui-agent-skills@ux-ui-agent-skills. The README names design-tokens among the skills the model reaches for on its own.Keep the kit intact
The skill reads rules, token files and a validation script from the kit. If only a skill folder is present, SKILL.md tells the agent to point you at
npx ux-ui-agent-skills initor the plugin install.Ask for tokens
Describe the brand, the platforms and any dark mode needs, then ask for a color palette, a type scale or a full token set.
Check that it loaded
Ask for a small palette. The agent should read the existing token files, write DTCG JSON with descriptions, check the contrast of the 500 and 600 shades, and run validate_tokens.py.
Key features
- DTCG formatTokens use the $type and $value structure, and the skill preserves a $description on every token.
- Three tier hierarchyPrimitive, semantic and component tiers keep raw values, purpose aliases and component scoping in separate layers.
- Thirteen token files to matchThe agent reads existing files for colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states and theming before it writes anything.
- OKLCH palette generationA new palette gets eleven OKLCH shades. The 500 shade must reach 4.5 to 1 on white for text, and the 600 shade must reach 3 to 1 for interface use.
- Spacing and type rulesA 4 pixel base unit and a Major Third scale come from the kit's typography and spacing rules, which the agent reads first.
- Dark mode at the semantic layerLight and dark values are decided on semantic tokens, so primitives remain a single source of raw values.
- Multi-brand and density themingBrand and density variants are routed through the theming file instead of copied token sets.
- Contrast toolingColor pair doubts are settled with the kit's contrast script or its accessibility audit skill.
- Validation stepvalidate_tokens.py checks JSON validity and resolves aliases, so a broken reference shows up before anyone consumes the tokens.
Frequently asked questions
What is the design-tokens skill?
It is a skill in the plugin87/ux-ui-agent-skills repository. It guides an AI coding agent to generate, extend or audit design tokens in DTCG format, organized as primitive, semantic and component tiers, and to validate the files with a script before finishing.
How do I install design-tokens?
Run /plugin marketplace add plugin87/ux-ui-agent-skills, then /plugin install ux-ui-agent-skills@ux-ui-agent-skills. The skill relies on the rest of the kit for rules and token files, so a full plugin install works better than copying only the skill folder.
What token format does it write?
The skill writes DTCG format, which uses a $type and a $value on each token, with a $description kept on every entry. Tokens are organized in primitive, semantic and component tiers, and the files mirror the structure of the kit's existing token files for colors, type, spacing and more.
How does the skill check color accessibility?
New palettes get eleven OKLCH shades, and the skill requires the 500 shade to reach 4.5 to 1 on white for text and the 600 shade to reach 3 to 1 for interface use. A Python contrast script and the kit's accessibility audit skill handle the checks.
Which AI coding agents can use the design-tokens skill?
The README is written for Claude Code and also describes an MCP client route. It calls the kit a pure instruction and knowledge layer without naming other agents, so check that your agent loads skills and can run Python before relying on it.
Can it handle multiple brands or dark mode?
Yes, by design. Multi-brand and density variants go into the theming file, and dark mode is handled at the semantic layer. For theming from another angle, see theme-factory, which you can compare with this approach.
How does it relate to design-component?
Tokens come first and component specs consume them. The design-component skill in the same kit maps every value in a spec to these tokens. If you also want a dedicated color option to compare, see Tailwind Shades alongside this skill.