设备样机（Device Mockup）是什么：效果预览与 AI 设计提示词

效果预览

App 官网标配 手机壳 + 真实截图 + 定向投影，产品立刻可感。

适合用在哪

移动 App 官网、应用下载页、案例展示。

容易踩的坑

样机内放 2MB 以上的原始截图，首屏加载变慢，应压缩并给出 srcset。
3D rotateY 超过 15°，截图文字透视变形严重，用户读不出界面内容。
截图状态栏时间、电量与机型不符，细心用户一眼看出是拼贴假图。

设计提示词 · Prompt

设备样机（Device Mockup）：CSS 画手机框——深色外壳（#17171B）、圆角 40-56px、内边距 8-12px 形成黑色边框，屏幕内放 App 截图（border-radius 内缩）。顶部刘海/灵动岛用绝对定位的胶囊。加大范围定向投影 + 可选的轻微 3D 旋转（rotateY ±8°）。组合玩法：多台设备错位摆放、一台主设备 + 背景光晕、或与浏览器样机混排表达跨端。截图必须是真实 App 界面——空白屏幕样机一眼假。真实感来自细节：状态栏、时间、信号图标都画上。

Device Mockup: Draw a phone frame in CSS — a dark shell (#17171B), 40-56px corner radius, 8-12px inner padding forming the black bezel, with the App screenshot inside the screen (border-radius inset accordingly). The notch / Dynamic Island at the top is an absolutely positioned pill. Add a large directional drop shadow + optional slight 3D rotation (rotateY ±8°). Combinations: multiple devices staggered, one main device + a background glow, or mixed with browser mockups to express cross-platform. The screenshot must be a real App interface — an empty-screen mockup looks fake at a glance. Realism comes from details: draw the status bar, time and signal icons too.

常见搭配

同一页面里经常和「设备样机」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

分栏英雄区Split Hero 径向聚光背景Radial Spotlight 底部标签栏Bottom Tab Bar 浏览器样机首屏Browser Chrome Mockup Hero

演示 HTML 结构

<div class="s d-device">
  <div class="d-device__phone">
    <div class="d-device__screen">
      <span class="d-device__notch"></span>
      <div class="d-device__appbar"><i></i><i></i></div>
      <div class="d-device__body">
        <div class="d-device__hero"></div>
        <i style="width:86%"></i><i style="width:64%"></i><i style="width:74%"></i>
      </div>
    </div>
  </div>
  <div class="d-device__side">
    <b>App 官网标配</b>
    <span>手机壳 + 真实截图 + 定向投影，产品立刻可感。</span>
  </div>
</div>