Tokenize — Design skill for Claude Code
Stand up design system foundations — tokens, type scale, color, and spacing with adaptive-interface checks.
How to install Tokenize
Installs to ~/.claude/commands/hulusi-tunc-unicorn-skills-tokenize.md
mkdir -p ~/.claude/commands && curl -fsSL https://raw.githubusercontent.com/hulusi-tunc/unicorn-skills/HEAD/.claude/commands/tokenize.md -o ~/.claude/commands/hulusi-tunc-unicorn-skills-tokenize.md Restart Claude Code, or start a new session, for it to be picked up.
What Tokenize does
description: Stand up design system foundations — tokens, type scale, color, and spacing with adaptive-interface checks. argument-hint: "[product or brand context, e.g., 'fintech dashboard, brand blue #0044CC']"
/tokenize
Stand up design system foundations.
Steps
- Direction first — Check
taste/TASTE.md(tasteskill) and name the project's visual direction (no-slopdirection list) before any token locks it in. - Token architecture — Define token tiers, naming, and st
Alternatives in Design
- Interface Design — Design engineering for Claude Code 4.3k ★
- Theme Swap — Recolour an extracted site's design around a new brand primary 3.6k ★
- Deepen — Spare-budget design pass 1.1k ★
Full documentation available on GitHub
View Source RepositoryRelated Skills
Color Scales
Claude skill that turns a brand palette into consistent color scales for design systems: places each color by
Refactoring UI Skill
A Claude Code skill that applies the concrete design rules from the book Refactoring UI (Wathan & Schoger) — c
Brand Kit
Generate a complete brand kit from a logo and 1-2 brand colors — full palette, type scale, icon style, compone
Extract Design Tokens
Extract design tokens - colors, type, spacing, shadows - from a URL, screenshot, or CSS into CSS variables and
Frontendtailwind
Autonomous Tailwind + shadcn/ui visual refinement on a feature branch — audits current Tailwind/shadcn usage,
Spacing
Give a UI a deliberate spacing scale, density, and sectional rhythm
Related Agents
Design System Creator
Design system architect. Creates or extends tokens (color, type, spacing, radius, motion), semantic layers, an
Design Scanner
Extract the design system a codebase already ships — tokens, type scale, spacing, motion, and a reverse-engine
Tokens Engineer
Generates a design token system (palette, type scale, spacing, radii, shadows, motion) from a synthesis statem