---
name: Design Tokens
slug: design-tokens
category: Frontend
description: Design Tokens generates and validates DTCG tokens with a three-tier primitive, semantic, and component structure. Use it to create palettes, scales, theming, and other design-system tokens or audit token files.
github: "https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/design-tokens"
language: JavaScript
stars: 639
forks: 64
install: "npx degit https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/design-tokens ~/.claude/skills/design-tokens"
installs_to: ~/.claude/skills/design-tokens
source_path: .claude/skills/design-tokens/SKILL.md
collection_size: 17
category_size: 567
collection_url: "https://dirskills.com/collections/plugin87/ux-ui-agent-skills"
added: 2026-08-24T05:18:09.094Z
last_synced: 2026-08-24T05:18:09.094Z
canonical_url: "https://dirskills.com/skills/design-tokens"
---

# Design Tokens

Design Tokens generates and validates DTCG tokens with a three-tier primitive, semantic, and component structure. Use it to create palettes, scales, theming, and other design-system tokens or audit token files.

**Install:**

```bash
npx degit https://github.com/plugin87/ux-ui-agent-skills/tree/main/.claude/skills/design-tokens ~/.claude/skills/design-tokens
```

## README

# Skill: Design Tokens

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

## Steps
1. 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).
2. 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`.
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 / `scripts/contrast.py`.
   - Multi-brand/density → `theming.json`.
4. **Validate**: run `python3 scripts/validate_tokens.py` (JSON validity + alias resolution).

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