banner-creator

banner-creator skill 概览

banner-creator 是做什么的

banner-creator 是一个带引导式流程的图像生成 skill，用来制作 banner、页眉图、hero image 和封面图。它不是一次性丢出一个 prompt 就结束，而是通过迭代式工作流，帮助 agent 先收集关键设计需求，再生成多版候选方案，接着围绕用户偏好的方向继续细化，最后按目标平台比例裁切成可用的最终成品。

banner-creator 最适合哪些人

这个 banner-creator skill 很适合那些需要快速产出可用的营销图或个人展示图、但又不想完全靠随手试 prompt 的用户：

• GitHub README 维护者
• UI Design 和落地页搭建者
• 需要为项目制作 banner 的开发者
• 需要 Twitter/X、LinkedIn 或 YouTube 页眉图的创作者
• 希望稳定、可复用地产出 banner，而不是每次临时发挥的团队

它真正解决的核心问题

大多数用户要的并不只是“一张图”。他们真正需要的是：一张能适配具体展示位的 banner，在裁切后依然保住关键信息，风格能和现有视觉体系对上，并且能在几轮内收敛到一个可交付的最终素材。banner-creator 就是围绕这个实际工作流来设计的。

banner-creator 和普通图片 prompt 的区别

它最大的差异在于流程设计。这个 skill 会推动 agent：

• 在生成前先确认用途、平台、比例、风格和文案
• 先出多个候选方向，而不是过早押注单一概念
• 根据用户反馈继续细化
• 用内置脚本裁成目标宽高比
• 把输出统一存到可预期的归档目录中

这也是为什么 banner-creator for UI Design 以及接近品牌视觉的场景，通常会比一句模糊的“帮我做个 banner”更可靠。

采用前需要注意的关键限制

在你安装或正式依赖 banner-creator 之前，要先确认这些真实依赖条件：

• 需要 GEMINI_API_KEY
• 图像生成依赖 nanobanana skill
• 裁切使用 scripts/crop_banner.py，因此需要 Python 和 Pillow
• 这个 skill 最擅长的是静态 banner 生成，不是完整设计系统，也不适合高级手工排版控制

如何使用 banner-creator skill

安装环境与依赖检查

仓库里的 SKILL.md 没有提供单独的 package 安装方式，所以实际可行的安装路径是先添加上层 skill 仓库，再从中使用这个 skill：

npx skills add https://github.com/ReScienceLab/opc-skills --skill banner-creator

然后确认运行环境：

• 已提供 GEMINI_API_KEY
• nanobanana skill 已安装且可用
• 系统中有 Python，可用于裁切
• 如果你准备运行 scripts/crop_banner.py，还需要安装 Pillow

先看这几个文件

如果你想尽快上手，建议按这个顺序阅读：

1. skills/banner-creator/SKILL.md
2. skills/banner-creator/references/formats.md
3. skills/banner-creator/examples/opc-banner-creation.md
4. skills/banner-creator/scripts/crop_banner.py
5. skills/banner-creator/templates/preview.html

这条阅读路径能让你快速理解整个工作流、支持的目标尺寸、一次高质量交互应该长什么样、最终裁切是怎么做的，以及如何以更直观的方式审看输出结果。

banner-creator 需要哪些输入

一次高质量的 banner-creator usage 请求，最好包含：

• 目标发布平台
• 目标尺寸或比例
• 品牌风格或视觉风格
• 必须出现的文字
• 必须包含的主体或视觉元素
• 背景偏好
• 明确不想要的内容
• 你想先看多个概念，还是直接深挖一个方向

如果这些信息缺失，agent 往往需要先追问几轮，才能产出真正可用的结果。

最好用的起始 prompt 写法

当你把设计意图和输出约束写清楚之后，一个模糊目标会立刻变得可执行得多。比如：

“Use banner-creator to make a GitHub README banner at 1280x640 or 2:1. Match our existing pixel-art logo style. Include the text ‘opc.dev’ and ‘Agent Skills’. Keep the main character centered enough to survive cropping. Generate 4-6 variations first, then we’ll refine one.”

这类写法之所以有效，是因为它：

• 明确点名了 skill
• 指定了平台和比例
• 定义了风格对齐目标
• 给出了文字要求
• 把裁切安全区提前考虑进来了
• 明确要求先出多版再细化的工作流

banner-creator 在实际使用中的运行方式

一次典型流程通常是这样：

1. 明确展示位和目标比例
2. 确认风格与品牌参考
3. 定义文案和构图优先级
4. 先生成几张较宽幅的候选图
5. 审看并选出一个方向
6. 用更具体的指令继续细化或重生成
7. 裁成最终比例或最终像素尺寸
8. 保存到 .skill-archive/banner-creator/...

这也是为什么很多人会更愿意使用这份 banner-creator guide，而不是直接发一个普通图片 prompt：它能减少在适配、修改和导出阶段的试错成本。

一开始就用平台比例，不要最后才补

仓库里的 references/formats.md 是最值得先看的文件之一。里面列出了常见目标尺寸，例如：

• GitHub README：1280x640（2:1）
• Twitter/X header：1500x500（3:1）
• LinkedIn banner：1584x396（4:1）
• Website hero：1920x1080（16:9）

不要等到方案已经选定，才发现设计根本放不进目标展示位。

为什么这个 skill 建议先生成宽图

格式参考文件建议：如果条件允许，优先按 21:9 生成，再裁到最终目标比例。这是非常实用的策略，因为不同平台的 banner 展示位差异很大，而宽幅源图在后续裁切时更灵活，也不需要靠拉伸去适配。

这一点在以下场景尤其重要：

• 文字靠近边缘
• 角色或主体有不能丢的细节
• logo 需要在多个平台上都保持可见

最终输出的裁切命令

仓库里提供了一个明确可用的裁切工具：

python scripts/crop_banner.py input.png output.png --ratio 2:1 --width 1280

你也可以直接指定目标尺寸：

python scripts/crop_banner.py input.png output.png --size 1500x500

这个裁切是以中心为基准进行的，所以在写 prompt 时，最好让关键内容远离最左和最右边缘。

输出目录与文件整理方式

这个 skill 预期会把素材保存到：

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

这种目录结构很适合做版本对比、回看旧方案，或者在交接给团队成员时保持文件清晰有序。

能明显提升效果的实用 prompt 模式

高质量的 banner-creator for UI Design prompt，通常不只是写审美词，还会写清楚构图要求。比如：

• “Reserve negative space on the left for headline overlay.”
• “Keep logo and mascot within the center 60% width so a 2:1 crop stays safe.”
• “Use a minimal modern gradient background with no photorealistic elements.”
• “Make text large and sparse, not poster-dense.”
• “Prioritize silhouette clarity at small preview sizes.”

和单纯堆“modern”“clean”这类风格词相比，这些要求对最终 banner 质量的影响通常更大。

预览与筛选工作流

仓库包含 templates/preview.html，这说明作者预期你会在定稿前，把多个候选图并排比较后再做决定。这一步非常实用，因为 banner 的好坏往往是比较出来的：单独看似乎还行的方案，放到更干净、更易读的候选图旁边，可能立刻就显得弱了。

banner-creator skill 常见问题

banner-creator 比普通图片 prompt 更好吗？

大多数情况下是的，尤其当你的问题不只是“生成”，还包括“筛选、修改和平台适配”时。普通 prompt 也许能生成一张好看的图，但 banner-creator 额外提供了需求收集、多方案生成、裁切和输出整理这些关键环节。

banner-creator 适合新手吗？

适合，尤其是在你清楚目标平台、也能描述大致风格的情况下。这个 skill 能减少 prompt 试错，但新手仍然需要给出具体要求，比如尺寸、文案和视觉方向。

哪些情况下 banner-creator 不太适合？

如果你需要以下能力，就不建议用 banner-creator：

• 在设计工具里进行完全手工的版式控制
• 像素级精确的 typography
• 复杂的多断点网页 hero 系统
• 可编辑的矢量品牌素材
• 高级修图或精修工作流

它最强的场景是快速生成静态 banner，不是端到端的品牌设计生产。

我一定需要 nanobanana skill 吗？

需要。仓库内容已经明确写出，nanobanana 是必需的图像生成 skill。如果这个依赖缺失，那么你的 banner-creator install 对真实使用来说就是不完整的。

banner-creator 能处理不同平台吗？

可以。自带的格式参考覆盖了 GitHub、Twitter/X、LinkedIn、YouTube、网站 hero、邮件 header 等多个场景。它的工作流就是按“平台感知”来设计的，而不是默认所有输出都用同一块固定画布。

banner-creator 能用于 UI Design 工作吗？

可以，但要知道边界。banner-creator for UI Design 很适合做 hero banner、header art、发布视觉图和仓库展示图，但它不能替代 UI 布局设计、可访问性评审或组件设计。

如何进一步用好 banner-creator skill

给风格参考，不要只给形容词

通常最能拉开质量差距的，不是多写几个审美词，而是提供具体参考，例如：

• 现有 logo 的风格
• mascot 的描述
• 当前网站的配色
• 你喜欢的示例 banner
• “match our pixel-art brand language”

只写 “Modern” 或 “clean” 往往太弱。示例文件之所以更有效，就是因为它把风格和既有的 pixel-art logo 直接绑定起来了。

一开始就定义好裁切安全构图

因为裁切工具是居中裁切，构图一旦没处理好，再好的图也可能被裁坏。你可以明确要求：

• 主视觉放在中心区域
• 文字四周保留足够留白
• 最左和最右不要放关键细节
• 背景做出分层，并留出清晰的安全区

这也是提升 banner-creator usage 效果最关键的方法之一。

让多个变体只改变一个变量

如果你想快速做决策，就不要一次要六个完全随机的方案。更好的方式是：

• 同一概念，给三种配色方向
• 同一风格，给三种构图变体
• 同一构图，给三种文字密度

这样审看更聚焦，反馈也更容易转化为可执行修改。

反馈要写到 agent 能执行

弱反馈：“Make it better.”
强反馈：“Keep option 3’s composition, reduce background detail, enlarge the title by 20%, make the palette darker, and leave more empty space on the right for future overlay text.”

这个 skill 的工作流，在多轮之间尤其依赖具体、可比较、可执行的反馈。

让生成策略匹配最终用途

如果这张 banner 未来可能会复用到多个平台，最好先要一张宽幅 master 图，后续再裁出不同版本。如果它只会用于单一展示位，那就一开始直接指定最终平台，避免无意义的反复迭代。

留意这些常见失败模式

banner-creator 的常见问题包括：

• 文字对 banner 场景来说太小
• 背景过于复杂，影响可读性
• 关键元素被裁掉
• 风格与现有品牌资产不一致
• 细节过多，不适合 GitHub 或社交平台的小预览图

这些问题大多来自 prompt 约束不够明确，而不是 skill 的结构本身有问题。

用一份迷你创意简报优化首条 prompt

与其来回聊天式试探，不如先给一份简洁 brief，通常效果更好：

• Goal: GitHub README banner
• Size: 1280x640
• Audience: developers evaluating the repo
• Style: pixel art, playful but professional
• Text: “opc.dev” + “Agent Skills”
• Include: crowned king mascot
• Avoid: photorealism, clutter, tiny text
• Composition: centered subject, crop-safe edges

这种格式能给 agent 足够的结构信息，从而更好地调用 banner-creator。

把示例产物当成质量基准

建议查看 examples/opc-banner-creation.md 以及 examples/images/ 中的示例图片。它们展示了这个 skill 理想中的节奏：先澄清、再生成多个方案、然后收敛方向、最后定稿。如果你的实际流程一上来就只要一张最终图，那你其实并没有发挥出 banner-creator skill 的完整价值。

如果团队内部要长期使用，可优化仓库层面的体验

如果你打算在团队环境里复用 banner-creator，最值得补充的内容包括：

• 在 SKILL.md 里增加一段简短安装说明
• 明确写出裁切依赖 Pillow
• 为 GitHub、LinkedIn 等常见场景提供 prompt 模板
• 增加文字安全区和裁切安全区的检查清单

这些改进不需要改变核心工作流，但能明显降低团队采用时的摩擦成本。