From ui-ux-pro-max
Designs banners for social media, ads, website heroes, and print with multiple AI-generated art direction options. Supports styles from minimalist to neon and platforms like Facebook, Instagram, Twitter/X, LinkedIn, YouTube, Google Display, and custom sizes.
How this skill is triggered — by the user, by Claude, or both
Slash command
/ui-ux-pro-max:banner-design [platform] [style] [dimensions][platform] [style] [dimensions]The summary Claude sees in its skill listing — used to decide when to auto-load this skill
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.
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.
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).
Collect via AskUserQuestion:
docs/brand-guidelines.md)ui-ux-pro-max skill for design intelligenceNavigate to pinterest.com → search "[purpose] banner design [style]"
Screenshot 3-5 reference pins for art direction inspiration
references/banner-sizes-and-styles.mdFor each art direction option:
Create HTML/CSS banner using frontend-design skill
inject-brand-context.cjsGenerate 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):
Compose final banner — overlay text, CTA, logo on generated visual in HTML/CSS
After designing HTML banners, export each to PNG using chrome-devtools skill:
# 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"
# 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
└── ...
{style}-{width}x{height}.{ext}{YYMMDD}-{style}-{size}.pngPresent all exported images side-by-side. For each option show:
ai-multimodal skill to display if needed)Iterate based on user feedback until approved.
| Platform | Type | Size (px) | Aspect Ratio |
|---|---|---|---|
| Cover | 820 × 312 | ~2.6:1 | |
| Twitter/X | Header | 1500 × 500 | 3:1 |
| Personal | 1584 × 396 | 4:1 | |
| YouTube | Channel art | 2560 × 1440 | 16:9 |
| Story | 1080 × 1920 | 9:16 | |
| Post | 1080 × 1080 | 1:1 | |
| Google Ads | Med Rectangle | 300 × 250 | 6:5 |
| Google Ads | Leaderboard | 728 × 90 | 8:1 |
| Website | Hero | 1920 × 600-1080 | ~3:1 |
Full reference: references/banner-sizes-and-styles.md
| Style | Best For | Key Elements |
|---|---|---|
| Minimalist | SaaS, tech | White space, 1-2 colors, clean type |
| Bold Typography | Announcements | Oversized type as hero element |
| Gradient | Modern brands | Mesh gradients, chromatic blends |
| Photo-Based | Lifestyle, e-com | Full-bleed photo + text overlay |
| Geometric | Tech, fintech | Shapes, grids, abstract patterns |
| Retro/Vintage | F&B, craft | Distressed textures, muted colors |
| Glassmorphism | SaaS, apps | Frosted glass, blur, glow borders |
| Neon/Cyberpunk | Gaming, events | Dark bg, glowing neon accents |
| Editorial | Media, luxury | Grid layouts, pull quotes |
| 3D/Sculptural | Product, tech | Rendered objects, depth, shadows |
Full 22 styles: references/banner-sizes-and-styles.md
inject-brand-context.cjsnpx claudepluginhub joshuarweaver/cascade-content-creation-misc-1 --plugin nextlevelbuilder-ui-ux-pro-max-skill-2Generates banners, social media ads, display ads, and promotional graphics via Gemini using auto-built prompts, format detection, and aspect ratios like 4:5 Instagram or 16:9 YouTube.
Routes design tasks for logos, CIP deliverables, banners, slides, icons, social photos, design tokens, and UI styling with shadcn/ui + Tailwind. Use for brand assets and presentations.
Use when asked to design social media graphics, ad creatives, or marketing assets. Examples: "design a LinkedIn post for our launch", "create ad creatives for our campaign", "make an Instagram story", "design a Twitter card", "create a banner ad", "social assets for the product announcement".