跳到主要内容
AI教程

使用 saas-motion-kit 制作独具特色的 SaaS 宣传视频

了解如何使用 saas-motion-kit 的七阶段工作流程、100 种视觉主题、转场图谱、可复用模板和多样性审查，制作精致的软件宣传视频，同时避免重复使用相同的创意选择。

AI我搜编辑部阅读约 13 分钟
使用 saas-motion-kit 制作独具特色的 SaaS 宣传视频

什么是 saas-motion-kit？

saas-motion-kit 是一个创意制作系统，用于借助 HyperFrames 和 Claude Code 为软件产品制作宣传视频和动效视频。它将规划指南、视觉参考、分镜模板、自动化工具和评审关卡整合在同一个代码库中。

该项目围绕一条规则构建：任何两部影片都不应让人感觉像同一部影片。与其反复套用熟悉的入场、转场和布局，不如先确定信息与基调，再为这部影片打造专属的视觉语言。

100 种视觉主题中的六种

该工具包包含涵盖 10 个视觉类别的 100 种主题、24 种转场图谱、七阶段制作流程、组件策略、完整示例，以及一套能在制作开始前检测重复内容的多样性审查工具。

主要功能

  • 七阶段制作流程：依次完成简报、组件、主题、分镜、制作、声音和交付，并在每个阶段结束后设置人工评审关卡。
  • 100 种视觉主题：探索基于产品界面、字体、3D 材质、光学效果、隐喻、数据叙事、角色、艺术运动和摄影语法的创意方向。
  • 转场图谱：查看 24 种叙事转场，包括匹配剪辑、承接、镜头运动、遮罩、材质转场和基于时间的技巧。
  • 多样性审查：检查分镜中是否存在重复转场、重复入场、重复缓动曲线、运动方向单一、镜头时长统一、强调色使用过度、缺少意外感、基调不匹配，以及缺少原创组件等问题。
  • 主题选择器：根据受众和基调筛选主题，同时排除近期使用过的主题。
  • 动效历史：记录不同影片中的创意决策，并生成报告，展示使用过度和尚未探索的技巧。
  • 组件策略：使用 HTML 重建简洁的产品界面，或在真实界面不适用时创建简化的虚构组件。
  • Claude Code 技能：使用 /saas-motion-video 命令，以交互方式完成整个流程。
  • GitHub Action：在推送和拉取请求时审查每个 STORYBOARD.md 文件。
  • 制作工具：缩小交付渲染文件、检查循环衔接、合成温暖风格的界面音效，并构建图库。

了解七阶段工作流程

该工作流程将制作工作与创意审批分开：

1 简报 → 2 组件 → 3 主题 → 4 分镜 → 5 制作 → 6 声音 → 7 交付
   关卡       关卡         关卡         关卡         关卡       关卡       关卡

代理可以完成大部分制作工作，但每个阶段都会以人工决策结束。这些关卡用于确认信息、判断视觉方向是否合适，并拒绝通用或重复的选择。

  1. 简报：确定受众、信息、平台、时长、基调和交付要求。
  2. 组件：决定是为简洁的产品界面添加动效，还是设计真实可信的虚构组件。
  3. 主题：选择能够支持目标基调的视觉语言。
  4. 分镜：规划每个镜头，完成创意记录表，并运行多样性审查。
  5. 制作：将影片实现为具有确定性且可安全定位的动画。
  6. 声音：在需要时添加合适的音乐和声音设计。
  7. 交付：以高分辨率渲染，创建最终输出尺寸，并检查循环衔接等技术细节。

安装与设置

要求

安装工具包前，请确保环境包含：

  • Node.js 22 或更高版本
  • ffmpeg
  • Claude Code

HyperFrames 会自行下载无头版 Chrome，因此无需单独安装该浏览器进行渲染。

选项 1：使用代码库模板

打开 saas-motion-kit 代码库，选择 Use this template。这会创建一个影片代码库，其中包含创意规则、工具、模板以及预配置的多样性审查 GitHub Action。

选项 2：克隆代码库

git clone https://github.com/tugrawork-creator/saas-motion-kit
cd saas-motion-kit

为 Claude Code 安装 HyperFrames 技能。这些技能没有内置在工具包中：

npx skills add heygen-com/hyperframes

预览随附示例

代码库包含一个完整的 HyperFrames 项目，用于制作无声、无缝循环的 40 秒 3D 展台动画。打开其目录并启动 Studio 预览：

cd examples/acme-suite-loop
npx hyperframes preview

要渲染交付质量的 4K 横屏版本，请运行：

npx hyperframes render --quality delivery --resolution landscape-4k --output renders/loop-2160.mp4

创建你的第一个软件宣传视频

第 1 步：撰写聚焦的简报

从 templates/BRIEF.md 中的模板开始。明确观众应该理解什么、影片面向谁、将出现在哪里，以及它应该营造怎样的感受。

一个有用的创意句式是：

我想用一种[基调]的方式表达[信息]。

这一决定应先于效果或转场。creative/tone-matrix.md中的语气矩阵将语气映射到速度、缓动、镜头行为、色彩、字体、转场和声音。

步骤 2：选择组件策略

软件影片依赖可信的 UI。使用工具包的整洁或虚构规则：

  1. 如果产品拥有一致、整洁且为当前版本的 UI，请将其作为参考进行采集，并使用产品的设计令牌，在 HTML 中重建所需的卡片、表格、图表和通知。
  2. 如果界面已经过时、过于密集或尚未设计，请使用品牌的视觉语言创建简化的虚构组件。
  3. 确保每个组件都真实可信。它可以简化真实功能，但不得虚构功能、客户或性能数据。

项目还要求每部影片至少设计一个原创组件。creative/component-forge.md中的组件锻造流程提供了快速开发组件的方法。

步骤 3：选择视觉主题

浏览100 个主题画廊，根据创意简报筛选出两到三个选项。每份主题说明都包含四个关键时刻，即 Hook、Reveal、Proof 和 CTA，以及建议使用的组件、定时动效技术、风险、适配指南和参考资料。

你也可以从命令行筛选主题。例如，以下命令会搜索面向开发者的趣味主题，并排除近期历史记录中已使用的主题：

python tools/pick_themes.py --tone playful --audience "developers" --history ~/.motion-ledger.json

这些主题分为 10 个系列：

  • 以产品 UI 为舞台
  • 字体与图形系统
  • 材质与 3D
  • 光线、光学与纹理
  • 隐喻概念
  • 标志性方向
  • 数据叙事
  • 角色与吉祥物
  • 艺术运动与时代
  • 镜头与剪辑语法

步骤 4：构建并审查分镜

根据提供的模板创建STORYBOARD.md。先写下消息与语气句，然后完成每个镜头一行的创意记录表。记录转场、入场、缓动、运动方向、时长、强调元素、惊喜和原创组件等选择。

开始制作前运行强制性的创意审查：

python tools/variety_audit.py STORYBOARD.md

修正审查标记出的重复选择。如果重复是有意为之且具有叙事意义，请将其标记为有意设计的motif:，不要让它处于未解释状态。

审查也可以结合运动历史，帮助你避免近期影片中使用过的技术。追加结果时，--theme NNN选项会将所选主题记录到历史中。

步骤 5：使用 Claude Code 开始制作

在仓库根目录打开 Claude Code，并使用具体请求调用随附的技能。例如：

/saas-motion-video  Make a 45 s LinkedIn promo for https://your-product.com — theme 055 (Bento Grid), music-driven, no voiceover.

该技能会引导你完成全部七个阶段，并在每个审查关卡暂停。不要把这些暂停视为形式流程：利用它们评估作品是否传达了创意简报，以及视觉选择是否具体而非泛泛。

步骤 6：预览并渲染

制作过程中使用 HyperFrames Studio：

npx hyperframes preview

最终交付时，即使目标分辨率为 1080p 或 2K，也请以 4K 渲染：

npx hyperframes render --quality delivery --resolution landscape-4k --output renders/final-2160.mp4

然后使用tools/deliver.sh通过 Lanczos 算法缩小尺寸。根据项目指南，与原生 1080p 渲染相比，这样可以生成更清晰的文字、边缘和 3D 图像。

在多部影片中使用多样性系统

追踪创意历史

一部影片可以避免内部重复，却仍然像你之前的作品。历史工具通过记录跨项目的主题和运动决策，解决这种更广泛的重复模式。

使用tools/history_report.py生成一页报告。报告会显示你经常使用的转场、入场和缓动样式，以及尚未探索过的图集转场和主题。

在持续集成中审查分镜

仓库包含.github/workflows/variety-audit.yml。每次推送和拉取请求时，该工作流都会审查每个STORYBOARD.md。重复自身的分镜会导致检查失败，从而将创意审查提前到制作流程中。

从 GitHub 模板开始，是继承这一工作流最简单的方式。如果将工具包克隆到现有项目中，请保留该工作流，并确保你的分镜遵循预期的记录表结构。

从六部影片的对比中学习

examples/six-films目录使用同一份 12 秒脚本制作了六个主题版本。每个版本都保留相同的故事，同时改变其视觉语言并引入一个独特组件。该目录还包含共享简报，让你可以向智能代理提供相同约束，并尝试第七种演绎。

examples/acme-suite-loop项目提供了另一个有用的案例。它的第一版分镜重复使用了相同的转向、标题入场、缓动和镜头时长。修订版改变了入场、转向、节奏和镜头行为，同时加入了一个有意设计的视觉惊喜。

高级制作技巧

让每一帧都支持安全定位

HyperFrames 必须能够一致地渲染任何请求的帧。将每一帧视为时间的纯函数。README 建议使用一个暂停的 GSAP 时间线，并通过 hf-seek 驱动 Three.js。

避免使用 Date.now() 和未设定种子的随机数。当渲染器直接跳转到某一帧时，这些输入可能产生不同结果。

用数学方法设计无缝循环

对于循环影片，应让每个环境运动在循环时长内完成整数次循环。项目将这一原则表示为：

sin(2π·n·t/LOOP)

渲染完成后，使用 tools/loop_check.py 验证衔接处，不要只依赖视觉检查。

谨慎处理多语言排版

当影片包含非拉丁字符时，请打包本地的 latin-ext 字体子集。内置后备字体可能会悄悄遗漏 ş、ğ 和 İ 等字形。

不要假设 CSS 大写转换在不同语言中表现一致。例如在土耳其语中，将小写 i 转换后会得到 İ。请以预期的大写形式输入展示文案，并为每个单词设置适当的 lang 值。

让声音温暖而有目的

纯正弦波的界面音效可能显得单薄或令人不适。工具包包含 tools/warm_sfx.py，可生成更温暖、经过调音的音色，例如在同一调性中使用马林巴或木鱼，并加入短促的房间混响。

如果使用 Meta 的 MusicGen 生成音乐，请记住其权重依据 CC-BY-NC 4.0 授权，不适用于商业用途。商业影片应选择授权合适的音乐。

减少屏幕上的文字

让运动和构图承载故事。文字仅保留标签，并控制在每个节拍大约一行。如果观众必须阅读段落才能理解影片，说明视觉内容没有承担足够的叙事工作。

避免在底部添加进度条。项目警告称，这种处理会让品牌影片看起来像屏幕录制。

以叙事方式使用转场

请参考转场图谱，不要把转场仅仅当作装饰来选择。其中的 24 个条目分别说明了转场所支持的基调，以及应避免的组合。请选择能够阐明理念之间关系、将对象从一个镜头带到另一个镜头，或强化影片材质与摄影机语言的转场。

首次项目建议清单

  1. 安装 Node.js 22+、ffmpeg、Claude Code 和 HyperFrames 技能。
  2. 预览 Acme 示例，以验证渲染环境。
  3. 撰写一份简报，其中包含一句清晰的信息与基调描述。
  4. 决定是重建真实 UI，还是创建符合真实感的虚构组件。
  5. 选出两个或三个图库主题，然后在主题关卡确定一个。
  6. 撰写分镜脚本并完成创意台账。
  7. 运行 tools/variety_audit.py，并解决重复选择。
  8. 使用确定性、可安全跳转的动画进行构建。
  9. 加入克制且授权适当的声音。
  10. 以 4K 渲染，缩小后交付，并在适用时检查循环衔接处。
  11. 将影片的选择追加到运动历史中，让下一个项目从不同的创意开始。

结语

saas-motion-kit 不是一组可以机械套用的效果。它是一套结构化方法，用于制作能够清晰传达信息且在视觉上保持独特的软件影片。通过在技术之前定义基调、构思项目专属组件、在每个关卡审查决策，并在制作前检查重复内容，你可以建立可重复的工作流程，同时避免制作出重复的作品。