用途
Teaser Video 用于从产品的真实截图出发，制作一支无旁白的短预告片，场景包括功能发布公告、社交短片或 hype 视频。一支预告片用几个节拍（beats）展示一个功能，每个节拍只聚焦一件事，并配上音乐。视频中的每个屏幕都是产品的真实截图，运动感来自相机移动、从这些截图中切出的行落入各自位置，以及剪辑落在音乐上。整支视频都是代码（一个 HTML 页面和一份时间表，由 HyperFrames 渲染），因此换一次截图、改一处字幕或换一段音乐都是一次重新运行。整个过程需要人把握品味并迭代多次：先看联系表（contact sheets）再正式渲染，保留每一次渲染，并写下改了什么、为什么改。起点是 references/taste.md 中的默认值，它们是第一轮评审收敛出的结果。
环境准备
需要 Node 22+ 与 npx（HyperFrames 通过 npx hyperframes@0.8.62 运行，无需安装）、PATH 中的 ffmpeg（HyperFrames 的快照和渲染也需要它）、uv（Python 工具自带依赖声明），以及在产品项目中带 Chromium 的 Playwright 用于截图。渲染会从 CDN 加载 GSAP 和 Inter 字体，因此需要网络连接。脚本目录记为 SK=<this skill's directory>/scripts。工作目录应在任何仓库的受跟踪文件之外（如被 gitignore 的 .logs/<video>/ 或临时目录），包含 assets/<theme>/（截图与 boxes.json，按每次截图轮次）、capture/（该产品的截图脚本）、video/（从示例复制的 index.html 和 timeline.js，video/assets/ 放截图、品牌图标、音乐）、NOTES.md（每个版本及改动原因、重建命令）。
- Brief（需求确认）
用一次简短交流确认，并提供默认值：时长默认 10 秒，除非另有要求；在硬上限下削减节拍，绝不加快运动速度。节拍为三到四个，每个只在一个屏幕上完成一件事（输入 URL、查看发现的结果、看到结果、品牌）。每个节拍配两到三个词的字幕，不含数字。示例数据要一眼可读，例如知名网站，让结果（竞品名称、favicon）可辨识。外观使用产品自身的主题 token（预告片默认深色模式不错）和真实品牌图标——取自其线上网站，而不是自己画的标识。音乐需确认文件，以及是否任何 10 秒片段都可以。还需确认每个屏幕最新 UI 所在的分支或 worktree，并在截图前检查它是否落后于远端。
- Capture（截图）
用 $SK/capture.mjs（与 narrated-video 相同的辅助脚本）以 1440x900、2x 抓取真实截图：任何输入的内容要有打字帧，任何相机向下平移的内容要有高截图（2400 px），场景取景、切出行或点击的每个元素都要有测量框（measured boxes）。深色模式向 cap.page() 传 { colorScheme: 'dark' }。绝不绘制 UI 或编辑像素。细节（包括冻结动画帧，以及不付出请求成本地截取加载态）见 references/capture.md。使用每张截图前都要先看一眼。
- Compose（合成）
把 examples/openseo-ai-visibility/video（index.html、timeline.js）复制到工作目录，把截图、品牌图标和音乐放进 video/assets/，然后重写 timeline.js：时间表、字幕、配色、截图路径与高度、测量框、每个场景的相机关键帧以及指针。index.html 从该文件构建每个场景：行是用测量框从其截图中切出来的。各部分如何工作以及哪些数字重要，见 references/composition.md。
- Draft and look（草稿与检查）
在 video 目录运行 npx --yes hyperframes@0.8.62 lint，必须报告 0 错误；再用 snapshot 在 0,1.2,2.4,2.6,3.4,4.4,6.0,8.2,9.5 时刻（--no-end）输出到 snapshots/。快照只需几秒，因此用快照代替草稿渲染。为每个场景开始、点击、字幕入场和每次溶解（dissolve）的中点拍快照并查看（每次运行也会写出联系表）：每帧一个焦点且居中，字幕避开聚焦物，页面平坦时没有空白页边，reveal 结束时没有行还缺失。然后检查每个场景的全分辨率帧，确认文字清晰。
- Music（音乐）
用 uv run $SK/beats.py song.mp3 获取速度、每秒响度和每个击点；用 uv run $SK/beats.py song.mp3 --window 51.9 10 查看候选片段的击点在视频时间中的位置。选定片段，把其起始写入 index.html 的 <audio> 元素，把击点时间写入时间表，并让剪辑对齐击点：主点击落在 drop 上，每个场景切换落在击点上，logo 落在最强的击点上。选片段和映射方法见 references/music-sync.md。
- Render and verify（渲染与验证）
渲染命令：npx --yes hyperframes@0.8.62 render -o renders/<video>-vN.mp4 --fps 60 --crf 14 --video-frame-format png --experimental-fast-capture=false（10 秒视频约 15 秒）。用 uv run $SK/verify-sync.py renders/<video>-vN.mp4 <planned hit times...> 验证每个击点都在一帧内，不在则退出码为 1；用 uv run $SK/sheet.py renders/<video>-vN.mp4 renders/sheet-vN.png <times...> 生成联系表。渲染按版本命名并全部保留，由人来比较。用于分享的静帧（社交图、缩略图）是选定时刻的 4K 快照：npx --yes hyperframes@0.8.62 snapshot --at 7.3 --no-end --zoom 0,0,1920,1080 --zoom-scale 2 -o stills 会写出 3840x2160 PNG。
- Review and iterate（评审与迭代）
给出 mp4 路径（以及如何打开它）、节拍及其时间，以及与需求不同的任何地方。每轮记录到 NOTES.md。工作示例的第一版花了七轮，每轮改了什么见 examples/openseo-ai-visibility/NOTES.md。
硬性规则
只用真实屏幕。行 reveal 可以短暂用表格自身背景（从截图中取样）覆盖行，同时真实行落在其上；一旦落定，帧就是截图。渲染前检查截图中是否有密钥、个人数据和隐私内容（密钥、邮箱、他人姓名、localhost URL）。音乐和截图留在用户机器上，未被要求不发布任何内容。恢复任何因构建或预览产品而在其仓库中重新生成的受跟踪文件。最耗时的错误见 references/gotchas.md。