banner-creator
installsforks
How to install banner-creator?
resciencelab/opc-skills/banner-creator
$npx -y skills add ReScienceLab/opc-skills --skill banner-creatorCreate 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
| 1 | # Banner Creator Skill |
| 2 | |
| 3 | Create professional banners through AI image generation with an iterative design process. |
| 4 | |
| 5 | ## Prerequisites |
| 6 | |
| 7 | **Required API Keys (set in environment):** |
| 8 | - `GEMINI_API_KEY` - Get from [Google AI Studio](https://aistudio.google.com/apikey) |
| 9 | |
| 10 | **Required Skills:** |
| 11 | - `nanobanana` - AI image generation (Gemini 3 Pro Image) |
| 12 | |
| 13 | |
| 14 | |
| 15 | ## File Output Location |
| 16 | |
| 17 | All generated files should be saved to the `.skill-archive` directory: |
| 18 | |
| 19 | ``` |
| 20 | .skill-archive/banner-creator/<yyyy-mm-dd-summaryname>/ |
| 21 | ``` |
| 22 | |
| 23 | **Example:** |
| 24 | ``` |
| 25 | .skill-archive/banner-creator/2026-01-19-opc-banner/ |
| 26 | banner-01.png |
| 27 | banner-02.png |
| 28 | ... |
| 29 | banner-03-cropped.png |
| 30 | preview.html |
| 31 | ``` |
| 32 | |
| 33 | ## Workflow |
| 34 | |
| 35 | ### Step 1: Discovery & Requirements |
| 36 | |
| 37 | Before generating, gather requirements from user: |
| 38 | |
| 39 | **Ask about:** |
| 40 | 1. **Purpose** - Where will the banner be used? |
| 41 | - GitHub README |
| 42 | - Twitter/X header |
| 43 | - LinkedIn banner |
| 44 | - Website hero |
| 45 | - YouTube channel art |
| 46 | |
| 47 | 2. **Target ratio/size** - See [references/formats.md](./references/formats.md): |
| 48 | - `2:1` (1280x640) - GitHub README |
| 49 | - `3:1` (1500x500) - Twitter header |
| 50 | - `16:9` (1920x1080) - Website hero |
| 51 | |
| 52 | 3. **Style preference**: |
| 53 | - Match existing logo/brand? |
| 54 | - Pixel art / 8-bit retro |
| 55 | - Minimalist / flat design |
| 56 | - Gradient / modern |
| 57 | - Illustrated / artistic |
| 58 | |
| 59 | 4. **Content elements**: |
| 60 | - Brand name / project name? |
| 61 | - Tagline / slogan? |
| 62 | - Logo character to include? |
| 63 | |
| 64 | 5. **Color preferences**: |
| 65 | - Existing brand colors? |
| 66 | - Let AI decide? |
| 67 | |
| 68 | **Wait for user confirmation before proceeding!** |
| 69 | |
| 70 | ### Step 2: Generate Banner Variations |
| 71 | |
| 72 | Generate 20 banner variations using the `nanobanana` skill: |
| 73 | |
| 74 | ```bash |
| 75 | # Generate single banner |
| 76 | python3 <nanobanana_skill_dir>/scripts/generate.py "{style} banner for {brand}, {description}, {text elements}" \ |
| 77 | --ratio 21:9 -o .skill-archive/banner-creator/<date-name>/banner-01.png |
| 78 | |
| 79 | # Batch generate 20 banners |
| 80 | python3 <nanobanana_skill_dir>/scripts/batch_generate.py "{style} banner for {brand}, {description}, {text elements}" \ |
| 81 | -n 20 --ratio 21:9 -d .skill-archive/banner-creator/<date-name> -p banner |
| 82 | ``` |
| 83 | |
| 84 | **Guidelines:** |
| 85 | - Generate at `21:9` ratio (widest available), crop later to target |
| 86 | - Use batch_generate.py for multiple variations (includes auto-delay) |
| 87 | - Use sequential naming: `banner-01.png`, `banner-02.png`, etc. |
| 88 | |
| 89 | **Image Editing (for incorporating existing logo):** |
| 90 | ```bash |
| 91 | python3 <nanobanana_skill_dir>/scripts/generate.py "add {logo character} to the left side of the banner" \ |
| 92 | -i /path/to/existing-logo.png --ratio 21:9 -o banner-with-logo.png |
| 93 | ``` |
| 94 | |
| 95 | ### Step 3: Create HTML Preview |
| 96 | |
| 97 | Copy the preview template and open in browser: |
| 98 | |
| 99 | ```bash |
| 100 | cp <skill_dir>/templates/preview.html .skill-archive/banner-creator/<yyyy-mm-dd-summaryname>/preview.html |
| 101 | ``` |
| 102 | |
| 103 | Then open in default browser: |
| 104 | |
| 105 | ```bash |
| 106 | open .skill-archive/banner-creator/<yyyy-mm-dd-summaryname>/preview.html |
| 107 | ``` |
| 108 | |
| 109 | **IMPORTANT:** Update the HTML to include the correct number of banners generated. |
| 110 | |
| 111 | ### Step 4: Iterate with User |
| 112 | |
| 113 | Ask user which banners they prefer: |
| 114 | - "Which banners do you like? (e.g., #3, #7, #15)" |
| 115 | - "What do you like about them?" |
| 116 | - "Any changes you'd want?" |
| 117 | |
| 118 | Based on feedback: |
| 119 | 1. Generate 10-20 more variations of favorite styles |
| 120 | 2. Use naming: `banner-{original}-v{n}.png` (e.g., `banner-03-v1.png`) |
| 121 | 3. Update HTML preview |
| 122 | 4. Repeat until user selects final banner |
| 123 | |
| 124 | ### Step 5: Crop to Target Ratio |
| 125 | |
| 126 | Once user approves a banner, crop to target size: |
| 127 | |
| 128 | ```bash |
| 129 | python3 <skill_dir>/scripts/crop_banner.py {input.png} {output.png} --ratio 2:1 --width 1280 |
| 130 | ``` |
| 131 | |
| 132 | **Common targets:** |
| 133 | - GitHub README: `--ratio 2:1 --width 1280` → 1280x640 |
| 134 | - Twitter header: `--ratio 3:1 --width 1500` → 1500x500 |
| 135 | - Website hero: `--ratio 16:9 --width 1920` → 1920x1080 |
| 136 | |
| 137 | ### Step 6: Deliver Final Assets |
| 138 | |
| 139 | Present final deliverables: |
| 140 | |
| 141 | ``` |
| 142 | ## Final Banner Assets |
| 143 | |
| 144 | | File | Description | Size | |
| 145 | |------|-------------|------| |
| 146 | | banner-03.png | Original (21:9) | 2016x864 | |
| 147 | | banner-03-cropped.png | GitHub README (2:1) | 1280x640 | |
| 148 | |
| 149 | All files saved to: `.skill-archive/banner-creator/<yyyy-mm-dd-summaryname>/` |
| 150 | Copy final banner to user's desired location. |
| 151 | ``` |
| 152 | |
| 153 | ## Quick Reference |
| 154 | |
| 155 | ### Common Prompt Patterns |
| 156 | |
| 157 | **With Text:** |
| 158 | ``` |
| 159 | Wide banner for {brand}, {style} style, featuring "{text}" prominently displayed, {colors}, {scene/elements} |
| 160 | ``` |
| 161 | |
| 162 | **With Character:** |
| 163 | ``` |
| 164 | Wide banner featuring {character description}, {style} style, {scene}, text "{brand name}" on {position}, {colors} |
| 165 | ``` |
| 166 | |
| 167 | **Abstract/Gradient:** |
| 168 | ``` |
| 169 | Abstract {style} banner, {colors} gradient, geometric patterns, modern tech feel, text "{brand}" centered |
| 170 | ``` |
| 171 | |
| 172 | **Scene-based:** |
| 173 | ``` |
| 174 | {Style} illustration banner, {scene description}, {character} in {action}, "{brand}" text overlay, {colors} |
| 175 | ``` |
People who liked this also viewed
6 picksType
- ai-video-generationinference.sh Agent skills for using our API to give your agents access to hundreds of apps and other agentsSkillsJul 2026
- imagegen-frontend-webElite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing pageSkillsJul 2026
- hyperframes-mediaWrite HTML. Render video. Built for agents.SkillsJul 2026
- media-useAgent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + leSkillsJul 2026
- general-videoAuthor or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, staticSkillsJul 2026
- product-launch-videoTurn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market,SkillsJul 2026
