ad-creative-design

广告创意设计

设计高转化率的广告横幅和展示广告创意。涵盖所有标准 IAB 尺寸、平台要求、CTA 优化和 A/B 测试框架。输出为 Gemini 生成并裁剪至精确尺寸的图像，或 HTML/CSS（可选动画），适用于小尺寸下文案必须清晰锐利的情况。

---

第 1 步：加载设计上下文

1. 首先读取 .agents/design-context.md——品牌颜色（十六进制）、字体、风格原型
2. 如果缺少该文件，请使用 design-context 中的默认回退设置，并告知用户已使用默认设置
3. 广告创意必须严格符合品牌风格——广告往往是用户接触品牌的第一个触点

---

Gemini 图像生成路径

流程/CLI：image-generation。提示词撰写、裁剪和文字叠加回退方案：graphic-design 第 3 步。

1. IAB 尺寸不等同于 Gemini 比例。按第 2 步表格中的 Gemini 比例生成，然后使用 --resize WxH 调整尺寸（例如 --aspect-ratio 5:4 --resize 300x250）
2. **小尺寸格式（728x90、320x50、160x600、300x250）：**缩小后的 AI 文字会模糊且容易拼写错误。仅生成视觉内容/背景（“no text”），然后在其上用 HTML/CSS 设置标题和 CTA，并按精确尺寸截图。对于多尺寸套图，每种比例生成一张主图，再从中裁剪
3. 以 100% 比例查看每张输出 PNG：检查拼写、优惠详情（价格、%、日期）、CTA 清晰度和 Logo 保真度。每次后续调整只修复一个问题

示例提示词

• 展示广告：“创建一个[方形/宽幅/竖版]展示广告。[产品/服务]的视觉内容置于[背景]上。以[风格]显示标题‘[text]’。使用[颜色]的 CTA 按钮‘[action]’。布局简洁，以转化为导向。”
• 社交广告：“创建一则方形 Meta 信息流广告。[产品]照片居中，置于[背景颜色]上方。在上方显示简短标题‘[价值主张]’。底部放置[品牌颜色]的 CTA 按钮‘[action]’。文字精简，图像醒目。”
• 再营销横幅：“创建超宽排行榜广告背景（8:1），不含文字；为文案留出中间空白区域。Logo 在左侧，[优惠标题]在中间，以[字重] [字体系列]显示，CTA ‘[action]’以[强调色]胶囊按钮形式放在右侧。[品牌颜色]背景。营造紧迫感。”

---

第 2 步：确定广告格式和尺寸

标准 IAB 广告尺寸

名称	尺寸	类型	表现	Gemini 比例 -> --resize
中矩形	300 x 250	展示广告	库存量最高	5:4 -> 300x250
大矩形	336 x 280	展示广告	表现出色	5:4 -> 336x280
排行榜	728 x 90	展示广告	页面顶部	8:1 -> 728x90
移动排行榜	320 x 50	移动端	移动端标准尺寸	8:1 -> 320x50
大型移动广告	320 x 100	移动端	互动效果更佳	4:1 -> 320x100
宽幅摩天大楼	160 x 600	展示广告	侧边栏	1:4 -> 160x600
半页广告	300 x 600	展示广告	影响力强	9:16 -> 300x600
广告牌	970 x 250	展示广告	优质版位	4:1 -> 970x250
大型排行榜	970 x 90	展示广告	宽幅格式	8:1 -> 970x90
正方形	250 x 250	展示广告	紧凑	1:1 -> 250x250

仅当广告服务器接受高 DPI 资源时，才以 2 倍尺寸导出静态广告（例如，300x250 广告导出为 600x500）；否则，请按精确尺寸交付，并确保文件大小不超过上限。

社交广告尺寸

平台	格式	尺寸
Meta（信息流）	单图	1080 x 1350（4:5，移动端效果最佳）或 1080 x 1080
Meta（快拍/Reels）	全屏	1080 x 1920（9:16）
Google 自适应展示广告 / PMax	资源组	横向 1200 x 628、正方形 1200 x 1200、竖向 960 x 1200；Logo 为 1200 x 1200 和 1200 x 300；每个资源最大 5MB
LinkedIn	赞助内容	1200 x 627 或 1080 x 1080
Twitter/X	推广内容	1200 x 675 或 1080 x 1080

---

第 3 步：广告内容层级

每则广告都必须遵循以下严格的内容层级。空间有限，必须果断地确定优先级。

广告的 AIDA 框架

1. 注意 —— 视觉吸引点（图片、颜色、动画）
2. 兴趣 —— 价值主张（是什么，为什么值得关注）
3. 渴望 —— 利益陈述（能获得什么）
4. 行动 —— CTA 按钮（接下来该做什么）

按尺寸确定内容优先级

大尺寸格式（300x600、970x250、300x250）

1. Logo (small, top-left or top-center)
2. Hero image or visual
3. Headline (primary value prop, 5-8 words max)
4. Supporting text (1 line, optional)
5. CTA button

中尺寸格式（728x90、320x100）

1. Logo (left side, compact)
2. Headline (3-5 words)
3. CTA button (right side)
-- No room for supporting text or large visuals

小尺寸格式（320x50、160x600 窄区域）

1. Logo or brand name (text only)
2. Headline (2-4 words)
3. CTA (text link or small button)

---

第 4 步：CTA 按钮设计

CTA 是最重要的元素，必须醒目突出。

CTA 按钮样式

使用以下三种样式之一：实心（高对比度填充色 + 阴影）、描边（透明背景 + 边框）或 胶囊形（圆角 + 箭头图标）。关键属性：

• padding: 10-12px 24-28px、font-weight: 700、text-transform: uppercase
• 添加悬停效果：translateY(-1px) + 加深阴影或切换背景色
• 胶囊形样式：使用 border-radius: 50px，并通过 ::after 添加箭头内容

CTA 文案最佳实践

弱	强	原因
提交	开始使用	以行动为导向
点击此处	抢购特惠	突出具体利益
了解更多	查看运作方式	激发好奇心
立即购买	领取 8 折优惠	突出价值
注册	开始免费试用	承诺门槛低
下载	获取免费指南	强调拥有

CTA 摆放规则

• 300x250： 底部居中或右下方
• 728x90： 右侧，垂直居中
• 160x600： 底部居中
• 320x50： 右侧
• CTA 周围始终至少留出 8px 的内边距
• CTA 应占广告总宽度的 15-25%

---

第 5 步：价值主张框架

标题公式

1. 利益优先：“每周节省 3 小时”
2. 问题—解决方案：“厌倦了[问题]？试试[产品]”
3. 社会认同：“加入 50,000 多名[用户]，一起……”
4. 紧迫感：“最后一天：所有商品 6 折”
5. 激发好奇：“顶尖企业用来实现[结果]的[工具]”
6. 数字：“从今天起，[任务]速度提升 3 倍”

按尺寸限制文案长度

尺寸	标题上限	正文上限	CTA 上限
300x250	8 个词	12 个词	3 个词
728x90	5 个词	0（无空间）	2 个词
160x600	6 个词	10 个词	2 个词
300x600	8 个词	15 个词	3 个词
320x50	4 个词	0	2 个词

---

第 6 步：按尺寸划分的布局模板

按尺寸划分的布局模式

• 300x250：Flex 列布局。Logo 位于顶部（12px 内边距），视觉区域（flex:1），内容位于底部（16px 内边距，居中）。标题为 18px/700。
• 728x90：Flex 行布局，align-items: center，间距 20px。Logo 位于左侧（高度 28px），标题（flex:1，20px/700），CTA 位于右侧。
• 160x600：Flex 列布局，文字居中。Logo 位于顶部，视觉内容位于中间（flex:1），标题为 16px/700，正文为 12px，CTA 位于底部（margin-top: auto）。
• 320x50：品牌色背景上的 Flex 行布局。文字（flex:1，13px/700 白色），CTA 位于右侧（白色背景、品牌色文字、6px 14px 内边距）。

所有尺寸均使用：position: relative; overflow: hidden; border: 1px solid #E5E7EB;

---

第 7 步：A/B 测试变体框架

条件允许时，始终至少生成 2 个变体。测试以下维度：

变体维度

维度	变体 A	变体 B
标题	突出利益	突出紧迫感
CTA 颜色	品牌主色	高对比度强调色
CTA 文案	“开始使用”	“免费试用”
布局	图片在上，文字在下	文字在左，图片在右
背景	浅色/白色	深色/品牌色
视觉元素	产品截图	抽象图像/生活方式

生成变体

创建广告时，请输出：

• 版本 A： 主设计
• 版本 B： 内容相同，仅更改一个变量（CTA 颜色、标题或布局）

在输出中清晰标注每个变体：

<div class="ad variation-a">...</div>


<div class="ad variation-b">...</div>

---

第 8 步：平台特定要求

Google 展示广告网络

• 文件大小：静态上传图片广告和压缩的 HTML5 素材包最大为 150KB
• 动画：总时长必须在 30 秒内结束（包括循环）
• 白色或很浅背景的广告需要有明显边框，以便与页面区分
• HTML5 广告的 <head> 中需要包含 <meta name="ad.size" content="width=300,height=250">
• 点击区域必须覆盖整个广告
• 不得自动播放音频

Meta（Facebook/Instagram）广告

• 图片上的文字：20% 文字规则已于 2020 年取消，不再执行；但图片上的文字仍应简短——文案应放在标题和主要文本字段中
• 主要文本：截断前约 125 个字符
• 标题：截断前约 40 个字符
• 9:16 安全区域（1080x1920）：Stories——顶部和底部约 14%（250px）区域内不要放置文字或徽标；Reels——顶部约 14%、底部约 35%（670px）以及两侧约 6% 区域内不要放置文字或徽标
• Google 自适应展示广告：不建议在图片上放置徽标和文字——Google 会叠加标题；请提供干净的图片
• 正方形（1:1）和竖版（4:5）素材在移动设备上的效果最佳
• 视频缩略图遵循相同规则

LinkedIn 广告

• 语气应专业——避免标题党
• 统计数据和数据驱动型标题效果良好
• 蓝色调容易与平台融为一体；请使用对比鲜明的颜色
• 公司徽标必须清晰可见

程序化展示广告

• 必须能够平稳降级（提供静态备用图片）
• 所有素材都必须从相对路径或数据 URI 加载
• 必须实现点击标签

<script>
var clickTag = "https://example.com";
</script>
<a href="javascript:void(window.open(window.clickTag))" style="position:absolute;inset:0;z-index:999;">
</a>

---

第 9 步：广告用 HTML5 动画

动画模式

交错入场：使用 fadeSlideIn（opacity 0->1，translateY 10px->0），为徽标、视觉素材、标题和 CTA 设置 0.2s 的交错延迟。入场动画结束后，添加轻微的 ctaPulse（scale 1->1.03）。

多帧轮播：将各帧绝对定位，使用共享的 @keyframes frame 控制透明度渐入渐出，并按 总时长 / 帧数 设置交错延迟。最多使用 3 帧，时长为 10-15s。

动画指南

• 动画总时长：最长 30 秒，包括循环（例如，10s 的序列循环 3 次）
• 结束时停留在 CTA 清晰可见的静态画面
• 场景或帧数不得超过 3 个
• 避免快速闪烁（考虑无障碍要求）
• 最后一帧必须显示：标题 + CTA + 徽标

---

第 10 步：广告边框和容器

为每个展示广告设置清晰的边界（白色或很浅背景时为必需）：

• border: 1px solid #CCCCCC; border-radius: 0; overflow: hidden; position: relative; box-sizing: border-box;（border-box 可确保广告尺寸与 IAB 标准尺寸完全一致）
• 铺满广告的点击区域：position: absolute; inset: 0; z-index: 100; cursor: pointer;

---

质量检查清单

• 尺寸与目标广告尺寸完全一致（使用 --resize 裁剪 Gemini 输出）
• 在 100% 缩放下阅读输出 PNG / 截图：文案、价格和 CTA 拼写正确且清晰易读
• 视觉层级清晰：视觉素材 > 标题 > CTA
• CTA 醒目且明确可点击
• 文案简洁，并符合字符数限制
• 使用 design-context 中的品牌颜色和字体
• 白色/浅色背景的展示广告带有可见边框
• 文件大小适中（总大小尽量控制在 150KB 以下）
• 如有动画，结尾应停留在 CTA 清晰可见的静态画面
• 至少提供 2 个版本用于 A/B 测试
• 字号不得小于 10px
• 对比度：普通文本为 4.5:1，大号文本（>=24px 或 >=18.66px 粗体）以及 CTA 按钮与周围区域之间为 3:1