用 Claude 做动画，全网最全攻略：4 条路线、11 种风格、30+ 工具和案例、全部素材来源（💗建议收藏⭐）

Xian | 弦·约 13 分钟阅读

2026年10月22日10月22日

文章封面：用 Claude 做动画，全网最全攻略：4 条路线、11 种风格、30+ 工具和案例、全部素材来源（💗建议收藏⭐）

文章目录

一条 3 分钟的梵高动画：名画在金画框里一笔一笔画出来，旋涡会动，信封会飞，拍卖槌会落下。

没有下载一张图，没有打开剪辑软件，我自己也没写一行代码。画面全是 Claude 写程序“画”出来的。

做完这条，我把市面上用 Claude 做动画的玩法全部扒了一遍：官方工具、开源项目、海外爆款、国内博主的实战、踩坑经验。这篇是全部整理，每个部分都附了能直接点开的链接。

原理：Claude 不画画，它写“画画的程序”
4 条技术路线 + 工具清单
11 种动画风格图鉴（每种附样例图和参考案例）
市面上的爆款案例和博主实战
素材从哪来
提示词怎么写（附模板）
我的 8 步做片法 + 6 条设计原则
踩坑清单 + 开源 skill

01 原理：Claude 不画画，它写“画画的程序”

Sora、可灵这类模型是直接“生成视频画面”。Claude 走的是另一条路：写代码，让代码把每一帧画出来。

一秒视频 = 30 帧 = 30 张网页截图。程序规定每个元素第几帧出现、从哪飞进来、什么时候变色，渲染引擎再把这些画面拼成视频。

好处：

每个像素可控：文字不糊、不乱码，中文也一样
能反复改：“这句晚 0.5 秒出现”“这里换成金色”，改完重新渲染
能批量：换一份脚本，同一套模板出下一期
版权干净：画面是程序画的，不是网上扒的

正因为这样，同一个 Claude 能做出风格完全不同的动画。下面 11 种风格的样例图，全部是 Claude 写代码画的：

02 四条技术路线 + 工具清单

路线 ① 代码生成视频（目前最主流）

Claude 写代码 → 引擎逐帧渲染 → 导出 MP4。

Remotion：用 React 写视频，生态最成熟，GitHub ⭐ 6.6 万官网：https://www.remotion.dev 官方 Agent Skills（教 Claude 写出不出错的动画，⭐ 5,500）：https://github.com/remotion-dev/skills 安装：npx skills add remotion-dev/skills
HyperFrames：HeyGen 2026 年 4 月开源，用普通 HTML + GSAP 写视频，不用懂 React，GitHub ⭐ 6.9 万https://github.com/heygen-com/hyperframes 自带 motion-graphics skill：专做 10 秒左右的动态排版、数字滚动、Logo 片尾、字幕条也有 Claude 官方连接器：https://claude.com/connectors/hyperframes-heygen
Manim：3Blue1Brown 做数学视频的引擎社区版（⭐ 4.2 万）：https://www.manim.community 原版（⭐ 9.5 万）：https://github.com/3b1b/manim 给 Claude 用的 Manim skill（⭐ 1,200）：https://github.com/adithya-s-k/manim_skill
Motion Canvas：适合代码讲解、示意图动画（⭐ 1.9 万）https://github.com/motion-canvas/motion-canvas

路线 ② 网页即动画（不用装任何东西）

Claude Artifacts：在对话里直接生成可交互动画，常用 p5.js（生成艺术）、Three.js（3D）、SVGp5.js：https://p5js.org ｜ Three.js：https://threejs.org ｜ GSAP：https://gsap.com
Anthropic 官方 skills 仓库（⭐ 18 万）：https://github.com/anthropics/skillsalgorithmic-art：用 p5.js 做流场、粒子等生成艺术，带随机种子，可复现 slack-gif-creator：做 Slack 尺寸的动图 GIF canvas-design：做海报、静态视觉
Claude Design：Anthropic 的设计工具，做动态原型，新版本支持导出 MP4官方博客（Claude Design 的设计师怎么用它）：https://claude.com/blog/how-the-product-designer-who-built-claude-design-uses-it-to-explore-ideas-before-building-them 做品牌动效的教程（含透明背景导出的技巧）：https://www.xray.tech/post/build-fluid-on-brand-animations-with-claude-design

路线 ③ 让 Claude 操作专业软件（MCP）

Blender MCP（⭐ 3.2 万）：Claude 直接在 Blender 里搭 3D 场景、调灯光、做动画https://github.com/ahujasid/blender-mcp
After Effects MCP：控制 AE 的合成、特效、表达式https://glama.ai/mcp/servers/davidcasan/MCP-AE
Lottie Creator MCP（LottieFiles 官方）：一句话描述，Claude 一层层搭出 Lottie 动画https://lottiefiles.com/blog/working-with-lottie-animations/your-ai-can-now-control-lottie-creator-heres-what-that-actually-means
text-to-lottie（⭐ 5,600）：Claude Code 直接写出可用的 Lottie 动画文件https://github.com/diffusionstudio/lottie 安装：npx skills add diffusionstudio/lottie

路线 ④ 混合编排

AI 生成素材（数字人、插画）+ Claude 写代码组装成片。我视频里会说话的卡通形象，就是即梦生成的数字人，再由代码让嘴型跟着旁白节奏动。

即梦：https://jimeng.jianying.com ｜可灵：https://klingai.com

03、 11 种动画风格图鉴

每种写了：长什么样、适合做什么、用什么工具、去哪看参考。样例图都是 Claude 写代码画的。

风格 1：产品发布片 / UI 动效

特征：深色渐变、界面卡片 3D 倾斜飞入、光效扫过、快节奏转场
适合：新产品、App 功能、SaaS 发布
工具：Remotion、HyperFrames
参考：这是今年最火的方向。不少创作者用 Claude Code 写出过去要找工作室、花几千到上万美元做的发布片趋势解读 + 在线演示：https://yuv.ai/blog/motion-in-code-claude-launch-films 教程（YouTube）：https://www.youtube.com/watch?v=f393grXJn9E

风格 2：动态排版（Kinetic Typography）

特征：巨型大字、拆字、描边字、遮罩转场，跟着节拍跳
适合：金句、广告、品牌片、歌词视频
工具：HyperFrames（自带 motion-graphics skill）、GSAP
参考：HyperFrames 模板库（有 30 秒卡点品牌片、Logo 片尾）https://open-design.ai/plugins/templates/hyperframes/ 可编辑的动效作品集：https://creativeclaw.co/examples/collections/motion-design/

风格 3：数据信息图

特征：大数字滚动、柱状图生长、折线、环形进度
适合：财报、行业报告、排名、商业分析
工具：Remotion + D3、HyperFrames
参考：CreativeClaw 里的 Editorial Graph、SpaceX Data Explainer 等项目可以直接看源码

风格 4：3Blue1Brown 式数学讲解

特征：黑底网格、单位圆、正弦波、公式变形
适合：数学、物理、算法、AI 原理
工具：Manim
参考：Manim skill：https://github.com/adithya-s-k/manim_skill Hermes Agent 的 manim-video skill（会先规划叙事、再逐个镜头写代码、最后拼接配音）：https://hermes-agent.nousresearch.com/docs/user-guide/skills/bundled/creative/creative-manim-video

风格 5：科普信息图卡片

特征：方格纸底、粗描边卡片、歪贴纸、手绘红圈、大字幕、章节进度条
适合：抖音、视频号、小红书的知识口播
工具：Remotion
参考：国内做得最好的案例之一是 meng shao 的「AI 启蒙小伙伴」：用 Remotion Skills 做系列动画，视频号单条 8 万观看、4 千转发，春节期间涨粉 4000+，他把环境、流程和提示词都公开了（见第 04 部分）

风格 6：艺术笔触 / 名画风

特征：名画在金画框里一笔一笔画出来，背景旋涡缓缓转动，宋体大字配手写签名
适合：艺术史、人文故事、博物馆科普
工具：Remotion + 程序化笔触
参考：这是我自己摸索的做法：用几千根短笔触，按“区域 → 颜色 + 笔触方向”的规则拼成一幅画。整套方法开源在文末的 skill 里

风格 7：生成艺术

特征：噪声流场、粒子、分形，抽象又炫，每次随机种子不同画面就不同
适合：片头、氛围背景、视觉海报、音乐可视化
工具：p5.js、Three.js、Claude Artifacts
参考：Anthropic 官方 algorithmic-art skill：https://github.com/anthropics/skills 用 Claude + p5.js 做寻路算法可视化的实战：https://sankalp.bearblog.dev/creative-coding-with-claude-35-sonnet-artifacts-and-p5js/

风格 8：3D 场景

特征：立体模型、等距城市、镜头环绕、实时光影
适合：产品展示、空间叙事、游戏感画面
工具：Three.js、Blender MCP
参考：Blender MCP 官方演示里做过“守着金币的龙 + 低多边形地牢”“用 HDRI 素材搭海滩”“照着参考图搭场景”https://github.com/ahujasid/blender-mcp 实测评价（能做什么、做不好什么）：https://www.mindstudio.ai/blog/claude-blender-mcp-real-world-performance

风格 9：角色 / 吉祥物动画

特征：矢量小角色眨眼、挥手、弹跳，表情丰富
适合：IP 形象、表情包、App 界面动效、加载动画
工具：SVG + GSAP、Lottie
参考：Codrops：逐帧复刻 Claude 吉祥物动画的 SVG + GSAP 教程：https://tympanus.net/codrops/?p=114688 ClaudeLog：把 SVG 拆成部件，Claude 几乎不用人工干预就做出 20 多个动效：https://claudelog.com/inventions/vibe-animating text-to-lottie：https://github.com/diffusionstudio/lottie

风格 10：纸质拼贴 / 复古

特征：纸张纹理、信件、邮票、印章、老照片、价签
适合：历史、怀旧、悬疑故事、人物传记
工具：Remotion + CSS 纹理
参考：我的梵高动画里大量用了这种风格：写给弟弟的信、邻居的请愿书、“失败”印章、400 法郎吊牌

风格 11：白板手绘 / 简笔

特征：白底、马克笔线条一笔笔描出来、手写字、荧光笔划重点
适合：教学、流程讲解、知识卡片
工具：SVG 描边动画、Canvas
参考：宝玉分享过让 Claude Code 用 JS + Canvas 做手绘卡通风教学视频的提示词，配 Gemini 语音（见第 04 部分）

一个心得：别只用一种风格。我的梵高是 6 + 3 + 10 + 11 的混合，所以看起来不像模板。

04 市面上的爆款案例和博主实战

海外

Remotion 官方演示：2026 年 1 月，Remotion 团队在 X 上发了一段用 Claude Code 一句话生成完整动画视频的演示，据多家媒体报道播放达数百万，带火了整个“代码做视频”的玩法
YouTube 实战：只用 Claude Code + Remotion 做 Vox 风格解说动画https://www.youtube.com/watch?v=7wuYBfE131U
Claude Code + Remotion 实测：擅长什么、真正要花多少功夫（很实在的复盘）https://www.rescroll.ai/blog/claude-code-remotion-motion-graphics-2026
HeyGen 官方：用 HyperFrames + Claude Code 做产品宣传片的示例https://developers.heygen.com/motion-graphics.md

国内

meng shao：Remotion Skills 做视频的完整过程和提示词账号「AI 启蒙小伙伴」，视频号单条 8 万观看、4 千转发，春节涨粉 4000+ 用的是 remotion-best-practices 这个 skill 每条结构：Hook → Why → Process → Essence → Tips → End Card，每段 4–8 秒，总长 1 分钟以内【嵌入帖子】https://x.com/shao__meng/status/2028815560688169093
宝玉：用 Claude Code 做教学视频的提示词介绍了 Remotion 和 HyperFrames 两个工具，示例提示词是用 JS + Canvas 画手绘卡通风动效，再配 Gemini 语音【嵌入帖子】https://x.com/dotey/status/2105181393638531536
知乎：《一天一个 Claude Code 玩法：Remotion，被“神话”的 AI 视频工具》（冷静看待能力边界）https://zhuanlan.zhihu.com/p/2001357893115584706
繁体中文教程：Claude + Remotion 一句话生成 MP4，含提示词范本和常见错误https://pcrookie.com/claude-remotion-motion-graphics-video-guide-2026/

我自己的 6 个实战

同一套方法，换题材就换风格：艺术笔触（梵高）、长卷叙事（清明上河图横版）、霓虹舞台（网红已死）、宋韵中国风（清明上河图竖版）、信息卡片（四家 AI 助理）、3D 科普（球球科普厅）。

05 素材从哪来

① 让代码画（零版权） SVG 矢量图、程序化笔触、粒子、几何图形。上面 11 张样例图和我的梵高动画全是这么来的。缺点是偏风格化，做不了照片级写实。

② 公有领域名画、老照片（真实、高清、免费可商用）

维基共享资源：https://commons.wikimedia.org
大都会艺术博物馆（藏品库勾选 Open Access）：https://www.metmuseum.org/art/collection
芝加哥艺术博物馆（筛选 Public Domain）：https://www.artic.edu/collection
荷兰国立博物馆（梵高、伦勃朗高清图）：https://www.rijksmuseum.nl/en

注意：要确认是“公有领域 / CC0”，不是“网上能看到”就能用。

③ AI 生成矢量 / 图片 / 数字人

LottieFiles 的 Prompt to Vector：文字生成可编辑的分层矢量图，直接能做动画：https://docs.lottiefiles.com/en/creator/13_ai-tools/prompt-to-vector
即梦、可灵、Midjourney、GPT 生图：什么都能画，但同一角色前后不一致，商用前看平台条款

④ 配音

微软 Edge 语音（免费，我用的“晓晓”温柔女声，⭐ 1.2 万）：https://github.com/rany2/edge-tts
配完用 Whisper 把声音转回文字逐字核对，抓读错的字：https://github.com/openai/whisper

⑤ 音效和音乐

Pixabay 音效（免版权）：https://pixabay.com/sound-effects/
Freesound（注意每个文件的授权）：https://freesound.org
也可以让 Claude 用代码合成：盖章、翻页、竖琴，我的音效库就是这么来的

⑥ 字体 系统字体不一定能商用，正式发布用开源的思源宋体 / 黑体：https://github.com/adobe-fonts/source-han-serif

06 提示词怎么写（附模板）

看了一圈国内外教程，好用的提示词都有这 5 个要素：背景、内容、视觉风格、时间节奏、约束条件。而且都建议分步来：先确认分镜脚本，再做动画，最后加配音和音效，不要一次让它生成完整作品。

可以直接复制的模板：

帮我用 Remotion 做一条 [时长] 秒、[1920×1080 横版 / 1080×1920 竖版] 的动画视频。【主题】[一句话说清楚讲什么] 【观众】[谁看、发在哪个平台] 【结构】开场 5 秒抛出反差 → [中间几个要点] → 结尾一句金句 + 互动提问【视觉风格】[风格名，比如：艺术笔触 / 科普卡片 / 产品发布片]；主色 [颜色]；字体 [宋体 / 黑体] 【节奏】每句台词至少一个画面变化，纯文字静止不超过 2 秒；高潮画面多停 2 秒【约束】中文不能出错；数字写成读音；重要内容不要放在画面最底部（会被字幕挡住）先给我分镜脚本，我确认后再写代码。