banner-creator

横幅创建技能

通过 AI 图像生成和迭代设计流程，创建专业横幅。

前提条件

必需的 API 密钥（在环境中设置）：

• GEMINI_API_KEY - 从 Google AI Studio 获取

必需技能：

• nanobanana - AI 图像生成（Gemini 3 Pro Image）

文件输出位置

所有生成的文件都应保存到 .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

工作流

第 1 步：了解需求

生成前，先向用户收集需求：

询问：

1. 用途 - 横幅将用于哪里？

   • GitHub README
   • Twitter/X 页眉
   • LinkedIn 横幅
   • 网站主视觉
   • YouTube 频道艺术图

2. 目标比例/尺寸 - 请参阅 references/formats.md：

   • 2:1 (1280x640) - GitHub README
   • 3:1 (1500x500) - Twitter 页眉
   • 16:9 (1920x1080) - 网站主视觉

3. 风格偏好：

   • 与现有徽标/品牌风格一致？
   • 像素艺术 / 8 位复古风
   • 极简 / 扁平化设计
   • 渐变 / 现代风格
   • 插画 / 艺术风格

4. 内容元素：

   • 品牌名称 / 项目名称？
   • 标语 / 口号？
   • 是否要包含徽标角色？

5. 颜色偏好：

   • 是否有现成的品牌色？
   • 让 AI 决定？

继续之前，等待用户确认！

第 2 步：生成横幅变体

使用 nanobanana 技能生成 20 个横幅变体：

# 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

指南：

• 使用 21:9 比例生成（可用的最宽比例），之后再裁剪为目标比例
• 多个变体使用 batch_generate.py（包含自动延迟）
• 使用顺序命名：banner-01.png、banner-02.png 等

图像编辑（用于融入现有徽标）：

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

第 3 步：创建 HTML 预览

复制预览模板并在浏览器中打开：

cp <skill_dir>/templates/preview.html .skill-archive/banner-creator/<yyyy-mm-dd-summaryname>/preview.html

然后在默认浏览器中打开：

open .skill-archive/banner-creator/<yyyy-mm-dd-summaryname>/preview.html

重要： 更新 HTML，确保包含正确数量的已生成横幅。

第 4 步：与用户迭代

询问用户喜欢哪些横幅：

• “你喜欢哪些横幅？（例如：#3、#7、#15）”
• “你喜欢它们的哪些方面？”
• “你希望做哪些修改？”

根据反馈：

1. 按偏好的风格再生成 10-20 个变体
2. 使用命名格式：banner-{original}-v{n}.png（例如：banner-03-v1.png）
3. 更新 HTML 预览
4. 重复上述步骤，直到用户选定最终横幅

第 5 步：裁剪为目标比例

用户批准横幅后，将其裁剪为目标尺寸：

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 页眉：--ratio 3:1 --width 1500 → 1500x500
• 网站主视觉：--ratio 16:9 --width 1920 → 1920x1080

第 6 步：交付最终素材

展示最终交付内容：

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

快速参考

常见提示词模式

带文字：

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}

支持的宽高比

使用最宽的比例生成，然后裁剪：

• 21:9 - 超宽（推荐用于生成）
• 16:9 - 宽幅
• 3:2 - 标准宽幅

参考资料

• references/formats.md - 各平台常见横幅尺寸
• examples/opc-banner-creation.md - 完整对话示例