saas-product-demo-video

SaaS 产品演示视频

在 Remotion 中制作节拍同步 SaaS 产品影片的端到端工作流。涵盖无声电影感影片、节拍精准同步的横屏演示、竖屏短视频，以及带有拼贴式 B-roll 图层的影片。

这项技能对三件事有明确的主张：素材、氛围、节拍。跳过任何一项，做出来的都会是千篇一律的 Canva 风格动态图形短片。是否严守这些原则，决定了成品的差别。

这些是强烈建议，而非硬性规则。大多数制作都会遵循；有时也会有意打破（例如，以画外音为主的影片中，节拍同步会与画外音冲突）。打破规则时，请确保自己清楚这么做的原因。

---

前提条件

开始前，请确认已准备好以下内容。第一项是确实必需的；其他几项则是强烈建议，并提供了明确的替代方案。

1. 已安装 Remotion（必需）。@remotion/cli 4.0.x + @remotion/google-fonts + React 19。具体的最小化 package.json / tsconfig.json / remotion.config.ts 配置见 references/project-scaffold.md；切勿在现有 git 仓库中运行 npx create-video（它会卡在方向键提示上）。

2. Super Powers 插件（强烈建议，但非必需）。 如果可用，此技能会协调使用 superpowers:using-superpowers、superpowers:brainstorming（含视觉辅助）、superpowers:writing-plans 和 superpowers:subagent-driven-development。这些功能可在浏览器中提供 HTML 模型以辅助布局决策、生成正式的计划文档，并支持实现者与审查者子 Agent 的迭代流程。

   如果未安装 superpowers，此技能仍然可用——工作流会更偏向对话，速度也会稍慢一些。头脑风暴将改为内联对话（不含浏览器辅助）；计划直接写在聊天中；场景在内联实现，而不是通过调度子 Agent 实现。三大支柱（素材 / 氛围 / 节拍），以及 B-roll、示意界面、点击位置、写作风格和 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. PATH 中的 gemini CLI（Google 官方 CLI，或 gemini-yt 等社区封装工具）。将提示词和 YouTube URL 作为参数运行。
   2. 环境变量或 .env 中设置了 GEMINI_API_KEY。 使用技能提供的 curl 封装脚本 scripts/analyze-reference-video.sh。
   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 不可用时使用此方式。

导演动作词汇（push-through、whip-pan、V-cut pull-back、ink-mask、match-cut zoom）是最关键的输出——它为你提供可用于构建内容的具体动作原语。

支柱 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 介绍了一套结构化的对话流程，可产出四幕大纲、锁定版逐屏内容，以及锁定版文案参考页，方便纳入规格说明文档。

B-roll 集成——影片使用真人实拍或拼贴图层时

如果用户有素材库视频、拼贴片段，或想用作背景图层的任何视频，请使用 references/b-roll-integration.md 和 BRollLayer 模板。B-roll 可以作为完全不透明的背景，也可以作为低不透明度纹理；该基础组件可处理剪辑、淡入淡出、混合模式和帧率校正的时间设置。

（此技能的旧版本建议将真人实拍内容交给 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。 每次调度的子 Agent 批次最多处理 3–4 个文件——更大的批次有时会在任务中途耗尽上下文。参见 references/iteration-playbook.md。
15. 单独渲染 Scene 1 进行抽查。 确立风格。其余部分开始制作前，先获得用户批准。
16. 分轮迭代。 每轮最多修复 5–8 项。基准渲染完成后，进行一次内部事件对齐检查——这一轮就能明显改善节奏。
17. 以发布质量渲染主合成。 使用 --crf=14 --image-format=png（HD），或 --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 - 迭代轮次结构、批次审查、子 Agent 分批、Studio 热重载重启
• render-export.md - HD/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 演示。 活动回顾、客户证言混剪、教程录屏——节拍同步和产品界面卡片模式都不适用。
• 以纪录片或访谈镜头为主体的影片。 此技能将 B-roll 作为动态图形下方的图层处理。如果影片主体是实拍内容（访谈、开箱、操作演示），请使用 Premiere、DaVinci 或 Final Cut 等非线性编辑器。
• 旁白优先的视频。 如果脚本决定节奏，节拍网格系统就会与旁白冲突。此技能会回退到不使用节拍同步的帧预算模式——请明确告知用户。

---

输出规范

成功运行后会生成：

• 一个可用的 Remotion 项目，其中注册了一个主合成和各场景的调试合成。
• docs/superpowers/specs/YYYY-MM-DD-<name>-design.md（规格文档）和 docs/superpowers/plans/YYYY-MM-DD-<name>.md（计划）。
• 每个参考视频对应一个 references/gemini-<name>.md（位于用户的代码仓库中，而非此技能的代码仓库中）。
• beats.json + 接入场景的 theme-v2.ts 计时常量（已提交）。
• 高清 MP4（1920x1080 或 1080x1920，CRF 14）。
• 可选的 4K MP4（--scale=2，CRF 15）。
• 选取有表现力的画面制作的 JPG 缩略图。

用户应能够独立重新渲染任意场景，只需编辑一个计时常量即可重新编排整部影片，并且无需二次处理便能放心发布到 LinkedIn / Instagram / YouTube Shorts。