/banner-design

name: banner-design
description: "Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills."
argument-hint: "[platform] [style] [dimensions]"
license: MIT
metadata:
  author: claudekit
  version: "1.0.0"

Banner Design - Multi-Format Creative Banner System

Design banners across social, ads, web, and print formats. Generates multiple art direction options per request with AI-powered visual elements. This skill handles banner design only. Does NOT handle video editing, full website design, or print production.

When to Activate

• User requests banner, cover, or header design
• Social media cover/header creation
• Ad banner or display ad design
• Website hero section visual design
• Event/print banner design
• Creative asset generation for campaigns

Prerequisites

**Python:** This skill uses Python scripts. On Windows, use `python` instead of `python3` (e.g., `python scripts/search.py` instead of `python3 scripts/search.py`).

Workflow

Step 1: Gather Requirements (AskUserQuestion)

Collect via AskUserQuestion: 1. **Purpose** — social cover, ad banner, website hero, print, or creative asset? 2. **Platform/size** — which platform or custom dimensions? 3. **Content** — headline, subtext, CTA, logo placement? 4. **Brand** — existing brand guidelines? (check `docs/brand-guidelines.md`) 5. **Style preference** — any art direction? (show style options if unsure) 6. **Quantity** — how many options to generate? (default: 3)

Step 2: Research & Art Direction

1. Activate `ui-ux-pro-max` skill for design intelligence 2. Use Chrome browser to research Pinterest for design references:

   Navigate to pinterest.com → search "[purpose] banner design [style]"
   Screenshot 3-5 reference pins for art direction inspiration

3. Select 2-3 complementary art direction styles from references: `references/banner-sizes-and-styles.md`

Step 3: Design & Generate Options

For each art direction option:

1. **Create HTML/CSS banner** using `frontend-design` skill

• Use exact platform dimensions from size reference
• Apply safe zone rules (critical content in central 70-80%)
• Max 2 typefaces, single CTA, 4.5:1 contrast ratio
• Inject brand context via `inject-brand-context.cjs`

2. **Generate visual elements** with `ai-artist` + `ai-multimodal` skills

**a) Search prompt inspiration** (6000+ examples in ai-artist):

   python3 .claude/skills/ai-artist/scripts/search.py "<banner style keywords>"

**b) Generate with Standard model** (fast, good for backgrounds/patterns):

   .claude/skills/.venv/bin/python3 .claude/skills/ai-multimodal/scripts/gemini_batch_process.py \
     --task generate --model gemini-2.5-flash-image \
     --prompt "<banner visual prompt>" --aspect-ratio <platform-ratio> \
     --size 2K --output assets/banners/

**c) Generate with Pro model** (4K, complex illustrations/hero visuals):

   .claude/skills/.venv/bin/python3 .claude/skills/ai-multimodal/scripts/gemini_batch_process.py \
     --task generate --model gemini-3-pro-image-preview \
     --prompt "<creative banner prompt>" --aspect-ratio <platform-ratio> \
     --size 4K --output assets/banners/

**When to use which model:** | Use Case | Model | Quality | |----------|-------|---------| | Backgrounds, gradients, patterns | Standard (Flash) | 2K, fast | | Hero illustrations, product shots | Pro | 4K, detailed | | Photorealistic scenes, complex art | Pro | 4K, best quality | | Quick iterations, A/B variants | Standard (Flash) | 2K, fast |

**Aspect ratios:** `1:1`, `16:9`, `9:16`, `3:4`, `4:3`, `2:3`, `3:2` Match to platform - e.g., Twitter header = `3:1` (use `3:2` closest), Instagram story = `9:16`

**Pro model prompt tips** (see `ai-artist` references/nano-banana-pro-examples.md):

• Be descriptive: style, lighting, mood, composition, color palette
• Include art direction: "minimalist flat design", "cyberpunk neon", "editorial photography"
• Specify no-text: "no text, no letters, no words" (text overlaid in HTML step)

3. **Compose final banner** — overlay text, CTA, logo on generated visual in HTML/CSS

Step 4: Export Banners to Images

After designing HTML banners, export each to PNG using `chrome-devtools` skill:

1. **Serve HTML files** via local server (python http.server or similar) 2. **Screenshot each banner** at exact platform dimensions:

   # Export banner to PNG at exact dimensions
   node .claude/skills/chrome-devtools/scripts/screenshot.js \
     --url "http://localhost:8765/banner-01-minimalist.html" \
     --width 1500 --height 500 \
     --output "assets/banners/{campaign}/{variant}-{size}.png"

3. **Auto-compress** if >5MB (Sharp compression built-in):

   # With custom max size threshold
   node .claude/skills/chrome-devtools/scripts/screenshot.js \
     --url "http://localhost:8765/banner-02-gradient.html" \
     --width 1500 --height 500 --max-size 3 \
     --output "assets/banners/{campaign}/{variant}-{size}.png"

**Output path convention** (per `assets-organizing` skill):

assets/banners/{campaign}/
├── minimalist-1500x500.png
├── gradient-1500x500.png
├── bold-type-1500x500.png
├── minimalist-1080x1080.png    # if multi-size requested
└── ...

• Use kebab-case for filenames: `{style}-{width}x{height}.{ext}`
• Date prefix for time-sensitive campaigns: `{YYMMDD}-{style}-{size}.png`
• Campaign folder groups all variants together

Step 5: Present Options & Iterate

Present all exported ima