ckm:banner-design

概览

ckm:banner-design 是什么？

ckm:banner-design 是一个专注于静态视觉素材的 AI 横幅设计技能。它可以帮你设计社交媒体横幅、数字广告、网站首屏 hero 区域、活动创意视觉以及简单的印刷横幅。每次请求，它都可以基于 AI 生成的视觉元素，探索多种不同的艺术方向（art direction）。

这个技能的范围很聚焦：它只负责 横幅设计。它不包含视频剪辑、整站布局设计，或复杂的印刷生产参数设置。

主要使用场景

• 各类社交渠道封面与头图（Facebook、Twitter/X、LinkedIn、YouTube）
• 营销活动及日常社交内容（Instagram、Pinterest）
• 广告横幅与展示广告（如 Google Display Network 规格）
• 网站首屏 hero 和内容区横幅
• 简单活动及促销印刷横幅

支持的平台和格式

本技能围绕常见的横幅投放场景设计，包括：

• Social media：Facebook、Twitter/X、LinkedIn、YouTube、Instagram、Pinterest
• Ads：Google Display Network 尺寸及类似展示广告格式
• Web：website hero images、section banners、blog headers、email headers
• Print：roll-up banners、vinyl event banners、trade-show visuals

在仓库内部，包含一个 references/banner-sizes-and-styles.md 文件，其中有详细尺寸表，技能会用它来参考、推荐或校验尺寸。

视觉风格与艺术方向

ckm:banner-design 支持广泛的视觉风格，例如：

• 极简、渐变、glassmorphism
• 强对比字体、编辑风、拼贴
• 摄影主导、插画风、几何、复古
• 3D、霓虹、双色调（duotone）

它也会在概念层面与同一仓库中的其他创意类技能联动，如 ui-ux-pro-max、frontend-design、ai-artist 和 ai-multimodal，以提供更丰富的视觉方向支持。

适合哪些人使用？

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

• 市场或社交媒体运营：需要快速产出符合品牌形象、适配多个平台的横幅
• 设计师或前端开发：希望借助 AI 辅助 hero 图和活动视觉创意
• 创业者或独立开发者：希望在不组建完整设计团队的情况下，做出体面可用的横幅

当你已经有清晰的文案和品牌方向，但需要协助将其转化为视觉方案时，这个技能非常适合。如果你需要高度定制的插画风格（需手绘）或复杂动效设计，则不太适用。

何时适用，何时不适用

适用场景：

• 快速为同一活动探索多种横幅创意方向
• 基于一个核心创意，生成不同平台专用尺寸
• 为广告、社交媒体和网站 hero 区域生成静态视觉

不适用场景：

• 视频广告、动态横幅或 motion design
• 超出单个 hero/头图的完整网站 UX/UI 流程
• 复杂印刷批量生产所需的预印细节（出血、色彩管理、后道工艺参数等）

---

使用方法

安装与基础配置

1. 将 banner-design 技能添加到你的环境中

从 nextlevelbuilder/ui-ux-pro-max-skill 仓库安装 ckm:banner-design：

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

这会从仓库的 .claude/skills/banner-design 目录拉取 banner-design 技能。

2. 查看核心技能文件

安装完成后，打开 banner-design 目录下的 SKILL.md。该文件定义了：

• 技能的描述与适用范围
• argument-hint 格式：[platform] [style] [dimensions]
• 触发与使用指引（在什么场景下调用技能）

理解这些约定，有助于你用技能能够稳定处理的方式来组织请求。

3. 使用尺寸与风格参考

打开 references/banner-sizes-and-styles.md，查看：

• 常见社交媒体尺寸（如 Facebook 封面、Twitter 头图、YouTube channel art、Instagram posts/stories）
• 展示广告格式（如 300×250、728×90、160×600 等 Google Display Network 尺寸）
• 网站及 email 横幅的建议规范
• 各种艺术方向的风格定义（minimalist、gradient、3D 等）

你可以用这些参考来：

• 为每个投放平台选择合适的尺寸
• 选择技能已理解的风格标签

---

高效触发技能

1. 按需求收集流程准备信息

SKILL.md 中描述了一个从需求收集开始的工作流。在调用 ckm:banner-design 前，建议你先准备好：

• Purpose（用途）：social cover、ad banner、website hero、print banner 或 campaign creative
• Platform/size（平台/尺寸）：目标平台（如 Facebook cover、YouTube channel art）或明确的像素尺寸
• Content（内容）：主标题、副文案、CTA、Logo 或品牌标识，以及任何法律文本
• Brand（品牌）：色板、字体和现有品牌规范（如有）
• Style（风格）：偏好的艺术方向（如 minimalist、retro、glassmorphism）

提供的信息越完整，生成的横幅方案就越精准、可用。

2. 使用 argument-hint 格式

调用技能时，遵循以下 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 设计之初就期望每次请求输出多个概念方向。你可以：

• 对比不同的版式、图像和配色策略
• 选出最强的一稿，再进一步迭代

通过后续 prompt 来微调选中的方向（如调整信息层级、简化背景、强化 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：多尺寸广告投放套系

1. 定义一个统一的活动概念（优惠信息、主文案、视觉主题）。
2. 在 references/banner-sizes-and-styles.md 中选择几个关键广告尺寸（如 300×250、728×90、160×600）。
3. 使用 ckm:banner-design 先在较大尺寸上创建一个 master 概念。
4. 再让技能将这个概念适配为其它尺寸，并保证信息层级与可读性保持良好。

工作流 C：产品发布用网站 hero

1. 在参考文件的网站部分确认所需 hero 尺寸（如 1920×800）。
2. 提供产品定位、核心标题、辅助文案以及偏好的风格。
3. 调用 ckm:banner-design，指定 website hero、风格和尺寸。
4. 针对留白、对比度和视觉焦点进行多轮迭代，直到可以直接交给前端实现。

---

集成使用小贴士

• 与现有 设计工具 配合：将生成的概念导入 Figma、Sketch 或你的图片编辑器，进行最终微调和切图。
• 利用品牌手册：如果项目有完整的品牌规范（色彩、Logo 用法、语气等），将其输入技能，确保横幅持续保持品牌一致性。
• 建立参考库：保存效果最佳的横幅方案，用于之后 prompt 参考，帮助延续同一活动的视觉风格。

---

常见问题（FAQ）

ckm:banner-design 只适合做社交媒体横幅吗？

不是。尽管 ckm:banner-design 在社交媒体封面和帖子方面很擅长，它同样适用于展示广告、网站 hero 图、内容区横幅以及简单的印刷横幅。references/banner-sizes-and-styles.md 文件覆盖了社交、广告、Web 和 Print 的多种尺寸。

ckm:banner-design 能处理视频或动态横幅吗？

不能。该技能明确仅支持静态横幅设计。它不会进行视频剪辑、动画制作或 motion-graphics 工作。如果你需要 GIF 或视频等动态素材，可以先用本技能确定静态版式，再在专业动效工具中制作动画。

它能生成带出血和色彩配置的印刷成品文件吗？

ckm:banner-design 可以为印刷横幅提供版式和视觉方向，并给出常见印刷尺寸建议。但它不会处理详细的印刷生产任务，如出血、裁切线、色彩校正或印刷机色彩配置。要进行专业印刷，请在桌面设计软件中完成最终文件，并根据印刷供应商的技术规范进行调整。

不同平台应该使用什么横幅尺寸？

在仓库中打开 references/banner-sizes-and-styles.md。其中列出了以下内容的推荐尺寸和长宽比：

• Facebook、Twitter/X、LinkedIn、YouTube、Instagram、Pinterest
• Google Display Network 广告格式
• 常见网站与 email 横幅尺寸
• 标准活动及展会用横幅

以这些表格为起点，如平台最近更新了尺寸规范，再按实际情况进行微调即可。

ckm:banner-design 能遵循我的品牌规范吗？

可以。你可以在 prompt 中一并提供品牌信息：主辅色、常用字体、Logo 使用规则以及版式限制等。该技能会将品牌方向融入到其艺术方向选项中，尤其是在与同仓库中的其他设计类技能配合使用时效果更佳。

调用技能前我需要准备哪些信息？

为了获得更好的结果，建议提前准备：

• 横幅的目的（如新功能发布、季节性促销、活动通知）
• 平台和尺寸（或明确的像素规格）
• 关键文案（主标题、副标题、CTA，以及可选的法律文本）
• 品牌素材（色板、字体、Logo，如需可附图片）
• 期望的风格（如 minimalist、retro、photo-based、editorial 等）

提供这些上下文信息，可以让 ckm:banner-design 输出更有针对性、可直接使用的方案，而不是泛泛的视觉。

ckm:banner-design 一次会生成多少个方案？

该技能倾向于在一次请求中提供多个艺术方向选项，便于你对比和二次调整。具体数量可能取决于你的代理运行环境配置，但整体设计思路是支持多方案探索，而非只给一个结果。

我可以用 ckm:banner-design 做整站设计吗？

不能。ckm:banner-design 专注于横幅级别的视觉：hero 图、页头及促销模块等。它不能替代完整的 UX/UI 技能来设计整站流程、导航结构或交互细节。如果你需要端到端的网站设计，建议与 ui-ux-pro-max 等更广泛的 UI/UX 技能配合使用。

这个技能使用什么许可证？

根据 SKILL.md，ckm:banner-design 采用 MIT license 发布。请始终在仓库中核实最新许可证，以确认是否符合你的具体使用场景。

哪里可以查看更多细节？

安装完成后，可以重点查看：

• SKILL.md – 了解技能范围、参数说明和工作流
• references/banner-sizes-and-styles.md – 查阅各平台尺寸与风格参考

在将 ckm:banner-design 集成到你的代理工作流时，这两个文件可作为主要参考文档。