居中英雄区（Centered Hero）是什么：效果预览与 AI 设计提示词

效果预览

◆ 全新 2.0 版本

让想法
一夜上线

从原型到生产环境，不需要运维，也不需要等待。

适合用在哪

SaaS 官网、工具类产品、品牌站首页。适合文案短、卖点单一的场景。

容易踩的坑

主标题超过两行就失去冲击力，长卖点应拆进副文案。
主次两个按钮视觉权重相同，用户不知道该先点哪个。
移动端仍保留 64px 标题和 180px 留白，首屏只剩一句话，按钮被挤到折叠线下。

设计提示词 · Prompt

居中英雄区（Centered Hero）：内容水平居中、垂直中轴对齐。自上而下依次为——胶囊形 Eyebrow 标签（10-11px、大写字母、1px 描边、可选一个小图标）、40-64px 主标题（字距 -0.03em、字重 700-800、1.1 倍行高、可做上深下浅的垂直渐变文字）、16-18px 副文案（中性灰、限宽 40-50 字符、居中）、并排的主按钮（实心深色）+ 次按钮（白底描边）。背景保持纯色或极浅渐变，不加装饰图形，靠上下 120-180px 的留白撑气场。

Centered Hero: content centered horizontally and aligned on a vertical axis. From top to bottom — a pill-shaped eyebrow label (10-11px, uppercase, 1px stroke, optional small icon), a 40-64px headline (letter-spacing -0.03em, font-weight 700-800, line-height 1.1, optionally a vertical gradient text going from dark at the top to lighter at the bottom), 16-18px supporting copy (neutral gray, max width 40-50 characters, centered), and side-by-side primary button (solid dark) + secondary button (white background with stroke). Keep the background a solid color or a very light gradient, no decorative shapes; rely on 120-180px of top and bottom whitespace for presence.

常见搭配

同一页面里经常和「居中英雄区」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

吸顶模糊导航Sticky Blur Header Logo 云Logo Cloud 眉题标签Eyebrow / Kicker 网格淡出光晕Grid Fade + Top Glow

演示 HTML 结构

<div class="s d-hero-c">
  <span class="d-eyebrow">◆ 全新 2.0 版本</span>
  <h3 class="d-h1">让想法<br>一夜上线</h3>
  <p class="d-sub">从原型到生产环境，不需要运维，也不需要等待。</p>
  <div class="d-hero-c__cta">
    <button class="d-btn d-btn--p">免费开始</button>
    <button class="d-btn d-btn--g">看演示</button>
  </div>
</div>