1# Design Routing Guide
2 
3When to use each design sub-skill.
4 
5## Skill Overview
6 
7| Skill | Purpose | Key Files |
8|-------|---------|-----------|
9| brand | Brand identity, voice, assets | SKILL.md + 10 references + 3 scripts |
10| design-system | Token architecture, specs | SKILL.md + 7 references + 2 scripts |
11| ui-styling | Component implementation | SKILL.md + 7 references + 2 scripts |
12| logo-design | AI logo generation (55 styles, 30 palettes) | SKILL.md + 4 references + 2 scripts |
13| cip-design | Corporate Identity Program (50 deliverables) | SKILL.md + 3 references + 3 scripts |
14| slides | HTML presentations with Chart.js | SKILL.md + 4 references |
15| banner-design | Banners for social, ads, web, print (22 styles) | SKILL.md + 1 reference |
16| icon-design | SVG icon generation (15 styles, Gemini 3.1 Pro) | SKILL.md + 1 reference + 1 script |
17 
18## Routing by Task Type
19 
20### Brand Identity Tasks
21**→ brand**
22 
23- Define brand colors and typography
24- Create logo usage guidelines
25- Establish brand voice and tone
26- Organize and validate assets
27- Create messaging frameworks
28- Audit brand consistency
29 
30### Token System Tasks
31**→ design-system**
32 
33- Create design tokens JSON
34- Generate CSS variables
35- Define component specifications
36- Map tokens to Tailwind config
37- Validate token usage in code
38- Document state and variants
39 
40### Implementation Tasks
41**→ ui-styling**
42 
43- Add shadcn/ui components
44- Style with Tailwind classes
45- Implement dark mode
46- Create responsive layouts
47- Build accessible components
48 
49### Logo Design Tasks
50**→ logo-design**
51 
52- Create logos with AI (Gemini Nano Banana)
53- Search logo styles, color palettes, industry guidelines
54- Generate design briefs
55- Explore 55+ styles (minimalist, vintage, luxury, geometric, etc.)
56 
57### Corporate Identity Program Tasks
58**→ cip-design**
59 
60- Generate CIP deliverables (business cards, letterheads, signage, vehicles, apparel)
61- Create CIP briefs with industry/style analysis
62- Generate mockups with/without logo (Gemini Flash/Pro)
63- Render HTML presentations from CIP mockups
64 
65### Presentation Tasks
66**→ slides**
67 
68- Create strategic HTML presentations
69- Data visualization with Chart.js
70- Apply copywriting formulas to slide content
71- Use layout patterns and design tokens
72 
73### Banner Design Tasks
74**→ banner-design**
75 
76- Design banners for social media (Facebook, Twitter, LinkedIn, YouTube, Instagram)
77- Create ad banners (Google Ads, Meta Ads)
78- Website hero banners and headers
79- Print banners and covers
80- 22 art direction styles (minimalist, bold typography, gradient, glassmorphism, etc.)
81 
82### Icon Design Tasks
83**→ icon-design**
84 
85- Generate SVG icons with AI (Gemini 3.1 Pro Preview)
86- Batch icon variations in multiple styles
87- Multi-size export (16px, 24px, 32px, 48px)
88- 15 styles: outlined, filled, duotone, rounded, sharp, gradient, etc.
89- 12 categories: navigation, action, communication, media, commerce, data
90 
91## Routing by Question Type
92 
93| Question | Skill |
94|----------|-------|
95| "What color should this be?" | brand |
96| "How do I create a token for X?" | design-system |
97| "How do I build a button component?" | ui-styling |
98| "Is this on-brand?" | brand |
99| "Should I use a CSS variable here?" | design-system |
100| "How do I add dark mode?" | ui-styling |
101| "Create a logo for my brand" | logo-design |
102| "Generate business card mockups" | cip-design |
103| "Create a pitch deck" | slides |
104| "Design brand identity package" | cip-design |
105| "What logo style fits my industry?" | logo-design |
106| "Design a Facebook cover" | banner-design |
107| "Create ad banners for Google" | banner-design |
108| "Make a website hero banner" | banner-design |
109| "Generate a settings icon" | icon-design |
110| "Create SVG icons for my app" | icon-design |
111| "Design an icon set" | icon-design |
112 
113## Multi-Skill Workflows
114 
115### New Project Setup
116 
117```
1181. brand → Define identity
119   - Colors, typography, voice
120 
1212. design-system → Create tokens
122   - Primitive, semantic, component
123 
1243. ui-styling → Implement
125   - Configure Tailwind, add components
126```
127 
128### Design System Migration
129 
130```
1311. brand → Audit existing
132   - Extract brand colors, fonts
133 
1342. design-system → Formalize tokens
135   - Create three-layer architecture
136 
1373. ui-styling → Update code
138   - Replace hardcoded values
139```
140 
141### Component Creation
142 
143```
1441. design-system → Reference specs
145   - Button states, sizes, variants
146 
1472. ui-styling → Implement
148   - Build with shadcn/ui + Tailwind
149```
150 
151## Skill Dependencies
152 
153```
154brand
155    ↓ (colors, typography)
156design-system
157    ↓ (tokens, specs)
158ui-styling
159    ↓ (components)
160Application Code
161```
162 
163## Quick Commands
164 
165**Brand:**
166```bash
167node .claude/skills/brand/scripts/inject-brand-context.cjs
168node .claude/skills/brand/scripts/validate-asset.cjs <path>
169```
170 
171**Tokens:**
172```bash
173node .claude/skills/design-system/scripts/generate-tokens.cjs -c tokens.json
174node .claude/skills/design-system/scripts/validate-tokens.cjs -d src/
175```
176 
177**Components:**
178```bash
179npx shadcn@latest add button card input
180```
181 
182## When to Use Multiple Skills
183 
184Use **all eight** when:
185- Complete brand package from scratch (logo → CIP → presentation)
186 
187Use **brand + design-system + ui-styling** when:
188- Design system setup and implementation
189 
190Use **logo-design + cip-design** when:
191- Complete brand identity package with deliverable mockups
192 
193Use **logo-design + cip-design + slides** when:
194- Brand pitch: generate logo, create CIP mockups, build pitch deck
195 
196Use **banner-design + brand** when:
197- Social media presence: branded banners across all platforms
198 
199Use **icon-design + design-system** when:
200- Custom icon set matching design tokens and component specs
201 
202Use **brand + design-system** when:
203- Defining design language without implementation
204 
205Use **design-system + ui-styling** when:
206- Implementing existing brand in code
207- Building component library
208