1实现原理 · 为什么它能做到
核心主张：用静态截图 + 代码动效替代录屏，因为录屏有真光标抖动、改一步要重录等结构性问题。
skills/product-demo-video/SKILL.md
| Real cursor drifts, overshoots, jitters | Cursor follows an eased path to an exact target |
对照表把工程可复现性当主要卖点。
输入必须以 2×（DPR 2）抓取，2× 放大才不糊。
skills/product-demo-video/SKILL.md
Capture inputs at twice the display size (retina / `deviceScaleFactor: 2`) so a 2× zoom stays sharp.
reference 另建议隐藏光标与 cookie 横幅、只抓每次点击后的终态。
光标用 smoothstep 缓动（非线性），涟漪与画面状态变化必须在同一 clickAt 帧发生。
skills/product-demo-video/SKILL.md
The cursor uses **smoothstep** so it accelerates out of rest and decelerates into the target (a linear cursor reads as robotic). Fire the ripple *and* the screen's state change on the same `clickAt` frame so cause and effect line up.
「因果同帧」是点击显得真实的关键。
缩放到焦点用 transform-origin 指向目标像素，上限约 2×，保持 2–4s 再回撤。
skills/product-demo-video/SKILL.md
Cap zoom around 2× (over 3× loses context and disorients). Hold the zoomed state 2–4s — long enough to read the detail — then ease back out before moving to the next screen.
reference 用 easeOutCubic，点击后 6 帧起跑、30 帧完成。
同一时刻只允许一种运动：要么镜头（zoom），要么光标。
skills/product-demo-video/SKILL.md
Move the camera *or* the cursor, rarely both at once — two simultaneous motions split attention.
与本批多份 skill 共有的注意力纪律一致。
每屏都要装进 browser/device 外框并填真实 URL，否则截图读起来像 bug 报告。
skills/product-demo-video/SKILL.md
A raw screenshot reads as a bug report; a framed one reads as product. Wrap every screen in a browser or device chrome on a branded background.
reference 的 BrowserFrame/PhoneFrame 里地址栏填真实路径。
坐标工作流被写死：所有光标/缩放目标用 display space 量测（2× 图上读到就除以 2）。
skills/product-demo-video/references/screenshot-demo.md
Because the cursor `to` and the zoom target are screen-pixel coordinates, measure them once against the screenshot at display size (1280×800 here, even though the PNG is 2560×1600).
把「像素怎么量」明确化，避免最常见的 origin 空间错配。
验证环重点是「正确的那张图有没有加载、光标是否落在正确像素」。
skills/product-demo-video/SKILL.md
The demo ingests user assets — screenshots/designs, optional logo — so verification is mostly *did the right image actually load and land in frame*.
检查清单同时覆盖 fidelity 与 artifacts（越界、缩放穿帮、caption 越界）。
注释层是数据而非硬编码：spotlight、箭头 callout、typed caption 轨道、四种屏间转场全部帧驱动。
skills/product-demo-video/references/annotation-and-transitions.md
const captions = [ { text: "Open any report", in: 30, out: 110 },
并规定一次只允许一个 callout、caption 是名词短语不是句子。
2核心能力
01browser / phone 外框组件（含真实 URL 与统一 theme）
02帧驱动光标 + 点击涟漪（smoothstep 位移、press 微缩、涟漪 spring 扩散）
03zoom-to-region（transform-origin 指向目标像素 + easeOutCubic）
04spotlight 遮罩高亮（box-shadow 9999px 挖洞）
05typed caption 轨道（caption 是数据数组，按帧窗口进出）
06节奏纪律：只砍步数、不压缩 settle 与 read 的驻留
07四种屏间转场（push / cross-zoom / crossfade / match-cut）与选择依据
08多比例（16:9 master + 9:16 reframe；光标目标留在中心 80%）
3外部依赖
| Kind | Dependency / Endpoint |
|---|---|
| package | remotion（AbsoluteFill/Sequence/Img/staticFile/useCurrentFrame/interpolate/spring） |
| package | playwright（含首次下载 Chromium 二进制） |
| network | 用户目标应用 URL（抓图时由无头浏览器访问；示例为占位域名） |
| cli | npx remotion still / render（首帧预览与编码） |
| cli | ffmpeg / ffprobe（仓库共享 contact-sheet.sh、probe-mp4.sh） |
| network | iart.ai（reference 尾部推广链接，具 utm 参数；仅读者点击才请求） |
4管控建议与判定依据
建议配套管控措施
面向 Agent
分级或逐次授权，建议在沙箱运行
面向管理者
审批流程、可回滚、全程审计
判定依据（文件路径与关键语句摘要）
- scripts/: 执行本地脚本或命令: skill 目录内无自带脚本；reference 指示 agent 运行 `node capture.mjs`（Playwright 抓图，源码在文档
- 网络端点: 声明外部网络访问: 抓图阶段：无头 Chromium 会访问**使用者提供的应用 URL**（示例为 app.example.com 占位），这是 skill 路径内唯一
- 本地工作目录: 文件读写与工件输出: 在用户工程内写 `public/shots/*.png`（抓图产物）、`out/f-settle.png`/`out/f-click.png`/`ou
审计说明： 。触发项是分级范式「依赖第三方插件、镜像、远程包」：交付路径要求 remotion（npm）与 playwright（npm + Chromium 二进制下载），且抓图阶段由无头浏览器访问使用者目标的真实 origin。同仓 `remotion-video` 已按同口径判橙，此处与之一致。**明确不成立的项**：无 process.env / API key / token / cookie / 钥匙串读取（token 扫描零实质命中，reference 里唯一的 cookie 字样是隐藏 cookie 横幅的 CSS）；不把素材上传任何外部生成服务（截图与渲染本地完成）；无 TLS 降级、无 `--no-verify`、无沙箱关闭、无 AutomationControlled 之类反自动化绕过（只是普通 Playwright 抓图）。触发条件：仅在抓图与渲染时发生；若使用者改用自己已保存的截图，则可完全不出网。
5第二遍独立确认
- [discrepancy] 抓图脚本的目标 URL 是否可直接使用 — reference 的 SHOTS 列表硬编码 https://app.example.com/dashboard 等占位 URL（含 /reports/42?export=open 这类路径），原样运行必然失败；SKILL.md 未提示必须先替换成真实或本地 URL。
- [discrepancy] Callout 组件的可渲染性 — annotation-and-transitions.md 的 Callout 把 HTML div 包在 SVG 元素 g 里（g 只在 SVG 上下文有效），作为 React 组件直接放入 HTML 层会得到无效结构；该片段需改写才能用。
- [ok] 光标/涟漪与 clickAt 的因果同步是否有实现支撑 — screenshot-demo.md 的 Cursor 用 since = frame - clickAt 同时驱动 ripple 与 press 缩放，并把「ripple 与状态变化不同帧」列入失败模式，与 SKILL.md 的因果同帧要求一致。
- [ok] 2× 抓取与 ≤2× 缩放口径 — SD 的 deviceScaleFactor: 2（→2560×1600）与 SKILL.md/reference 的 zoom scale 2（个别 1.8）自洽。
- [ok] 多比例安全区口径 — AT 的 16:9/9:16 表（caption 在下方 80–120px；9:16 保留中心 80% 宽、避开底部 18%）与 SKILL.md 的 Keep captions in the lower third 一致。
- [unlocatable] 需登录的目标页如何处理 — skill 未提供任何会话/凭证注入方式（无 storageState、无 cookie 导入）；「需要登录的应用怎么抓图」源码内无解答，记 unlocatable（也正因此不存在凭证读取面）。
6结论
适合： SaaS/App 团队做产品演示、功能公告、引导流程视频：手上只有截图或设计稿（不是录屏），需要可复现、可换图重渲、可放大细节的演示片。
不适合： 已有高质量录屏且不需要复现性的场景；目标应用需要登录却无法提供公开页面（skill 无会话注入方案）；需要真实用户操作录制（含加载态等动态内容）的演示。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload product-demo-video.tar.gz
sha256:
Option B · Copy Guide for Agent1e7d345b4981c5db…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 2bd0dd19c9.