SaaS产品演示视频

使用Remotion制作节拍同步的SaaS产品视频的端到端工作流程。涵盖无声电影风格视频、节拍锁定横向演示、纵向短视频以及带有拼贴B-roll层的视频。

本技能对三件事有明确的看法：素材、风格、节拍。跳过其中任何一个，你只会制作出千篇一律的Canva风格动态图形视频，看起来和其他SaaS演示没什么两样。这种纪律性才是决定质量的关键。

这些是强烈建议而非硬性规则。大多数制作会遵循它们；有些会刻意打破规则（例如，在配音驱动的视频中，节拍同步可能会与旁白冲突）。当你打破规则时，要清楚自己在做什么。

前置条件

开始之前，请确认以下条件已满足。第一条是必须的；其他是强烈建议，并附有备选方案。

已安装Remotion（必须）。@remotion/cli 4.0.x + @remotion/google-fonts + React 19。详见 references/project-scaffold.md 中的最小 package.json / tsconfig.json / remotion.config.ts —— 切勿在现有git仓库内运行 npx create-video（它会卡在方向键提示符处）。
Super Powers插件（强烈建议，非必须）。 当可用时，该技能会编排 superpowers:using-superpowers、superpowers:brainstorming（带可视化伴侣）、superpowers:writing-plans 和 superpowers:subagent-driven-development。它们可以在浏览器中提供HTML原型用于布局决策、正式计划文档以及实施者+审查者子代理循环。

如果未安装Super Powers，该技能仍然有效——工作流程会变得更偏向对话式，速度稍慢。头脑风暴变为内联对话（无浏览器伴侣）；计划直接在聊天中编写；场景通过内联方式实现而非分派子代理。三大支柱（素材/风格/节拍）以及B-roll、示意图UI、点击定位、写作风格以及scripts/中的脚本，所有这些都相同。不要因为缺少插件而拒绝任务——适应并继续。
Python 3 + librosa可用。 节拍检测运行 scripts/detect-beats.py，它导入了 librosa。如果未安装，请运行 pip install --break-system-packages librosa numpy soundfile 并告知用户——不要默默操作。
对于参考视频分析（支柱2）： 该技能按优先级顺序支持三种路径。使用可用性最高的那种——详见 references/reference-video-vibe.md 的完整检测逻辑。
1. gemini CLI在PATH中（官方Google CLI，或社区封装如gemini-yt）。以提示词+YouTube URL作为参数运行。
2. 环境中或 .env 中设置了 GEMINI_API_KEY。使用 scripts/analyze-reference-video.sh 中的技能curl封装。
3. 以上均不可用——退回到手动Google AI Studio复制粘贴。虽然麻烦但始终有效；质量相当。

在新会话中，首先运行 references/prereq-check.md。

三大支柱

这些是高杠杆活动。跳过一个来“节省时间”几乎总是会在后续流程中花费更多时间。

支柱1 - 素材接引入门

在开始之前，首先运行 assets/prompt-templates/asset-intake-questionnaire.md 中的结构化问卷。它会询问：

宽高比（16:9横向、9:16纵向、或两者并行——如果两者都要，详见 references/vertical-port.md）
时长（秒）（建议20-45秒）
Logo——首选SVG格式。如果只有PNG，请记录原生尺寸，以防止放大时像素化。
品牌颜色（主强调色 + 3-6种支撑性柔和色）
字体栈（所有字体必须在Google Fonts上）
文案/脚本——优先使用用户提供的草稿，而非自动生成。如果用户没有脚本，请见 references/script-development.md。
配音（可选）
音轨文件——节拍同步必需。如果用户没有，请从免版税库存中选择。

完整的素材接引流程，包括部分素材的最小可行集、文案摄入时的命名规范以及素材放大的像素化检查，请参考 references/asset-intake.md。

支柱2 - 参考视频风格工作流

在编写场景之前，向用户询问2-3个他们喜欢其风格的YouTube参考视频。然后为每个视频制作导演的拆解分析。

支持两种路径（详见 references/reference-video-vibe.md）：

自动化（可用时优先） ——如果用户已设置 GEMINI_API_KEY，对每个视频运行 scripts/analyze-reference-video.sh <youtube-url> <slug>。通过curl使用Gemini Pro Preview。每个视频约需30秒。输出保存在 references/gemini-<slug>.md。
手动（始终有效） ——打开 aistudio.google.com，将 scripts/reference-video-prompt.md 中的提示词连同YouTube URL粘贴进去，将结果复制回文件。虽然麻烦，但产出同样可用。当API不可用时使用此方法。

导演动词词汇表（推进、甩镜头、V形剪接拉回、墨水遮罩、匹配剪辑缩放）是最关键的输出——它为你提供了具体的运动原语来构建画面。

支柱3 - 音轨节拍同步

场景边界应落在军鼓上（修辞上的“鼓点”感觉）。场景内的事件（点击、卡片落地、计数器启动）应落在该场景内的底鼓或军鼓上。

流程：

运行 scripts/detect-beats.py <soundtrack.mp3> --fps 30 --out beats.json。输出BPM、第一鼓点帧、军鼓时间戳+帧数。
导入到一个单一的时间常量对象中（参见 assets/code-templates/theme-v2.ts）。每个 <Sequence from={...} durationInFrames={...}> 场景都从该对象中取值。
在第6阶段（场景构建完成）之后，针对beats.json和场景内事件列表运行 scripts/align-internal-events.py，将其就近对齐到最近的节拍上（±6帧内）。这是初始渲染之后第二高杠杆的迭代——观众能感觉到节拍不准的内部事件是“节奏有时不对”，却无法具体指出问题所在。
使用 isSnare(n) / isKick(n) 辅助函数在开发模式下进行断言。
针对任何TypedText/TypedChars运行 scripts/check-typing-budget.py，以验证其是否适合场景时长。在发布前截断屏幕外打字。

完整的数学运算、辅助函数、内部事件对齐以及打字预算检查，参见 references/beat-sync.md。

相邻能力——当基本功能不够用时

这些涵盖了超出标准“全动态图形，仅录个截图”SaaS演示的场景。当用户的情况需要时，请阅读相关参考资料。

脚本开发——当用户没有脚本时

大多数用户来的时候只有一个模糊的产品想法，而不是一个完整的逐屏脚本。references/script-development.md 介绍了一个结构化的对话流程，可产生一个4幕大纲 + 已锁定的逐屏内容 + 已锁定的文案参考页，可供直接输入到规范文档中。

B-roll集成——当视频使用实拍或拼贴层时

如果用户有素材视频、拼贴剪辑或任何他们想用作背景层的视频，请使用 references/b-roll-integration.md 和 BRollLayer 模板。B-roll可以是全不透明度的背景，也可以是低不透明度的纹理；该原语处理修剪、淡入淡出、混合模式和帧率校正的时间控制。

（此技能的早期版本建议将实拍工作送到Premiere/DaVinci处理。当B-roll仅用作运动图形下的层时，这是错误的——Remotion处理得很好，将制作保留在一个工具中是生产效率的提升。）

示意图UI fidelity——当产品没有真正的UI可录时

如果产品是一个Chrome扩展、一个API，或者处于早期阶段，没有真正的产品UI可以截图，references/schematic-ui-fidelity.md 介绍了如何创建看起来精致且不会侵权真实平台（LinkedIn、Gmail、Slack）的示意图UI。三个参考模式：个人资料卡、邮件编辑器、API面板——代码模板在 assets/code-templates/Schematic*.tsx 中。

点击定位——#1迭代摩擦痛点

光标点击错过按钮是制作中最常见的用户投诉。references/click-positioning.md 介绍了三种方法（refs、计算位置常量、调试覆盖层）——请预先选择一种。错误选择此方法的代价是每个场景多次完整的重新渲染循环。

写作风格——避免AI痕迹出现在面向用户的文案中

长破折号、花式引号以及某些措辞习惯会暴露“AI生成”。references/writing-style.md 是默认风格指南，附带一个发布前的grep检查，可以捕获这些问题。如果用户有自己的品牌语调指南，请优先使用。

理想流程

完整的端到端流程。带原理说明的注释版见 references/ideal-sequence.md。

先收集输入，最后编写代码。 运行素材接引问卷。
开发脚本——如果用户没有，请参考 references/script-development.md。
生成参考视频拆解分析——自动方式通过 scripts/analyze-reference-video.sh；手动方式通过AI Studio。
检测节拍并编写时间常量对象。 scripts/detect-beats.py → theme-v2.ts。每个场景的开始点都源自节拍。
手动搭建Remotion脚手架。 最小 package.json / tsconfig.json / remotion.config.ts。切勿在git仓库内运行 npx create-video。
在Root.tsx中注册每个场景的调试组合（composition）。 关键的速度提升。单独擦洗一个5秒场景的速度比完整的母版快了30倍。
在Root.tsx顶层加载所有字体，使用 subsets: ["latin"]。
使用连字符作为composition ID（v2-Scene06，绝不使用 v2_Scene06）。
使用带可视化伴侣的 superpowers:brainstorming 进行样式/布局决策。HTML原型每次都胜过文字描述。
编写规范文档。 docs/superpowers/specs/YYYY-MM-DD-<name>-design.md。如果需要任何示意图UI，请包含相应的部分。
自我审查规范，然后用户批准。 在未获绿灯前不编写代码。
调用 superpowers:writing-plans。 在分派前检查计划模板的规范性（参见 references/project-scaffold.md）。
首先构建动画原语（TypedText、MaskReveal、PopIn、Cursor、ZoomPunch、FloatingElements、BRollLayer、Counter、IceCrack，根据需要）。然后构建示意图UI卡片。接着是场景。最后是母版。
调用 superpowers:subagent-driven-development。 每次分派限制子代理批次为3-4个文件——较大的批次有时会在任务中途耗尽上下文。参见 references/iteration-playbook.md。
单独渲染场景1作为预览。 确立风格。在其余部分之前获取用户批准。
按轮次迭代。 每轮限制在5-8个修复。在基线渲染后运行一次内部事件对齐——仅这一次就能显著改善节奏感。
以发布质量渲染母版。 --crf=14 --image-format=png（HD）或 --crf=15 --image-format=png --scale=2（4K）。参见 references/render-export.md。
以0.5倍速对照节拍图进行抽查。

参考资料索引

references/ 目录包含详细内容。仅加载当前阶段所需的内容。

ideal-sequence.md —— 完整的注释流程，包含原理说明
prereq-check.md —— 开始前需要验证的内容
asset-intake.md —— 完整的接引流程、部分素材回退、素材放大检查、命名规范

SaaS 产品演示视频（Remotion）