预告片视频
预告片用几个节拍展示一个功能，每个节拍有一个明确的焦点，配合音乐。每屏都是产品的真实截图；动效来自镜头移动、从这些截图中裁剪出的排行列分别落位，以及剪切点与音乐节拍对齐。整个视频是一段代码（一个HTML页面和一个时间配置表，由HyperFrames渲染），因此更换截图、修改标题或更换音乐片段只需重新运行即可。
导演负责品控，并将进行多次迭代。在全渲染之前先展示样片，保留每次渲染的版本，并记录更改内容和原因。从references/taste.md中的默认设置开始：这些是第一轮评审达成共识的结果。
配置
- Node 22+ 并安装 npx（HyperFrames 通过
npx [email protected]运行；无需额外安装），ffmpeg 需在 PATH 中（HyperFrames 在快照和渲染时也需要它），uv（Python 工具声明其自身的依赖），以及项目的 Playwright 和 Chromium 用于截图。渲染时从 CDN 加载 GSAP 和 Inter 字体，因此需要网络连接。 SK=<该技能目录>/scripts。- 在仓库跟踪文件之外的文件夹中工作（例如
.logs/<video>/或 scratch 文件夹，它们已在 gitignore 中）：
<work>/
assets/<theme>/ 截图和 boxes.json，每个截图轮次
capture/ 该产品的截图脚本
video/ index.html 和 timeline.js（从示例复制）；assets/ 存放截图、品牌图标、音乐
NOTES.md 每个版本及其更改原因、重新构建命令
1. 需求确认
通过一次简短交流确认，提供默认选项：
- 长度：除非另有要求，默认为 10 秒。在硬上限内，可以删减节拍，但绝不加快运动速度。
- 节拍：三到四个，每拍针对一个屏幕完成一项操作（输入 URL、查看结果、查看成果、展示品牌）。每个节拍配一个两三个字的标题，不包含数字。
- 示例数据需一目了然：使用知名网站，使结果（竞争对手名称、图标）易于识别。
- 外观：使用产品自身的主题令牌（暗色模式是预告片的好默认选择）及其真实品牌图标，取自其在线网站，而非自行绘制的标记。
- 音乐：提供音乐文件，并确认是否任意10秒片段都适用（见步骤5）。
- 确认哪个分支或工作树包含每个屏幕的最新UI。在截图前检查其远程仓库是否落后。
2. 截图
使用 $SK/capture.mjs（与 narrated-video 相同的帮助脚本）在 1440x900、2x 分辨率下进行真实截图：需要键入的帧用打字帧截取，需要镜头下移的内容用高截图（2400 px），每个场景框架、行裁剪或点击的元素都测量其边界框。传递 { colorScheme: 'dark' } 给 cap.page() 以启用暗色模式。绝不绘制UI或编辑像素。详细信息（包括冻结动画帧和捕获加载状态而不产生请求的技术）请参考 references/capture.md。使用前请检查每张截图。
3. 编排
将 examples/openseo-ai-visibility/video（index.html, timeline.js）复制到工作文件夹，将截图、品牌图标和音乐放入 video/assets/，然后重写 timeline.js：时间配置表、标题、调色板、截图路径和高度、已测量的边界框、每个场景的相机关键帧以及指针。index.html 根据该文件构建每个场景：使用测量的边界框从截图中裁剪出行。各部分的工作原理及相关数值请参考 references/composition.md。
4. 草稿和预览
cd video
npx --yes [email protected] lint # 必须报告0错误
npx --yes [email protected] snapshot --at 0,1.2,2.4,2.6,3.4,4.4,6.0,8.2,9.5 --no-end # 输出到 snapshots/
快照只需数秒，因此请用它们替代草稿渲染。对每个场景开始、点击、标题进入和每个淡入淡出的中间时刻拍摄快照并检查（每次运行还会生成联系表）：每帧一个焦点且居中，标题不与焦点内容重叠，页面平放时没有空白边缘，在揭示结束时没有行仍然缺失。然后检查每个场景的全分辨率帧，确保文字清晰。
5. 音乐
uv run $SK/beats.py song.mp3 # 速度、每秒响度、每个节拍
uv run $SK/beats.py song.mp3 --window 51.9 10 # 候选片段在视频时间内的节拍
选择片段，将其起始时间写入 index.html 中的 <audio> 元素，将节拍时间写入时间配置表，并将剪切点对齐到这些节拍：主要点击落在最强的节拍上，每次场景切换落在节拍上，Logo 落在最强的节拍上。选择片段和映射的方法： references/music-sync.md。
6. 渲染和验证
npx --yes [email protected] render -o renders/<video>-vN.mp4 --fps 60 --crf 14 \
--video-frame-format png --experimental-fast-capture=false # 约15秒生成10秒的视频
uv run $SK/verify-sync.py renders/<video>-vN.mp4 <计划节拍时间...> # 每个节拍应在1帧内；否则退出1
uv run $SK/sheet.py renders/<video>-vN.mp4 renders/sheet-vN.png <时间...>
按版本命名渲染文件并全部保留；由导演比较。用于分享的静态图（社交媒体图片、缩略图）是选定时刻的4K快照：npx --yes [email protected] snapshot --at 7.3 --no-end --zoom 0,0,1920,1080 --zoom-scale 2 -o stills 输出一张 3840x2160 的PNG。
7. 评审和迭代
提供mp4路径（以及如何打开它）、节拍及其时间，以及任何与需求不符之处。在 NOTES.md 中记录每一轮修改。示例子例的第一版经历了七轮修改；每轮具体更改内容在 examples/openseo-ai-visibility/NOTES.md 中。
硬性规则
- 仅限真实截图。行揭示可以短暂地使用表格自身的背景（从截图中采样）覆盖行，而真实行落在其上方；一旦行落定，画面必须与截图一致。
- 渲染前检查截图中是否包含机密信息和个人数据（密钥、邮箱、他人姓名、localhost网址等）。
- 音乐和截图保留在导演的机器上；未经要求不得发布任何内容。
- 恢复因构建或预览产品而在其仓库中重新生成的任何跟踪文件。
最耗时的常见错误在 references/gotchas.md 中列出。