Summary
Generates design tokens in DTCG format following a three-tier architecture where primitives define raw values, semantics map them to purposes, and component tokens scope them to UI elements. Handles the full range of design properties: color palettes with OKLCH generation, typography scales, spacing, shadows, motion, and multi-brand theming. The implementation enforces contrast ratios at the palette level (4.5:1 for text, 3:1 for UI elements) and includes validation scripts to catch broken alias references. Useful when you're setting up a design system from scratch, extending an existing token set, or auditing token files for consistency. The dark mode logic lives at the semantic layer, which keeps primitives reusable across themes.
Install to Claude Code
npx -y skills add plugin87/ux-ui-agent-skills --skill design-tokens --agent claude-codeInstalls into .claude/skills of the current project.
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
An agent that runs the SEO playbooks that move rankings and ships PRs you control.
Get founding access →
Connect Claude to +800M contacts, +150M companies. Find & Enrich leads in chat.
Try For Free →Files
SKILL.md
Select a file.
Featured
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →An agent that runs the SEO playbooks that move rankings and ships PRs you control.
Get founding access →Connect Claude to +800M contacts, +150M companies. Find & Enrich leads in chat.
Try For Free →First SeenJun 11, 2026
