MCPInstall

banner-creator

by resciencelabMedia & Creative

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.

Installs
1.8K
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/resciencelab/opc-skills --skill banner-creator
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads banner-creator automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

Banner Creator Skill

Create professional banners through AI image generation with an iterative design process.

Prerequisites

Required API Keys (set in environment):

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

FAQ

What does the banner-creator skill do?

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.

How do I install banner-creator?

Run npx skills add https://github.com/resciencelab/opc-skills --skill banner-creator in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/banner-creator/ (personal) or .claude/skills/banner-creator/ (project).

Which AI agents can use banner-creator?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is banner-creator safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains banner-creator?

It is published by resciencelab in resciencelab/opc-skills. It has 1,823 recorded installs.

More from resciencelab/opc-skills

View all →

seo-geo

resciencelab/opc-skills

SEO & GEO (Generative Engine Optimization) for websites. Analyze keywords, generate schema markup, optimize for AI search engines (ChatGPT, Perplexity, Gemini, Copilot, Claude) and traditional search (Google, Bing). Use when user wants to improve search visibility, search optimization, search ranking, AI visibility, ChatGPT ranking, Google AI Overview, indexing, JSON-LD, meta tags, or keyword research.

Marketing & SEO54.2K installs

reddit

resciencelab/opc-skills

Search and retrieve content from Reddit. Get posts, comments, subreddit info, and user profiles via the public JSON API. Use when user mentions Reddit, a subreddit, or r/ links.

Marketing & SEO3.4K installs

logo-creator

resciencelab/opc-skills

Create logos using AI image generation. Discuss style/ratio, generate variations, iterate with user feedback, crop, remove background, and export as SVG. Use when user wants to create a logo, icon, favicon, brand mark, mascot, emblem, or design a logo.

Marketing & SEO3.2K installs

nanobanana

resciencelab/opc-skills

Generate and edit images using Google Gemini 3 Pro Image (Nano Banana Pro). Supports text-to-image, image editing, various aspect ratios, and high-resolution output (2K/4K). Use when user wants to generate images, create images, use Gemini image generation, or do AI image generation.

Media & Creative2.9K installs

producthunt

resciencelab/opc-skills

Search and retrieve content from Product Hunt. Get posts, topics, users, and collections via the GraphQL API. Use when user mentions Product Hunt, PH, or product launches.

Backend & APIs2.7K installs

twitter

resciencelab/opc-skills

Search and retrieve content from Twitter/X. Get user info, tweets, replies, followers, communities, spaces, and trends via twitterapi.io. Use when user mentions Twitter, X, or tweets.

Marketing & SEO2.1K installs

Popular media & creative skills

View category →

hyperframes

heygen-com/hyperframes

Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.

Media & Creative1.2M installs

media-use

heygen-com/hyperframes

Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.

Media & Creative1.1M installs

hyperframes-registry

heygen-com/hyperframes

About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.

Media & Creative1M installs

hyperframes-creative

heygen-com/hyperframes

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.

Media & Creative916.5K installs

ai-video-generation

101-skills/superpowers

Generate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, reference-to-video, video editing, lipsync, avatar animation, video upscaling, foley sound. Use for: social media videos, marketing content, explainer videos, product demos, AI avatars. Triggers: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, generate video, t2v, i2v, ai video maker, create video with ai, runway alternative, pika alternative, sora alternative, kling alternative, seedance, happyhorse

Media & Creative881.5K installs

ai-image-generation

101-skills/superpowers

Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI. Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt. Capabilities: text-to-image, image-to-image, inpainting, LoRA, image editing, upscaling, text rendering. Use for: AI art, product mockups, concept art, social media graphics, marketing visuals, illustrations. Triggers: flux, image generation, ai image, text to image, stable diffusion, generate image, ai art, midjourney alternative, dall-e alternative, text2img, t2i, image generator, ai picture, create image with ai, generative ai, ai illustration, grok image, gemini image, gpt image, openai image, chatgpt image

Media & Creative880.3K installs