ad-creative

广告创意

用途

适用于根据头脑风暴的概念制作广告图片、创建多个广告版本以进行 A/B 测试，或迭代广告设计（更换标题、截图或颜色）。

流程

第 1 步：收集输入信息

向用户询问：

1. 标题文本 — 广告图片上的主要文字
2. 品牌颜色（可选）— 主色、背景色、文字颜色（十六进制值）。如果未提供，默认值：背景 #0f172a，文字 #ffffff，强调色 #3b82f6
3. 字体（可选）— 字体系列（默认：系统无衬线字体组）
4. Logo URL（可选）— 品牌指南要求时提供
5. 产品图片（可选，产品图片风格和品牌风格必需）— 截图、UI 图片或视觉素材的路径
6. 风格 — cookie-cutter / ugly / meme / branded / native（默认：cookie-cutter）
7. 尺寸 — 宽 x 高，单位为像素。常用预设：
   • square：1200x1200px（社交信息流）
   • landscape：1440x1000px（Reddit/展示广告）
   • 或自定义尺寸
8. 平台 — 广告投放的平台（会影响默认尺寸和模板调整）
9. 来自 ad-angles 的广告概念（可选）— 包含标题、风格和图片建议的完整概念块

第 1b 步：选择或优化标题

如果未提供标题，或标题需要加强，请使用 Hook Formula Bank：

令人无法抗拒的标题的 5 个特质：

1. 清晰，而非巧妙 — 读者能立即明白主题
2. 做出承诺 — 不只是“关于 X”，而是“会带来哪些改变”
3. 具体 — 明确的数字、结果和受众
4. 表明立场 — 有争议性的标题会让合适的读者说“这说的就是我”
5. 吊足胃口，但不揭晓答案 — 好奇心缺口

快速标题公式：

• [Number] [Things] [Audience] should [know/avoid/use]
• How to [Outcome] without [Pain Point]
• Still [Painful Activity]? There's a better way.
• [Competitor], but [Differentiator]
• The [Number]-step [System] for [Outcome]

标题长度规则（适用于广告图片）：

• 短标题（< 40 个字符）效果最好。尽量控制在此范围内。
• 如果标题需要解释，那对广告图片来说就太复杂了。

第 1c 步：直接响应广告检查清单

制作 HTML 之前，确认概念符合以下要求：

• 单一信息 — 广告传达一个想法
• 标题以利益为导向 — 说明潜在客户能获得什么
• 视觉与标题相符 — 产品截图强化广告主张
• CTA 清晰明确 — 观众知道该采取什么行动
• 没有相互竞争的元素 — 没有争夺注意力的装饰性图形
• 适合移动端阅读 — 标题在 50% 缩放时仍清晰可读
• 引发情感共鸣 — 至少激发一种情感触发因素

第 2 步：构建 HTML

使用所选模板创建独立的 HTML 文件。

---

Cookie-Cutter 模板 — 标题 + 产品图片 + 简洁背景：

┌─────────────────────────────┐
│                             │
│     HEADLINE TEXT            │
│     (large, bold)           │
│                             │
│   ┌─────────────────────┐   │
│   │   Product Image     │   │
│   │   (with shadow)     │   │
│   └─────────────────────┘   │
│                             │
└─────────────────────────────┘

设计规则：

• 标题：字号大、粗体、高对比度。最多 2 行。
• 产品图片：居中，带轻微投影，约占画布宽度的 60%。
• 背景：使用品牌色的纯色或微妙渐变。
• 不要放置徽标、装饰元素或额外文字。设计应简洁。

标题字体大小：少于 40 个字符 → 64px，40–70 个字符 → 52px，多于 70 个字符 → 42px。

---

Ugly Ads 模板 — 文字密集、高对比度、有意采用粗糙风格：

┌─────────────────────────────┐
│   HEADLINE TEXT             │
│   (very large, bold,        │
│    fills top 60%)           │
│                             │
│   Optional: $PRICE          │
│   Optional: subtext/CTA     │
└─────────────────────────────┘

设计规则：

• 默认采用正方形格式（1200x1200px）
• 文字占据画布顶部 60% 的区域
• 不使用产品图片——创意内容就是文字
• 使用粗体、特粗字重（700-900）
• 有意采用粗糙风格：不使用渐变、阴影、圆角

高对比度配色组合：

组合	背景	文字	强调色
黑/黄	#000000	#FFD700	#FFFFFF
红/白	#CC0000	#FFFFFF	#FFD700
蓝/白	#003366	#FFFFFF	#FFD700
白/黑	#FFFFFF	#000000	#CC0000
黄/黑	#FFD700	#000000	#CC0000

标题字体大小：少于 30 个字符 → 96px，30–60 个字符 → 72px，多于 60 个字符 → 56px。

---

Meme 模板 — 以 Meme 格式吸引注意力并传达优势：

┌─────────────────────────────┐
│   TOP TEXT (setup)          │
│   ┌─────────────────────┐   │
│   │   Meme Image        │   │
│   └─────────────────────┘   │
│   BOTTOM TEXT (punchline)   │
└─────────────────────────────┘

设计规则：

• 使用广为人知的 Meme 模板（Drake、Expanding Brain 等）
• 顶部文字 = 铺垫（问题或旧方法），底部文字 = 笑点（产品或新方法）
• 文字要简短——大段文字会削弱 Meme 的效果
• 正方形格式（1200x1200）效果最佳

---

Branded 模板 — 专业风格，包含数据、产品图片和社会认同：

┌─────────────────────────────┐
│     HEADLINE TEXT            │
│   STAT  |  STAT  |  STAT    │
│   ┌─────────────────────┐   │
│   │   Product Image     │   │
│   └─────────────────────┘   │
│   Social proof line          │
└─────────────────────────────┘

设计规则：

• 使用品牌的实际配色
• 数据使用强调色，标签使用柔和色
• 产品图片带阴影并居中
• 底部添加社会认同文案（客户名称、G2 评分等）

---

Native 模板 — 看起来像自然发布的社交媒体帖子：

┌─────────────────────────────┐
│  Platform · Promoted         │
│  HEADLINE TEXT               │
│  Body text (reads like       │
│   a real post)              │
│  ┌─────────────────────┐    │
│  │  Product Image       │    │
│  └─────────────────────┘    │
│  142 upvotes · 38 comments   │
└─────────────────────────────┘

设计规则：

• 浅色背景（#f8fafc 或白色）
• 系统字体，使用常规字重
• 正文读起来像真实帖子，而不是营销标题
• 底部添加虚构的互动数据

---

第 3 步：保存 HTML 文件

编写 HTML 文件。使用描述性名称：ad-{slug}.html，其中 {slug} 是标题转换为短横线命名格式后的版本（截断至 40 个字符）。

第 4 步：使用 Playwright MCP 截图（如可用）

如果已配置 Playwright MCP：

1. 使用 browser_resize 将视口设为精确尺寸
2. 使用 file:// URL 导航到 HTML 文件
3. 截取视口
4. 将截图保存为 PNG

Playwright MCP 必须配置 --allow-unrestricted-file-access 和 --browser chromium 标志。

如果 Playwright MCP 不可用，请向用户提供 HTML 文件，并告知他们可以在浏览器中打开文件后手动截图，或配置 Playwright MCP 以自动截图。

第 5 步：验证、展示并迭代

向用户展示结果，包含：

• 每个广告的图片预览（如已截取）
• 显示所有渲染广告的摘要表格
• PNG 和 HTML 文件的路径

询问用户是否要迭代：

• 更改标题 → 更新 HTML 并重新截图
• 更改颜色或风格 → 使用不同模板重新构建
• 更改产品图片 → 重新截图并重新构建
• 更改尺寸 → 在新的视口尺寸下重新截图

在用户确认满意之前，不要将这批任务视为已完成。

输出格式

# Ad Creative Output

**Date:** [current date]
**Ads Produced:** [count]
**Dimensions:** [width]x[height]px

---

## Ad 1: [Concept name]

**Headline:** [headline text]
**Style:** [branded/product/meme/ugly/native]
**Files:**
- HTML: [path]
- PNG: [path] (if Playwright available)

[Image preview if available]

---

## Upload Checklist

- [ ] Images are correct dimensions
- [ ] File size under 3MB per image
- [ ] Format is PNG or JPG
- [ ] Headlines are readable on mobile (test at 50% zoom)
- [ ] Brand colors match landing page

规则

• Cookiecutter 模板有意保持简洁。不要添加装饰元素。简洁更有吸引力。
• 产品图片应使用真实截图，而不是模型图或图库照片。
• 如果产品图片背景为白色，请使用深色广告背景（反之亦然），以形成对比。
• PNG 更适合清晰展示文字和 UI 截图。
• 保留 HTML 文件，以便用户手动调整文案、颜色或图片，然后重新截图。
• 广告与落地页在视觉上保持一致，可减少用户流失。使用相同的颜色、字体和设计系统。