banner-creator

banner-creator skill 概覽

banner-creator 會做什麼

banner-creator 是一個有引導流程的圖片生成 skill，適合製作 banners、headers、hero images 與 cover art。它不是靠一次下完的單發 prompt，而是採用逐步迭代的工作方式。這個 skill 會協助 agent 先收集正確的設計需求、產出多個候選版本、針對偏好的方向再精修，最後再把選中的圖片裁切成目標平台需要的比例。

banner-creator 最適合哪些人

這個 banner-creator skill 特別適合想快速做出可用的行銷圖或個人／專案視覺，但又不想完全靠即興 prompting 的使用者：

• GitHub README 擁有者
• UI Design 與 landing page 製作者
• 正在為專案製作 banner 的開發者
• 需要 Twitter/X、LinkedIn 或 YouTube header 的創作者
• 希望 banner 產出流程可重複、而不是每次臨時下 prompt 的團隊

真正要完成的工作

大多數使用者要的其實不只是「一張圖」。他們要的是一張能貼合特定版位、在裁切後仍保留重要內容、風格能銜接既有品牌，並且能在幾輪來回內做出可接受成品的 banner。banner-creator 就是圍繞這種實務工作流程設計的。

banner-creator 和一般圖片 prompt 有什麼不同

banner-creator 的核心差異在於流程。這個 skill 會推動 agent：

• 在生成前先詢問用途、平台、比例、風格與文字內容
• 先產出多個變體，而不是一開始就把方向鎖死在單一概念
• 根據使用者回饋持續精修
• 使用提供的 script 裁成目標長寬比
• 把輸出存進可預期的 archive 資料夾

因此，banner-creator for UI Design 與其他貼近品牌的視覺工作，通常會比一句模糊的「幫我做個 banner」更可靠。

導入前的重要限制

在安裝或正式依賴 banner-creator 之前，先確認幾個關鍵前提：

• 需要 GEMINI_API_KEY
• 圖片生成依賴 nanobanana skill
• 裁切使用 scripts/crop_banner.py，因此需要 Python 與 Pillow
• 這個 skill 最擅長的是靜態 banner 製作，不是完整設計系統，也不是高階手動字體排版控制

如何使用 banner-creator skill

安裝情境與相依性檢查

這個 repo 並沒有在 SKILL.md 內提供獨立 package installer，因此實際上的安裝方式，是先加入上層 skill repo，再從其中使用這個 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：它能減少在版位適配、修改往返與匯出整理上的猜測成本。

一開始就先用平台比例，不要最後才補

repo 裡的 references/formats.md 是最值得先讀的檔案之一，裡面列了常見目標規格，例如：

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

不要等到設計都核可了，才發現畫面根本不適合目標版位。

為什麼這個 banner-creator skill 會建議先生成寬幅圖

格式參考檔建議在可行時先以 21:9 生成，再裁成最終平台比例。這是很務實的做法，因為不同 banner 版位差異很大，而較寬的來源圖能保留更多彈性，也能避免硬拉伸。

這一點特別重要，若你的 banner 包含：

• 靠近邊緣的文字
• 帶有重要細節的人物角色
• 必須在多平台都維持可見的 logo

最終輸出的裁切指令

repo 內已提供可直接使用的裁切工具：

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 通常不只描述美術風格，還會補上構圖指引。例如：

• 「左側保留負空間，讓後續可以疊 headline。」
• 「logo 和 mascot 請控制在中間 60% 的寬度內，確保 2:1 裁切仍安全。」
• 「背景用簡潔、現代的漸層，不要任何寫實元素。」
• 「文字要大且精簡，不要像海報那樣塞滿。」
• 「優先確保在小尺寸預覽下，輪廓依然清楚。」

這類指示對最終 banner 品質的影響，往往比單純多加幾個風格形容詞還大。

預覽與挑選流程

repo 內包含 templates/preview.html，這透露出一個很實際的審稿步驟：在做出承諾前，先把多張候選圖並排比較。這很重要，因為 banner 的好壞往往是相對的。單看一張可能覺得還可以，但放到更乾淨、可讀性更好的版本旁邊，就可能顯得明顯偏弱。

banner-creator skill 常見問題

banner-creator 會比一般圖片 prompt 更好嗎？

通常會，前提是你的問題不只是「生成一張圖」，而是還包含挑選、修訂與平台適配。一般 prompt 可以做出好看的圖，但 banner-creator 額外補上了需求蒐集、變體生成、裁切與輸出整理。

banner-creator 適合新手嗎？

適合，尤其如果你已經知道目標平台，也能描述想要的風格。這個 skill 能降低 prompting 的摸索成本，但新手仍然需要提供具體需求，例如尺寸、文字內容與視覺方向。

哪些情況下 banner-creator 不適合？

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

• 在設計工具中完全手動掌控版面
• pixel-perfect 的字體排版
• 複雜的多 breakpoint 網站 hero 系統
• 可編輯的向量品牌資產
• 進階修圖流程

它最強的是快速產出靜態 banner，不是從頭到尾包辦完整品牌製作。

一定需要 nanobanana skill 嗎？

需要。repo 內的資訊已明確列出 nanobanana 是必要的圖片生成 skill。若缺少這個相依項，banner-creator install 對實際使用來說就不完整。

banner-creator 能處理不同平台嗎？

可以。內附的格式參考涵蓋 GitHub、Twitter/X、LinkedIn、YouTube、website hero、email header 等多種情境。這個 skill 的流程本來就是以平台差異為前提設計，而不是假設大家都用同一塊固定畫布。

banner-creator 對 UI Design 工作有幫助嗎？

有，但要理解它的邊界。banner-creator for UI Design 很適合拿來做 hero banner、header art、產品上線視覺，以及 repository 展示圖。它不能取代 UI layout、無障礙檢查或 component design。

如何改進 banner-creator skill

提供風格參考，不要只給形容詞

想讓品質明顯提升，最有效的方式通常是提供具體參考，例如：

• 既有 logo 風格
• mascot 描述
• 目前網站的色盤
• 你喜歡的 banner 範例
• 「match our pixel-art brand language」

只寫「modern」或「clean」通常太弱。範例檔之所以效果較好，就是因為它把風格明確綁定到既有的 pixel-art logo。

一開始就定義裁切安全的構圖

由於裁切工具採用置中裁切，構圖沒處理好，原本不錯的圖也可能直接報廢。你可以明確要求：

• 主焦點置中
• 文字周圍保留足夠邊界
• 最左與最右不要放關鍵細節
• 背景有層次，但保留清楚的安全區

這是改善 banner-creator usage 最重要的方法之一。

要求多版本時，每次只改一個變因

如果你想快速做決策，就不要一次要六個完全隨機的版本。更好的做法是：

• 同一概念，做三種配色方向
• 同一風格，做三種構圖變體
• 同一構圖，做三種文字密度

這樣在審稿時會更容易比較，回饋也更能被執行。

回饋要寫成 agent 能執行的指令

弱回饋：「再好一點。」
強回饋：「保留 option 3 的構圖，降低背景細節，標題放大 20%，整體色盤再深一點，右側多留一些空白給之後疊文字。」

這個 skill 的工作流程，特別受益於每一輪之間具體、可比較、可執行的回饋。

讓生成策略符合最終投放場景

如果同一張 banner 之後可能要跨平台重用，先要求一張寬幅 master image，再另外裁出各平台版本，通常更合理。如果圖片只會用在單一版位，就一開始直接指定最終平台，避免浪費迭代次數。

注意常見失敗模式

banner-creator 的常見問題包括：

• 文字對 banner 情境來說太小
• 背景過於繁雜，影響可讀性
• 重要元素被裁掉
• 風格和既有品牌資產不一致
• 細節太多，導致在 GitHub 或社群預覽尺寸下不好辨識

這些問題大多來自 prompt 定義不足，而不是 skill 結構本身有問題。

用迷你 creative brief 強化第一個 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 價值。

如果你要在團隊內部導入，可優化 repo 層級體驗

如果你打算在團隊情境中重複使用 banner-creator，最值得補強的地方包括：

• 在 SKILL.md 加上一小段安裝說明
• 明確註記裁切需要 Pillow
• 為 GitHub、LinkedIn 等常見目標提供 prompt templates
• 加上一份文字安全區與裁切安全區的 checklist

這些改動不用碰核心流程，就能明顯降低導入摩擦。