How-to · Design & Creative · By JR Brugger (Design Workflow)

How to use Design Token in your AI agent

Install and use the Design Token skill in Claude Code, Cursor, Codex, Gemini CLI, OpenCode, and Windsurf — with sample prompts.

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
Made byJR Brugger (Design Workflow)
CategoryDesign & Creative