huashu-motion README

The project's README from github.com/alchaincyf/huashu-motion. As one markdown file: README.md.

简体中文 | English

huashu-motion发布片开场:一整面墙的片子,说一句,出一支片

huashu-motion

「一键直出商业级产品宣传片。」

License: MIT Agent Skills Runtime

让你的agent做动画、作曲,指着画面改。

跟Claude Code、Codex这些agent说一句「给我的产品做个30秒的发布片」,
它会先读你的产品,给你三个方向挑,写出整支片子,自己写谱配乐,
然后在浏览器里打开一个编辑器等你。哪里不满意,在画面上点一下,写下要改什么,它就只改那一处。

npx skills add alchaincyf/huashu-motion

看效果 · 安装 · 能做什么 · 怎么做到的 · 背后的故事


看效果

这篇README里的每一段动画都是huashu-motion做的。上面那段取自它给自己做的53秒发布片,👉 下载完整发布片(MP4,带声音),下面Grok Bot、huashu-design、DeepSeek这几支的完整版也在同一个页面。

指着画面改

在编辑器里按C,点中开场画面,写下「第一帧开场的效果我觉得很差,还不如核心聚焦在typing呢」,agent接单改完,预览停在原处刷新

按C,在画面上点一下,写下要改什么。评论发过去的时候带着时间点、场景、点中的元素和它在源码里的位置,agent先把那一帧和你点的那一小块截图放大看一眼,再只改那一处,改完回一句人话,预览停在原来的位置刷新。每一版都留着,⌘Z随时撤回;标题、数字、颜色、停留时长这些会变成编辑器右边的输入框,自己改,不用等agent。

(这段里的编辑器和终端是照真实界面重建的,代码细节是示意;评论是真实提过的意见。)

先写谱,再拍片

agent写的ABC乐谱变成五线谱往前走,红色场景标记落在哪一拍,画面就在哪一拍切

做发布片用的是作曲家模式:agent按节奏单先写一份谱(ABC记谱法,纯文本的乐谱),谱里的标记对齐每个场景,再由三角钢琴、弦乐和鼓组的采样演奏出来(真乐器采样要先跑一次om samples build,不跑就用合成音色);画面上每个东西落地的那一帧,再配一个音效。配乐全部在本机现场生成,不调用任何收费接口。

一天,二十支

16个镜头来自七支不同的片子,按拍子快切

16个镜头,来自同一天做的七支片子,按拍子切。

Grok Bot粉丝片:Sending to Chief…的气泡钉住不动,背后每个agent各占一屏颜色,最后汇成八宫格

Grok Bot(粉丝自制,非官方)· 30秒:傍晚交代任务,夜里几个agent各干各的,早上7点手机上收到汇报。这段是汇报一张张送往Chief of Staff的那几拍。

huashu-design宣传片:一句「给社区旧书店做一份众筹PPT」钉在画面中间,背后的风格按拍子一格一格地换
huashu-design 3.0 · 一句提示词钉住不动,背后的风格按拍子换
小猫补光灯Pro竖屏片:八种补光色,一拍换一种
小猫补光灯Pro · 八种补光色,一拍换一种

不依赖Opus:DeepSeek V4.1 Flash也能做

DeepSeek V4.1 Flash做的动效片:鲸鱼logo、MOTION、MASK、GLITCH,一个圆点贯穿全片

这支22秒的动效片,是把Claude Code背后的模型换成DeepSeek V4.1 Flash(1017版)做的。中间我给了三轮意见(比如加上DeepSeek的鲸鱼logo、删掉几个镜头),带配乐和音效,前后不到半小时,按当时的价格花了1块9毛5(缓存命中率99.4%)。统一的配色、贯穿全片的那颗圆点、卡在124BPM上的配乐,是skill带出来的,我一句都没提过。方法写进了skill,便宜的模型也能拍出像样的片子。


安装

方式一:跟你的agent说(推荐)

帮我安装huashu-motion这个skill(github.com/alchaincyf/huashu-motion),装好后跑一遍demo

方式二:一行命令

npx skills add alchaincyf/huashu-motion

skills会认出你在用的agent,把skill放进对应目录;要指定的话加-a claude-code、-a codex等参数。

Claude Code、Codex、WorkBuddy、Grok Bot、Muse、Dots等产品都能跑;它遵循Agent Skills协议,支持skill的agent都能装。

方式三:克隆整个仓库

展开查看
git clone https://github.com/alchaincyf/huashu-motion.git
ln -s "$PWD/huashu-motion/skills/huashu-motion" ~/.claude/skills/huashu-motion   # Codex换成~/.codex/skills/

skill里的bin/om会直接调用仓库里的命令行工具,改仓库就是改skill,本机只有一份。

需要什么

缺什么跑om doctor就知道,这些都可以直接让agent帮你装。目前只在macOS上实测过。Codex的沙箱会拦本地预览和浏览器,遇到时手动批准一下。


能做什么

装好以后,直接跟agent说:

你说 它做
「用huashu-motion给我的产品做一支30秒的发布片,官网是xxx.com」 先读产品,出三个方向的关键帧给你挑,写节奏单,再写片、作曲配乐,打开编辑器等你
「把data/funnel.csv做成30秒解说,讲清楚为什么注册率翻倍了」 按数据讲故事:先轴、后数据、只标一件事,数字变成可以直接改的输入框
「做一支发布片,要口播,用我自己的录音:voice.m4a」 逐字对齐,画面落在说到的那个词上,自动出字幕,配乐在说话时让位
「这条口播视频加个包装」 名字条、数字卡、关键词花字、章节卡,导出带透明通道的叠层,直接拖进剪映或Premiere
「改成竖屏」 复制一份1080×1920的版本,重新排版的活儿进收件箱,接着改
「导出GIF」「要透明底」「做成网页分享」 MP4、MOV(透明)、WebM、GIF;或者导出一个带播放器和源码的分享页

开工前,它会先读你以前的偏好和过去片子留下的经验;每支片子做完,再把你这次说过的话、在编辑器里提的评论收一遍,值得留下的记下来。你的偏好只存在你自己电脑上。


怎么做到的

一支片子就是一个index.html

画面用代码写,GSAP、Canvas、Three.js、SVG,浏览器能画的都能用;不调用视频生成模型,每一帧只由代码和时间决定。没有私有格式,片子就是一个网页,带走就能用。

你的agent ──写──▶ my-film/index.html ◀──盯着── om studio(浏览器里的编辑器)
    ▲                                              │
    └── om inbox --wait ◀── .om/inbox.jsonl ◀── 你在画面上点一下、写一句

导演规则,不是模板

skill最大的一块是导演方法:先读产品、找出它的气质,再选片子的结构和运动语言。这些规则来自实测,不是拍脑袋:

颜色也量过:顶级发布片的颜色几乎都是找来的(品牌色、产品外壳和界面、实拍里的光),所以三个方向先从产品里找颜色,om swatch把色板和对比度摆出来看。

声音是片子的一半

自己的渲染引擎

渲染、截帧、检查都直接驱动你电脑上的Chrome:按CPU核数开几个浏览器同时渲染(默认最多8个),配乐和画面并行编码,配乐没改就直接复用。一支30秒的片子,在我这台14核的Mac上大约12–15秒渲完;加运动模糊大约1到1.5分钟。

交付前有人挑错

常用命令

平时都是agent在敲,想自己动手也可以:

命令 做什么
om new · om templates 新建项目,可以从10个模板起步
om studio 编辑器:实时预览、场景条、直接改值、在画面上留评论
om inbox --wait · om look · om done agent那一侧:接下一条评论、看你点的位置、回报改了什么
om sound · om voice · om samples 配乐和音效、口播、真乐器采样包
om check · om qa · om still 渲染前检查、成片检查、任意时刻截一帧
om render · om export html · om fork 导出、分享页、换画幅
om learn · om undo · om doctor 经验、撤回、环境检查

里面有什么

数量
运动语言(每种写清楚它在说什么、适合什么、怎么做) 20种,skills/huashu-motion/references/library/
起步模板(发布会、财经图表、动态文字、白板、Vox拼贴、3Blue1Brown、Kurzgesagt、口播包装……) 10个,templates/
音效 23种
兜底配乐方向 12类产品 × 3种
示范谱 3份,skills/huashu-motion/references/scores/
字体(中文500–900字重、衬线、展示字体) 27款,fonts/
方法文档(导演、节奏、颜色、声音、口播、产品演示、验收……) skills/huashu-motion/references/
huashu-motion/
├── skills/huashu-motion/   # skill本体:SKILL.md、方法文档、运动语言库、示范谱、经验
├── cli/                    # om命令行:新建、编辑器、收件箱、配乐、口播、检查、渲染、导出
├── runtime/                # 片子里用的OM.*小工具,和逐帧渲染的引擎
├── studio/                 # 浏览器里的编辑器
├── templates/              # 10个起步模板
├── fonts/                  # 随附的开源字体
├── examples/               # 样片(om demo打开的那支)
└── test/                   # 测试

诚实边界


背后的故事

2026年10月8号,Anthropic发布了Claude Motion,让Claude用代码把报告、图表、产品讲解做成短动画,可以指着画面改,发布时只在Team和Enterprise上beta。

今年4月Claude Design出来的时候,我把它的核心能力逆向成了skill,就是后来的huashu-design。Motion发布以后,我让Claude Code开工,要求就一句:

我们的skill需要能够完整复刻claude motion的能力,并且要强很多!

第一天做出来的东西,我看着都很无聊:编辑器、版本管理、一百多项测试都有了,一个19秒的3D城市样片,运镜很平稳,也就代表着很平庸。让Claude自己把项目审一遍,它的结论是:做出了一个很会证明自己没撒谎的工程,却还没有一个让人想转发的作品。当天推倒重来。

后来真正花时间的,是让片子好看:去量真实的发布片,给配乐提「电影级别」的要求,把每一次「不酷」「无聊」「字体难看」都变成规则写回skill。最后它给自己做了一支发布片,就是这篇README最上面那段。


致谢


关于作者

花叔 Huashu — AI Native Coder,独立开发者,代表作:小猫补光灯(AppStore 付费榜 Top1)

🌐 官网 bookai.top · huasheng.ai
𝕏 Twitter @AlchainHust
📺 B站 花叔v
▶️ YouTube @Alchain
📕 小红书 花叔
💬 公众号 微信搜「花叔」
关注花叔:公众号花叔、B站花叔v、小红书花叔三个二维码

许可证

代码和文档:MIT。随便用,随便改,随便造。

随附的第三方部分保留各自的许可:GSAP(GSAP Standard License)、字体(SIL OFL 1.1),见THIRD_PARTY.md。

例外:「豆子花叔」角色(runtime/clip/lib/toon.js里的角色绘制,以及它在storytime模板和示范片里的形象)是花叔的卡通形象,只用于本项目的示范,不随MIT授权用于其他用途。


女娲 造Skill。huashu-design 做设计。艺术动画 让画动起来。huashu-motion 让你的agent拍发布片。

MIT License © 花叔 Huashu


作者的其他项目 · also by 花叔

FanBox · Coding Agent 的驾驶舱

huashu-motion (alchaincyf/huashu-motion)

coding-agent
Searching Database…

What is this?huashu-motion is an Agent Skill that lets coding agents like Claude Code or Codex turn one sentence ('make my product a 30-second launch video') into a full commercial-grade video: the agent researches the product, writes the script and an original score, renders the film, then opens a browser editor so you can click on any frame and ask for a change.
Is this a standalone video editor or something that plugs into my coding agent?It's a skill package following the Agent Skills protocol, not a standalone app — it installs into agents such as Claude Code, Codex, Grok Bot, Muse and Dots, and its bundled bin/om CLI does the actual rendering and compositing.
What do I need installed before trying it?Node 22 or newer, and a Chrome/Chromium/Edge browser already on your machine for frame capture and export (no separate renderer is downloaded); FFmpeg is required for exporting video and mixing audio. Real instrument samples (~55MB) and Kokoro/whisper-cli for voiceover are optional extras.
Any catches before I rely on this?It's only been tested on macOS so far, and Codex's sandbox blocks local preview and browser access, requiring manual approval; it can't generate real actors or live footage since every frame is code-drawn, and the agent can only judge audio by waveforms and spectrograms — you still have to listen yourself.
Does it rely on a paid video-generation AI model?No — every frame is drawn live in the browser with code (GSAP, Canvas, Three.js, SVG) based on time, and the music is performed locally from real instrument samples, so no paid generation API is called.
How does the point-and-click editing actually work?Press C and click anywhere on the frame; the comment is sent with the timestamp, scene, element and its source-code location, the agent zooms into that exact spot before editing, and only that one thing changes while every version stays undoable with Cmd+Z.
Can I use a cheaper model than Claude Opus with this skill?Yes — a full launch video was made by swapping in DeepSeek V4.1 Flash instead of Opus, cost about 1.95 yuan with a 99.4% cache-hit rate, and the skill's style rules still held without extra prompting.
What's inside the skill besides the renderer?20 documented motion-language styles distilled from 142 real launch videos, 10 starter templates, 23 sound effects, 12 fallback music directions, 3 annotated example scores, and 27 bundled fonts.
Creator
alchaincyf
Size
39.1 MB
Stars
905
Age
2d
Commits · 90 Days