Back to Skills

banner-creator

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.

1,215stars119forksUpdated 8/5/2026

Security Assessment

Safe(95/100)
Security Score95/100

About banner-creator

Banner-creator produces professional banners through AI image generation with an iterative, feedback-driven design process. It solves the common need for header, hero, cover, and social banners (GitHub README, Twitter/X header, LinkedIn banner, website hero, YouTube channel art) by guiding a structured workflow from requirements gathering to a final cropped, ready-to-use asset.

The workflow starts with a discovery step that gathers purpose, target ratio/size, style preference, content elements, and colors, waiting for user confirmation before generating. It then generates batches of variations (up to 20) at the widest 21:9 ratio using a companion 'nanobanana' AI image-generation skill (Gemini 3 Pro Image), builds a self-contained HTML preview page so the user can compare options, iterates on favorites based on feedback with a consistent naming scheme, and finally crops the approved banner to the target ratio and dimensions using a bundled Python crop script. It documents common prompt patterns (text, character, abstract/gradient, scene-based), supported aspect ratios, and per-platform sizes, and organizes all outputs into a dated .skill-archive directory. It also supports incorporating an existing logo image into a banner via image editing.

It targets developers, project maintainers, and creators who need branded banners quickly without a designer. The skill requires a GEMINI_API_KEY set in the environment (obtained from Google AI Studio) and the companion nanobanana skill. Use cases include creating a GitHub README banner matching an existing pixel-art logo, a Twitter header, or a website hero image. It ships with a crop script, preview template, format reference, and a worked example conversation.

FAQ

What do I need to use this skill?

A GEMINI_API_KEY set in your environment (from Google AI Studio) and the companion 'nanobanana' AI image-generation skill, which uses Gemini 3 Pro Image.

What formats and sizes does it support?

It generates at wide ratios (21:9 recommended, plus 16:9 and 3:2) then crops to targets like 2:1 (1280x640) for GitHub README, 3:1 (1500x500) for a Twitter header, and 16:9 (1920x1080) for a website hero.

How does the iterative process work?

It gathers requirements and waits for confirmation, generates a batch of up to 20 variations, builds an HTML preview to compare them, then generates more variations of your favorites based on feedback until you select a final banner.

Can it use my existing logo?

Yes — it can incorporate an existing logo image into a banner through the nanobanana image-editing script by passing the logo as an input image.

Where are the generated files saved?

All outputs are organized under a dated .skill-archive/banner-creator/<yyyy-mm-dd-summaryname>/ directory, including numbered banner PNGs, the cropped final, and the HTML preview.

All Files

6 files
scripts/crop_banner.py4.0 KB
View
SKILL.md5.2 KB
View
examples/opc-banner-creation.md1.6 KB
View
templates/preview.html6.4 KB
View
.claude-plugin/plugin.json0.7 KB
View
references/formats.md2.0 KB
View

Install banner-creator

Download and extract the skill files to your .claude/skills/ directory.

Quick Setup:

  1. Copy the skill folder to .claude/skills/
  2. Claude will automatically detect and use the skill