Design
Unified design skill: brand, tokens, UI, logo, CIP, slides, banners, social photos, icons.
When to Use
- Brand identity, voice, assets
- Design system tokens and specs
- UI styling with shadcn/ui + Tailwind
- Logo design and AI generation
- Corporate identity program (CIP) deliverables
- Presentations and pitch decks
- Banner design for social media, ads, web, print
- Social photos for Instagram, Facebook, LinkedIn, Twitter, Pinterest, TikTok
Sub-skill Routing
| Task |
Sub-skill |
Details |
| Brand identity, voice, assets |
brand |
External skill |
| Tokens, specs, CSS vars |
design-system |
External skill |
| shadcn/ui, Tailwind, code |
ui-styling |
External skill |
| Logo creation, AI generation |
Logo (built-in) |
references/logo-design.md |
| CIP mockups, deliverables |
CIP (built-in) |
references/cip-design.md |
| Presentations, pitch decks |
Slides (built-in) |
references/slides.md |
| Banners, covers, headers |
Banner (built-in) |
references/banner-sizes-and-styles.md |
| Social media images/photos |
Social Photos (built-in) |
references/social-photos-design.md |
| SVG icons, icon sets |
Icon (built-in) |
references/icon-design.md |
Logo Design (Built-in)
55+ styles, 30 color palettes, 25 industry guides. Gemini Nano Banana models.
Logo: Generate Design Brief
python3 ~/.claude/skills/design/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"
Logo: Search Styles/Colors/Industries
python3 ~/.claude/skills/design/scripts/logo/search.py "minimalist clean" --domain style
python3 ~/.claude/skills/design/scripts/logo/search.py "tech professional" --domain color
python3 ~/.claude/skills/design/scripts/logo/search.py "healthcare medical" --domain industry
Logo: Generate with AI
ALWAYS generate output logo images with white background.
python3 ~/.claude/skills/design/scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech
python3 ~/.claude/skills/design/scripts/logo/generate.py --prompt "coffee shop vintage badge" --style vintage
IMPORTANT: When scripts fail, try to fix them directly.
After generation, ALWAYS ask user about HTML preview via AskUserQuestion. If yes, invoke /ui-ux-pro-max for gallery.
CIP Design (Built-in)
50+ deliverables, 20 styles, 20 industries. Gemini Nano Banana (Flash/Pro).
CIP: Generate Brief
python3 ~/.claude/skills/design/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"
CIP: Search Domains
python3 ~/.claude/skills/design/scripts/cip/search.py "business card letterhead" --domain deliverable
python3 ~/.claude/skills/design/scripts/cip/search.py "luxury premium elegant" --domain style
python3 ~/.claude/skills/design/scripts/cip/search.py "hospitality hotel" --domain industry
python3 ~/.claude/skills/design/scripts/cip/search.py "office reception" --domain mockup
CIP: Generate Mockups
# With logo (RECOMMENDED)
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"
# Full CIP set
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set
# Pro model (4K text)
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro
# Without logo
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TechFlow" --deliverable "business card" --no-logo-prompt
Models: flash (default, gemini-2.5-flash-image), pro (gemini-3-pro-image-preview)
CIP: Render HTML Presentation
python3 ~/.claude/skills/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images /path/to/cip-output
Tip: If no logo exists, use Logo Design section above first.
Slides (Built-in)
Strategic HTML presentations with Chart.js, design tokens, copywriting formulas.
Load references/slides-create.md for the creation workflow.
Slides: Knowledge Base
| Topic |
File |
| Creation Guide |
references/slides-create.md |
| Layout Patterns |
references/slides-layout-patterns.md |
| HTML Template |
references/slides-html-template.md |
| Copywriting |
references/slides-copywriting-formulas.md |
| Strategies |
references/slides-strategies.md |
Banner Design (Built-in)
22 art direction styles across social, ads, web, print. Uses frontend-design, ai-artist, ai-multimodal, chrome-devtools skills.
Load references/banner-sizes-and-styles.md for complete sizes and styles reference.
Banner: Workflow
- Gather requirements via
AskUserQuestion — purpose, platform, content, brand, style, quantity
- Research — Activate
ui-ux-pro-max, browse Pinterest for references
- Design — Create HTML/CSS banner with
frontend-design, generate visuals with ai-artist/ai-multimodal
- Export — Screenshot to PNG at exact dimensions via
chrome-devtools
- Present — Show all options side-by-side, iterate on feedback
Banner: Quick Size Reference
| Platform |
Type |
Size (px) |
| Facebook |
Cover |
820 x 312 |
| Twitter/X |
Header |
1500 x 500 |
| LinkedIn |
Personal |
1584 x 396 |
| YouTube |
Channel art |
2560 x 1440 |
| Instagram |
Story |
1080 x 1920 |
| Instagram |
Post |
1080 x 1080 |
| Google Ads |
Med Rectangle |
300 x 250 |
| Website |
Hero |
1920 x 600-1080 |
Banner: Top Art Styles
| Style |
Best For |
| Minimalist |
SaaS, tech |
| Bold Typography |
Announcements |
| Gradient |
Modern brands |
| Photo-Based |
Lifestyle, e-com |
| Geometric |
Tech, fintech |
| Glassmorphism |
SaaS, apps |
| Neon/Cyberpunk |
Gaming, events |
Banner: Design Rules
- Safe zones: critical content in central 70-80%
- One CTA per banner, bottom-right, min 44px height
- Max 2 fonts, min 16px body, ≥32px headline
- Text under 20% for ads (Meta penalizes)
- Print: 300 DPI, CMYK, 3-5mm bleed
Icon Design (Built-in)
15 styles, 12 categories. Gemini 3.1 Pro Preview generates SVG text output.
Icon: Generate Single Icon
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "settings gear" --style outlined
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"
python3 ~/.claude/skills/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone
Icon: Generate Batch Variations
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons
Icon: Multi-size Export
python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons
Icon: Top Styles
| Style |
Best For |
| outlined |
UI interfaces, web apps |
| filled |
Mobile apps, nav bars |
| duotone |
Marketing, landing pages |
| rounded |
Friendly apps, health |
| sharp |
Tech, fintech, enterprise |
| flat |
Material design, Google-style |
| gradient |
Modern brands, SaaS |
Model: gemini-3.1-pro-preview — text-only output (SVG is XML text). No image generation API needed.
Social Photos (Built-in)
Multi-platform social image design: HTML/CSS → screenshot export. Uses ui-ux-pro-max, brand, design-system, chrome-devtools skills.
Load references/social-photos-design.md for sizes, templates, best practices.
Social Photos: Workflow
- Orchestrate —
project-management skill for TODO tasks; parallel subagents for independent work
- Analyze — Parse prompt: subject, platforms, style, brand context, content elements
- Ideate — 3-5 concepts, present via
AskUserQuestion
- Design —
/ckm:brand → /ckm:design-system → randomly invoke /ck:ui-ux-pro-max OR /ck:frontend-design; HTML per idea × size
- Export —
chrome-devtools or Playwright screenshot at exact px (2x deviceScaleFactor)
- Verify — Use Chrome MCP or
chrome-devtools skill to visually inspect exported designs; fix layout/styling issues and re-export
- Report — Summary to
plans/reports/ with design decisions
- Organize — Invoke
assets-organizing skill to sort output files and reports
Social Photos: Key Sizes
| Platform |
Size (px) |
Platform |
Size (px) |
| IG Post |
1080×1080 |
FB Post |
1200×630 |
| IG Story |
1080×1920 |
X Post |
1200×675 |
| IG Carousel |
1080×1350 |
LinkedIn |
1200×627 |
| YT Thumb |
1280×720 |
Pinterest |
1000×1500 |
Workflows
Complete Brand Package
- Logo →
scripts/logo/generate.py → Generate logo variants
- CIP →
scripts/cip/generate.py --logo ... → Create deliverable mockups
- Presentation → Load
references/slides-create.md → Build pitch deck
New Design System
- Brand (brand skill) → Define colors, typography, voice
- Tokens (design-system skill) → Create semantic token layers
- Implement (ui-styling skill) → Configure Tailwind, shadcn/ui
References
| Topic |
File |
| Design Routing |
references/design-routing.md |
| Logo Design Guide |
references/logo-design.md |
| Logo Styles |
references/logo-style-guide.md |
| Logo Colors |
references/logo-color-psychology.md |
| Logo Prompts |
references/logo-prompt-engineering.md |
| CIP Design Guide |
references/cip-design.md |
| CIP Deliverables |
references/cip-deliverable-guide.md |
| CIP Styles |
references/cip-style-guide.md |
| CIP Prompts |
references/cip-prompt-engineering.md |
| Slides Create |
references/slides-create.md |
| Slides Layouts |
references/slides-layout-patterns.md |
| Slides Template |
references/slides-html-template.md |
| Slides Copy |
references/slides-copywriting-formulas.md |
| Slides Strategy |
references/slides-strategies.md |
| Banner Sizes & Styles |
references/banner-sizes-and-styles.md |
| Social Photos Guide |
references/social-photos-design.md |
| Icon Design Guide |
references/icon-design.md |
Scripts
| Script |
Purpose |
scripts/logo/search.py |
Search logo styles, colors, industries |
scripts/logo/generate.py |
Generate logos with Gemini AI |
scripts/logo/core.py |
BM25 search engine for logo data |
scripts/cip/search.py |
Search CIP deliverables, styles, industries |
scripts/cip/generate.py |
Generate CIP mockups with Gemini |
scripts/cip/render-html.py |
Render HTML presentation from CIP mockups |
scripts/cip/core.py |
BM25 search engine for CIP data |
scripts/icon/generate.py |
Generate SVG icons with Gemini 3.1 Pro |
Setup
export GEMINI_API_KEY="your-key" # https://aistudio.google.com/apikey
pip install google-genai pillow
Integration
External sub-skills: brand, design-system, ui-styling
Related Skills: frontend-design, ui-ux-pro-max, ai-multimodal, chrome-devtools
1---2name: ckm-design3description: Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.4license: MIT5---6
7# Design
8
9Unified design skill: brand, tokens, UI, logo, CIP, slides, banners, social photos, icons.
10
11## When to Use
12
13- Brand identity, voice, assets
14- Design system tokens and specs
15- UI styling with shadcn/ui + Tailwind
16- Logo design and AI generation
17- Corporate identity program (CIP) deliverables
18- Presentations and pitch decks
19- Banner design for social media, ads, web, print
20- Social photos for Instagram, Facebook, LinkedIn, Twitter, Pinterest, TikTok
21
22## Sub-skill Routing
23
24| Task | Sub-skill | Details |
25|------|-----------|---------|
26| Brand identity, voice, assets | `brand` | External skill |
27| Tokens, specs, CSS vars | `design-system` | External skill |
28| shadcn/ui, Tailwind, code | `ui-styling` | External skill |
29| Logo creation, AI generation | Logo (built-in) | `references/logo-design.md` |
30| CIP mockups, deliverables | CIP (built-in) | `references/cip-design.md` |
31| Presentations, pitch decks | Slides (built-in) | `references/slides.md` |
32| Banners, covers, headers | Banner (built-in) | `references/banner-sizes-and-styles.md` |
33| Social media images/photos | Social Photos (built-in) | `references/social-photos-design.md` |
34| SVG icons, icon sets | Icon (built-in) | `references/icon-design.md` |
35
36## Logo Design (Built-in)
37
3855+ styles, 30 color palettes, 25 industry guides. Gemini Nano Banana models.
39
40### Logo: Generate Design Brief
41
42```bash
43python3 ~/.claude/skills/design/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"
44```
45
46### Logo: Search Styles/Colors/Industries
47
48```bash
49python3 ~/.claude/skills/design/scripts/logo/search.py "minimalist clean" --domain style
50python3 ~/.claude/skills/design/scripts/logo/search.py "tech professional" --domain color
51python3 ~/.claude/skills/design/scripts/logo/search.py "healthcare medical" --domain industry
52```
53
54### Logo: Generate with AI
55
56**ALWAYS** generate output logo images with white background.
57
58```bash
59python3 ~/.claude/skills/design/scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech
60python3 ~/.claude/skills/design/scripts/logo/generate.py --prompt "coffee shop vintage badge" --style vintage
61```
62
63**IMPORTANT:** When scripts fail, try to fix them directly.
64
65After generation, **ALWAYS** ask user about HTML preview via `AskUserQuestion`. If yes, invoke `/ui-ux-pro-max` for gallery.
66
67## CIP Design (Built-in)
68
6950+ deliverables, 20 styles, 20 industries. Gemini Nano Banana (Flash/Pro).
70
71### CIP: Generate Brief
72
73```bash
74python3 ~/.claude/skills/design/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"
75```
76
77### CIP: Search Domains
78
79```bash
80python3 ~/.claude/skills/design/scripts/cip/search.py "business card letterhead" --domain deliverable
81python3 ~/.claude/skills/design/scripts/cip/search.py "luxury premium elegant" --domain style
82python3 ~/.claude/skills/design/scripts/cip/search.py "hospitality hotel" --domain industry
83python3 ~/.claude/skills/design/scripts/cip/search.py "office reception" --domain mockup
84```
85
86### CIP: Generate Mockups
87
88```bash
89# With logo (RECOMMENDED)
90python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"
91
92# Full CIP set
93python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set
94
95# Pro model (4K text)
96python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro
97
98# Without logo
99python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TechFlow" --deliverable "business card" --no-logo-prompt
100```
101
102Models: `flash` (default, `gemini-2.5-flash-image`), `pro` (`gemini-3-pro-image-preview`)
103
104### CIP: Render HTML Presentation
105
106```bash
107python3 ~/.claude/skills/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images /path/to/cip-output
108```
109
110**Tip:** If no logo exists, use Logo Design section above first.
111
112## Slides (Built-in)
113
114Strategic HTML presentations with Chart.js, design tokens, copywriting formulas.
115
116Load `references/slides-create.md` for the creation workflow.
117
118### Slides: Knowledge Base
119
120| Topic | File |
121|-------|------|
122| Creation Guide | `references/slides-create.md` |
123| Layout Patterns | `references/slides-layout-patterns.md` |
124| HTML Template | `references/slides-html-template.md` |
125| Copywriting | `references/slides-copywriting-formulas.md` |
126| Strategies | `references/slides-strategies.md` |
127
128## Banner Design (Built-in)
129
13022 art direction styles across social, ads, web, print. Uses `frontend-design`, `ai-artist`, `ai-multimodal`, `chrome-devtools` skills.
131
132Load `references/banner-sizes-and-styles.md` for complete sizes and styles reference.
133
134### Banner: Workflow
135
1361. **Gather requirements** via `AskUserQuestion` — purpose, platform, content, brand, style, quantity
1372. **Research** — Activate `ui-ux-pro-max`, browse Pinterest for references
1383. **Design** — Create HTML/CSS banner with `frontend-design`, generate visuals with `ai-artist`/`ai-multimodal`
1394. **Export** — Screenshot to PNG at exact dimensions via `chrome-devtools`
1405. **Present** — Show all options side-by-side, iterate on feedback
141
142### Banner: Quick Size Reference
143
144| Platform | Type | Size (px) |
145|----------|------|-----------|
146| Facebook | Cover | 820 x 312 |
147| Twitter/X | Header | 1500 x 500 |
148| LinkedIn | Personal | 1584 x 396 |
149| YouTube | Channel art | 2560 x 1440 |
150| Instagram | Story | 1080 x 1920 |
151| Instagram | Post | 1080 x 1080 |
152| Google Ads | Med Rectangle | 300 x 250 |
153| Website | Hero | 1920 x 600-1080 |
154
155### Banner: Top Art Styles
156
157| Style | Best For |
158|-------|----------|
159| Minimalist | SaaS, tech |
160| Bold Typography | Announcements |
161| Gradient | Modern brands |
162| Photo-Based | Lifestyle, e-com |
163| Geometric | Tech, fintech |
164| Glassmorphism | SaaS, apps |
165| Neon/Cyberpunk | Gaming, events |
166
167### Banner: Design Rules
168
169- Safe zones: critical content in central 70-80%
170- One CTA per banner, bottom-right, min 44px height
171- Max 2 fonts, min 16px body, ≥32px headline
172- Text under 20% for ads (Meta penalizes)
173- Print: 300 DPI, CMYK, 3-5mm bleed
174
175## Icon Design (Built-in)
176
17715 styles, 12 categories. Gemini 3.1 Pro Preview generates SVG text output.
178
179### Icon: Generate Single Icon
180
181```bash
182python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "settings gear" --style outlined
183python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"
184python3 ~/.claude/skills/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone
185```
186
187### Icon: Generate Batch Variations
188
189```bash
190python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons
191```
192
193### Icon: Multi-size Export
194
195```bash
196python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons
197```
198
199### Icon: Top Styles
200
201| Style | Best For |
202|-------|----------|
203| outlined | UI interfaces, web apps |
204| filled | Mobile apps, nav bars |
205| duotone | Marketing, landing pages |
206| rounded | Friendly apps, health |
207| sharp | Tech, fintech, enterprise |
208| flat | Material design, Google-style |
209| gradient | Modern brands, SaaS |
210
211**Model:** `gemini-3.1-pro-preview` — text-only output (SVG is XML text). No image generation API needed.
212
213## Social Photos (Built-in)
214
215Multi-platform social image design: HTML/CSS → screenshot export. Uses `ui-ux-pro-max`, `brand`, `design-system`, `chrome-devtools` skills.
216
217Load `references/social-photos-design.md` for sizes, templates, best practices.
218
219### Social Photos: Workflow
220
2211. **Orchestrate** — `project-management` skill for TODO tasks; parallel subagents for independent work
2222. **Analyze** — Parse prompt: subject, platforms, style, brand context, content elements
2233. **Ideate** — 3-5 concepts, present via `AskUserQuestion`
2244. **Design** — `/ckm:brand` → `/ckm:design-system` → randomly invoke `/ck:ui-ux-pro-max` OR `/ck:frontend-design`; HTML per idea × size
2255. **Export** — `chrome-devtools` or Playwright screenshot at exact px (2x deviceScaleFactor)
2266. **Verify** — Use Chrome MCP or `chrome-devtools` skill to visually inspect exported designs; fix layout/styling issues and re-export
2277. **Report** — Summary to `plans/reports/` with design decisions
2288. **Organize** — Invoke `assets-organizing` skill to sort output files and reports
229
230### Social Photos: Key Sizes
231
232| Platform | Size (px) | Platform | Size (px) |
233|----------|-----------|----------|-----------|
234| IG Post | 1080×1080 | FB Post | 1200×630 |
235| IG Story | 1080×1920 | X Post | 1200×675 |
236| IG Carousel | 1080×1350 | LinkedIn | 1200×627 |
237| YT Thumb | 1280×720 | Pinterest | 1000×1500 |
238
239## Workflows
240
241### Complete Brand Package
242
2431. **Logo** → `scripts/logo/generate.py` → Generate logo variants
2442. **CIP** → `scripts/cip/generate.py --logo ...` → Create deliverable mockups
2453. **Presentation** → Load `references/slides-create.md` → Build pitch deck
246
247### New Design System
248
2491. **Brand** (brand skill) → Define colors, typography, voice
2502. **Tokens** (design-system skill) → Create semantic token layers
2513. **Implement** (ui-styling skill) → Configure Tailwind, shadcn/ui
252
253## References
254
255| Topic | File |
256|-------|------|
257| Design Routing | `references/design-routing.md` |
258| Logo Design Guide | `references/logo-design.md` |
259| Logo Styles | `references/logo-style-guide.md` |
260| Logo Colors | `references/logo-color-psychology.md` |
261| Logo Prompts | `references/logo-prompt-engineering.md` |
262| CIP Design Guide | `references/cip-design.md` |
263| CIP Deliverables | `references/cip-deliverable-guide.md` |
264| CIP Styles | `references/cip-style-guide.md` |
265| CIP Prompts | `references/cip-prompt-engineering.md` |
266| Slides Create | `references/slides-create.md` |
267| Slides Layouts | `references/slides-layout-patterns.md` |
268| Slides Template | `references/slides-html-template.md` |
269| Slides Copy | `references/slides-copywriting-formulas.md` |
270| Slides Strategy | `references/slides-strategies.md` |
271| Banner Sizes & Styles | `references/banner-sizes-and-styles.md` |
272| Social Photos Guide | `references/social-photos-design.md` |
273| Icon Design Guide | `references/icon-design.md` |
274
275## Scripts
276
277| Script | Purpose |
278|--------|---------|
279| `scripts/logo/search.py` | Search logo styles, colors, industries |
280| `scripts/logo/generate.py` | Generate logos with Gemini AI |
281| `scripts/logo/core.py` | BM25 search engine for logo data |
282| `scripts/cip/search.py` | Search CIP deliverables, styles, industries |
283| `scripts/cip/generate.py` | Generate CIP mockups with Gemini |
284| `scripts/cip/render-html.py` | Render HTML presentation from CIP mockups |
285| `scripts/cip/core.py` | BM25 search engine for CIP data |
286| `scripts/icon/generate.py` | Generate SVG icons with Gemini 3.1 Pro |
287
288## Setup
289
290```bash
291export GEMINI_API_KEY="your-key" # https://aistudio.google.com/apikey
292pip install google-genai pillow
293```
294
295## Integration
296
297**External sub-skills:** brand, design-system, ui-styling
298**Related Skills:** frontend-design, ui-ux-pro-max, ai-multimodal, chrome-devtools
aiskillstore