Banner Creator
Generate and iterate AI hero banners cropped to GitHub README, Twitter, and LinkedIn specs without hiring a designer for every repo refresh.
Overview
Banner Creator is an agent skill most often used in Launch (also Grow) that creates AI-generated banner and header images with iterative feedback and ratio-specific crops for GitHub, Twitter, and LinkedIn.
Install
npx skills add https://github.com/resciencelab/opc-skills --skill banner-creatorWhat is this skill?
- Discusses format and style, then generates multiple image variations for feedback
- Iterates on prompts from user feedback until the hero matches brand direction
- Crops to target aspect ratios for GitHub, Twitter, LinkedIn, and similar surfaces
- Example flow documents 1280×640 (2:1) GitHub README banners and 16:9 generation pass
- MIT-licensed OPC skill with scripted commands under ./scripts/
- Example documents GitHub README banner at 1280×640 (2:1) and 16:9 generation before crop
Adoption & trust: 1.4k installs on skills.sh; 920 GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your launch or repo looks unfinished because you lack a correctly sized hero image and do not want to stall shipping on manual design tooling.
Who is it for?
Indie devs shipping open-source repos, micro-SaaS landing refreshes, or social profile updates who want fast visual iteration from a text brief.
Skip if: Teams needing legally cleared stock, strict enterprise brand-compliance packs, or print-resolution artwork without AI review.
When should I use this skill?
You need a banner, header, hero, or cover image for GitHub, Twitter, LinkedIn, or similar—and want format discussion, variations, feedback iteration, and ratio-specific export.
What do I get? / Deliverables
You leave with cropped banner assets aligned to your stated channels and style, ready to drop into README, social profiles, or marketing pages.
- Multiple banner image variations
- Final crops for stated platforms (GitHub, Twitter, LinkedIn, etc.)
- Documented brief alignment (style, text, character elements) from the session
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Launch distribution is the canonical shelf because README and social headers are the first assets prospects see when you ship or open-source a project. Distribution covers channel-specific cover art—GitHub banners, Twitter headers, LinkedIn covers—that amplifies what you are launching or relaunching.
Where it fits
Ship a 2:1 GitHub README banner before tagging v1.0 so the repo looks credible in search and star feeds.
Refresh a Twitter header after repositioning opc.dev messaging without reopening a full design retainer.
Prototype a hero visual for a waitlist landing page to test positioning before committing to a design system.
How it compares
Use instead of one-shot image prompts when you need ratio-aware crops and a feedback loop—not a single static DALL·E paste.
Common Questions / FAQ
Who is banner-creator for?
Solo builders and maintainers who need README banners, Twitter headers, or LinkedIn covers and prefer an agent-guided generate-and-crop loop over Figma from scratch.
When should I use banner-creator?
Use it at Launch when preparing distribution assets for a repo or product drop, and in Grow when refreshing content or social headers after branding or messaging changes.
Is banner-creator safe to install?
It invokes image generation and local scripts; check the Security Audits panel on this page and review script permissions before running in CI or shared environments.
SKILL.md
READMESKILL.md - Banner Creator
{ "name": "banner-creator", "version": "1.0.0", "description": "Create banners using AI image generation. Discuss format/style, generate variations, iterate with user feedback, crop to target ratio for GitHub, Twitter, LinkedIn, etc.", "author": { "name": "ReScienceLab" }, "homepage": "https://github.com/ReScienceLab/opc-skills/tree/main/skills/banner-creator", "repository": "https://github.com/ReScienceLab/opc-skills", "license": "MIT", "keywords": [ "banner", "header", "hero image", "cover image", "create banner", "github banner", "twitter header", "readme banner" ], "skills": [ "./SKILL.md" ], "commands": [ "./scripts/" ] } # Example: OPC Skills Banner Creation **User:** Create a banner for opc.dev GitHub README. Should match the existing pixel art logo style. **Agent:** I'll create a banner for OPC Skills. Let me confirm the requirements: 1. Target size: GitHub README banner (typically 1280x640, 2:1 ratio) 2. Style: Pixel art to match existing crowned king logo 3. Text: "opc.dev" and "Agent Skills" 4. Character: Include the pixel art crowned king from logo **User:** Yes, that's correct. Please generate some options. **Agent:** Generating banner variations at 16:9 ratio first... Here are the generated banners:       **User:** I like the style. But GitHub banners work best at 2:1 ratio. Can you generate some at that ratio? **Agent:** Generating at 2:1 ratio for GitHub:    **User:** Perfect! Let's use the third one. **Agent:** Here's the final banner:  The banner is ready to use in your README! # Banner Formats Reference ## Platform-Specific Sizes | Platform | Size (px) | Ratio | Notes | |----------|-----------|-------|-------| | **GitHub README** | 1280×640 | 2:1 | Most common for project banners | | **Twitter/X Header** | 1500×500 | 3:1 | Profile header image | | **LinkedIn Banner** | 1584×396 | 4:1 | Personal profile background | | **LinkedIn Company** | 1128×191 | ~6:1 | Company page banner | | **YouTube Channel** | 2560×1440 | 16:9 | Channel art (safe area: 1546×423) | | **Facebook Cover** | 820×312 | ~2.6:1 | Personal profile | | **Discord Server** | 960×540 | 16:9 | Server banner | | **Website Hero** | 1920×1080 | 16:9 | Full-width hero section | | **Website Hero (tall)** | 1920×800 | 2.4:1 | Shorter hero section | | **Email Header** | 600×200 | 3:1 | Newsletter headers | | **Product Hunt** | 1270×760 | ~1.67:1 | Gallery images | ## Generation Strategy Since `nano-banana-pro` supports these ratios: - `1:1`, `2:3`, `3:2`, `3:4`, `4:3`, `4:5`, `5:4`, `9:16`, `16:9`, `21:9` **Recommended approach:** 1. Generate at `21:9` (widest available) 2. Crop to target ratio using `crop_banner.py` This ensures: - Maximum flexibility for different platforms - Content centered properly - No stretching or distortion ## Ratio Quick Reference ``` 21:9 ████████████████████████████████ (ultra-wide, cinematic) 16:9 ████████████████████████ (widescreen) 3:1 ████████████████████████████████ (Twitter header) 2:1 ████████████████ (GitHub README) 4:1 ████████████████████████████████████████████ (LinkedIn) ``` ## File Size Guidelines - **GitHub**: < 10MB, PNG or JPG - **Twitter**: < 5MB, PNG, JPG, or GIF - **LinkedI