Product Motion Ad（Remotion + ElevenLabs） 是做什么的？
最终输出：1920×1080 30fps 的 MP4 文件，时长 30–45 秒，包含强有力的钩子、目标语言的真人感旁白、专业音效、参考风格的快速过渡，以及与实际产品使用流程一致的场景顺序。通过 SendUserFile 发送给用户。
已验证的模板位于 template/（此技能文件夹内）。来自真实项目的 13 个场景完整示例可在 references/example-scenes-threads-automation.tsx.txt 和 references/example-promo-threads-automation.tsx.txt 中找到。在编写脚本之前，请先阅读 references/script-and-storyboard.md；在生成音频之前，请阅读 references/elevenlabs.md。
不可违反的原则
- 产品必须在 8 秒内清晰呈现：产品名称 + “为谁做什么”。
- 场景顺序必须遵循产品使用流程（登录/注册 -> 设置 -> 核心流程 -> 结果 -> 高级功能 -> 成果证据 -> 行动号召）。不要随意打乱。
- 一句旁白对应一个场景 = 一个优势 + 其视觉证据（动态 UI：表单填写、按钮点击、结果卡片出现、数字增长）。不要只显示文本。
- 事实必须来自产品来源，而非凭空编造：阅读代码/落地页/引导页/“工作原理”页面。示例数字（如浏览量、评分）可作为示意，但需告知用户这是示意。
- 节奏要快，如同参考视频：过渡 10 帧（
T = 10），内部动画加速speed1.5–3 倍。不要为了配合慢速旁白而拖慢场景——应改进旁白。 - 旁白要自然：一次性完整录制，对话风格，节奏明快，每行无需情绪标签。不要分句录制（会导致僵硬）。
- 遵守用户的性能规则：只测量开始和结束各一次，不要无理由重复渲染。
工作流程
1. 收集素材（尽量并行）
- 产品：在仓库中，搜索落地页、引导页、功能/工作原理页面、UI 特征名称（使用 Grep 搜索 UI 字符串）。若不在仓库中，则要求提供描述/URL。整理 流程优势表：
步骤 | 用户操作 | 优势 | 视觉证据（展示的 UI）。 - 品牌：从 CSS（
globals.css、Tailwind 主题、落地页 CSS）获取颜色和字体，Logo 来自public/。填充template/src/theme.ts（C、GRADIENT、字体、BRAND）。 - 风格参考（如有视频）：使用 Remotion 内置的 ffmpeg 提取帧并查看缩略图：
npx remotion ffmpeg -v error -i "<video>" -r 3 -s 340x192 <dir>/f%03d.png（ffmpeg Remotion 不提供fps=/tile滤镜；请使用-r和scripts/contact-sheet.cjs）。 记录：背景（模糊斑点/点阵）、文字出现方式、硬切、3D UI、光标点击、发光效果、节奏。
2. 脚本与故事板
遵循 references/script-and-storyboard.md：三段式钩子（好奇心缺口），每场景一句 ≤ 10 字，对话风格，首句以引导词（如“哎，”）开头以免首个关键词发音错误，行动号召简短。仅在 brief 模糊时向用户展示脚本及简要场景顺序；否则直接执行。
3. Remotion 项目
- 将
template/复制到用户仓库的新文件夹（如promo-video/），运行npm install。 - 如果位于其他 Next.js/TypeScript 项目中，请将该文件夹添加到根目录
tsconfig.json的exclude以及 ESLint 的globalIgnores中。该文件夹已有.gitignore（node_modules, out）。 - 将 Logo 复制到
promo-video/public/并设置BRAND.logo。 - 在
src/scenes.tsx中为每个产品编写场景（使用示例中的模式：useFrame()、useRise/rise、glass/white、StepTag、Words、typed+Caret、Cursor、BlurFilter）。通用场景makeFeature仅用于原型。 - 填写
src/Promo.tsx中的DEFS：场景顺序、cue（旁白句子的起始短语）、beats（钩子）、speed、过渡、dark、sfx。
4. ElevenLabs 音频（参见 references/elevenlabs.md）
- 一次性录制旁白 ->
public/vo/full.mp3；使用 Scribe 逐词转录 ->public/vo/words.json。检查转录内容（单词发音错误？行缺失？）。 - 10 个音效文件打包 ->
public/sfx/*.mp3。 - 时间线自动处理：场景在其
cue短语被说出前 6 帧开始；音效放置在场景设计时间点（除以speed）。
5. 渲染与验证
- 运行
npm run typecheck然后npm run render（端口 3456 — 端口 3000 常被 Next 开发服务器占用，会导致渲染失败并提示 “not a valid Remotion project”）。 - 如果渲染时间超过 2 分钟，请在后台运行。
- 检查视觉效果：运行
node <skill>/scripts/contact-sheet.cjs out/promo.mp4 <scratchpad>/chk然后查看缩略图。若需检查特定秒数，可列出秒数。（ffmpeg 的-r示例常显示假空白起始帧——有疑问时检查特定秒数。） - 检查：文本无持续模糊、无截断/换行、步骤标签未被面板遮挡、关键动画在场景切换前完成、屏幕文本与旁白单词一致。
- 使用
SendUserFile发送（displayrender），报告时长、文件大小以及尚未验证的内容（例如未直接听到音频电平）。
已发生的陷阱（请避免）
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 钩子文字持续模糊 | 前一阶段的模糊值（out1）保持为 1 | 按阶段计算模糊：仅进入/退出 |
| 视频变得缓慢 | 场景被拉长以配合缓慢旁白 | 加快旁白、缩短脚本；保持 speed 不变 |
| 旁白生硬 | 逐句剪辑 + 每行加 [excited] 标签 + 书面语 | 一次性录制、对话风格、避免重复标签 |
| 首词发音错误（“账户”->“张户”） | v3 在首词时常出错 | 以“哎，”/“那，”开头，并检查 Scribe 转录 |
| 渲染失败 “getStaticCompositions undefined” | 端口 3000 被 Next 开发服务器占用 | 使用 --port=3456 |
fps=/tile 错误 | Remotion 内置 ffmpeg 功能受限 | 使用 -r + contact-sheet.cjs（sharp） |
| 文本换行两行且头像被截断 | flex 项目收缩 | 设置 flexWrap: "nowrap"，缩小字号 |
| 面板遮挡步骤标签 | 相机 translateY 过大 | 限制相机移动，使用 scale(0.92) |
| 卡片/标签重叠 | 极角位置过近 | 检查缩略图，调整角度/半径 |
useId() 在 url(#id) 中损坏 | id 包含 : | 使用 useFilterId()（已清理） |
| 登录后 MCP ElevenLabs 未加载 | 工具仅在新会话中出现 | 直接使用工具；若不行，使用 headless 模式 claude -p（参见参考） |
| MCP 失败 “Protected resource ... does not match” | 主机区域问题 | 使用 claude mcp add -s user --transport http elevenlabs https://api.us.elevenlabs.io/v1/mcp |