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

Required Skills:

• nanobanana - AI image generation (Gemini 3 Pro Image)

File Output Location

All generated files should be saved to the .skill-archive directory:

.skill-archive/banner-creator/<yyyy-mm-dd-summaryname>/

Example:

.skill-archive/banner-creator/2026-01-19-opc-banner/
  banner-01.png
  banner-02.png
  ...
  banner-03-cropped.png
  preview.html

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:

   • 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:

# Generate single banner
python3 <nanobanana_skill_dir>/scripts/generate.py "{style} banner for {brand}, {description}, {text elements}" \
  --ratio 21:9 -o .skill-archive/banner-creator/<date-name>/banner-01.png

# Batch generate 20 banners
python3 <nanobanana_skill_dir>/scripts/batch_generate.py "{style} banner for {brand}, {description}, {text elements}" \
  -n 20 --ratio 21:9 -d .skill-archive/banner-creator/<date-name> -p banner

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):

python3 <nanobanana_skill_dir>/scripts/generate.py "add {logo character} to the left side of the banner" \
  -i /path/to/existing-logo.png --ratio 21:9 -o banner-with-logo.png

Step 3: Create HTML Preview

Copy the preview template and open in browser:

cp <skill_dir>/templates/preview.html .skill-archive/banner-creator/<yyyy-mm-dd-summaryname>/preview.html

Then open in default browser:

open .skill-archive/banner-creator/<yyyy-mm-dd-summaryname>/preview.html

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:

python3 <skill_dir>/scripts/crop_banner.py {input.png} {output.png} --ratio 2:1 --width 1280

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:

## Final Banner Assets

| File | Description | Size |
|------|-------------|------|
| banner-03.png | Original (21:9) | 2016x864 |
| banner-03-cropped.png | GitHub README (2:1) | 1280x640 |

All files saved to: `.skill-archive/banner-creator/<yyyy-mm-dd-summaryname>/`
Copy final banner to user's desired location.

Quick Reference

Common Prompt Patterns

With Text:

Wide banner for {brand}, {style} style, featuring "{text}" prominently displayed, {colors}, {scene/elements}

With Character:

Wide banner featuring {character description}, {style} style, {scene}, text "{brand name}" on {position}, {colors}

Abstract/Gradient:

Abstract {style} banner, {colors} gradient, geometric patterns, modern tech feel, text "{brand}" centered

Scene-based:

{Style} illustration banner, {scene description}, {character} in {action}, "{brand}" text overlay, {colors}

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 - Common banner sizes by platform
• examples/opc-banner-creation.md - Full example conversation

---

Referenced Files

The following files are referenced in this skill and included for context.

references/formats.md

# Banner Formats Reference

## Platform-Specific Sizes

| Platform | Size (px) | Ratio | Notes |
|----------|-----------|-------|-------|
| **GitHub README** | 1280×640 | 2:1 | Most common for project banners |
| **Twitter/X Header** | 1500×500 | 3:1 | Profile header image |
| **LinkedIn Banner** | 1584×396 | 4:1 | Personal profile background |
| **LinkedIn Company** | 1128×191 | ~6:1 | Company page banner |
| **YouTube Channel** | 2560×1440 | 16:9 | Channel art (safe area: 1546×423) |
| **Facebook Cover** | 820×312 | ~2.6:1 | Personal profile |
| **Discord Server** | 960×540 | 16:9 | Server banner |
| **Website Hero** | 1920×1080 | 16:9 | Full-width hero section |
| **Website Hero (tall)** | 1920×800 | 2.4:1 | Shorter hero section |
| **Email Header** | 600×200 | 3:1 | Newsletter headers |
| **Product Hunt** | 1270×760 | ~1.67:1 | Gallery images |

## Generation Strategy

Since `nano-banana-pro` supports these ratios:
- `1:1`, `2:3`, `3:2`, `3:4`, `4:3`, `4:5`, `5:4`, `9:16`, `16:9`, `21:9`

**Recommended approach:**
1. Generate at `21:9` (widest available)
2. Crop to target ratio using `crop_banner.py`

This ensures:
- Maximum flexibility for different platforms
- Content centered properly
- No stretching or distortion

## Ratio Quick Reference

21:9 ████████████████████████████████ (ultra-wide, cinematic) 16:9 ████████████████████████ (widescreen) 3:1 ████████████████████████████████ (Twitter header) 2:1 ████████████████ (GitHub README) 4:1 ████████████████████████████████████████████ (LinkedIn)

## File Size Guidelines

- **GitHub**: < 10MB, PNG or JPG
- **Twitter**: < 5MB, PNG, JPG, or GIF
- **LinkedIn**: < 8MB, PNG or JPG
- **Website**: Optimize for web (< 500KB ideally)

## Tips

1. **Safe zones**: Keep important content (text, logo) in center 60% for platforms that crop on mobile
2. **Text legibility**: Use high contrast, avoid small text
3. **Brand consistency**: Match colors and style with existing logo
4. **Mobile preview**: Check how banner looks on mobile (often cropped)

examples/opc-banner-creation.md

# Example: OPC Skills Banner Creation

**User:** Create a banner for opc.dev GitHub README. Should match the existing pixel art logo style.

**Agent:** I'll create a banner for OPC Skills. Let me confirm the requirements:

1. Target size: GitHub README banner (typically 1280x640, 2:1 ratio)
2. Style: Pixel art to match existing crowned king logo
3. Text: "opc.dev" and "Agent Skills"
4. Character: Include the pixel art crowned king from logo

**User:** Yes, that's correct. Please generate some options.

**Agent:** Generating banner variations at 16:9 ratio first...

Here are the generated banners:

![Banner 01](/skills/banner-creator/examples/images/banner-01.png)
![Banner 02](/skills/banner-creator/examples/images/banner-02.png)
![Banner 03](/skills/banner-creator/examples/images/banner-03.png)
![Banner 04](/skills/banner-creator/examples/images/banner-04.png)
![Banner 05](/skills/banner-creator/examples/images/banner-05.png)
![Banner 06](/skills/banner-creator/examples/images/banner-06.png)

**User:** I like the style. But GitHub banners work best at 2:1 ratio. Can you generate some at that ratio?

**Agent:** Generating at 2:1 ratio for GitHub:

![GitHub Banner 01](/skills/banner-creator/examples/images/github-banner-01.png)
![GitHub Banner 02](/skills/banner-creator/examples/images/github-banner-02.png)
![GitHub Banner 03](/skills/banner-creator/examples/images/github-banner-03.png)

**User:** Perfect! Let's use the third one.

**Agent:** Here's the final banner:

![Final Banner](/skills/banner-creator/examples/images/opc-banner-final.png)

The banner is ready to use in your README!