What you'll get
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.
Step 1 — Get the skill source URL
The Design Token skill lives at:
Step 2 — Add it to your AI agent
Copy one of these prompts and paste it into your AI tool. The agent will fetch and install the skill for you.
Claude Code
Add the agent skill from https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/design-systems/skills/design-token to my project.
Cursor
Install this agent skill: https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/design-systems/skills/design-token
Codex
Add this skill to .codex/skills/: https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/design-systems/skills/design-token
Gemini CLI
Add the skill at https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/design-systems/skills/design-token to my .gemini/skills/ directory.
OpenCode
Install this agent skill from https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/design-systems/skills/design-token
Windsurf
Add this skill: https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/design-systems/skills/design-token
Step 3 — Try these prompts
Once the skill is installed, ask your AI things like:
- Building a new brand or design system from scratch
- You need consistent spacing, colors, and fonts across your product
- Handing designs off to developers and want clear specs
- Managing multiple themes or white-label products
What this skill 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