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, or cover image.
npxskills add resciencelab/opc-skills--skill banner-creatorLoading…
Create professional banners through AI image generation with an iterative design process.
Required API Keys (set in environment):
GEMINI_API_KEY - Get from Google AI StudioRequired Skills:
nanobanana - AI image generation (Gemini 3 Pro Image)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
Before generating, gather requirements from user:
Ask about:
Purpose - Where will the banner be used?
Target ratio/size - See references/formats.md:
2:1 (1280x640) - GitHub README3:1 (1500x500) - Twitter header16:9 (1920x1080) - Website heroStyle preference:
Content elements:
Color preferences:
Wait for user confirmation before proceeding!
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:
21:9 ratio (widest available), crop later to targetbanner-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
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.
Ask user which banners they prefer:
Based on feedback:
banner-{original}-v{n}.png (e.g., banner-03-v1.png)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:
--ratio 2:1 --width 1280 → 1280x640--ratio 3:1 --width 1500 → 1500x500--ratio 16:9 --width 1920 → 1920x1080Present 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.
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}
Generate at widest ratio, then crop:
21:9 - Ultra-wide (recommended for generation)16:9 - Wide3:2 - Standard wide
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).