HERO SECTION
分栏英雄区Split Hero
画面左右两栏切分，左侧文案右侧视觉稿。视觉平衡感强，是 SaaS 产品首屏的主流形态。
效果预览
开发者优先
一套 API
一套 API
搞定全部支付
接入 3 行代码，支持 40+ 支付方式。
A本月收入 ¥128,400
适合用在哪
有真实产品截图或界面演示的产品官网；需要展示信息密度的场景。
容易踩的坑
- 右栏截图里文字小于 12px 且分辨率不足，放大后发糊反而显得产品粗糙。
- 移动端直接堆叠时截图排在文案前面，标题和 CTA 被推到第二屏。
- 悬浮小卡片遮住截图里的关键数据，或在窄屏溢出容器产生横向滚动条。
设计提示词 · Prompt
分栏英雄区（Split Hero）：12 栏栅格切成左右两半（约 50:50 或 55:45），左栏承载文案——Eyebrow、36-52px 主标题、副文案、主 CTA、可选一行信任背书；右栏放产品截图，套一层浏览器窗口边框或直接圆角裁切，并叠一枚悬浮小卡片（浮层数据、实时指标）制造纵深。两栏垂直居中对齐，栏间距 48-64px，整块上下留白 100px 以上。
Split Hero: split a 12-column grid into left and right halves (about 50:50 or 55:45). The left column carries the copy — eyebrow, 36-52px headline, supporting copy, primary CTA, and an optional line of trust endorsement; the right column holds a product screenshot, wrapped in a browser window frame or simply cropped with rounded corners, with a small floating card layered on top (overlay data, live metrics) to create depth. Vertically center-align both columns, 48-64px column gap, and at least 100px of whitespace above and below the whole block.
常见搭配
同一页面里经常和「分栏英雄区」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-hero-split">
<div class="d-hero-split__copy">
<span class="d-eyebrow d-eyebrow--solid">开发者优先</span>
<h3 class="d-h3" style="font-size:16px;line-height:1.18">一套 API<br>搞定全部支付</h3>
<p class="d-sub">接入 3 行代码，支持 40+ 支付方式。</p>
<button class="d-btn d-btn--p d-btn--sm">查看文档</button>
</div>
<div class="d-hero-split__art">
<div class="d-hero-split__float"><span class="d-av d-av--sm">A</span>本月收入 ¥128,400</div>
</div>
</div>