/design

Design Routing Guide

When to use each design sub-skill.

Skill Overview

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 Tasks

→ 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

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:

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

Tokens:

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

Components:

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