ckm:banner-design

概覽

什麼是 ckm:banner-design？

ckm:banner-design 是專注於靜態視覺素材的 AI 橫幅設計技能。它能協助你製作社群媒體橫幅、數位廣告 banner、網站 hero 區塊、活動 Campaign 視覺，以及簡單的印刷式橫幅。每次請求時，它都可以運用 AI 產生多種不同的視覺與美術方向選項。

此技能的範圍刻意收得很窄：只處理 橫幅設計（banner design）。它不負責影片剪輯、完整網站版型設計，或細部的印刷製程設定。

主要使用情境

• 社群頻道封面與頁首橫幅（Facebook、Twitter/X、LinkedIn、YouTube）
• 活動或日常社群貼文視覺（Instagram、Pinterest）
• 廣告 banner 與展示型廣告（如 Google Display Network 格式）
• 網站 hero 圖與各區塊橫幅
• 簡易活動或促銷用印刷橫幅

支援的平台與格式

此技能設計時，即以常見的橫幅投放管道為核心，包括：

• Social media：Facebook、Twitter/X、LinkedIn、YouTube、Instagram、Pinterest
• Ads：Google Display Network 尺寸與其他類似展示廣告格式
• Web：網站 hero 圖、區塊橫幅、部落格頁首、Email 頁首
• Print：立式展示架（roll-up）、大型帆布／活動橫幅、展場視覺

在內部，repository 中包含一個 references/banner-sizes-and-styles.md 檔案，其中整理了詳細尺寸表。技能會以此為參考，用來建議或驗證設計尺寸。

視覺風格與美術方向

ckm:banner-design 能處理多種風格，例如：

• 極簡、漸層、glassmorphism
• 強烈字體排版、編輯風、拼貼風格
• 攝影為主、插畫風、幾何風、復古風
• 3D、霓虹、雙色調（duotone）

它也在概念上與同一個 repo 中的其他創意技能串聯，例如 ui-ux-pro-max、frontend-design、ai-artist、ai-multimodal，以支援更豐富的視覺方向。

適合哪些人使用？

你可以在以下情況使用 ckm:banner-design：

• 行銷人員或社群小編：需要快速產出符合品牌調性的多平台橫幅
• 設計師或前端工程師：希望借助 AI 產出 hero 圖與活動視覺概念
• 創業者或獨立製作者（indie maker）：需要有水準的橫幅，但暫時不打算聘請完整設計團隊

當你已經有清楚的訊息與品牌方向，但希望在視覺化的階段有更多選項時，這個技能特別合適。如果你需要高度客製的插畫風格、必須手繪或複雜動態視覺，則會比較不適用。

什麼狀況適合／不適合使用

適合用在：

• 快速發想同一 Campaign 的多種橫幅概念
• 從一個核心概念擴展出各平台專用尺寸
• 產出靜態視覺，用於廣告、社群頻道與網站 hero 區塊

不適合用在：

• 影片廣告、動態 banner 或 motion design
• 超出單一 hero 圖或 header 的完整網站 UX/UI 流程
• 複雜印刷的大量製作前置（出血設定、色彩管理、後加工規格等）

---

使用方式

安裝與環境設定

1. 將 banner-design 技能加入你的環境

從 nextlevelbuilder/ui-ux-pro-max-skill repository 安裝 ckm:banner-design：

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill banner-design

這會從該 repo 的 .claude/skills/banner-design 目錄拉取 banner-design 技能。

2. 檢視核心技能檔

安裝後，開啟 banner-design 目錄下的 SKILL.md。此檔案會說明：

• 技能描述與適用範圍
• argument-hint 格式：[platform] [style] [dimensions]
• 觸發指引（此技能應在何種情境下啟用）

先理解這些約定，可以幫助你用技能容易理解、且輸出穩定的方式來下指令。

3. 善用尺寸與風格參考資料

開啟 references/banner-sizes-and-styles.md 以檢視：

• 常見 social media 尺寸（例如 Facebook covers、Twitter headers、YouTube channel art、Instagram posts/stories）
• Display ad 格式（如 300×250、728×90、160×600 等 Google Display Network 尺寸）
• Website 與 Email 橫幅建議
• 美術方向的 風格定義列表（minimalist、gradient、3D 等）

你可以利用這些參考來：

• 為各平台選擇合適的設計尺寸
• 選用技能已經理解的風格標籤

---

有效觸發技能的方式

1. 先走過需求蒐集流程

SKILL.md 中描述了一個從蒐集需求開始的流程。在呼叫 ckm:banner-design 前，請先準備：

• 目的：社群封面、廣告 banner、網站 hero、印刷橫幅或 Campaign 視覺
• 平台／尺寸：目標平台（例如 Facebook cover、YouTube channel art），或明確的像素尺寸
• 內容：主標題、副標、CTA、Logo 或品牌識別，以及必要的法律文字
• 品牌：色票、字體與既有品牌規範（如果有的話）
• 風格：偏好的視覺方向（例如 minimalist、retro、glassmorphism）

提供越完整的資訊，產出的 banner 概念就會越貼近你的需求。

2. 使用 argument-hint 格式

呼叫技能時，依照以下提示格式撰寫：

• [platform] – 橫幅會出現的地方（例如 Twitter-header、Google-Display 300x250、website-hero）
• [style] – 美術方向（例如 minimalist gradient、bold-typography、photo-based editorial）
• [dimensions] – 若需要客製尺寸則填入最終像素大小（例如 1920x600）

結構良好的 prompt 範例：

• 「Design a LinkedIn-company-cover in a minimalist style, 1128x191, with a SaaS B2B headline and a primary CTA.」
• 「Create a Google-Display leaderboard 728x90 banner in bold typography style for a 50% off summer sale.」
• 「Generate a website-hero 1920x800 in a photo-based editorial style for a fintech startup launch.」

3. 預期會收到多種美術方向提案

ckm:banner-design 的設計初衷，就是在 每次請求時提供多個不同的概念方向。之後你可以：

• 比較不同版面、影像與配色策略
• 選出最強的一個方向，再進一步迭代

使用後續的追問來微調選定方向（例如調整資訊層級、簡化背景、強化 CTA）。

---

範例工作流程

工作流程 A：更新社群頻道頁首視覺

1. 安裝 ckm:banner-design 並開啟 SKILL.md。
2. 在 references/banner-sizes-and-styles.md 中查詢目標平台的建議尺寸（例如 Twitter/X Header 1500×500）。
3. 準備需求：品牌色彩、Logo、核心標語與目標受眾。
4. 呼叫技能時帶入平台、風格與尺寸，並要求產出數種不同方向。
5. 檢視生成的選項，再針對最喜歡的一版提出修正需求。

工作流程 B：多尺寸廣告 Campaign 組合

1. 先定義單一 Campaign 概念（主打優惠、訊息、影像主題）。
2. 從 references/banner-sizes-and-styles.md 中挑選幾個關鍵廣告尺寸（例如 300×250、728×90、160×600）。
3. 使用 ckm:banner-design 先以較大尺寸建立一個主視覺概念。
4. 要求技能將這個主視覺延伸到其他尺寸，同時維持資訊層級與可讀性。

工作流程 C：新品上市的網站 hero 視覺

1. 透過參考檔中的 Website 區段確認所需 hero 尺寸（例如 1920×800）。
2. 提供產品定位、主標題、輔助文字與偏好的風格。
3. 呼叫 ckm:banner-design，指定 website hero、風格與尺寸。
4. 持續迭代間距、對比與視覺焦點，直到覺得可以交接給前端實作為止。

---

整合小技巧

• 搭配既有的 設計工具 使用：將產出的概念匯入 Figma、Sketch 或你慣用的影像編輯軟體做最後微調與切圖。
• 善用品牌規範：若專案已有完整品牌手冊（色彩、Logo 使用規則、語氣），在 prompt 中明確提供，可讓橫幅更一致。
• 建立參考資料庫：把成效最好的橫幅概念存起來，供未來下指令時參考，維持整體 Campaign 的連貫性。

---

常見問題（FAQ）

ckm:banner-design 只適合做社群橫幅嗎？

不是。雖然 ckm:banner-design 對社群封面與貼文橫幅特別擅長，它同時也能處理展示型廣告、網站 hero 圖、區塊橫幅與簡易印刷橫幅。references/banner-sizes-and-styles.md 檔案中涵蓋了社群、廣告、Web 與印刷的常見尺寸。

ckm:banner-design 能處理影片或動態 banner 嗎？

不能。此技能明確只針對 靜態橫幅設計。它不做影片剪輯、動畫或 motion graphics。如果你需要 animated GIF 或影片，可先用這個技能定義靜態版面，再到專業動畫工具中重建。

它能產出含出血與色彩設定的完稿印刷檔嗎？

ckm:banner-design 可以協助 版面與視覺方向，並提供常見印刷用橫幅尺寸建議。不過，它不處理印刷製程細節，例如出血、裁切線、色彩校正或印刷色彩設定。若是專業印刷專案，建議在桌面排版軟體中完成最終檔案，並依照印刷廠的規格調整。

我要怎麼知道各平台該用哪種橫幅尺寸？

在 repository 中開啟 references/banner-sizes-and-styles.md，裡面列出了建議的尺寸與長寬比，包括：

• Facebook、Twitter/X、LinkedIn、YouTube、Instagram、Pinterest
• Google Display Network 格式
• 常見 Website 與 Email 橫幅尺寸
• 標準活動與展場用大圖尺寸

可先以這些表格為起點，若平台官方有更新建議，再視情況微調尺寸。

ckm:banner-design 能遵守我的品牌規範嗎？

可以。你可以在 prompt 中提供品牌相關資訊：主色與輔色、偏好的字體、Logo 使用方式與版面限制。此技能設計上會盡量把品牌方向融入產出的美術選項，尤其是和同一個 repository 內其他設計導向技能一起使用時，效果更佳。

在呼叫技能之前，我應該先準備哪些資訊？

若想獲得最佳結果，建議先整理：

• 橫幅的 目的（例如新品上線、季節折扣、活動宣傳）
• 平台 與 尺寸（或明確像素大小）
• 核心 文案（主標、副標、CTA，以及必要的法律文字）
• 品牌 資產（色票、字體、Logo、必要時的圖片）
• 希望的 風格（例如 minimalist、retro、photo-based、editorial）

提供這些背景之後，ckm:banner-design 能輸出更聚焦、實際可用的概念，而不是過於一般化的視覺。

ckm:banner-design 一次會產出多少個概念？

此技能的設計目標是每次請求提供 多種美術方向，方便你比較與微調。實際數量可能會依你的 agent runtime 設定而異，但整體是為了支援「探索多版本」而非「只出一稿」。

我可以用 ckm:banner-design 做整個網站的完整設計嗎？

不行。ckm:banner-design 專注在 橫幅層級的視覺：hero 圖、頁首與宣傳區塊。它並不能取代完整的 UX/UI 技能來規劃整站流程、導覽結構或互動設計。若你需要端到端的網站設計，建議搭配 ui-ux-pro-max 等更完整的 UI/UX 技能一起使用。

這個技能使用的是什麼授權條款？

根據 SKILL.md，ckm:banner-design 以 MIT license 發佈。仍建議你直接在 repository 中確認最新授權內容，確保符合你的使用情境。

我可以到哪裡查看更詳細的說明？

安裝完成後，可以查看：

• SKILL.md – 了解技能範圍、可用參數與操作流程
• references/banner-sizes-and-styles.md – 了解各平台尺寸與風格參考

在將 ckm:banner-design 納入你的 agent 工作流程時，建議以這兩個檔案作為主要說明文件。