# Banner Creator

> Crea banners con generación de imágenes por IA: discute formato/estilo, genera variaciones, itera con feedback del usuario y recorta a la proporción objetivo.

Fuente: https://skillsagentes.com/skills/resciencelab/opc-skills/banner-creator
Markdown: https://skillsagentes.com/skills/resciencelab/opc-skills/banner-creator.md

Repositorio: https://github.com/ReScienceLab/opc-skills
Autor: ReScienceLab
Licencia: Apache-2.0
Actualizado: hace 7 meses
Coste de contexto: 64 tok instalada, 1.3k tok al activarse, 1498.5k tok con todos los archivos del bundle
Bundle: 16 archivos, 5.7 MB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add ReScienceLab/opc-skills --skill banner-creator --agent claude-code
# Cursor
npx -y skills add ReScienceLab/opc-skills --skill banner-creator --agent cursor
# Codex
npx -y skills add ReScienceLab/opc-skills --skill banner-creator --agent codex
# Gemini CLI
npx -y skills add ReScienceLab/opc-skills --skill banner-creator --agent gemini
# Windsurf
npx -y skills add ReScienceLab/opc-skills --skill banner-creator --agent windsurf
# Cline
npx -y skills add ReScienceLab/opc-skills --skill banner-creator --agent cline
```

## Qué hace

- Genera banners con IA (Gemini) discutiendo formato y estilo primero
- Crea 20 variaciones iniciales usando nanobanana y las guarda en .skill-archive
- Genera una vista previa HTML para comparar las variantes generadas
- Itera con más variaciones según el feedback del usuario sobre sus favoritas
- Recorta el banner final a la relación de aspecto objetivo (GitHub, Twitter, hero)

## Cuándo usarla

- El usuario quiere crear un banner, header, hero image, cover image
- Necesita un banner de GitHub, header de Twitter/X o readme banner

## Qué la activa

- "Créame un banner para mi README de GitHub"
- "Necesito un header para mi cuenta de Twitter"
- "Genera variaciones de un banner con mi logo"

## Antes de instalar

- Requiere la variable de entorno GEMINI_API_KEY y la skill nanobanana para generación de imágenes.
- Necesita en el PATH: python3

## Archivos

- .claude-plugin/plugin.json — 706 B
- SKILL.md — 5 KB
- examples/images/banner-01.png — 127 KB
- examples/images/banner-02.png — 271 KB
- examples/images/banner-03.png — 237 KB
- examples/images/banner-04.png — 91 KB
- examples/images/banner-05.png — 476 KB
- examples/images/banner-06.png — 385 KB
- examples/images/github-banner-01.png — 1.3 MB
- examples/images/github-banner-02.png — 1.5 MB
- examples/images/github-banner-03.png — 1.2 MB
- examples/images/opc-banner-final.png — 153 KB
- examples/opc-banner-creation.md — 2 KB
- references/formats.md — 2 KB
- scripts/crop_banner.py — 4 KB
- templates/preview.html — 6 KB

## SKILL.md

Reproducido tal cual desde ReScienceLab/opc-skills bajo Apache-2.0. Esta sección es el documento original y está en inglés.

# 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

# 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):**
```bash
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:

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

Then open in default browser:

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

```bash
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](./references/formats.md) - Common banner sizes by platform
- [examples/opc-banner-creation.md](./examples/opc-banner-creation.md) - Full example conversation

## Dónde encaja

- Categoría: [Diseño y UI](https://skillsagentes.com/categorias/diseno-ui.md) — Sistemas de diseño, trabajo con componentes y acabado visual.
- Creador: [ReScienceLab](https://skillsagentes.com/creators/resciencelab.md) — 12 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Requesthunt](https://skillsagentes.com/skills/resciencelab/opc-skills/requesthunt.md): Genera informes de investigación de demanda de usuarios a partir de feedback real: scrapea y analiza solicitudes, quejas y preguntas en Reddit, X, GitHub, YouTube, LinkedIn y Amazon.
- [Archive](https://skillsagentes.com/skills/resciencelab/opc-skills/archive.md): Archiva aprendizajes de sesión, soluciones de debugging y logs de despliegue en `.archive/yyyy-mm-dd/` como markdown indexado con tags buscables; mantiene `.archive/MEMORY.md` como índice.
- [Add New Opc Skill](https://skillsagentes.com/skills/resciencelab/opc-skills/add-new-opc-skill.md): Checklist y guía de automatización para añadir un nuevo skill al proyecto OPC Skills, asegurando que todos los archivos, metadatos, logos y listados requeridos estén listos antes del release.
- [Seo Geo](https://skillsagentes.com/skills/resciencelab/opc-skills/seo-geo.md): SEO y GEO (Generative Engine Optimization) para sitios web: analiza keywords, genera schema markup y optimiza para buscadores de IA (ChatGPT, Perplexity, Gemini, Copilot, Claude) y tradicionales (Google, Bing).
- [Reddit](https://skillsagentes.com/skills/resciencelab/opc-skills/reddit.md): Busca y recupera contenido de Reddit: posts, comentarios, info de subreddits y perfiles de usuario vía la API JSON pública. Úsalo cuando se mencione Reddit, un subreddit o enlaces r/.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)