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

覆盖 SaaS、金融科技、电商、B2B、开发者工具、Web3 的 10 个落地页 Hero 背景 Prompt — 给标题和 CTA 留出空间。

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

一个好的 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 — 模型加细节,你失去安静

下一步怎么改得更好

  • 想要 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,不要直接裁

常见问答 (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 强。

相关文章

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