眉题 + 巨号标题（Eyebrow + Display Headline）是什么：效果预览与 AI 设计提示词

效果预览

2026 年度版本

重新定义写作

把 10 小时的周报，压缩到 10 分钟。

已有 8,200 人在使用

适合用在哪

内容品牌、媒体、设计驱动型产品；想要高级克制感时。

容易踩的坑

用固定 120px 字号不加 clamp()，在 375px 宽的手机上单词被截断或溢出容器。
行高压到 1.02 后中文或带降部的字母上下重叠，多行标题应放宽到 1.1 以上。
渐变关键词用 background-clip:text 却没设兜底 color，部分环境下文字直接不可见。

设计提示词 · Prompt

排版型首屏（Eyebrow + Display Headline）：不使用任何插图，纯靠字体层级立住画面。上方一枚 11-12px 的 Eyebrow（大写、字距 +0.16em、品牌色、可带一个小方块图标），下方 72-120px 的巨号标题（字重 800、字距 -0.04em、行高 1.02-1.08），标题中挑一个关键词做品牌渐变文字（background-clip:text）。再配一行 18px 中性灰副文案，底部用一条 1px 分隔线接一组小号元信息（实时在线人数 + 状态圆点）。留白要舍得，标题上下各留 40-60px。

Eyebrow + Display Headline: use no illustration at all; let typographic hierarchy alone hold the frame. On top, an 11-12px eyebrow (uppercase, letter-spacing +0.16em, brand color, optionally with a small square icon); below it, a 72-120px display headline (font-weight 800, letter-spacing -0.04em, line-height 1.02-1.08), with one keyword in the headline rendered as brand gradient text (background-clip:text). Add one line of 18px neutral gray supporting copy, and at the bottom use a 1px divider to lead into a set of small meta info (live online count + status dot). Be generous with whitespace: 40-60px above and below the headline.

常见搭配

同一页面里经常和「眉题 + 巨号标题」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

眉题标签Eyebrow / Kicker 渐变文字Gradient Text 平衡换行Balanced & Pretty Text Wrap 流体排版Fluid Typography (clamp)

演示 HTML 结构

<div class="s d-hero-display">
  <span class="d-eyebrow d-eyebrow--solid">2026 年度版本</span>
  <h3 class="d-h1">重新定义<em>写作</em></h3>
  <p class="d-sub">把 10 小时的周报，压缩到 10 分钟。</p>
  <div class="d-hero-display__meta">
    <span class="d-dot d-dot--pulse"></span>已有 8,200 人在使用
  </div>
</div>