product-demo

产品演示

仅使用 node + playwright + ffmpeg，将此仓库中的应用制作成带评分、字幕且逐帧精准的演示视频。整个流程具有确定性：从干净的检出状态即可重新渲染并评分。

流程步骤

步骤	操作指南	输出
1. 脚本	01-script.md	场景表、带时间码的旁白台词、节奏网格
2. 独立 UI	02-standalone-ui.md	从静态文件夹渲染的应用组件
3. 合成	03-composition.md	一个由时钟决定的纯函数 React 树
4. 录制	04-record.md	PNG 帧 → 视觉无损 H.264 母版
5. 字幕 + 旁白	05-captions-vo.md	SRT/VTT 配套文件、带时间码的旁白脚本
6. 音效	06-sound.md	sfx-cues.json、实时预览播放器、自动混音器
7. 音乐	07-music.md	经过 EQ 雕刻、带闪避效果并从高潮处开始的背景音乐
8. 组装	08-assemble.md	片头 + 转场 + 分轨 → 最终导出

按顺序完成这些步骤；每一步都会使用上一步的输出。静音草稿可以省略步骤 5–8；要制作达到发布品质的影片，则必须完成这些步骤。

一个启动提示即可运行全部流程

用户要求制作演示时，自行统筹全部八个步骤。不要给用户步骤清单，也不要让他们带着下一个提示再回来。相反，在恰好需要用户提供信息的时刻，直接在对话中询问，并附上能让用户在几秒内回答问题的材料：

1. 步骤 1 后：展示场景表和旁白脚本，请用户批准后再编写任何代码。调整脚本时间安排成本很低；重新调整已渲染影片的时间安排则不然。
2. 试渲染后：展示 4 个代表性画面，询问是否继续完整的长时间渲染。
3. 步骤 5：提供可直接粘贴、带标签的旁白文本块（其中不含同步备注），并询问生成的音频文件路径。
4. 步骤 7：提供你编写的音乐生成器提示词，并询问生成文件的路径。如果用户希望一次性完成，也可以将这两项请求与步骤 3 的请求合并。
5. 评分预览后：导出最终母版前，先交付一个短片段供试听。

在需要询问用户的环节之间，直接继续，无需反复确认。如果用户拒绝可选素材（旁白、音乐），就不带这些素材完成成片，不要因此停滞。

进度跟踪（可恢复的运行）

在目标仓库中维护 demo/PROGRESS.md：每个步骤占一行，注明状态（todo / in progress / done）和生成的素材路径。每次会话都要先读取该文件；如果流程未完成，就从上次提问处继续，而不是从头开始。每完成一步后都要更新该文件。

决策规则

• 用户没有脚本或故事 → 从 01 开始。绝不要先写代码。
• 用户的视频播放卡顿 → 仅执行 04（逐帧录制可解决卡顿）。
• 用户想为现有视频添加声音/音效 → 执行 06（提示点文件 + 混音器）；如果还需要音乐，再执行 07。
• 用户的演示“感觉不真实” → 遵循 01 和 03 中的真实性规则（真实数据、总数核对）。
• 用户询问时长 / 结构 → 45–60 秒，每个场景讲清一个主张，约 6 个场景；结构：问题 → 高潮 → 惊艳效果 → 交互 → 证明 → 品牌。
• 语音克隆听起来缓慢平淡 → 采用 05 中的修正方法。
• 音效出现太晚或被盖过 → 在 06 中采用经测量的音效偏移量 + 峰值归一化。

不可妥协的要求（即使用户没有要求，也必须遵守）

1. 数据真实。 示例数据必须真实：真实项目、标价，以及能够核对一致的总额。绝不编造更整齐的数字。
2. 绝不淡入淡出。 所有内容都要盖章、滑入、撕开或弹出。淡入淡出会显得像在道歉。缓动最多只能放在三个共享辅助函数中。
3. 绝不录制屏幕。 通过 seek 契约（04）逐帧渲染。
4. 没有声音也好过强行加声音。 每分钟最多约 10 个提示音，每个故事转折对应一个，绝不连续重复。
5. 两个母版。 从同一个构图生成烧录字幕版和无字幕版，通过 window.__NO_CAPTIONS 标志控制。
6. 不要纯黑背景。 每个暗场景都以产品自身的画面或壁纸为底，进行模糊和压暗处理；首帧就是缩略图。只有当纯黑是产品真实表面时才使用（03）。

模板

可用脚本位于 templates/：record.mjs（确定性 Playwright 逐帧渲染器，可恢复运行）、mix-audio.mjs（由提示音驱动的 ffmpeg 混音器；--vo 用于重新定时的旁白音轨，--bgm 用于背景音乐）、retime-vo.mjs（在生成的旁白静音处剪切，并将每个短语放在编写好的时间码上）、sfx-cues.example.json（包含 10 个提示音的真实配乐方案）、package.json（npm 脚本）。将它们复制到目标仓库中的 demo/ 目录并调整路径；每个方案都会说明何时使用。

互补技能

如果目标仓库使用 Remotion 或 ElevenLabs，也请安装它们的官方技能；本技能涵盖流程和审美，它们则涵盖各自的 API：

npx skills add remotion-dev/skills
npx skills add elevenlabs/skills

用户会收到的内容（影片之外）

两份可直接粘贴使用的材料，让人工工作量恰好只有两次粘贴：供语音工具使用的带标签旁白文本块（05），以及供音乐生成器使用的风格提示词（07）。绝不要让用户自己编写其中任何一项。

参考输出

四个演示通过不相关的产品证明了这套流程可行：Vouch 演示（54.3 秒，拆分收据）、Excalidraw 演示（35.5 秒，使用真实的 @excalidraw/excalidraw npm 组件拍摄，源码位于本仓库的 examples/excalidraw 下）、Asakiri Studio（54 秒，基于 Tauri+React 的课程编辑器，使用 esbuild 打包真实组件），以及 Colosseum（54 秒，基于 Qt/QML 的 Windows 媒体应用，界面根据其设计令牌和自身截图重建；参见 02 中的原生应用路径）。Vouch 仓库 github.com/Anshgrover23/vouch 附带完整的可运行 demo/ 目录、构图、供应的运行时、提示音文件和字幕，可作为参考实现。包含所有数字和故障的手册：https://anshgrover23.github.io/product-demo-playbook/