用 Claude Code 单次会话生成产品发布视频

输入：产品 URL 与关键操作描述 → 处理：Playwright 录屏 + Remotion 剪辑 + 代码生成音频 + FFmpeg 渲染 → 输出：20–25 秒 1080p60 发布视频

给谁

有已上线 Web 应用、需要制作社交平台发布视频的产品创作者

你会得到

一段 20–25 秒、1920×1080@60fps 的产品演示视频，含真实录屏、动态字幕、配乐与片尾卡片

你需要

Claude Code · Playwright · FFmpeg

步骤

1. 生成 Playwright 录屏脚本

   在 Claude Code 中要求生成 Playwright 脚本。脚本需以 headless Chromium 打开你的 live site，使用 Chrome DevTools screencast 以 60fps 录制。指定 3–5 个展示产品核心功能的操作，要求可见光标、人类速度移动。需同时录制 1080p 与 4K 两个版本，供后续特写裁剪使用。禁止伪造或重绘 UI。

   运行提示词 · 来源原文。Claude Code 初始指令，生成 Playwright 录屏脚本

   复制提示词

   Make a 20 to 25 second launch video for [my web app, live at URL]. 1920x1080, 60fps, for X.
   
   1. Footage must be real. Write a Playwright script that opens the live site in headless Chromium and records it with the Chrome DevTools screencast at 60fps. Script the exact flow, with a visible cursor and human-speed moves: [the 3 to 5 actions that show the product working]. Record it once at 1080p and once at 4K so close-ups stay sharp. Don't fake or redraw any UI.

2. Remotion 剪辑与动效

   使用 Remotion 剪辑素材。要求：开场直接切入动态画面，不出现 logo 或黑帧；每个节拍配一条大字号短字幕，文字从遮罩中升起；镜头推近到字幕对应的产品画面；统一使用 expo out（进入）与 expo in（离开）曲线族；片尾卡片包含自绘 logo、域名与 2–3 个短事实。

   运行提示词 · 来源原文。Claude Code 指令，生成 Remotion 剪辑配置/组件代码

   复制提示词

   2. Edit it in Remotion. Open on motion, no logo or black frame first. Put one short caption per beat in big type, each word rising out of a mask: [your 5 or 6 captions]. Punch the camera into the part of the footage each caption talks about. Use one family of curves: expo out for things arriving, expo in for things leaving. End on a card with the logo drawing itself in, the domain, and 2 or 3 short facts.

3. 代码生成音频与音效

   要求生成配乐代码（非素材库音频），产生短音乐床与轻柔音效，精准卡点。音频需标准化至约 -16 LUFS，峰值低于 -1 dBTP。

   运行提示词 · 来源原文。Claude Code 指令，生成音频合成代码（如 Web Audio API 或 Node.js 音频库）

   复制提示词

   3. Generate a short music bed and soft sound effects in code (no stock audio) that hit the cuts. Normalize to about -16 LUFS with peaks under -1 dBTP.

4. 渲染与逐帧质检

   使用 FFmpeg 渲染最终视频：H.264 编码、CRF 16、AAC 音频、+faststart。渲染后逐帧检查：异常对焦环、截断文字、拖沓节奏，修复问题后重新渲染。

   运行提示词 · 来源原文。Claude Code 指令，生成 FFmpeg 渲染命令与质检清单

   复制提示词

   4. Render H.264 at CRF 16 with AAC audio and +faststart. Then watch every frame for stray focus rings, cut-off text and timing that drags, fix them, and render again.

Make a 20 to 25 second launch video for [my web app, live at URL]. 1920x1080, 60fps, for X.

1. Footage must be real. Write a Playwright script that opens the live site in headless Chromium and records it with the Chrome DevTools screencast at 60fps. Script the exact flow, with a visible cursor and human-speed moves: [the 3 to 5 actions that show the product working]. Record it once at 1080p and once at 4K so close-ups stay sharp. Don't fake or redraw any UI.

2. Edit it in Remotion. Open on motion, no logo or black frame first. Put one short caption per beat in big type, each word rising out of a mask: [your 5 or 6 captions]. Punch the camera into the part of the footage each caption talks about. Use one family of curves: expo out for things arriving, expo in for things leaving. End on a card with the logo drawing itself in, the domain, and 2 or 3 short facts.

3. Generate a short music bed and soft sound effects in code (no stock audio) that hit the cuts. Normalize to about -16 LUFS with peaks under -1 dBTP.

4. Render H.264 at CRF 16 with AAC audio and +faststart. Then watch every frame for stray focus rings, cut-off text and timing that drags, fix them, and render again.