产品演示视频·第2步：20–45 秒卡点 SaaS 成片

SaaS产品演示视频

在Remotion中完成节拍同步的SaaS产品宣传片制作的端到端工作流程。涵盖无声电影级短片、节拍锁定的横屏演示、竖版短片以及带有拼贴B-roll层的影片。

该技能对三个方面有明确的主张：资产、氛围、节拍。跳过任何一个，你都会产出一个普通的、像Canva风格的动态图形短片，看起来与其他SaaS演示视频别无二致。这种严谨性正是差异所在。

这些是强烈建议而非硬性规则。大多数制作会遵循它们；有些会刻意打破（例如，在配音驱动的影片中，节拍同步可能会与配音冲突）。当你打破规则时，请有意识地去做。

---

前置条件

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

1. 安装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（它会在箭头键提示时阻塞）。

2. Super Powers插件（强烈建议，非必须）。 当可用时，此技能会协调使用 superpowers:using-superpowers、superpowers:brainstorming（带可视化伴侣）、superpowers:writing-plans 和 superpowers:subagent-driven-development。它们为你提供浏览器中的HTML模型用于布局决策、正式的计划文档，以及实现者和审阅者的subagent循环。

   如果未安装superpowers，该技能仍然有效 - 工作流程会变得更像对话，速度稍慢。头脑风暴变为内联对话（无浏览器伴侣）；计划直接在聊天中编写；场景通过内联方式而非派发的subagent来实现。三个支柱（资产/氛围/节拍）以及B-roll、示意图UI、点击定位、写作风格和 scripts/ 中的脚本都同样有效。不要因为缺少插件而拒绝工作——适应并推进。

3. Python 3 + librosa可用。 节拍检测运行 scripts/detect-beats.py，该脚本导入 librosa。如果未安装，运行 pip install --break-system-packages librosa numpy soundfile 并告知用户 - 不要静默操作。

4. 用于参考视频分析（支柱2）： 该技能按优先级顺序支持三种路径。使用可用的最高级路径 - 完整的检测逻辑见 references/reference-video-vibe.md。

   1. gemini CLI在PATH中（官方Google CLI，或社区封装如 gemini-yt）。使用提示词 + YouTube URL作为参数运行。
   2. GEMINI_API_KEY 在环境变量或 .env 中设置。使用技能在 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 - 配乐节拍同步

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

流程：

1. 运行 scripts/detect-beats.py <soundtrack.mp3> --fps 30 --out beats.json。输出BPM、第一个底鼓帧、军鼓时间戳和帧数。
2. 将其整合到一个单一的时间常量对象中（见 assets/code-templates/theme-v2.ts）。每个 <Sequence from={...} durationInFrames={...}> 都从中拉取数据。
3. 在阶段6（场景构建）之后，针对beats.json和一个场景内事件列表运行 scripts/align-internal-events.py，将它们微调到±6帧范围内的最近节拍上。这是仅次于初始渲染的第二高杠杆迭代——观众会感觉到节拍不对的内部事件是“节奏有时不对劲”，但无法指出原因。
4. 使用 isSnare(n) / isKick(n) 辅助函数在开发模式下进行断言。
5. 针对任何 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可以是全透明背景层或低透明度的纹理；该基元处理裁剪、淡入淡出、混合模式和fps校正时间。

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

示意图UI保真度 - 当产品没有真实UI可录制时

如果产品是Chrome扩展、API或早期阶段，没有真实的产品UI可以截图，references/schematic-ui-fidelity.md 涵盖了如何设计看起来精致的示意图UI，同时不侵犯真实平台（LinkedIn、Gmail、Slack）。三种参考模式：个人资料卡片、邮件编辑器、API面板 - 代码模板在 assets/code-templates/Schematic*.tsx 中。

点击定位 - 排名第一的迭代痛点

光标点击按钮不准确是制作中最常见的用户投诉。references/click-positioning.md 涵盖了三种方法（refs、计算位置常量、调试覆盖层）——提前选择一种。搞错这个的代价是每个场景多次完整的重新渲染周期。

写作风格 - 保持面向用户的文案中不带AI痕迹

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

---

理想序列

完整的端到端流程。带注解的版本及原理见 references/ideal-sequence.md。

1. 先收集输入，最后写代码。 运行资产摄入问卷。
2. 如果用户没有脚本，则进行脚本开发 - references/script-development.md。
3. 制作参考视频拆解 - 通过 scripts/analyze-reference-video.sh 自动化，或通过AI Studio手动进行。
4. 检测节拍并编写时间常量对象。 scripts/detect-beats.py → theme-v2.ts。每个场景的起始点都源自节拍。
5. 手动搭建Remotion项目。 极简的 package.json / tsconfig.json / remotion.config.ts。永远不要在git仓库内使用 npx create-video。
6. 在 Root.tsx 中注册每个场景的调试合成。 关键的加速。预览一个5秒的场景比完整主版本快30倍。
7. 在 Root.tsx 顶层加载每个字体，使用 subsets: ["latin"]。
8. 在合成ID中使用连字符（v2-Scene06，永远不要用 v2_Scene06）。
9. 调用 superpowers:brainstorming 及其可视化伴侣 进行样式/布局决策。HTML模型每次都优于文字说明。
10. 编写规格文档。 docs/superpowers/specs/YYYY-MM-DD-<name>-design.md。如果需要，包含示意图UI保真度部分。
11. 自审规格，然后用户批准。 除非绿灯亮，否则不编写代码。
12. 调用 superpowers:writing-plans。 在派遣前进行计划模板规范性检查（见 references/project-scaffold.md）。
13. 先构建动画基元（TypedText、MaskReveal、PopIn、Cursor、ZoomPunch、FloatingElements、BRollLayer、Counter、IceCrack按需使用）。然后是示意图UI卡片。然后是场景。然后是主合成。
14. 调用 superpowers:subagent-driven-development。 每次派遣的subagent批次限制为3-4个文件——更大的批次有时会在任务中途耗尽上下文。见 references/iteration-playbook.md。
15. 单独渲染场景1进行快速预览。 确立风格。在继续之前获得用户批准。
16. 分波迭代。 每波最多进行5-8次修复。在基线渲染完成后运行一次内部事件对齐——单次对齐就能显著收紧节奏感。
17. 以发布质量进行主渲染。 --crf=14 --image-format=png（高清）或 --crf=15 --image-format=png --scale=2（4K）。见 references/render-export.md。
18. 以0.5倍速对照节拍图进行抽检。

---

参考文档索引

references/ 目录包含深度内容。只为当前阶段加载所需内容。

• ideal-sequence.md - 完整的注释流程及原理
• prereq-check.md - 开始前要验证的内容
• asset-intake.md - 完整的摄入流程、部分资产备用方案、资产放大检查、命名规范
• script-development.md - 当用户没有脚本时的逐屏方法论
• reference-video-vibe.md - Gemini分析协议（API / CLI / AI Studio路径）
• beat-sync.md - 节拍网格数学计算、场景边界规则、内部事件对齐、打字预算检查
• project-scaffold.md - 极简Remotion设置、提交清单、计划模板规范性、基本的.gitignore
• animation-patterns.md - TypedText、MaskReveal、PopIn、ZoomPunch、FloatingElements 及扩展
• b-roll-integration.md - BRollLayer 模式、透明度/混合处理、渲染性能
• schematic-ui-fidelity.md - 设计看起来精致的虚假UI
• click-positioning.md - 三种确保光标点击准确命中的方法
• writing-style.md - 屏幕文案中要避免的长破折号等AI痕迹
• cursor-math.md - 热点偏移、关键点、比例变换
• iteration-playbook.md - 波次结构、批量审查、subagent分批、Studio热重载重启
• render-export.md - 高清/4K渲染命令、CRF原理
• gotchas.md - 合成ID下划线、字体警告、斜体加载、MaskReveal缩放陷阱
• vertical-port.md - 9:16竖版短片移植规范

资产

• assets/prompt-templates/ - 用于资产摄入、规格文档、节拍表的填空模板
• assets/code-templates/ - 经过实战检验的组件（主题常量、缓动函数、Cursor、MaskReveal、TypedText、PopIn、ZoomPunch、FloatingElements、BRollLayer、Counter、IceCrack、SchematicProfileCard、SchematicEmailComposer、SchematicApiPanel、Act2Master、Act2MasterVertical）

脚本

• scripts/detect-beats.py - 基于librosa的节拍跟踪。输出BPM、第一个底鼓、目标fps下的军鼓/底鼓帧。
• scripts/analyze-reference-video.sh + scripts/reference-video-prompt.md - 用于YouTube导演拆解的Gemini Pro封装。
• scripts/align-internal-events.py - 将场景内事件对齐到±容差帧范围内的节拍。
• scripts/check-typing-budget.py - 在渲染前验证TypedText/TypedChars是否适合场景时长。

---

何时不应使用该技能

• 对现有Remotion项目进行深度迭代。 如果用户已经对影片进行了20+次提交并请求第N+1波调整，不要重新运行摄入。加载 references/iteration-playbook.md 和 references/beat-sync.md 然后继续。
• 非SaaS演示。 活动回顾、感言集锦、教程截屏 - 节拍同步 + 产品UI卡片模式不适用。
• 以纪录片或受访人物为主体的镜头。 此技能将B-roll作为动态图形下的层处理。如果实拍镜头是影片的主体（访谈、开箱、演练），请使用非线性编辑器如Premiere、DaVinci或...