What it is
This skill helps you create a design token system — the foundation of visual consistency across products. It organizes colors, typography, spacing, shadows, and other design elements into reusable sets. Designers, product teams, and founders use this to maintain brand coherence and speed up design handoffs.
What it does
- Creates organized color palettes with global, semantic, and component-level tokens
- Defines spacing scales, typography hierarchies, and shadow systems
- Establishes naming conventions for design elements across your product
- Generates documentation for how and when to use each design token
- Supports theming and multi-brand design systems
Use it when
- You're building a new brand or design system from scratch
- You need consistent spacing, colors, and fonts across your product
- You're handing designs off to developers and want clear specs
- You're managing multiple themes or white-label products
Add this skill to your AI
Copy the source URL and ask your AI to add it. Most coding agents — Claude Code, Cursor, Codex, Gemini CLI, OpenCode, Windsurf — will fetch and install it for you.
Try this prompt:
Add this skill to my project: https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/design-systems/skills/design-token