Claude Code 自动生成演示视频：Playwright 录制 + AI 配音自动对齐

我是独立开发者。我需要为 ClinTrialFinder 制作一段 2 分钟的产品演示——这是我搭建的一个免费工具，用来帮助癌症患者匹配临床试验。我能勉强对付 OBS 和 iMovie，但并不熟练——而 Claude Code 做这件事更快。

所以我让 Claude Code——一个智能编程 Agent——来制作。它做到了：带配音的全程讲解，语音和屏幕上的操作完美同步。我没有打开过录屏软件，没有打开过视频编辑器，也没有手动把任何一句字幕和任何一帧画面对齐过。

这是它生成的视频。这篇文章要讲的是这个 Agent 做到的三件事——因为我认为这个组合是前所未有的。

1. 它录屏了应用——不是传统录屏

Agent 没有让我手动去录一次操作，而是写了一个 Playwright 脚本，驱动真实的、在线运行的 Web 应用：打开网站、填写那个 10 步的患者向导（用虚拟病例数据）、提交、记录最终的结果页面——全部无头运行，直接输出视频。

这意味着没有手动录制、没有因为我点错而重拍、没有"鼠标抖动了"的遗憾。录制是代码，所以它是确定性的、可重复的。当产品有变化时，Agent 重新跑一遍脚本，一段新视频就出来了。它甚至注入了一个假鼠标指针，在元素之间滑动——因为无头录制没有真正的鼠标。

2. 它生成了配音——不用麦克风

我没有录制任何旁白。Agent 先写了配音文稿，然后调用 ElevenLabs 的 TTS API，用一个干净、一致的声音合成出来。如果我想改某句话，它只需要编辑文字，几秒钟就能重新生成那一段——不用重新录音、不用"让我找个安静的房间"、不用担心多次录制语气不统一。

// the agent calls ElevenLabs per narration phrase
const res = await fetch(`https://api.elevenlabs.io/v1/text-to-speech/${VOICE}`, {
  method: 'POST',
  headers: { 'xi-api-key': KEY, 'Content-Type': 'application/json' },
  body: JSON.stringify({ text, model_id: 'eleven_multilingual_v2' }),
});

3. 它把音频对齐到视频——不用时间线编辑器

这一步通常需要一个人在视频编辑器里，把片段拖来拖去，直到声音和画面对上。Agent 自动完成了这一步，而且这是真正巧妙的部分：

录制过程中，它记录了每个关键屏幕时刻的时间戳——提交点击、结果出现、试验打开、"复制到 AI"下拉菜单弹出。

const beat = name => console.log(`BEAT ${name} @ ${elapsed()}s`);
// BEAT submit-click   @ 46.83s
// BEAT results-shown  @ 68.73s
// BEAT trial-open     @ 90.17s

然后它把配音切成若干段落，每段对应一个节拍，再把每段放到对应节拍的时间戳位置，最终混合（ffmpeg 的 adelay）。结果是：当语音说"现在它开始工作"时，按钮正在被点击；当它说"打开任意试验"时，试验正在打开。这种同步是从录制本身自然产生的——不需要拖动、不需要目测、不需要手动对齐。

以往制作产品演示意味着：录一次屏、写一份脚本、录一段配音，然后坐在编辑器里把它们同步起来。四个人工步骤，每步都需要一种技能（或者一个人）。

在这里，只用和 Agent 聊了一次天。整个流水线是代码驱动的——录制 → 配音 → 对齐 → 合成——所以它：

可重复：产品变了？重新跑一遍。自动同步的新视频。

确定性：每次的取景和节奏都一样，没有现场录制的晃动。

比我快：我能勉强对付 OBS 和 iMovie，但很慢、效果也不好——Agent 做得更快，而且我不用动手。

Agent 还悄悄处理了我最不想碰的那些繁琐细节——有的网站无法无头渲染（改用截图 + Ken Burns 效果）、音频混合时自动把音量减半、空白加载帧会破坏时间同步。我没有调试任何问题；它自己搞定了。

对我来说，转变在于：制作演示视频现在变成了一件可以委托的事，而不是需要自己动手做的事。例子是我自己的项目——ClinTrialFinder，一个帮助癌症患者匹配临床试验的免费工具——但这个方法并不专属于它。只要你有一个 Web 应用和一个 Agent，就能得到一段带配音、同步好的演示，而不需要碰任何录屏软件或视频编辑器。