详情页头图区
Detail Hero
详情页开头那块：大图或封面、标题、关键信息，再往下才是正文，底部常吸一个购买/收藏条。
全平台通用内容组织内容区组件
大白话说明
详情页头图区在三秒内回答「这是什么、值不值得继续看」：媒体先给感性判断，标题给理性确认，元信息（作者/评分/价格）给信任，之后正文展开，转化动作吸底常驻。
什么时候用
商品详情、文章详情、课程详情、房源详情——一切「看清一个再决定」的页面开头。
什么时候不用
信息密度优先的工作页面（数据详情、工单详情）别用大头图占首屏，字段前置更重要。
细节与变体
- 头图区总高度别超过首屏 60%，要给正文露一截钩子
- 吸底操作条最多两个按钮：主行动 + 一个次行动（收藏/分享二选一）
- 标题字号是全页最大，但别超过 28px 在移动端喧宾夺主
配套效果见下方「可用效果」。
配套提示词（点开填空、复制）
可用效果
参考实现（开源）
- Gestalt（Pinterest） ↗ Apache-2.0 · 免费（Apache-2.0）
Pinterest 的设计系统：瀑布流 Masonry 的出处，图片型产品的排布参照。
- AstroWind 落地页模板 ↗ MIT · 免费（MIT）
Astro + Tailwind 的落地页与博客范式：Hero、特性、定价、FAQ 一应俱全。