/design

name: design
user-invocable: false
description: "Unified design router: logo, CIP, banners, slides, icons, social photos, design tokens. Use for any visual asset creation, brand identity, or presentation design."
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 | | 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_SKILL_DIR}/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"

Logo: Search Styles/Colors/Industries

python3 ${CLAUDE_SKILL_DIR}/scripts/logo/search.py "minimalist clean" --domain style
python3 ${CLAUDE_SKILL_DIR}/scripts/logo/search.py "tech professional" --domain color
python3 ${CLAUDE_SKILL_DIR}/scripts/logo/search.py "healthcare medical" --domain industry

Logo: Generate with AI

**ALWAYS** generate output logo images with white background.

python3 ${CLAUDE_SKILL_DIR}/scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech
python3 ${CLAUDE_SKILL_DIR}/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_SKILL_DIR}/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"

CIP: Search Domains

python3 ${CLAUDE_SKILL_DIR}/scripts/cip/search.py "business card letterhead" --domain deliverable
python3 ${CLAUDE_SKILL_DIR}/scripts/cip/search.py "luxury premium elegant" --domain style
python3 ${CLAUDE_SKILL_DIR}/scripts/cip/search.py "hospitality hotel" --domain industry
python3 ${CLAUDE_SKILL_DIR}/scripts/cip/search.py "office reception" --domain mockup

CIP: Generate Mockups

# With logo (RECOMMENDED)
python3 ${CLAUDE_SKILL_DIR}/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"

# Full CIP set
python3 ${CLAUDE_SKILL_DIR}/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set

# Pro model (4K text)
python3 ${CLAUDE_SKILL_DIR}/scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro

# Without logo
python3 ${CLAUDE_SKILL_DIR}/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_SKILL_DIR}/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

1. **Gather requirements** via `AskUserQuestion` — purpose, platform, content, brand, style, quantity 2. **Research** — Activate `ui-ux-pro-max`, browse Pinterest for references 3. **Design** — Create HTML/CSS banner with `frontend-design`, generate visuals with `ai-artist`/`ai-multimodal` 4. **Export** — Screenshot to PNG at exact dimensions via `chrome-devtools` 5. **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