mcpbeat

Design Tokens

plugin87/design-tokens

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.

385 tokens
context cost
the whole folder, loaded on every use
1
files
instructions only
0
copies elsewhere
how many repositories repackaged it
482
stars on the repo
on the repository, not the skill itself

Install

one command, takes just this skill from the repository 
npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill design-tokens

The instruction itself

3 sections, as written by the author

Skill: Design Tokens

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

Steps

  • Read CLAUDE.md → "Token System" + "Color/Typography/Spacing Guidelines" for the rules (4px base, Major Third scale, OKLCH palette generation, dark-mode-at-semantic-layer).
  • Read the relevant existing files in 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.
  • 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 / scripts/contrast.py.
  • Multi-brand/density → theming.json.
  • Validate: run python3 scripts/validate_tokens.py (JSON validity + alias resolution).

Output

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

How to use it

Copy the folder

Take plugin87/design-tokens from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.