# Banner Creator

Create banners using AI image generation.

- Repository: https://github.com/ReScienceLab/opc-skills (1889 stars)
- Category: Git and review
- License: Apache-2.0
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add ReScienceLab/opc-skills --skill banner-creator -g -a claude-code -y`
Codex: `npx skills add ReScienceLab/opc-skills --skill banner-creator -g -a codex -y`
Cursor: `npx skills add ReScienceLab/opc-skills --skill banner-creator -g -a cursor -y`
Gemini CLI: `npx skills add ReScienceLab/opc-skills --skill banner-creator -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add ReScienceLab/opc-skills`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

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

```
.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](./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:

```bash
# 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

The rest: https://github.com/ReScienceLab/opc-skills/blob/HEAD/skills/banner-creator/SKILL.md