| name | design |
| description | 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. |
| argument-hint | [design-type] [context] |
| license | MIT |
| metadata | {"author":"claudekit","version":"2.1.0"} |
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 |
| Presentations, pitch decks | slides | External skill |
| Banners, covers, headers | banner-design | External skill |
| Logo creation, AI generation | Logo (built-in) | references/logo-design.md |
| CIP mockups, deliverables | CIP (built-in) | references/cip-design.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
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set
python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro
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
For presentations and pitch decks, use the slides skill. It contains the full creation workflow, layout patterns, HTML templates, copywriting formulas, and strategies.
Banner Design
For banners, covers, and headers, use the banner-design skill. It contains the full workflow, size references, art styles, and export process.
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 |
| Social Photos Guide | references/social-photos-design.md |
| Icon Design Guide | references/icon-design.md |
Slides and Banner references are in their respective skills: slides/SKILL.md, banner-design/SKILL.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 |
Prerequisites
Python: This skill uses Python scripts. On Windows, use python instead of python3 (e.g., python scripts/logo/search.py instead of python3 scripts/logo/search.py).
Check if Python is installed:
python3 --version || python --version
Setup
export GEMINI_API_KEY="your-key"
pip install google-genai pillow
Note for Windows: Use python instead of pip where needed (e.g., python -m pip install ...).
Integration
External sub-skills: brand, design-system, ui-styling, slides, banner-design
Related Skills: frontend-design, ui-ux-pro-max, ai-multimodal, chrome-devtools
