HERO SECTION
浏览器样机首屏Browser Chrome Mockup Hero
把产品截图套进一个带红黄绿圆点和地址栏的浏览器窗口框里，让画面立刻"像个真产品"。
效果预览
适合用在哪
Web 应用、SaaS 后台、有网页端界面的产品展示。
容易踩的坑
- 截图用 PNG 原尺寸 2-3MB 直接塞进首屏，应导出 WebP/AVIF 并给出宽高防止布局抖动。
- 截图里放的是假数据或 Lorem ipsum，用户一眼看穿反而降低可信度。
- 整窗倾斜后再缩放到移动端宽度，界面文字锯齿明显，窄屏应取消旋转。
设计提示词 · Prompt
浏览器样机首屏（Browser Chrome Mockup）：把产品截图包进一个 macOS 风格窗口——顶部 36-44px 工具条，左侧三枚 10px 圆形按钮（#FF5F57 / #FEBC2E / #28C840），中间一条圆角地址栏（高度 24px、字号 12px、浅灰描边）。窗口本体 12-16px 圆角、1px 描边、外加大范围柔和投影（0 30px 60px -20px rgba(0,0,0,.25)）制造悬浮感。窗口下方可再叠一层同样的框向上偏移形成"层叠"效果。整体稍微倾斜 -1° 到 -2° 会更自然。
Browser Chrome Mockup: wrap the product screenshot in a macOS-style window — a 36-44px toolbar on top, three 10px circular buttons on the left (#FF5F57 / #FEBC2E / #28C840), and a rounded address bar in the middle (24px tall, 12px font size, light gray stroke). The window body has a 12-16px radius, 1px stroke, plus a large soft shadow (0 30px 60px -20px rgba(0,0,0,.25)) for a floating effect. Optionally stack an identical frame beneath the window, offset upward, to create a "layered" effect. Tilting the whole thing slightly by -1° to -2° looks more natural.
常见搭配
同一页面里经常和「浏览器样机首屏」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-hero-browser">
<div class="d-hero-browser__win">
<div class="d-hero-browser__bar">
<span class="d-hero-browser__dot"></span>
<span class="d-hero-browser__dot"></span>
<span class="d-hero-browser__dot"></span>
<div class="d-hero-browser__url">app.nova.dev / dashboard</div>
</div>
<div class="d-hero-browser__body">
<div class="d-hero-browser__side">
<div class="d-img" style="height:22px"></div>
<span class="d-hero-browser__ln" style="width:88%"></span>
<span class="d-hero-browser__ln" style="width:66%"></span>
<span class="d-hero-browser__ln" style="width:78%"></span>
<span class="d-hero-browser__ln" style="width:54%"></span>
</div>
<div class="d-hero-browser__main">
<div class="d-img d-img--cool" style="height:38px"></div>
<div class="d-row" style="gap:5px">
<span class="d-hero-browser__ln" style="flex:1"></span>
<span class="d-hero-browser__ln" style="flex:1"></span>
</div>
</div>
</div>
</div>
</div>