Back to Details

banner-creator

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Banner Creator Skill

Banner Creator 技能

Create professional banners through AI image generation with an iterative design process.
通过AI图像生成和迭代设计流程创建专业横幅。

Prerequisites

前提条件

Required API Keys (set in environment):
Required Skills:
  • nanobanana
    - AI image generation (Gemini 3 Pro Image)
所需API密钥（在环境中配置）：
所需技能：
  • nanobanana
    - AI图像生成（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
所有生成的文件应保存到
.skill-archive
目录：
.skill-archive/banner-creator/<yyyy-mm-dd-summaryname>/
示例：
.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

步骤1：需求调研

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!
生成前，先收集用户需求：
需询问以下内容：
  1. 用途 - 横幅将用于何处？
    • GitHub README
    • Twitter/X 页眉
    • LinkedIn 横幅
    • 网站英雄图
    • YouTube 频道封面
  2. 目标比例/尺寸 - 参见references/formats.md：
    • 2:1
      (1280x640) - GitHub README
    • 3:1
      (1500x500) - Twitter/X 页眉
    • 16:9
      (1920x1080) - 网站英雄图
  3. 风格偏好：
    • 是否匹配现有标志/品牌风格？
    • 像素风 / 8位复古风
    • 极简风 / 扁平化设计
    • 渐变风 / 现代风
    • 插画风 / 艺术风
  4. 内容元素：
    • 品牌名称 / 项目名称？
    • 标语 / 口号？
    • 是否需要加入标志角色？
  5. 颜色偏好：
    • 现有品牌配色？
    • 由AI决定？
请等待用户确认后再继续！

Step 2: Generate Banner Variations

步骤2：生成横幅变体

Generate 20 banner variations using the 
nanobanana
skill:
bash
undefined
使用
nanobanana
技能生成20种横幅变体：
bash
undefined

Generate single banner

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
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

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
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

**指导原则：**
- 以`21:9`比例生成（可用的最宽比例），后续再裁剪至目标比例
- 使用batch_generate.py生成多个变体（包含自动延迟）
- 使用顺序命名：`banner-01.png`, `banner-02.png`等

**图像编辑（用于整合现有标志）：**
```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

步骤3：创建HTML预览

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.
复制预览模板并在浏览器中打开：
bash
cp <skill_dir>/templates/preview.html .skill-archive/banner-creator/<yyyy-mm-dd-summaryname>/preview.html
然后在默认浏览器中打开：
bash
open .skill-archive/banner-creator/<yyyy-mm-dd-summaryname>/preview.html
重要提示： 更新HTML以包含生成的横幅的正确数量。

Step 4: Iterate with User

步骤4：根据用户反馈迭代

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
询问用户喜欢哪些横幅：
  • "你喜欢哪些横幅？（例如：#3、#7、#15）"
  • "你喜欢它们的哪些方面？"
  • "你想要进行哪些修改？"
根据反馈：
  1. 生成10-20种用户喜欢的风格的变体
  2. 使用命名格式：
    banner-{original}-v{n}.png
    （例如：
    banner-03-v1.png
    ）
  3. 更新HTML预览
  4. 重复上述步骤直到用户选定最终横幅

Step 5: Crop to Target Ratio

步骤5：裁剪至目标比例

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
一旦用户确认某款横幅，将其裁剪至目标尺寸：
bash
python3 <skill_dir>/scripts/crop_banner.py {input.png} {output.png} --ratio 2:1 --width 1280
常见目标：
  • GitHub README: 
    --ratio 2:1 --width 1280
    → 1280x640
  • Twitter/X 页眉: 
    --ratio 3:1 --width 1500
    → 1500x500
  • 网站英雄图: 
    --ratio 16:9 --width 1920
    → 1920x1080

Step 6: Deliver Final Assets

步骤6：交付最终资源

Present final deliverables:
undefined
展示最终交付物：
undefined

Final Banner Assets

Final Banner Assets

FileDescriptionSize
banner-03.pngOriginal (21:9)2016x864
banner-03-cropped.pngGitHub README (2:1)1280x640
All files saved to: 
.skill-archive/banner-creator/<yyyy-mm-dd-summaryname>/
Copy final banner to user's desired location.
undefined
FileDescriptionSize
banner-03.pngOriginal (21:9)2016x864
banner-03-cropped.pngGitHub README (2:1)1280x640
All files saved to: 
.skill-archive/banner-creator/<yyyy-mm-dd-summaryname>/
Copy final banner to user's desired location.
undefined

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}
包含文字：
Wide banner for {brand}, {style} style, featuring "{text}" prominently displayed, {colors}, {scene/elements}
包含角色：
Wide banner featuring {character description}, {style} style, {scene}, text "{brand name}" on {position}, {colors}
抽象/渐变风格：
Abstract {style} banner, {colors} gradient, geometric patterns, modern tech feel, text "{brand}" centered
场景类：
{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
以最宽比例生成，再进行裁剪：
  • 21:9
    - 超宽屏（推荐用于生成）
  • 16:9
    - 宽屏
  • 3:2
    - 标准宽屏

References

参考资料

  • references/formats.md - Common banner sizes by platform
  • examples/opc-banner-creation.md - Full example conversation
  • references/formats.md - 各平台常见横幅尺寸
  • examples/opc-banner-creation.md - 完整对话示例