motion-video-workflow

上面每一帧都是代码画的：没有剪辑软件、没有模板、没有 AI 生成视频。改哪一秒就重画哪一秒，每次渲染结果完全一致。

---

六大绝活 · Six Superpowers

01 · 配音逐字驱动 · Voice-driven timing

离线听写给配音里的每一个字标上时间。写动画时不用手抄秒数，直接写说到哪个词：

const t = say('4万');        // → 22.59，数字就在这一帧砸出来
say('收藏', 2);              // 第 2 次说「收藏」的时刻
sayEnd('抄作业');            // 最后一个字的时刻

• 画面和口播的误差在一帧以内（1/60 秒）
• 转场、镜头运动自动吸附到音乐拍点上
• 重录配音？重新听写一次，全片自动跟上新的时间，代码一行不改

02 · 一镜到底的运镜转场 · Camera-continuous transitions

不是「盖一层东西把切点遮住」，而是前后两个镜头在转场的那半秒里同时存在、共用同一条运动曲线。镜头运动跨过切点也不断，再叠加最多 8 层运动模糊。

AI 会按口播自己判断：只在信息切换处转，有形状相似的元素就用形状匹配，从细节回到全局就用拉远揭示，一分钟的片子用 3–4 次，留一个最炸的给高潮。

03 · 每期现场设计，不套模板 · Designed per episode

组件包只是底座。AI 每期都按口播内容现场设计、现场写代码：现成组件能表达的直接用，表达不了、会和往期撞脸、高潮需要记忆点的，就新写，并在分镜表里标明为什么。第一期 56 秒的片子，约一半代码是现场写的。

下面 12 张来自同一套引擎，风格完全不同：

04 · 真实网页 1:1 还原 · Real UI, rebuilt

讲工具、讲产品，画面里必须是真东西。

• 一条命令抓取网页的 2x 高清截图，自动关掉 Cookie、登录这类弹窗
• 同时导出每个按钮、标题的精确坐标，框选、推近、鼠标点击都按坐标来，不靠肉眼估
• 需要单独做动画的元素（按钮、数据卡），照截图 1:1 重建
• 每个素材的来源和许可自动记进 a/来源.md

右边这段就是抓取本仓库的 GitHub 页面后，现场做出来的。

05 · 你只做选择题 · You just choose

整个流程里，你只需要点选项：比例、音乐、风格、标题，每题都有推荐项。还可以先看全篇关键帧总览再开工。说一句「直接做」，它就全部按推荐走完，最后告诉你替你选了什么。

AI 还会自己看预览帧，检查文字有没有被裁、元素有没有重叠、字够不够大，发现问题自己修。

06 · 越用越强 · Gets better every episode

flowchart LR
  A[做一期片子] --> B[交付时复盘]
  B --> C[你的意见 → 写进硬规则]
  B --> D[新写的组件 → 沉淀进组件包]
  B --> E[碰到的 bug → 修进引擎]
  C --> F[下一期更快、更稳、更像你]
  D --> F
  E --> F
  F --> A

每期交付时，AI 会把这期的收获分成三类列出来，你勾选同意的，它再更新进 skill。用得越久，越懂你的审美。

---

一支片是怎么诞生的 · Pipeline

---

和别的方案比 · Comparison

---

能力清单 · What's inside

• 装饰带：深夜 night、科技 tech、清爽 clean、纸感 paper、白瓷 porcelain
• 工具：混音（人声自动压低音乐）、离线逐字听写、拍点检测、自动合成配乐、口播时间查询、网页抓取、抽帧预览、分段并行渲染、HEVC 合成、3:4 和 4:3 封面导出

---

为什么推荐 Claude Code · Best with Claude

这个 skill 在 Claude Code + Claude Opus 上开发和打磨，效果最好：

• 选择题确认：用 Claude Code 自带的选择题工具问你，点一下就能选
• 看图自查：Claude 能直接看自己渲染的预览帧，发现问题自己修
• 现场设计：每期都要现写几百到上千行动画代码、做视觉设计，这正是 Claude 擅长的

Codex 等支持 SKILL.md 的 agent 也能用（选择题会变成编号选项，发图会变成给出图片路径），只是交互和自查不如 Claude Code 顺手。

---

安装 · Install

Claude Code（推荐）

git clone https://github.com/isaachang/motion-video-workflow ~/.claude/skills/motion-video-workflow

只给某个项目用，就换成 你的项目/.claude/skills/motion-video-workflow。装好后重开 Claude Code，会自动识别。

Codex

git clone https://github.com/isaachang/motion-video-workflow ~/.agents/skills/motion-video-workflow

项目级放 你的项目/.agents/skills/；较早的 Codex 版本用 ~/.codex/skills/。输入 $motion-video-workflow 调用，或直接描述需求自动触发。

第一次运行不用手动装依赖：AI 会把模板复制到项目目录，运行 bash tools/setup.sh，自动安装 Python 依赖、Playwright 浏览器、约 250MB 的离线听写模型，缺中文字体会自动下载开源的思源黑体。

怎么用 · Usage

准备一段配音（手机录音就行），对 AI 说：

用 motion-video-workflow，把 ~/Desktop/配音.mp3 做成一支 9:16 的口播动效片。
主题是介绍 XX 网站，口播稿如下：……

接下来：开场确认（比例、音乐）→ 要不要先看效果图 → 确认标题、配色、分镜 → 要不要先看全篇关键帧总览 → 渲染 → 交付成片和两张封面，并列出可以沉淀进 skill 的改进。

依赖 · Requirements

macOS / Linux / WSL，Python 3.10+，ffmpeg。其余依赖由 tools/setup.sh 自动安装。不需要 GPU，也不需要任何 API Key。

---

给 AI 看的说明 · For AI agents

如果你是正在读这个仓库的 AI 助手：

• 入口是 SKILL.md：完整的工作流、必须停下来问用户的节点、画面硬规则、输出规范、运镜转场规则。开始前完整读一遍。
• 模板在 motion-kit/：每支片先复制一份到项目目录再改，不要直接改 skill 目录里的模板。组件清单见 motion-kit/README.md。
• 用户只需要提供配音。比例、音乐、风格、标题都用选择题确认，推荐项放第一个；用户说了的不要重复问。
• 时间点不要手抄：用 say('词') 或 python3 tools/when.py 词。
• 不编造数据和新闻，