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

How to use Color System in your AI agent

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

What you'll get

Creates professional color systems for your brand or product with full tonal scales, semantic colors (success, warning, error), and accessibility-compliant contrast ratios. Perfect for teams building design systems, pitch decks, or brand guidelines without needing design software expertise. Gets you from brand colors to a complete, usable palette in minutes.

Step 1 — Get the skill source URL

The Color System skill lives at:

Open ↗

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/ui-design/skills/color-system to my project.

Cursor

Install this agent skill: https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/ui-design/skills/color-system

Codex

Add this skill to .codex/skills/: https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/ui-design/skills/color-system

Gemini CLI

Add the skill at https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/ui-design/skills/color-system to my .gemini/skills/ directory.

OpenCode

Install this agent skill from https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/ui-design/skills/color-system

Windsurf

Add this skill: https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/ui-design/skills/color-system

Step 3 — Try these prompts

Once the skill is installed, ask your AI things like:

  • Building a brand identity and need a complete color palette
  • Ensure your design meets accessibility standards
  • Creating a pitch deck or marketing site and want professional color choices
  • You need dark mode colors that match your existing brand

What this skill does

  • Generates full tonal scales (light to dark) for your brand colors
  • Creates semantic color sets for success, warning, error, and info states
  • Tests all color combinations for accessibility compliance (WCAG AA/AAA)
  • Builds matching dark mode and light mode palettes
  • Provides usage guidance for each color in your system
SkillColor System
Made byJR Brugger (Design Workflow)
CategoryDesign & Creative
SourceView original ↗