ContextQMD
Back to Ui Ux Pro Max Skill

Design Routing Guide

cli/assets/skills/design/references/design-routing.md

2.11.05.7 KB
Original Source

Design Routing Guide

When to use each design sub-skill.

Skill Overview

SkillPurposeKey Files
brandBrand identity, voice, assetsSKILL.md + 10 references + 3 scripts
design-systemToken architecture, specsSKILL.md + 7 references + 2 scripts
ui-stylingComponent implementationSKILL.md + 7 references + 2 scripts
logo-designAI logo generation (55 styles, 30 palettes)SKILL.md + 4 references + 2 scripts
cip-designCorporate Identity Program (50 deliverables)SKILL.md + 3 references + 3 scripts
slidesHTML presentations with Chart.jsSKILL.md + 4 references
banner-designBanners for social, ads, web, print (22 styles)SKILL.md + 1 reference
icon-designSVG icon generation (15 styles, Gemini 3.1 Pro)SKILL.md + 1 reference + 1 script

Routing by Task Type

Brand Identity Tasks

→ brand

  • Define brand colors and typography
  • Create logo usage guidelines
  • Establish brand voice and tone
  • Organize and validate assets
  • Create messaging frameworks
  • Audit brand consistency

Token System Tasks

→ design-system

  • Create design tokens JSON
  • Generate CSS variables
  • Define component specifications
  • Map tokens to Tailwind config
  • Validate token usage in code
  • Document state and variants

Implementation Tasks

→ ui-styling

  • Add shadcn/ui components
  • Style with Tailwind classes
  • Implement dark mode
  • Create responsive layouts
  • Build accessible components

Logo Design Tasks

→ logo-design

  • Create logos with AI (Gemini Nano Banana)
  • Search logo styles, color palettes, industry guidelines
  • Generate design briefs
  • Explore 55+ styles (minimalist, vintage, luxury, geometric, etc.)

Corporate Identity Program Tasks

→ cip-design

  • Generate CIP deliverables (business cards, letterheads, signage, vehicles, apparel)
  • Create CIP briefs with industry/style analysis
  • Generate mockups with/without logo (Gemini Flash/Pro)
  • Render HTML presentations from CIP mockups

Presentation Tasks

→ slides

  • Create strategic HTML presentations
  • Data visualization with Chart.js
  • Apply copywriting formulas to slide content
  • Use layout patterns and design tokens

→ banner-design

  • Design banners for social media (Facebook, Twitter, LinkedIn, YouTube, Instagram)
  • Create ad banners (Google Ads, Meta Ads)
  • Website hero banners and headers
  • Print banners and covers
  • 22 art direction styles (minimalist, bold typography, gradient, glassmorphism, etc.)

Icon Design Tasks

→ icon-design

  • Generate SVG icons with AI (Gemini 3.1 Pro Preview)
  • Batch icon variations in multiple styles
  • Multi-size export (16px, 24px, 32px, 48px)
  • 15 styles: outlined, filled, duotone, rounded, sharp, gradient, etc.
  • 12 categories: navigation, action, communication, media, commerce, data

Routing by Question Type

QuestionSkill
"What color should this be?"brand
"How do I create a token for X?"design-system
"How do I build a button component?"ui-styling
"Is this on-brand?"brand
"Should I use a CSS variable here?"design-system
"How do I add dark mode?"ui-styling
"Create a logo for my brand"logo-design
"Generate business card mockups"cip-design
"Create a pitch deck"slides
"Design brand identity package"cip-design
"What logo style fits my industry?"logo-design
"Design a Facebook cover"banner-design
"Create ad banners for Google"banner-design
"Make a website hero banner"banner-design
"Generate a settings icon"icon-design
"Create SVG icons for my app"icon-design
"Design an icon set"icon-design

Multi-Skill Workflows

New Project Setup

1. brand → Define identity
   - Colors, typography, voice

2. design-system → Create tokens
   - Primitive, semantic, component

3. ui-styling → Implement
   - Configure Tailwind, add components

Design System Migration

1. brand → Audit existing
   - Extract brand colors, fonts

2. design-system → Formalize tokens
   - Create three-layer architecture

3. ui-styling → Update code
   - Replace hardcoded values

Component Creation

1. design-system → Reference specs
   - Button states, sizes, variants

2. ui-styling → Implement
   - Build with shadcn/ui + Tailwind

Skill Dependencies

brand
    ↓ (colors, typography)
design-system
    ↓ (tokens, specs)
ui-styling
    ↓ (components)
Application Code

Quick Commands

Brand:

bash
node .claude/skills/brand/scripts/inject-brand-context.cjs
node .claude/skills/brand/scripts/validate-asset.cjs <path>

Tokens:

bash
node .claude/skills/design-system/scripts/generate-tokens.cjs -c tokens.json
node .claude/skills/design-system/scripts/validate-tokens.cjs -d src/

Components:

bash
npx shadcn@latest add button card input

When to Use Multiple Skills

Use all eight when:

  • Complete brand package from scratch (logo → CIP → presentation)

Use brand + design-system + ui-styling when:

  • Design system setup and implementation

Use logo-design + cip-design when:

  • Complete brand identity package with deliverable mockups

Use logo-design + cip-design + slides when:

  • Brand pitch: generate logo, create CIP mockups, build pitch deck

Use banner-design + brand when:

  • Social media presence: branded banners across all platforms

Use icon-design + design-system when:

  • Custom icon set matching design tokens and component specs

Use brand + design-system when:

  • Defining design language without implementation

Use design-system + ui-styling when:

  • Implementing existing brand in code
  • Building component library