📝 摘要 #

本文系统梳理了「用 Claude 做动画」的完整方法论：核心不是让模型直接生成视频画面（如 Sora、可灵），而是让 Claude 写代码、由渲染引擎逐帧画出每一帧。作者以此方式独立完成了一条 3 分钟梵高主题动画，未下载素材、未开剪辑软件、未手写代码。文章给出了 4 条技术路线（代码生成视频、网页即动画、MCP 操作专业软件、混合编排）的完整工具清单，11 种动画风格的特征/适用场景/工具/参考，以及选题、脚本、配音、视觉、质检、多平台出片的 8 步制作流程和 6 条"让动画看起来很贵"的设计原则。

核心概念： Claude 不画画，它写"画画的程序"——一秒视频等于 30 帧网页截图，程序规定每个元素第几帧出现、从哪飞入、何时变色。这带来像素级可控（中文字不糊）、可反复微调、可模板批量复用、版权干净四大优势。

关键技术栈 / 关键要点：

1. 路线①代码渲染视频 — Remotion（React 写视频，生态最成熟，配官方 Agent Skills）、HyperFrames（HeyGen 开源，HTML + GSAP，自带 motion-graphics skill）、Manim（3Blue1Brown 数学动画）、Motion Canvas（代码讲解示意图）
2. 路线②网页即动画 — Claude Artifacts 直接产出可交互动画（p5.js 生成艺术 / Three.js 3D / GSAP），Anthropic 官方 skills 仓库提供 algorithmic-art、slack-gif-creator、canvas-design
3. 路线③MCP 操作专业软件 — Blender MCP 搭 3D 场景、After Effects MCP 控合成、Lottie Creator MCP 与 text-to-lottie 生成矢量动效
4. 路线④混合编排 — AI 生成数字人/插画（即梦、可灵）+ Claude 写代码组装成片
5. 11 种风格图鉴 — 产品发布片、动态排版、数据信息图、3Blue1Brown 数学、科普卡片、艺术笔触名画、生成艺术、3D 场景、角色动画、纸质拼贴复古、白板手绘；心得是混合多种风格（作者梵高片用 6+3+10+11）
6. 提示词 5 要素 — 背景、内容、视觉风格、时间节奏、约束条件；务必分步（先分镜脚本 → 再动画 → 最后配音音效）
7. 6 条设计原则 — 一句话一画面、具体代替抽象、底色即情绪、视觉从题材长出、一画面一主角、高潮多停 2 秒
8. 素材来源 — 代码生成（零版权）、公有领域名画（Wikimedia/Met/Arti/Rijksmuseum，须确认 CC0）、AI 生图、edge-tts 配音 + Whisper 逐字核对、Pixabay/Freesound 音效、思源宋体/黑体开源字体

关键结论 / 实践建议： 第一次渲染基本不会完美，做好 2–3 轮迭代的心理预期；普通网页动画写法逐帧渲染会卡死，务必安装 Remotion 官方 skill；Blender MCP 擅长"操作"不擅长"审美"，创意方向仍需人来定；提示词空泛必然出模板感。作者已将整套方法开源为 Claude Code skill（landscape-explainer-video）。

---

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

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

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

目录

1. 原理：Claude 不画画，它写“画画的程序”
2. 4 条技术路线 + 工具清单
3. 11 种动画风格图鉴（每种附样例图和参考案例）
4. 市面上的爆款案例和博主实战
5. 素材从哪来
6. 提示词怎么写（附模板）
7. 我的 8 步做片法 + 6 条设计原则
8. 踩坑清单 + 开源 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 秒 【约束】中文不能出错；数字写成读音；重要内容不要放在画面最底部（会被字幕挡住）先给我分镜脚本，我确认后再写代码。

07 我的 8 步做片法 + 6 条设计原则 #

以梵高这条为例：

1. 选题：找冷知识 + 巨大反差。 活着只卖出一幅画，死后一幅一亿美元。开场不讲“梵高是谁”，先讲一个荒诞的冷知识：1889 年，一个医生嫌病人送的画像难看，拿去堵了鸡窝。

2. 写脚本：按情绪曲线写。 钩子 → 困境 → 温暖 → 跌落 → 反问翻转 → 谷底 → 大反转 → 金句。梵高的大反转是一个几乎没人知道的人：弟媳乔安娜守着几百幅画、整理六百多封信，坚持了三十多年。

3. 配音 + 逐字核对。 数字写成读音（“一八八九年”），配完用 Whisper 转回文字和台词逐字比对。

4. 定视觉：从题材里长出来。 梵高 → 《星月夜》的旋涡笔触 + 美术馆金画框 + 宋体大字。

5. 一句一画（决定炫不炫）。 说到“全都失败了”，三张卡片上的“失败”印章依次砸下：

说到“疯子，变成了天才”，“疯子”被红线划掉，金色“天才”砸下来：

说到“八千二百五十万美元”，拍卖槌落下，价格滚到底：

6. 截帧质检。 每段截一帧拼成总览图，查重叠、遮挡、空画面。

7. 选封面帧放片头。 挑最丰富、没有字幕的一帧放在开头 0.5 秒，X 会自动拿它当预览图。

8. 多平台出片。 一套画面出横版、竖版、有主讲 / 无主讲、中英双语。发国内平台前查敏感词。

让动画“看起来很贵”的 6 条原则：

1. 一句话一个画面：纯文字静止不超过 2 秒
2. 具体代替抽象：用道具代替人（两把椅子抖动 = 两个人吵架），用数字代替形容词
3. 底色就是情绪：低谷和高潮用深色，讲事实用浅色
4. 视觉从题材长出来：不同题材，不同视觉语言
5. 一个画面一个主角：周围最多 1–2 个贴纸
6. 高潮多停 2 秒：让观众看清，也正好当封面

08 踩坑清单 + 开源 skill #

我和市面上的复盘文章，踩的坑几乎一样：

• 第一次渲染基本不会完美：有人实测几个提示词都没有一次成功，动态排版要渲染 3 轮才满意。正常心态：做 2–3 轮
• 普通网页动画写法逐帧渲染会卡住：这就是要装 Remotion 官方 skill 的原因
• Blender MCP 擅长“操作”，不擅长“审美”：Claude 能搭场景，创意方向还得人定
• 提示词太空泛，出来就是模板感：一定要写清风格、颜色、节奏
• 中文字体、竖屏尺寸，国外教程几乎不讲：要自己调

开源 skill

我把整套方法（脚本写法、30 多种画面招式、设计零件、笔触名画引擎、截帧质检、封面帧）做成了 Claude Code skill： https://github.com/xianxie6/landscape-explainer-video

装好后对 Claude 说“用梵高那种效果做一条 XX 的视频”就能开工。（需要配合 Remotion 工程、配音脚本和音效库，README 写了准备什么。）