设备外框 <DeviceFrame />
把一张真实截图放进画出来的笔记本、平板或手机外框，右边 0–3 条竖线标注逐条出现。
Template and style descriptions are currently available in Chinese only.
- Group
- 证据 · 产品或网站截图
- Component
DeviceFrame·#device-frame- Interaction
- build：标注逐条出现
Good for
- 展示一个网站、App、工具的真实界面
- 说明“我们从哪里看到这些数据”
Avoid when
- 截图里的细节要放大讲：用 Screenshot 或 TabbedShot
- 只有氛围图没有截图：用 PhotoSplit
Content limits
| 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 只能是真实截图 |
Fields
| Field | Type | |
|---|---|---|
kicker / title / lead / source | SlideBase | 同通用字段 |
image · required | { src, alt, credit?, focus? } | 真实截图；credit 并入来源行 |
device | 'laptop' | 'tablet' | 'phone' | 外框，默认 laptop |
points | { title, body }[] | 标注，每条一个 build 步骤 |
Example
<DeviceFrame kicker="怎么知道的" title="卫星每天测一次海温" image={{ src: shot, alt: '…', credit: '截图：…' }} points={[{ title: '5 公里分辨率', body: '…' }]} />