animate 教程：在 Claude Code 里做单文件程序化短片并导出 MP4（2026）

推荐链接（推广）：数字严选大约 15 分钟AI 视频Opus 5.5 做视频Claude Code 视频animate程序化动画讲解视频

阅读说明

仓库信息查阅日期：2026-10-23；星数、更新时间会变，以仓库页面为准；本文不写价格。

一句话结论

cth9191/animateopen in new window 是给 Claude Code 的程序化动画技能，插件名也叫 animate。一条片子是单个 <canvas>：逐帧用代码绘制和配乐，再用 Playwright 的 Chromium 与 ffmpeg 导出 MP4。

适合做讲解、编年史和小故事的人。可以从 7 种内置画风里选，也可以交参考素材做出新画风。技能会先请你批准故事、画面和分镜，然后才开始做动画。

仓库信息

截至 2026-10-23，星数、最近推送和创建时间取自仓库元数据，日期为北京时间。

仓库星数最近推送（北京时间）许可创建时间
cth9191/animateopen in new window9222026-10-06MITopen in new window2026-10-04

仓库描述是：“Procedural animation in any style for Claude Code: short single-file canvas videos with story, look and storyboard check-ins. 7 built-in styles or one matched from your references, your own music (beat-mapped), real product screenshots, every format from one piece.”

LICENSEopen in new window 为 MIT License，版权行是 Copyright (c) 2026 cth9191。许可允许在保留版权声明和许可声明的前提下使用、修改和分发，软件不附保证。插件清单 plugin.jsonopen in new window 写的版本是 0.4.0，许可同样是 MIT。

它能做什么样的视频

README 的范围是短动画：讲解、编年史、小故事。画面和声音都在代码里逐帧生成，再渲染成 MP4。一条片子在 piece.json 里选定一种风格。仓库 README 举的例子是 "style": "riso"。下表其余的 style 取值是 styles/README.mdopen in new window 里的目录名，写进同一个字段。

风格styleREADME 写的画面
cut papercut-paper撕纸、drop shadow、蜡笔、图案，以及有脸的角色
crosshatchcrosshatchon 2s 的素描墨线（boil）、排线和铅笔阴影、暖色纸面，以及海军蓝的 “inside the machine”
risoriso三色孔版印刷：各自角度的半调网屏、叠印、套准偏移
sketchbooksketchbook速写本上的石墨，加一个强调色，手写字
mathmathmanim 式数学讲解：黑底、坐标轴和函数图、按颜色区分的变量、平滑缓动
pixelpixel低分辨率时代：按真实分辨率绘制，最近邻放大，点阵字体
isometricisometric等轴测线稿：恒定细线、白色的面挡住后面、圆角厚板、一个深色强调；浅底或深底
你自己的画风保存为 styles/<name>/交一段视频、若干静帧或一个网页。技能测量调色、线重、质感、运动和剪辑节奏，用 tools/compare.mjs 把 1–2 张匹配帧和参考并排，你点头之后存进项目

styles/README.mdopen in new window 为每种内置风格写了运动和已完成范围：cut-paper、crosshatch、riso、sketchbook 为 on 2s；math 为 on 1s；isometric 为 on 1s 并等弹簧停稳；pixel 为 on 1s 或 on 2s。cut-paper 有一条 60 秒、15 个世界、13 次变形的历史片；crosshatch 有若干短讲解；riso 有一条 6 秒的对帧习作；sketchbook 有一条 15 秒讲解；math 有两条短数学讲解；pixel 有一条固定舞台的 AI 视频史；isometric 目前是用新画风流程做出的 demo。自定义画风在该文件里记了木刻和霓虹的试跑。

同一条片子可以排出 9:16、1:1、4:5 和 16:9。README 的原文是 laid out for each shape, not cropped。SKILL.mdopen in new window 写明不要把一条 9:16 成片裁成 16:9。画幅写在 piece.json 的 "formats" 里，第一个是主画幅。

grammar/FORMATS.mdopen in new window 把短片结构收成 8 种。格式由情节选定。intake.mdopen in new window 写明这件事由技能决定，并在故事确认时说出来，供你否决。

编号结构文件里的状态
F1 Machine一个物件穿过若干站点，镜头在同一张大图上移动studied, not yet built with this kit
F2 Chronology编年，各段用形状变形接上proven。一部固定舞台的 AI 视频史，以及 60 秒 cut-paper 的 examples/history-of-ai
F3 Call → catalogue提出问题，回答是一份目录studied, not yet built with this kit
F4 Mission目标加助手，在节拍上硬切proven。一条 32 秒的 Claude Code 截止日故事
F5 Fixed-hero journey主角留在画面上，世界在换proven。若干短讲解
F6 Process loop先看到成品，回到空白，再按制作步骤长出来studied, not yet built with this kit
F7 Variation reel同一主体，每秒换一种画法studied, not yet built with this kit
F8 Trailer先写主张，再用画面证明。标为 provisional只研究过一个例子，按草图对待

README 还写了这些可以一并放进片子里的东西：

  • 旁白。技能写稿，每一句一段声音，来自 ElevenLabs 连接器或你自己的录音。本机用 faster-whisper 听每个词的时间，画面跟着词走。重录会重新对时间。
  • 音乐。给出音轨时，测出速度、小节、强拍和 drop，切点落在歌曲的拍上，高潮放在最响的一下。也可以在代码里写配乐。
  • 真实产品。截你的网站，或使用你给的标志文件，再把真实界面放进所选画风里。
  • 长片可以按场景拆给多个 agent，再由 build 拼起来。

仓库自带一条完整示例：plugins/animate/skills/animate/examples/history-of-ai/。README 写它是 60 秒 cut-paper：从 Turing 的 “Can machines think?”（1950）到 Claude Code（2025），共 15 个时代；一个橙色小 “spark” 每个时代多一根射线；13 次形状变形；高潮处一次硬切；配乐是合成的。

intake.mdopen in new window 写：问题里的时长建议是社交短片 20–30 秒，编年史或讲解 45–60 秒。用户说 “just make it”，或有的问题没答时，默认是 9:16、1080×1920、24 fps、120 BPM（八分音符正好 6 帧）、30–60 秒、代码合成的配乐、不放素材、拿不准就用 cut paper、用该风格自己的主角，格式按情节从 FORMATS.md 里选。

README 把每条片子都要遵守的规则概括成：一个不变的常量、颜色只表示一件事、高潮前留静音并且最响落在高潮上、结尾是开头变过之后的样子。

README 标为 Coming、尚未作为风格发布的是 WebGL 动效（ray-marched 3D、子帧运动模糊、辉光）。导出和复查已经能在 GPU 上跑 WebGL 片子，并且会在只有软件渲染时发出警告。

需要准备什么

README 写明的环境：

旁白还要 Python 和 faster-whisper，用来听词的时间。SKILL.md 写的安装命令是：

pip install faster-whisper

没有这个包时，词的时间用估计值。ElevenLabs 是可选项：在 Claude 的 Settings → Connectors 里连接，OAuth 登录。SKILL.md 写明这条路径 no API key。不用连接器时，改为一句一个录音文件。

自己的音乐是 WAV、MP3 或 M4A。产品画面可以是你指出的网页，或你放进 assets/ 的标志（PNG、SVG、JPG、WEBP）。

SKILL.md 要求技能先检查 Node、Playwright Chromium 和 ffmpeg。缺任何一项时，先给出安装命令并停下来。

安装与第一次运行

  1. 安装 Playwright，并安装 Chromium。README 的命令是：
npm i -g playwright && npx playwright install chromium
  1. 作为插件安装。README 的命令是：
/plugin marketplace add cth9191/animate
/plugin install animate@animate

  1. 也可以手动复制技能目录：plugins/animate/skills/animate/ → ~/.claude/skills/animate/。

  2. 装好之后，第一次出片用下一节的 /animate。若当前目录是仓库根目录，README 给的示例构建命令是：

node plugins/animate/skills/animate/tools/build.mjs plugins/animate/skills/animate/examples/history-of-ai

README 写构建之后再导出。导出命令在下面的工具列表里，作品目录换成你的片子目录。

  1. 也可以自己跑工具。README 先把 SKILL 指到技能目录（手动复制的位置，或插件的安装路径），然后是这些命令：
SKILL=~/.claude/skills/animate            # or the plugin's install path
node $SKILL/tools/build.mjs pieces/my-piece
node $SKILL/tools/tile.mjs pieces/my-piece tile.png 24 48 96
node $SKILL/tools/still.mjs pieces/my-piece 2.5,9,14 frames.png --scale 0.5
node $SKILL/tools/storyboard.mjs pieces/my-piece
node $SKILL/tools/beats.mjs pieces/my-piece/audio/track.wav pieces/my-piece --start 12
node $SKILL/tools/capture.mjs https://my-product.com pieces/my-piece/assets/home.png
node $SKILL/tools/voice.mjs pieces/my-piece            # voice/script.json + one take per line -> voice.wav, voice.json (--scratch: a timing voice)
node $SKILL/tools/export.mjs pieces/my-piece --share --formats 9:16,1:1,16:9
node $SKILL/tools/review.mjs pieces/my-piece
node $SKILL/tools/measure/refs.mjs references/my-look/
node $SKILL/tools/compare.mjs references/my-look/a.png pieces/my-piece 2.5 compare.png --auto-trim

tools/build.mjs 把作品、kit 和风格收成一个自包含的 index.html。用浏览器打开它即可预览：点击可听配乐，地址后加 ?t=12.5 会停在那一帧。每种风格的 demo 用同一方式构建，README 的例子是 node $SKILL/tools/build.mjs $SKILL/styles/riso/demo。

作品建在你的项目里的 pieces/<name>/。你做出的新画风建在项目的 styles/<name>/。

在 Claude Code 里用 Opus 5.5 驱动它

在 Claude Code 里用 /model 选 Opus 5.5，详见 Claude Opus 5.5。

README 的用法是直接发送 /animate，后面写题材和画风或参考：

/animate a 45-second history of the bicycle, cut paper
/animate how a hash map works, in the math style
/animate a short about our API in the style of these screenshots: ./refs/
/animate a 20s launch reel for https://my-product.com, cut to ./audio/song.mp3, vertical and square
/animate a narrated 45s explainer of how DNS works, math style, 16:9, voice from ElevenLabs

README 把流程写成这几步。前三步是为了在花时间做动画之前，先让你批准三件比较省事的东西。

步骤你看到的你决定
0. Intake若干问题：题材、画幅、旁白、画风、主角、你的音乐、你的产品，以及风格画廊回答、一种风格，或你的参考
1. Story check它选定的格式，和一张带编号的节拍表；事实做过网页核对批准，或修改节拍
2. Look check2–4 张全尺寸风格帧。新画风则与你的参考并排逐帧点头
3. Storyboard每一拍的关键帧，带声音和进入下一拍的过渡按分镜编号同意或否决
4. Build按已批准的分镜做动画、渲染、复查—
5. Delivery成片，以及测量：切点是否在节拍网格上、故事弧响度、主角锚定、静音之后的最响瞬间、旁白节奏写备注，然后进入一轮修改

SKILL.md 写明：分镜批准之前不要开始做动画。事实用网页检索核对，并连同出处写进 brief。完成的标准是 tools/review.mjs 通过，并且看过接触表。提问用 AskUserQuestion，推荐项放在第一位。格式由技能按情节选定，在故事确认时说明，你可以否决；两种格式都说得通时，优先选已经 proven 的那一种并说明。

旁白是可选项，对应 intake 的第 3 问。启用之后，时间以口播为准。SKILL.md 的步骤是：

  1. 把稿写到 pieces/<name>/voice/script.json。一句一拍。数字和名字按要朗读的方式写。语速不超过 3.5 词/秒。
  2. 正式声音还没有时，可以先跑 node tools/voice.mjs pieces/<name> --scratch，用操作系统自带的语音对齐时间。这条草稿不要交出去。
  3. 正式素材是一句一个文件，存成 voice/<id>.mp3。ElevenLabs 连接器可用时：先找 2–3 个合适的叙述声音，每种先生成一句让你选，再用选定的声音和模型把每一句各生成一次，把下载链接里的文件存进 voice/。会话中途才加上的连接器，工具可能要重启应用之后才出现。另一条路是你自己的录音。
  4. node tools/voice.mjs pieces/<name> 得到 voice/voice.wav 和 voice.json。词的起止由本机 faster-whisper 从音频里听出来。
  5. 在 piece.json 里写 "voice": { "file": "voice/voice.wav", "music": -12 }。导出时人声叠在配乐上，配乐按 music 的分贝值放置（示例是 -12），说话时再压低，整体到 −14 LUFS。

没有你的音轨时，配乐在代码里按 120 BPM 的网格写。有音轨时，放到 pieces/<name>/audio/track.wav，并在 piece.json 里写 "music": { "file": "audio/track.wav", "start": 12.0, "gain": 0, "fade": 0.5 }，start 是从曲子的哪一秒开始用。然后用 README 里的 beats.mjs 画出节拍。浏览器里的预览仍然播放代码配乐；音轨在导出文件里。

题材是产品时，用 README 里的 capture.mjs 截你自己的页面。SKILL.md 写明截取之前先问，并且只动画真实界面，不要把画出来的假界面当成产品本身。

示例提示词（按 README 写明的用法改写，不是仓库原文）：

/animate 用 cut paper 做一条 45 秒的自行车简史

/animate 用 math 风格做一条有旁白的 45 秒 DNS 讲解，画幅 16:9，声音用 ElevenLabs

限制与已知问题

SKILL.md 写明的限制：

  • 成片是一个 index.html。代码里不放图片、音频、视频文件，不用 data: URI，不写 URL，不用网络字体。两条例外都来自用户自己：assets/ 里的截图和标志，以及导出时才混入的音乐。tools/build.mjs 会检查这一点。
  • 随机只用带种子的 RNG(...)，以及 boil 用的索引 B。不用 Math.random()，也不用 wall-clock 时间。
  • 参考素材留在本机。不要提交，不要复制其中的代码。除非用户要求署名，不要在发布的成片里写参考作品的作者名。
  • 不要从未被用户指出的网站抓声音，也不要在没有权利人同意时克隆声音。
  • 运动模糊是 export.mjs --blur 4，只给 on 1s 的风格（math、isometric）。on 2s 的手绘风格导出时会警告。
  • 改旁白文件或改某一句的文字之后要重跑 voice.mjs 并重新构建。改过的词可能让原来指向它的画面提示对不上。
  • WebGL 动效在 SKILL.md 里写明尚未作为风格发布。F1、F3、F6、F7 在 FORMATS.md 里是 studied, not yet built with this kit。F8 按草图对待。isometric 目前只有 demo。从新参考做出来的画风，在它撑起一整条片子之前都算新的。

截至 2026-10-23，仓库有 4 个 open issue，其中三条是：

  • 仓库 issue #3：score-tail.js 的限幅器是 sample-peak，因此 AAC 导出的电平会落在 review 所打印的 -1 dBTP 目标之上。
  • 仓库 issue #2：crosshatch 的 inkTag 和 inkCaption 使用固定的 9:16 高度，因此在 1:1 和 16:9 上 caption 会离开画面。
  • 仓库 issue #1：kit/score-head.js 声明了全局名 NOTE，而 styles/README.md 的保留名列表里没有它。

常见问题

能不能用 Codex 或 Cursor？

README 未写明 Codex 或 Cursor。它写的安装方式是 Claude Code 插件，或把技能目录复制到 ~/.claude/skills/animate/。

成品是 HTML 还是 MP4？怎么导出？

两边都有。tools/build.mjs 产出一个自包含的 index.html，用浏览器打开即可预览。导出命令是 README 里的：

node $SKILL/tools/export.mjs pieces/my-piece --share --formats 9:16,1:1,16:9

SKILL.md 写 --share 会得到帧、audio.wav、分轨、renders/final.mp4 和 renders/share.mp4。多种画幅时，主画幅是 renders/final.mp4，其余是 final-<w>x<h>.mp4。交付时交 renders/share.mp4。带了用户音轨时，浏览器预览仍是代码配乐，音轨在导出结果里。复查用 node $SKILL/tools/review.mjs pieces/my-piece；某一种画幅再加 --format，例如 --format 16:9。

代码能不能商用？

仓库代码是 MIT，条款见上面的许可说明：可以在保留版权声明和许可声明的前提下使用、修改和分发，软件不附保证。README 未写明用技能做出的成片归谁。你提供的音乐、网站截图和录音不在这份 MIT 里。

要不要 API key？支持中文旁白吗？

README 的安装要求里没有 API key。渲染走本机的 Playwright、Chromium 和 ffmpeg。旁白的词时间走本机的 faster-whisper。ElevenLabs 那条路在 SKILL.md 里写的是 Settings → Connectors 的 OAuth 登录，并写明 no API key。用自己的录音则不经过这个连接器。

中文字幕和中文配音 README 未写明。旁白稿由技能来写，数字和名字按朗读方式书写。画面用本机系统字体，并为 Windows、macOS、Linux 准备了回退。

相关阅读

参考来源

上次编辑于:
贡献者: Masoooon
小苔藓 AI 指南 · 数字严选内容站
Copyright © 2026 数字严选