178 lines
4.6 KiB
Markdown
178 lines
4.6 KiB
Markdown
# Web Banner / Hero 模板
|
||
|
||
本文件用于生成“网页顶部 hero 区 / app banner / 投放素材”视觉：
|
||
|
||
- 网站首页 hero
|
||
- 落地页 banner
|
||
- App 顶部活动 banner
|
||
- 邮件 marketing banner
|
||
- 信息流广告素材
|
||
|
||
特征：
|
||
|
||
- 横向比例（16:9 / 21:9 / 3:1）
|
||
- 一句强 claim
|
||
- 留出 CTA 区域
|
||
- 安全留白（避免裁切关键元素）
|
||
|
||
## 适用范围
|
||
|
||
- Web hero
|
||
- 落地页 hero
|
||
- App banner
|
||
- 邮件 banner
|
||
- 投放素材
|
||
|
||
## 何时使用
|
||
|
||
- 用户提到“banner / hero / 落地页主图 / 顶部图”
|
||
- 用户需要横向构图 + CTA 区
|
||
|
||
不要使用：
|
||
|
||
- 竖图 / 方图主海报（用 `brand-poster.md`）
|
||
- 系列 KV（用 `campaign-kv.md`）
|
||
- 杂志封面（用 `editorial-cover.md`）
|
||
|
||
## 缺失信息优先提问顺序
|
||
|
||
1. 用途（web hero / app banner / 邮件）
|
||
2. 主题 / claim
|
||
3. 主视觉
|
||
4. CTA 文案 + 颜色
|
||
5. 品牌色
|
||
6. 比例
|
||
|
||
## 主模板：Web hero banner
|
||
|
||
📖 描述
|
||
|
||
整体横向构图，左侧为标题 + 副标题 + CTA，右侧为主视觉，底部安全留白。
|
||
|
||
📝 提示词
|
||
|
||
```json
|
||
{
|
||
"type": "Web hero banner",
|
||
"goal": "生成一张可直接作为产品官网 / 营销落地页 hero 区主图的横向 banner",
|
||
"aspect_ratio": "{argument name=\"aspect ratio\" default=\"16:9\"}",
|
||
"layout": {
|
||
"left_column": {
|
||
"headline": "{argument name=\"headline\" default=\"重新定义你的工作节奏\"}",
|
||
"subhead": "{argument name=\"subhead\" default=\"AURORA Pro · 让 AI 替你处理 80% 的琐事\"}",
|
||
"cta": {
|
||
"text": "{argument name=\"cta text\" default=\"免费试用\"}",
|
||
"color": "{argument name=\"cta color\" default=\"品牌主色\"}",
|
||
"secondary": "{argument name=\"secondary cta\" default=\"了解更多\"}"
|
||
}
|
||
},
|
||
"right_column": {
|
||
"centerpiece": "{argument name=\"hero visual\" default=\"产品截图 + 微微 3D 透视 + 高光\"}",
|
||
"scale": "{argument name=\"hero scale\" default=\"占右侧 80%\"}"
|
||
}
|
||
},
|
||
"background": {
|
||
"type": "{argument name=\"background type\" default=\"浅色渐变\"}",
|
||
"decoration": "{argument name=\"decoration\" default=\"微噪点 + 极淡几何形\"}"
|
||
},
|
||
"brand": {
|
||
"logo_position": "左上角",
|
||
"navigation_hint": "{argument name=\"nav hint\" default=\"顶部导航条已存在，banner 不要画\"}"
|
||
},
|
||
"safe_area": {
|
||
"rule": "底部 10% + 右侧 5% 留白，避免裁切",
|
||
"mobile_consideration": "{argument name=\"mobile aware\" default=\"true\"}"
|
||
},
|
||
"constraints": {
|
||
"must_keep": [
|
||
"headline 字号最大",
|
||
"CTA 必须可点击感（明确按钮形态）",
|
||
"主视觉在右侧不超出安全区",
|
||
"色板严格统一"
|
||
],
|
||
"avoid": [
|
||
"headline 与主视觉重叠",
|
||
"CTA 颜色与背景对比过低",
|
||
"信息密度过高",
|
||
"主视觉横跨整个画面无 claim 空间"
|
||
]
|
||
}
|
||
}
|
||
```
|
||
|
||
### 参数策略
|
||
|
||
- 必问：headline、CTA、主视觉、比例
|
||
- 可默认：背景、副标题、安全区
|
||
- 可随机：装饰几何形
|
||
|
||
### 自动补全策略
|
||
|
||
- 用户给产品名时：自动生成 1 句 headline + 1 句 sub + 1 个 CTA
|
||
- CTA 默认品牌主色按钮 + 灰色辅助按钮
|
||
- 主视觉按行业自动选（SaaS = 截图，消费 = 产品，服务 = 人物）
|
||
|
||
## 变体 1：纯图大背景 + 浮层文案
|
||
|
||
📝 提示词
|
||
|
||
```json
|
||
{
|
||
"type": "全屏背景图 hero",
|
||
"background": {
|
||
"type": "全图背景",
|
||
"description": "{argument name=\"background image\" default=\"清晨工作桌面，柔光\"}"
|
||
},
|
||
"layout": {
|
||
"left_column": {
|
||
"headline": "{argument name=\"headline\" default=\"AI 让早晨多出 30 分钟\"}",
|
||
"cta": "立即体验"
|
||
}
|
||
},
|
||
"constraints": {
|
||
"must_feel": "氛围、生活、品牌精神"
|
||
}
|
||
}
|
||
```
|
||
|
||
## 变体 2：长横条 banner（21:9 / 3:1）
|
||
|
||
📝 提示词
|
||
|
||
```json
|
||
{
|
||
"type": "超宽横条 banner",
|
||
"aspect_ratio": "{argument name=\"aspect ratio\" default=\"21:9\"}",
|
||
"layout": {
|
||
"left_column": { "headline": "限时 8 折 · 仅限 7 天" },
|
||
"right_column": { "centerpiece": "倒计时数字 + 商品小图" }
|
||
},
|
||
"constraints": {
|
||
"must_feel": "促销、紧迫感、CTA 强烈"
|
||
}
|
||
}
|
||
```
|
||
|
||
## 变体 3：自动补全模式
|
||
|
||
📝 提示词
|
||
|
||
```json
|
||
{
|
||
"type": "Banner / hero 自动补全模板",
|
||
"mode": "auto-fill",
|
||
"rule": "用户给产品 + 主题 + 比例，自动生成 headline / CTA / 主视觉 / 安全区",
|
||
"constraints": {
|
||
"must_feel": "可直接上 web / app"
|
||
}
|
||
}
|
||
```
|
||
|
||
## 避免事项
|
||
|
||
- 不要让 headline 和主视觉互相遮挡
|
||
- 不要让 CTA 颜色与背景对比 < 4.5:1
|
||
- 不要在 banner 上塞 > 3 行正文
|
||
- 不要忽略安全留白（移动端裁切会出问题）
|
||
- 不要让 banner 横向构图变成纯图（必须有 claim）
|