发布视频
用代码生成产品发布视频（Remotion → MP4）。这个技能是一个场景库 + 工作流，而不是固定模板。不同的产品讲述不同的故事——CLI工具的故事发生在终端里，SaaS应用发生在浏览器中，移动应用发生在手机上，库则发生在编辑器里。你先为这个产品设计叙事弧线，然后从场景调色板中组装。不要把产品强行塞入 tdoc 示例的形状。
不可妥协的规则
在碰代码之前先设计故事弧线。 问：这个产品做什么？用户是谁？唯一的“啊哈”时刻是什么？写出一个节拍列表（5–9 个节拍，每个节拍以帧为单位，@24fps），并与用户确认。只有确认后，才能开始组装场景。发布视频是一个故事，而不是功能巡览。
工作流
- 理解产品。 它是什么？用户在哪里与它交互（终端/浏览器/手机/编辑器/混合）？使用前后对比是什么？哪一个瞬间让人想拥有它？
- 编写节拍列表。 每个节拍：名称、屏幕内容、持续时间（帧）。总时长 ≈ 30–45 秒（720–1080 帧）。在构建之前，通过 AskUserQuestion 与用户确认。
- 从调色板中选取场景（见下文）。大多数视频使用 1–3 个场景类型 + 可选的结尾。不是每个类型都必须使用。
- 收集素材。 真实截图 > 模拟图。将素材放入
<项目>/public/。仅在截图分辨率低或需要精确动画时，才将 UI 重建为清晰的组件。 - 在仓库下搭建一个项目（复制
examples/tdoc作为起始骨架——其结构，而非其内容）或同级目录。构建一个<Composition>，其总时长为所有节拍时长之和，每个节拍对应一个<Sequence>。 - 构建节拍，然后添加音效（
scripts/make-sfx.sh <public>），接着渲染，然后检查每个更改过的节拍，迭代。 - 只有在验证循环通过后才能交付 MP4。
场景调色板 (src/)
从库中导入；只组装故事需要的部分。
| 场景 | 用途 | 关键属性 |
|---|---|---|
Terminal | CLI 工具、智能体、开发工具——故事在 shell 中 | lines（带键入效果的提示符、工具调用、结果、警告、网址）、spinner、title。以 /斜杠-命令 开头的键入提示符会自动高亮为粗体强调色。 |
BrowserWindow | 网络应用、文档、仪表盘、SaaS | 截图/HTML 作为子元素，`chrome="bar" |
MobileFrame | 移动应用 | 手机外壳；截图/UI 作为子元素 |
CodeEditor | 库、SDK——“写这个 → 得到那个” | code 行，逐字显示 |
Outro / LogoCard | 结尾（可选） | 标题/副标题，或旋转的 Logo + 标志名称 |
WaveBackground | 在任何窗口后方的品牌平静背景 | 颜色 |
Cursor | 点击组件/链接/按钮 | 起始/结束坐标，clickAt |
PixelPet | 窗口上方的友好吉祥物 | crown/base 像素行，color；眼睛上下摆动（无眼白——小尺寸下阅读清晰） |
Caption | 窗口下方的一行提示 | at，text |
这些场景是独立的。一个库的发布可能只需要 CodeEditor + Terminal + LogoCard。一个 SaaS 发布可能是 BrowserWindow + Outro。
节奏与转场规则（经验之谈）
- @24fps。 节拍持续时间以帧为单位。保持整体紧凑：剪掉静态停顿，而不是动作。如果节拍大部分是冻结帧，则缩短它。
- 锐利转场。 场景间的交叉淡入淡出 ≤ 5 帧；节拍淡入 ≈ 4 帧。窗口“弹出”打开（缩放 0.35→1 约 12 帧）比缓慢的 30+ 帧缩放更好。
- 尽量一个连续节拍。 将“输入 → 点击 → 结果”合并为一个
Sequence，这样动作中间就不会有闪白/剪切。 - 光标必须移动并按下。 不要瞬移；动画移动到目标，点击时缩放缩小。每次点击都会在按下帧上触发点击音效。
- 不要双重边框。 如果截图已经有标题栏，使用
chrome="none"。不要在一个已经包含窗口栏的截图上再叠加一个。 - 品牌卡片首尾呼应。 重复使用一张品牌卡片（Logo/吉祥物 + 产品名称 + 一行价值主张）作为开头和结尾帧（各约 1.5–2.5 秒）。它可以框定故事，并且比单独的动画 Logo 结尾卡更经济。通过一个
at()累加器驱动所有节拍的偏移，这样添加开头卡会自动将所有后续内容（包括音效）向下移动。
音频规则
- 运行
scripts/make-sfx.sh <项目>/public来合成sfx-typing.mp3+sfx-click.mp3。这些是 .gitignore 忽略的生成产物——始终（重新）生成它们；切勿依赖它们在克隆后仍然存在。 - 打字音效仅在人类打字时播放（提示符、注释）。绝不覆盖自动流式输出/智能体输出。
- 点击音效在每次光标点击的按下帧上触发（链接、按钮、组件）。将
<Sequence from>与点击帧匹配。 - 通过在精确帧窗口内的短
<Sequence>中使用<Audio src={staticFile(...)} volume={0.3}>来分层音频。
验证循环（交付前必须执行）
读取 PNG 的图像代理存在 OCR 噪音——信任像素测量（Python/PIL/numpy），而不是文本描述，用于对齐/颜色检查。
scripts/verify.sh <入口> <CompId> <public-目录> <帧> ...会抓取静帧并打印音频窗口。将项目的public/作为<public-目录>传递（如果项目没有 public 目录则传递-）——与渲染一样的--public-dir规则；否则静帧的资源会 404。- 检查每个静帧。对于每个更改的节拍，确认：内容正确，没有被
overflow:hidden裁剪，转场正确，光标在目标位置，音效窗口与可见的点击/打字帧对齐。 - 修复 → 重新渲染 → 重新验证。不要从意图报告“完成”；验证实际的帧。
渲染
npx remotion render <入口> <CompId> out/<名称>.mp4 \
--public-dir=<项目>/public
# 静帧： npx remotion still <入口> <CompId> out/x.png --frame=N \
# --public-dir=<项目>/public
<入口> 是项目的 src/index.ts（调用 registerRoot）。当入口位于子目录时，始终传递 --public-dir——否则 staticFile() 会解析到仓库根目录的 public/，导致资源 404。
参考示例
examples/tdoc/ 是规范的完整示例（约 39 秒）：一个品牌卡片开头，工程师向智能体键入 /tdoc … 提示符（Terminal，斜杠命令自动高亮），得到链接，文档打开（BrowserWindow），队友评论，智能体发布 v2，然后同一个品牌卡片作为结尾——带有针对真实输入和 PixelPet 眼睛上下摆动而定的输入/点击音效。阅读它以了解库的使用方式；不要复制它的故事。 构建新产品自己的叙事弧线。