用 huashu-motion 让 AI 拍了一支 60 秒发布片，我只点了两下

沐风 2026-10-22--
ClaudeCode系列 AI AI工作流 AI实战
type
status
date
slug
summary
tags
category
icon
password
wechat_gate
我给自己的 App 鲸海语记做了一支 60 秒发布片。画面、配乐、音效、中英两版，全部由 Claude Code 写代码生成。
整个过程里，我对画面只提了两条意见。一条是"底部波浪跳得太快"，另一条是改一句副标题。
两条都是在画面上点一下、打一行字，AI 就改对了位置，而且没碰别的地方。
这篇讲清楚三件事：huashu-motion 是什么、怎么用，以及"逐帧批注"凭什么能让 AI 一次改对。

先说痛点：AI 做视频，难的不是生成，是修改

让 AI 写一段动画代码，现在已经不难。
难的是第二轮。你看完说"开头那里节奏不太对"，AI 不知道"开头"是第几秒，"那里"是哪个元素，"不太对"是快了还是慢了。
它只能猜。猜错一次，你再描述一次，一来一回，半小时没了。
视频比网页更麻烦：同一个元素在第 3 秒和第 30 秒长得完全不一样。文字描述天然缺一个维度：时间。

huashu-motion 是什么

一句话：一个让 AI 用代码做视频的工具链，片子就是一个 HTML 文件。
它是花叔开发的 Claude Code skill（仓库 github.com/alchaincyf/huashu-motion，本文用的是 v0.1.1）。核心约定只有三条：
  • 一个项目一个 index.html，用 HTML + GSAP 写动画
  • 所有动画挂在一条暂停的 GSAP 时间线上，画面是时间的纯函数
  • 用你本机的 Chrome 逐帧截图，再合成 mp4
它不是什么：
  • 不是 AI 视频生成模型。没有一帧是"生成"出来的，每个像素都来自代码
  • 不是剪辑软件。没有轨道、没有关键帧面板，改片就是改代码

它有什么用

我们这支片子用到的能力，按流程排一遍：
环节
命令
产出
读用户偏好
om learn
上次做片积累的经验
方向稿
om still / om swatch
三张真实关键帧 + 配色卡
自检
om check / om qa
文字出框、遮挡、单帧闪现、死时间
配乐
om sound
按你写的 ABC 乐谱合成，对齐画面
批注
om studio / om inbox
在画面上点哪改哪
导出
om render --blur
带运动模糊的 mp4
省掉的是两样东西：剪辑软件，以及"用文字给 AI 描述画面"这一步。

怎么用：最小可跑路径

前置条件：装好 Claude Code、Node 22、本机 Chrome。
如果项目的 .nvmrc 锁的是旧版本 Node，每条命令要包一层 nvm exec 22。我们项目锁的是 20，第一个坑就在这里。
最小流程：
怎么判断成功：om check 输出 0 errors，om qa 输出 no single-frame pops。
实际使用时你不用敲这些命令。在 Claude Code 里说一句"用 huashu-motion 给我的产品做一支 60 秒发布片"，它会按 skill 里的流程一步步走，每个关键节点停下来等你确认。

实战：鲸海语记 60 秒发布片

第一步：三个方向，不是三种颜色

AI 先读了 App Store 文案、真实截图和图标，然后给出三个方向，每个都配一张 1920×1080 的真实关键帧：
  • A · 一口气：浅色 iOS 界面，一条波形从头变到尾
  • B · 一拍一句：满屏品牌色块，大字快切
  • C · 鲸歌：深海世界，波形浮出水面拼成鲸尾
C 的依据是一个只属于这个产品的巧合：新图标的鲸尾，本身就是一排波形竖条拼成的。名字叫"鲸海"，功能是"声音变文字"，三件事是同一个隐喻。
最后我选了 C 做主线，中段借 A 的界面重建，再加 B 的 6 连切。
notion image
三个方向各出一张真实关键帧，配色卡单独一张

第二步：先写节奏表，再写代码

AI 先交了一份 treatment，核心是一张节奏表：
  • 112 BPM，1 小节 2.143 秒，28 小节正好 60.0 秒
  • 2.14 秒波形炸开，满足"3 秒内有钩子"
  • 25.7 秒开始 6 连切，落在全片 43% 处
  • 42 秒所有画面收成一条线，静音一拍
  • 47.1 秒鲸尾合成，配一次 impact
画面切点和乐谱小节用同一套网格。om sound 报告 12 个乐段标记全部对上，速度偏差最大 1.7%。
notion image
成片中的 6 帧：从深海波形到界面，再回到鲸尾

第三步：配乐是写出来的

配乐不是素材库里挑的，是 AI 用 ABC 记谱法写的乐谱：深海段 D 小调，鲸尾出水时升一个全音到 E，钢琴动机三个音，结尾用作声音 logo。
om sound 把乐谱合成成音轨，60 秒约 5 秒跑完，53 个音效，响度 -14.5 LUFS。

第四步：中英双语

英文版不是把中文版翻译一遍。读英文截图才发现，英文界面的润色选项和中文不一样：英文是 Structure / Generate Summary / Find Action Items / Key Points，中文是结构化 / 默认 / 翻译 / 总结。
6 连切按英文界面重做，颜色也跟英文图标走。

踩坑复盘：9 个问题，每个都有解法

1. Node 版本和项目冲突

现象：项目 .nvmrc 锁 Node 20，huashu-motion 要用 22。
解法：每条 om 命令前加 nvm exec 22，不改项目自己的 Node 版本。

2. om check 通过了，画面还是有问题

现象：第一版 0 errors，但抽了 18 帧拼成一张图一看，4 处问题：文字行和下沉的波形交叉、两段文字重叠、回听卡的波形冲出画面右边、笔记卡压住了标题。
notion image
第一版的两处问题：om check 没报错，截帧一看才发现
解法：om still 批量截帧，拼成一张总览图，用眼睛看。
解决不了的：机器能查出框和遮挡，查不出"不好看"。

3. 单帧闪现

现象：om qa 报 36.4 秒有一帧闪现。原因是代码先把卡片设成可见，下一帧才开始从透明淡入，中间漏了一帧全亮。
解法：删掉那行提前显示的代码，让淡入动画自己管可见性。
这种 1/30 秒的问题，人眼正常速度看不出来，但成片里会是一下闪。

4. "静止超过 1 秒"的报警，要人来判断

现象：om qa 标了 12 段"静止 ≥1 秒"。
判断：大部分是阅读停留，比如边录边出字、尾卡。工具只测像素变化，分不清"无聊"和"让人读完"。我们加了缓慢推拉，剩下的按阅读停留保留。

5. 乐谱比片子长 0.43 秒

现象：结尾和弦加了延长记号，音轨跑到 60.43 秒，om sound 报警并强制淡出。
解法：删掉延长记号。
还有一个隐蔽的：乐谱写 K:Dm，后半段升到 E 调时，所有 B 音会被调号自动降半音。改成 K:C，升降号全部手写。

6. 采样包下载失败 8 个

现象：默认配乐是合成音色。om samples build 下载真实钢琴和弦乐，第一次 611 个文件失败 8 个。
解法：再跑一次，自动补齐，最终 611 个、51.3 MB。

7. 英文版的三个排版问题

  • 中文按字拆成 span 做逐字动画，英文空格被吞掉。解法：空格不包 span
  • 黄色卡片上的白字对比度太低。解法：这一张改深棕色字
  • 大标题里 g 的下伸部分碰到副标题。解法：间距从 34px 加到 52px

8. 字体只能在本机渲染

现象：om check 一直报 font-not-shipped。我们用的 PingFang SC 和 SF Pro 是 macOS 系统字体，不能打包分发。
影响：换一台没有这个字体的电脑渲染，字形会变。所以终版 mp4 必须单独存一份，不能指望随时从源码重出。

9. 提交被 gitleaks 拦下

现象：提交源码时，仓库的 gitleaks 钩子报 4 处密钥泄露。查下来是脚手架附带的 GSAP-LICENSE.html，那是 gsap.com 授权页的网页存档，里面有网站自己的 csrfKey 和统计 token。
解法：不跳过钩子，把这个 HTML 加进 .gitignore，保留写着授权网址的 GSAP-LICENSE.txt。
成片 mp4 也没进 git，挂在 GitHub Release 上。git 会永久保留每个版本，mp4 每重出一次就多 15 MB。

逐帧批注：这支片子最值得讲的功能

它是什么

om studio 启动一个本地网页，实时播放你的片子。你按 C，在画面上点一下，写一句话，这条批注就进了 AI 的待办。
AI 那边跑着 om inbox --wait，收到的不只是你那句话。我们第一条批注，AI 实际收到的是这样：
时间、场景、坐标、点中的元素、源码第几行，全都在里面。
AI 再跑一次 om look，拿到那一帧的截图和点击位置的放大图，然后去改代码。
notion image
om look 给 AI 的两张图：批注所在帧，和点击位置的放大

第一性原理：反馈的成本在"定位"，不在"修改"

改一个动画参数，只需要几秒。
贵的是前面那一步：把"那个波浪"翻译成"第 18.55 秒、#recordSheet 里、第 614 行控制的那组竖条"。
逐帧批注能成立，靠的是两个约束：
  • 画面是时间的纯函数。片子里不允许用 Date.now()、不允许无种子的随机数。所以 18.55 秒这个时间戳，永远对应同一帧
  • 每个可指的东西都有 data-om-id。点中的像素 → DOM 元素 → 源码行，这条链是确定的
时间 + 空间 + 对象，三个坐标一起，把自然语言里的歧义消掉了。

用和不用的区别

我们这支片子里有三组波形：深海的海平面波形、录音浮层底部的波形、回听卡的波形。前两组用的是同一个 talk() 函数。
如果我只在聊天框里说"波浪跳得太快"，AI 最自然的做法是改 talk() 本身，三处一起变慢。深海里那段我其实没意见。
用了批注，AI 拿到的是 #recordSheet。我那一下其实点在计时器附近，系统解析出的是整张录音浮层；"底部波浪"是我在文字里写的。位置加文字，范围就收窄到了浮层底部那组竖条。AI 只改了那一行：时间系数从 1.2 降到 0.45。改完它在回复里特意说明"深海里的海平面波形用的是另一套速度，这次没动"。
对比项
文字描述反馈
逐帧批注
时间定位
靠人说"大概 18 秒"
精确到 18.55s
对象定位
靠 AI 猜"波浪"是哪个
直接给 data-om-id 和源码行
改动范围
容易误伤同名元素
只改点中的那一处
可回退
靠 git
每个版本存进 .om/history，om undo 一步回退
结果回执
AI 口头说改了
om done 把改动说明推回 studio
第二条批注是改文案："用笔记生成周报或自定义分析"改成"周报、月报或自定义分析"。AI 没直接照改，先翻了真实截图，确认智能回顾页确实有"月度回顾"入口，才动手。批注给了位置，事实核对还是 AI 自己的事。

它解决不了什么

批注解决的是"改哪里"，不解决"好不好"。节奏是否无聊、配乐是否好听，仍然要人用正常速度看一遍、听一遍。
AI 在交付时也明说了：它听不到声音，只能保证同步、响度曲线和电平。

最后：它还会记住你

片子做完，om learn harvest 会把这次的批注翻出来，让 AI 判断哪些值得记住。
我那句"底部波浪跳得太快"，被记成了一条偏好：UI 里模拟说话的波形，起伏要接近真实说话节奏，主频控制在每秒半次左右。
下一支片子开工前，om learn 会先读到它。
这才是我觉得 AI 做视频最值钱的地方：不是第一版有多好，而是改第二版的成本低到可以随手改。
写 AI，写成长，偶尔写投资。 关注沐风，不定期更新，全是干货。
2026.10.22 14:30 沪·赵巷
 
万般劫难，“静”可保命
独立开发每周复盘：从忙着加功能，到验证用户价值
相关文章