HERO SECTION
便当格首屏Bento Hero
把首屏拆成大小不等的圆角方格，像日式便当盒一样拼在一起，每格放一个卖点或数据。
效果预览
一体化
工作平台 从想法到上线
工作平台 从想法到上线
3×开发提速
99.9%服务可用性
12,000+团队正在使用
适合用在哪
功能多的产品做"一屏讲清全部卖点"；官网的功能总览区块。
容易踩的坑
- 格子超过 6 个且每格都有标题和数字，首屏信息过载，用户找不到核心主张。
- 移动端仍保留 3 列，1×1 小格里的数字被压到 12px 以下难以阅读。
- 读屏顺序按 DOM 而非视觉大小排列，主格应放在源码最前面。
设计提示词 · Prompt
便当格首屏（Bento Grid Hero）：用 3 列 CSS Grid，自动行高 120-160px，gap 16px。设置 2-3 个不同尺寸的格子营造节奏——一个 2×2 的主格承载核心主张（用品牌渐变填充、白色文字），其余 1×1 小格放单个指标（大号数字 + 小号说明），再留一个 2×1 的横格。所有格子统一 20-24px 圆角、1px 浅描边、白底，仅主格用渐变色。整体像便当盒一样严丝合缝，不留空隙。
Bento Grid Hero: use a 3-column CSS Grid, auto row height 120-160px, gap 16px. Set 2-3 different cell sizes to create rhythm — one 2×2 main cell carrying the core message (filled with the brand gradient, white text), the remaining 1×1 small cells each showing a single metric (large number + small caption), plus one 2×1 horizontal cell. All cells share a 20-24px radius, 1px light stroke, and white background; only the main cell uses the gradient. The whole thing fits together tightly like a bento box, with no empty gaps.
常见搭配
同一页面里经常和「便当格首屏」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-hero-bento">
<div class="d-hero-bento__cell d-hero-bento__cell--main">
<b>一体化<br>工作平台</b>
<span style="font-size:9px;opacity:.9">从想法到上线</span>
</div>
<div class="d-hero-bento__cell"><b>3×</b>开发提速</div>
<div class="d-hero-bento__cell"><b>99.9%</b>服务可用性</div>
<div class="d-hero-bento__cell d-hero-bento__cell--w"><b>12,000+</b>团队正在使用</div>
</div>