营销 Hero 背景 Prompt:10 个落地页模板

覆盖 SaaS、金融科技、电商、B2B、开发者工具、Web3 的 10 个落地页 Hero 背景 Prompt,已针对 Midjourney V7、GPT Image 2、Nano Banana 2 调过(2026 年 6 月)。

落地页 Hero 背景图只有一个任务:不要抢标题和主 CTA 按钮的视觉位。大多数 AI 生成的背景之所以不能用,是因为模型把它当画作处理,而不是当 UI 表面。下面 10 个模板会显式锁住行业、配色和留白规则,让结果真正能挡在 64px H1 标题和高饱和按钮后面。

一句话总结:挑一个对应行业的模板,把占位颜色换成你的品牌 hex,按 --ar 16:9(加宽 Hero 用 --ar 21:9)出图。模板里已经禁掉了人物、中央主体和高对比度,所以标题和 CTA 始终清晰可读。在 Midjourney V7 上 --ar 参数按原样生效;在 GPT Image 2 和 Nano Banana 2(Gemini)上请删掉 --ar,改用自然语言写比例。

哪个工具适合做 Hero 背景(2026 年 6 月)

三款主流工具都能出干净的抽象背景。区别在于:你如何控制留白,以及你已经在为哪个订阅付费。

工具最新模型(2026 年 6 月)比例控制方式入门价格最适合
MidjourneyV7(V8.1 内测中)--ar 16:9 / --ar 21:9 参数Basic 每月 $10(约 200 张,含商用授权)最”有设计感”的抽象渐变
ChatGPT / GPT Image 2gpt-image-2(2026 年 4 月 21 日上线)自然语言(如 “wide 16:9 banner”)随 ChatGPT Plus 每月 $20 附带左右留白稳、图内文字准
Gemini / Nano Banana 2Gemini 3.1 Flash Image自然语言或设置项,512px–4KGoogle AI Pro 每月 $19.99(Plus $7.99)在参考图上做对话式微调

两点实操提醒。其一,只有 Midjourney 能解析 --ar 参数;在 GPT Image 2 和 Nano Banana 2 上请保留 Prompt 其余部分,把比例写成一句话。其二,GPT Image 2 对 “large empty area on the left” 这类空间指令的执行比 Midjourney 更”听话”,而这恰恰是 Hero 背景最需要的特性。Midjourney 的定价与 V7/V8.1 分版已对照 Midjourney 官方文档 核对(截至 2026 年 6 月)。

第一次用这些工具?可以先看 Midjourney 新手入门ChatGPT 图像生成Gemini 图像生成

一个好的 Hero 背景 Prompt 要包含什么

Hero 背景不是海报。可用的和”漂亮但没法用”的差别就在这 5 条:

  • 比例--ar 16:9 桌面、--ar 21:9 加宽 Hero、--ar 4:5 移动端 — 不要 1:1
  • 行业关键词SaaSfintechhealth-techdev toolsweb3 — 锁配色
  • 禁止主体no people, no faces, no center subject — 不抢标题
  • 明确留白large empty area on left for headline copy — 显式预留位置
  • 降对比low contrast palettesoft overcast lightslightly desaturated — 文字才赢

10 个可直接复制的 Prompt 模板

1. SaaS 抽象渐变 + 漂浮 UI

使用场景:B2B SaaS 落地页、PLG 风 Hero

SaaS landing page hero background, abstract soft gradient from indigo to soft purple, faint floating glass UI cards in the distance with blurred edges, plenty of empty space on left for headline, no center subject, ultra clean modern, --ar 16:9

2. 金融科技深蓝 + 金色点缀

使用场景:银行、投资、轻量加密类金融科技

Fintech hero background, deep navy with subtle gold accent gradients, thin abstract line patterns suggesting graphs, large dark area on left for headline copy, no objects, premium editorial feel, --ar 21:9

3. 电商生活方式场景(加宽)

使用场景:DTC 品牌、生活方式电商、时尚类落地页

Lifestyle e-commerce hero background, soft natural daylight on a beige linen surface with blurred ceramic objects on the right, large empty area on left for headline, shallow depth of field, no people, warm minimal aesthetic, --ar 21:9

4. B2B 极简白

使用场景:企业级 SaaS、开发者平台、技术产品

B2B enterprise hero background, very subtle off-white gradient with faint geometric grid, single soft shadow from top-left, plenty of empty space, no subject, minimal corporate aesthetic, --ar 16:9

5. C 端 App 高饱和网格渐变

使用场景:消费类 App、创作者工具、社交 App

Consumer app hero background, vibrant gradient mesh blending coral, magenta and warm yellow, soft blurred bokeh, no people, energetic but clean, modern UI design aesthetic, large reserve area on right for product mockup, --ar 16:9

6. 医疗健康柔和粉彩

使用场景:健康、远程医疗、冥想、健身类 App

Health-tech landing hero background, soft pastel gradient from mint to pale peach, very gentle radial blur, subtle organic shapes in the distance, plenty of negative space, no objects, calm and reassuring, --ar 16:9

7. 教育科技扁平插画

使用场景:教育平台、儿童学习、语言学习类 App

Education platform hero background, cheerful flat illustrated style, soft sky blue with floating abstract shapes representing books and lightbulbs in a corner, large empty central area for headline, no people, friendly modern aesthetic, --ar 16:9

8. 开发者工具终端深色

使用场景:开发者平台、CLI 产品、基础设施工具

Developer tools hero background, dark terminal-inspired charcoal with very faint green and amber syntax-color highlights at the edges, subtle scanline texture, large dark empty area for headline, no center subject, minimal technical aesthetic, --ar 21:9

9. Web3 霓虹网格

使用场景:加密钱包、DeFi、NFT 平台

Web3 hero background, dark navy with neon magenta and electric cyan mesh gradient, subtle glow particles, abstract geometric mesh structure on right side, large reserve on left for headline, modern futuristic aesthetic, --ar 16:9

10. 奢侈品大理石纹理

使用场景:高端品牌、奢侈品、高客单价服务

Luxury brand hero background, cream and dusty rose marble texture with subtle gold veining, soft directional light from top right, premium editorial feel, large empty area on left for serif headline, no objects, --ar 21:9

容易踩的坑

  • 渐变最亮点恰好在画面正中央 — 那是 H1 的位置,对比度撞死
  • 整张画布都高饱和 — 你想用的 CTA 颜色全被压住
  • 把人物或产品照塞进背景 — Hero 主图应是单独图层,不要烧进背景
  • 不写比例 — 1:1 直出再裁 21:9 永远难看
  • epic, beautiful, stunning — 模型加细节,你失去安静
  • --ar 16:9 直接贴进 GPT Image 2 或 Nano Banana 2 — 只有 Midjourney 认这个参数,其他工具会把它当文字打出来或直接忽略。改写成 “wide 16:9 hero banner”

下一步怎么改得更好

  • 想要 SaaS / B2B 感:加 minimal modern UI design aesthetic, ultra clean
  • 想要高端品牌感:加 editorial photography style, soft shadow, cream paper texture
  • 深色模式 Hero:加 soft bokeh particles, slight grain,避免死黑
  • 想要预留文案位:明确指方位 large empty area on left for headline copy
  • 想要移动端版本:另出一张 --ar 4:5--ar 9:16(Midjourney 已在 2026 年 1 月 20 日为网页端加上原生 4:5 与 21:9 支持),不要直接裁
  • 在 GPT Image 2 上多写方位词 — 它对 “headline space on the left, product mockup on the right” 的执行比 Midjourney 更精确,可以省掉手动裁切

常见问答 (FAQ)

Q: 我的标题总是和渐变高光撞在一起,怎么办?

A: 把高光挪到文案区相反的一侧,加 large empty area on left for headline copy,再跑一轮。

Q: 应该一张图裁出移动端版本吗?

A: 不要。Hero 的移动端裁切几乎一定丢构图。单独跑 --ar 4:5--ar 9:16,当作两个独立资产。

Q: 深色模式下 Hero 太平怎么加层次?

A: 加 soft bokeh particles, faint light leaks, subtle grain。纯黑没纹理会被当作”加载失败”。

Q: 我能不能 AI 出背景,再在 Figma 上叠产品图?

A: 推荐流程就是这样。背景跑得安静,再在 Figma 把产品图、标题、CTA 作为独立图层叠上去。

Q: 是不是要把品牌色的 hex 写进 Prompt?

A: 尽量。把 hex 换成对应色名(如 deep emerald #0F5132)更稳,模型对颜色名的锚定比对裸 hex 强。

Q: 这些 Prompt 该用哪个工具跑?

A: 三个都行。Midjourney V7(Basic 每月 $10)渐变最有设计感,且直接认 --ar 参数。GPT Image 2(随 ChatGPT Plus 每月 $20 附带)对左右留白指令执行最精确,如果需要把文字烧进图里,它最稳。Gemini 里的 Nano Banana 2(Google AI Pro 每月 $19.99)最适合在一张参考图上做对话式修改,具体流程见 Nano Banana 图像编辑

Q: 这些 Prompt 出的背景能商用吗?

A: 在 Midjourney 上,付费档(Basic 每月 $10 起)按官方 Plans 页面说明附带商用授权。ChatGPT 和 Gemini 在各自的消费者条款下也允许商用生成图。上线付费广告前,请按你的具体订阅再核对一次当前条款。

相关文章

标签: #app-backgrounds #营销 #hero #图像生成 #Prompt