How do I install the Design Tokens skill?

Run npx skillmds@latest add zereight/design-tokens in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Design Tokens safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Design Tokens?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Design Tokens free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Design Tokens?

zereight (@zereight) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Design Tokens by zereight — Agent Skill

Name: Design Tokens
Author: zereight

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.

zereight 2af1759 1.8 KB Updated Sep 17, 2026

File contents

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.

Kit location

This skill is part of ux-ui-agent-skills v2.4.0.

Resolve every relative path in the steps above against:

.agents/ux-ui-agent-skills/

(from repo root: /Users/tao.exe/Documents/skill/.agents/ux-ui-agent-skills)

Load .agents/ux-ui-agent-skills/CLAUDE.md when you need the full agent persona or Request Router.

Frequently asked questions