- 分組
- 证据 · 产品或网站截图
- 元件
DeviceFrame·#device-frame- 互動
- build：标注逐条出现
適合
- 展示一个网站、App、工具的真实界面
- 说明“我们从哪里看到这些数据”
不適合
- 截图里的细节要放大讲：用 Screenshot 或 TabbedShot
- 只有氛围图没有截图：用 PhotoSplit
內容上限
| 1 | title ≤ 1 行 × 16 字 |
| 2 | lead ≤ 40 字 |
| 3 | points 0–3 条：title ≤ 10 字，body ≤ 30 字 |
| 4 | 截图比例：laptop 16:10，tablet 4:3，phone 9:19.5 |
| 5 | image 只能是真实截图 |
欄位
| 欄位 | 型別 | |
|---|---|---|
kicker / title / lead / source | SlideBase | 同通用字段 |
image · 必填 | { src, alt, credit?, focus? } | 真实截图；credit 并入来源行 |
device | 'laptop' | 'tablet' | 'phone' | 外框，默认 laptop |
points | { title, body }[] | 标注，每条一个 build 步骤 |
範例程式碼
<DeviceFrame kicker="怎么知道的" title="卫星每天测一次海温" image={{ src: shot, alt: '…', credit: '截图：…' }} points={[{ title: '5 公里分辨率', body: '…' }]} />