← All skills

Design tokens

Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive → semantic → component).

Design systemsThientan SoparatMIT

Install

npx degit plugin87/ux-ui-agent-skills/.claude/skills/design-tokens .claude/skills/design-tokens

Run it in your project root, then ask your agent for what you want. More detail

What it does

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.

Straight from the skill's own SKILL.md. This is what your agent reads.