Skip to content
alyn
plugin87

Design Tokens skill

Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.

$npx skills add plugin87/ux-ui-agent-skills --skill design-tokens
GitHub stars
3,155
Pack installs
11k
Alyn Score
60/99
Updated
17 h ago
License
MIT
Design Frontend

Install Design Tokens

Pick your agent. Every command is ready to paste.

$npx skills add plugin87/ux-ui-agent-skills --skill design-tokens

The open skills CLI detects your agents (Claude Code, Cursor, Codex and 70+ more) and installs to the right folder. Add -g to install globally.

01

Install it

Run the command above, or upload the folder in Claude.

02

Ask naturally

Describe the task. Your agent loads design-tokens when the request matches its description.

03

Name it if needed

If it does not trigger, say “use the design-tokens skill”. In Codex, type $design-tokens.

The skill itself

SKILL.md

GitHub

Skill: Design Tokens

Requirements

This skill needs the full UX/UI Agent Skills kit: the gates, the references and the design-system library. Install it with npx ux-ui-agent-skills@3.1.0 init or as the Claude Code plugin. npx skills@1.7.6 add copies the skill folder and nothing else. Installed that way, this skill runs in guidance-only mode: no gate runs, so it gives no verdict.

Step 0: is the kit here? Check once: ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING On KIT_MISSING, open your reply with: "Guidance-only mode: the UX/UI Agent Skills kit is not installed here, so no gate ran and nothing below is measured." Then work from this file and general practice, under three rules. Do not guess or cite the contents of a kit file you could not open. State no measured number (no contrast ratio, no N/N, no "passes WCAG"): write "not verified" where one would go. End with a line Skipped (kit not installed): that names every gate script this file tells you to run, then the install command above.

Produce and maintain DTCG ($type/$value) tokens following the project's 3-tier system.

Steps

  1. Read ${CLAUDE_SKILL_DIR}/../../../.claude/rules/tokens-and-color.md → "Token System" + "Color Guidelines" and ${CLAUDE_SKILL_DIR}/../../../.claude/rules/typography-and-spacing.md for the rules (4px base, Major Third scale, OKLCH palette generation, dark-mode-at-semantic-layer).
  2. Read the relevant existing files in ${CLAUDE_SKILL_DIR}/../../../tokens/ to match structure: colors.json, typography.json, spacing.json, shadows.json, borders.json, breakpoints.json, motion.json, gradients.json, opacity.json, blur.json, sizing.json, states.json, theming.json.
  3. Generate/extend tokens:
    • Primitives = raw values (never used directly). Semantic = purpose aliases. Component = component-scoped.
    • New palettes: generate 11 OKLCH shades; verify 500 ≥ 4.5:1 on white (text), 600 ≥ 3:1 (UI) using the a11y-audit skill / ${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py.
    • Multi-brand/density → theming.json.
  4. Validate: run python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.py (JSON validity + alias resolution).

Output

DTCG JSON. Preserve $description on every token. Reference, never hardcode.

Tips for Design Tokens

  • • Start a fresh session after installing so your agent picks up the new skill.
  • • It is part of a pack with 26 skills. Install only the ones you need with --skill to keep triggers precise.
  • • If two skills overlap, mention the one you want by name.

Questions about Design Tokens

What does the Design Tokens skill do?

Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component). Use when the user wants a color palette, type scale, spacing/shadow/radius/motion tokens, multi-brand theming, or wants to validate token files. Covers colors, typography, spacing, shadows, borders, breakpoints, motion, gradients, opacity, blur, sizing, states, theming.

How do I install Design Tokens?

Run "npx skills add plugin87/ux-ui-agent-skills --skill design-tokens" in your project. The skills CLI installs it for Claude Code, Cursor, Codex and 70+ other agents. In Claude on the web, upload the skill folder as a ZIP under Customize > Skills.

Does Design Tokens work in Cursor and Codex?

Yes. Design Tokens uses the open SKILL.md format, so it works in Claude Code, Claude, Cursor, OpenAI Codex, Gemini CLI, GitHub Copilot and other agents that support agent skills.

Is Design Tokens free?

Design Tokens is open source on GitHub under the MIT license. It is free to install; check the license before commercial use.

Who made Design Tokens?

Design Tokens is published by plugin87 in the plugin87/ux-ui-agent-skills repository, together with 25 other skills.

Similar skills. From other creators.