Create banners using AI image generation. Discuss format/style, generate variations, iterate with user feedback, crop to target ratio. Use when user wants to create a banner, header, hero image, cover image, GitHub banner, Twitter header, or readme banner.

Banner Creator Skill Create professional banners through AI image generation with an iterative design process. Prerequisites Required API Keys (set in environment): GEMINI API KEY Get from [Google AI Studio](https://aistudio.google.com/apikey) Required Skills: nanobanana AI image generation (Gemini 3 Pro Image) File Output Location All generated files should be saved to the .skill archive directory: Example: Workflow Step 1: Discovery & Requirements Before generating, gather requirements from user: Ask about: 1. Purpose Where will the banner be used? GitHub README Twitter/X header LinkedIn banner Website hero YouTube channel art 2. Target ratio/size See [references/formats.md](./references/formats.md): 2:1 (1280x640) GitHub README 3:1 (1500x500) Twitter header 16:9 (1920x1080) Website hero 3. Style preference : Match existing logo/brand? Pixel art / 8 bit retro Minimalist / flat design Gradient / modern Illustrated / artistic 4. Content elements : Brand name / project name? Tagline / slogan? Logo character to include? 5. Color preferences : Existing brand colors? Let AI decide? Wait for user confirmation before proceeding! Step 2: Generate Banner Variations Generate 20 banner variations using the nanobanana skill: Guidelines: Generate at 21:9 ratio (widest available), crop later to target Use batch generate.py for multiple variations (includes auto delay) Use sequential naming: banner 01.png , banner 02.png , etc. Image Editing (for incorporating existing logo): Step 3: Create HTML Preview Copy the preview template and open in browser: Then open in default browser: IMPORTANT: Update the HTML to include the correct number of banners generated. Step 4: Iterate with User Ask user which banners they prefer: "Which banners do you like? (e.g., 3, 7, 15)" "What do you like about them?" "Any changes you'd want?" Based on feedback: 1. Generate 10 20 more variations of favorite styles 2. Use naming: banner {original} v{n}.png (e.g., banner 03 v1.png ) 3. Update HTML preview 4. Repeat until user selects final banner Step 5: Crop to Target Ratio Once user approves a banner, crop to target size: Common targets: GitHub README: ratio 2:1 width 1280 → 1280x640 Twitter header: ratio 3:1 width 1500 → 1500x500 Website hero: ratio 16:9 width 1920 → 1920x1080 Step 6: Deliver Final Assets Present final deliverables: Quick Reference Common Prompt Patterns With Text: With Character: Abstract/Gradient: Scene based: Supported Aspect Ratios Generate at widest ratio, then crop: 21:9 Ultra wide (recommended for generation) 16:9 Wide 3:2 Standard wide References [references/formats.md](./references/formats.md) Common banner sizes by platform [examples/opc banner creation.md](./examples/opc banner creation.md) Full example conversation

banner-creator