SaaS Motion Kit Skill 技能

技能简介

SaaS Motion Kit 是一套为软件产品制作宣传片与动效视频的技能套件，由 HyperFrames 与 Claude Code 驱动。它的唯一铁律是：没有两条片子应该像同一条片子——不重复特效、转场和组件，为每条片子新造一个组件。套件通过「分阶段流程 + 组件策略 + 100 个视觉主题 + 24 种转场图谱 + 多样性审计」，把这套创作肌肉训练出来，MIT 开源。

核心能力

• 七阶段带闸门流程：简报 → 组件 → 主题 → 分镜 → 构建 → 音效 → 交付，每个阶段都以一次「人类决策」收尾，Agent 干制作活，你把关品味。
• 100 个视觉主题：同一个 45 秒故事用 10 大家族（产品 UI 当舞台、字体图形系统、材质与 3D、光影纹理、隐喻概念、数据叙事、角色吉祥物、艺术流派、镜头语法等）的 100 种视觉语言绘制。
• 24 种叙事转场图谱：匹配剪辑、承接、镜头运动、遮罩、材质、时间，每一种都有在线演示、适配语气以及不该搭配的说明。
• 多样性审计工具：tools/variety_audit.py 读取分镜台账，标出重复的转场、入场、缓动、方向、等长镜头、缺失惊喜点、重音滥用和主题错配。
• 清爽或虚构的组件规则：产品 UI 干净就用真实组件重建成 HTML 动画；不干净就设计「虚构组件」，用品牌令牌画出诚实简化的界面，绝不杜撰能力、数字或客户。
• CI 级自动检查：附带 GitHub Action，每次 push 和 PR 都会审计每个 STORYBOARD.md，重复的分镜直接判为不通过。

安装配置

1. 环境要求：Node.js 22+、ffmpeg、Claude Code（HyperFrames 会自动下载其无头 Chrome）。
2. 克隆套件：git clone https://github.com/tugrawork-creator/saas-motion-kit && cd saas-motion-kit。
3. 安装 HyperFrames 技能：npx skills add heygen-com/hyperframes。
4. 在 GitHub 上点击「Use this template」可直接创建自带审计 Action 的影片仓库。

使用步骤

1. 在仓库根目录打开 Claude Code。
2. 输入 /saas-motion-video，给出片长、主题与用途，例如「做一条 45 秒的 LinkedIn 宣传片，主题 055（Bento Grid），音乐驱动，不要旁白」。
3. 按技能引导走完七个阶段，在每个闸门处做决策。
4. 预览：npx hyperframes preview；渲染：npx hyperframes render --quality delivery --resolution landscape-4k --output renders/loop-2160.mp4。

适用场景

• 软件产品的宣传片、发布片与官网首屏循环动画。
• 需要风格多样、避免「千片一面」的品牌内容团队。
• 用 AI Agent 批量产出但要求质量可控的营销物料。
• 需要 4K 渲染再降采样交付的社交媒体短片制作。

适用人群

产品营销与品牌设计团队、独立开发者、需要为软件产品做演示视频、又没有专业动效团队的创业者。

工作原理

套件把「制作」与「品味」分离：Agent 负责按流程产出分镜、组件与渲染，人负责在七个闸门处做判断。分镜阶段强制进行「创意冲刺」——写下信息与语气的一句话、填好逐镜台账、运行 variety_audit.py，然后修正重复或把它们标为刻意的 motif:。渲染遵循「4K 渲染、缩小交付」与「每帧都是时间的纯函数」等经验法则，保证可 seek、可循环、边缘清晰。

官方链接

• GitHub 仓库：https://github.com/tugrawork-creator/saas-motion-kit
• 主题画廊：https://tugrawork-creator.github.io/saas-motion-kit/
• 转场图谱：https://tugrawork-creator.github.io/saas-motion-kit/transitions/