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外部依赖
| 类型 | 依赖 |
|---|---|
| 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风险提醒 风险提醒：橙色 · 评估后使用
风险提醒：橙色 · 评估后使用
- 抓图需访问真实页面 — 无头浏览器会打开使用者目标 origin（示例 URL 为占位，需替换）；若目标站有反自动化或需登录，抓图会失败或被拒。
- 示例代码有结构缺陷 — Callout 把 HTML 元素包在 g 里；照抄需自行修正，否则渲染报错或结构无效。
- Playwright + Chromium 下载面 — 首次抓图会从 npm 与浏览器下载源取包与 Chromium 二进制，体积与供应链面都在工具链一侧。
- 注入页面样式的能力 — 脚本用 page.addStyleTag 注入固定 CSS（隐藏光标与 cookie 横幅）——内容受限、不改逻辑，但属向第三方页面注入的能力。
- 商业引流位 — reference 尾部固定 iart.ai 推广段与 utm 链接。
风险提醒：橙色，评估后使用。触发项是分级范式「依赖第三方插件、镜像、远程包」：交付路径要求 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 无会话注入方案）；需要真实用户操作录制（含加载态等动态内容）的演示。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-28
方式 A · 人下载镜像包下载 product-demo-video.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent1e7d345b4981c5db…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库iart-ai / iart-ai/ecommerce-video-skills
原始 GitHubiart-ai/ecommerce-video-skills ↗
Stars8
最近推送2026-06-22
本 skill commit
2bd0dd19c9许可MIT（仓库根 LICENSE：「MIT License」/「Copyright (c) 2026 iart.ai」；.claude-plugin/plugin.json 与 README「## License」同声明 MIT）
本站信息
收录日期2026-09-06
分类内容创作
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。