SaaS 产品演示视频
用于在 Remotion 中交付与节拍同步的 SaaS 产品影片的端到端工作流程。涵盖无声电影风格、与节拍锁定的横向演示、纵向 Reels 以及带有拼贴 B-roll 图层的影片。
该技能对三件事有明确的倾向性：素材、氛围、节拍。跳过其中任何一项，你都会制作出一个泛泛的、类似 Canva 的动态图形短片，看起来与其他 SaaS 演示别无二致。这种纪律性才是造成差异的关键。
这些是强烈建议而非硬性规则。大多数制作会遵循它们；有些会有意打破（例如，在画外音驱动的影片中，节拍同步可能会与 VO 冲突）。当你打破规则时，请确保是有意识地这样做。
前置条件
开始前，请确保以下条件已就绪。第一条是必须的；其余是强烈建议，并附有记录在案的备用方案。
-
已安装 Remotion（必须）。
@remotion/cli4.0.x +@remotion/google-fonts+ React 19。有关最小化的package.json/tsconfig.json/remotion.config.ts，请参阅references/project-scaffold.md- 切勿在已有的 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。geminiCLI 在 PATH 中（官方 Google CLI 或社区封装工具如gemini-yt）。使用提示词 + YouTube URL 作为参数运行。GEMINI_API_KEY已设置在环境变量或.env文件中。使用该技能的 curl 封装脚本scripts/analyze-reference-video.sh。- 以上皆无 - 回退到手动复制粘贴到 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 提供了一个结构化的对话流程，可以生成一个四幕大纲 + 锁定的逐屏脚本 + 锁定的文案参考页面，随时可以输入到规范文档中。
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 涵盖了如何设计出读起来很精致但又不会侵犯真实平台（LinkedIn、Gmail、Slack）的示意图 UI。三种参考模式：个人资料卡片、邮件编辑器、API 面板 - 代码模板在 assets/code-templates/Schematic*.tsx 中。
点击定位 - 排名第一的迭代痛点
光标点击错失按钮是所有制作中最常见的用户投诉。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 中注册每个场景的调试组合。 必不可少的速度提升。预览一个 5 秒的场景比预览整个主片快 30 倍。
- 在
Root.tsx顶层加载所有字体，使用subsets: ["latin"]。 - 在组合 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（高清）或--crf=15 --image-format=png --scale=2（4K）。参见references/render-export.md。 - 以 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 设置、提交清单、计划模板规范性、必备 .gitignoreanimation-patterns.md- TypedText、MaskReveal、PopIn、ZoomPunch、FloatingElements 及扩展b-roll-integration.md-BRollLayer模式、不透明度/混合处理、渲染性能schematic-ui-fidelity.md- 设计出读起来精致的假 UIclick-positioning.md- 确保光标点击落在正确目标上的三种方法writing-style.md- 在屏幕文案中应避免的长破折号和其他 AI 痕迹cursor-math.md- 热点偏移、关键点、比例变换iteration-playbook.md- 波次结构、批次审查、子代理批处理、Studio 热重载重启render-export.md- 高清/4K 渲染命令、CRF 理由gotchas.md- 组合 ID 下划线、字体警告、斜体加载、MaskReveal 缩放陷阱vertical-port.md- 9:16 Reels 移植规范
素材
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、第一底鼓、在目标帧率下的军鼓/底鼓帧。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 或
…
[因翻译需要而截断]