Web 演示视频 是做什么的？
将正在运行的 Web 应用转化为 20~60 秒的 MP4 视频。屏幕始终展示真实的应用程序；字幕、光标和其他效果作为叠加层。仅使用虚构数据。
工具包：starter/ 位于该文件旁边。将其复制到用户的项目中（例如 video/），在该目录下运行 npm install，然后针对它编写场景脚本。存储库中有工作示例：examples/sample-tasks/。
1. 首先选择风格
| 视频用途... | 风格 | 原因 |
|---|---|---|
| 如何使用某项功能（指南、入门、支持回答） | 操作演示：录制真实的 UI 点击过程 | 观众会复制操作步骤，因此他们必须以可读的速度看到真实、未经编辑的流程 |
| 为什么产品值得拥有（发布、主页、广告、概述） | 动效宣传：在截图上制作动画 | 观众并非跟随操作；视频需要将行动与结果联系起来并保持注意力 |
不要在同一视频中混合这两种风格。带有飞入物体的操作指南难以理解；由简单录制组成的宣传片会显得冗长。
详细信息：操作演示见 references/walkthrough.md，动效宣传见 references/motion.md。
2. 在渲染前达成一致
渲染是成本最高的步骤。在编写场景代码之前，先编写故事板（references/storyboard.md），并获取用户对以下内容的确认：
- 风格（操作演示或动效宣传）以及观看对象
- 时长和场景数量
- 输出尺寸（默认 2560x1440，30 fps；竖版为 1080x1920）
- 品牌：颜色、字体、标志、产品名称以及禁止出现的词汇
- 数据：屏幕上出现的虚构名称和数字（绝不能使用真实客户信息）
- 是否包含旁白
- 文件生成后的存放位置
故事板除了“画面”和“字幕”列外，还需要“运动”列（仅限动效宣传），以便每个场景有目的地使用不同种类的运动。
3. 构建
操作演示
- 首先探查流程：编写一个不进行录制、仅通过点击来修复选择器和等待的脚本
- 分部分录制（每个部分对应一个页面或步骤），使用
lib/recorder.mjs，然后使用concatParts合并 - 参考 references/copy.md 编写字幕
动效宣传
- 使用
lib/capture.mjs捕获每个 UI 状态（宽度 3840 的截图 + 元素位置） - 在 Remotion 中使用
motion/parts.tsx组合场景（相机、光标、字幕、标签、数字计数） - 在完整渲染之前，检查关键帧的静态图像（
remotion still ... --frame=N --scale=0.25）
旁白：不包含相关工具。如果用户需要，建议使用 Gemini 3.1 Flash TTS（gemini-3.1-flash-tts-preview）配合 Charon 语音。
4. 交付前检查
运行 node lib/qa.mjs out/video.mp4 --sheet 16 --end 并查看两张图像。详细信息： references/qa.md。
- 视频尺寸、帧率和时长与故事板一致
- 没有字幕被截断或覆盖正在点击的按钮
- 没有半开的对话框、空白帧或延迟加载的标志（单独检查最后一秒）
- 每个动画数字的最终值都与真实屏幕显示的值一致
- 交付时，说明哪些部分是舞台效果（如飞入的文档、数字计数），哪些是产品真实工作的画面
5. 硬性规则
- 真实 UI，虚构数据。 屏幕上、字幕中、文件名或描述中不得出现真实的客户、人员或公司名称、ID、电子邮件或数字
- 不得发布（到 YouTube、社交媒体、网站）除非用户明确同意上传
- 不得声称产品不具备的功能。 如果某个步骤是为了拍摄而伪造的（如服务器响应、上传），则字幕不得将其描述为自动魔法
- 将渲染源文件（脚本、故事板）保留在存储库中；将 MP4 和截图排除在 Git 之外