使用 Claude Code 与 Remotion 制作自定义动画视频的完整教程

在现代开发与创意内容制作中，将 AI 与视频动画结合已经成为一种趋势。本文将详细讲解如何使用 Claude Code 和 Remotion 创建一个自定义动画项目，并实现将图片内容（如 lin.png）以动态方式展示在视频中。

---

1、安装 Claude Code

首先需要在本地环境中安装 Claude Code。

npm install -g @anthropic-ai/claude-code

安装完成后，即可在命令行中调用 claude 命令。

---

2、访问 Remotion 并选择模板

Remotion 是一个基于 React 的视频动画开发框架。访问官网：Remotion | Make videos programmatically

我们使用官方提供的 HelloWorld 模板进行快速入门：HelloWorld 模板

创建项目：

npx create-video@latest

按照提示完成项目创建，生成基础视频模板。

---

3、创建本地项目文件夹

在本地指定路径创建项目文件夹，并进入目录：

mkdir C:\Users\86182\Projects\test
cd C:\Users\86182\Projects\test
claude

---

4、在 Claude Code 中初始化项目

1. 打开 Claude 程序

2. 在命令行输入：

/init

1. 程序会自动创建一个 claude.md 文档，这是我们与 Claude Code 交互的核心文件。

---

5、准备提示词文件

1. 打开 claude.md 文件，点击 Raw 按钮，全选并复制内容。

2. 参考示例：Gist 链接

3. 将内容粘贴到 C:\Users\86182\Projects\test\my-video\claude.md 并保存。

4. 在文档最后加入自定义命令，例如：

play system glass sound after completing tasks

---

6、更新 Claude Code 并输入提示词

在 Claude Code 中执行：

update claude.md

然后输入提示词，例如：

请帮我解读 lin.png 并模拟生成类似动画

注意：lin.png 文件应放在项目文件夹下，例如：
C:\Users\86182\Projects\test\my-video\lin.png

动画效果要求

• 显示上去的一行数据一直保持

• 下一行数据在前一行下方依次加载

• 直到最后一行数据加载完毕

---

7、启动 Remotion Studio

1. 打开浏览器，Ctrl + Click 打开：

http://localhost:3000

1. 启动 Remotion Studio 程序：

npx remotion studio

1. 在界面中选择你要播放的视频，点击播放查看效果。

---

8、渲染最终视频

1. 在 Studio 页面右侧点击 Render 按钮

2. 设置输出路径和文件名

3. 点击 Render 开始生成 MP4 文件

4. 渲染完成后，视频输出在：

out/*.mp4

你可以打开播放查看最终效果。

---

9、总结

通过上述步骤，我们完成了：

• Claude Code 环境的安装与初始化

• 使用 Remotion 模板创建视频项目

• 将图片 lin.png 动态转化为动画

• 实现行数据逐步加载动画效果

• 渲染输出最终 MP4 视频

整个流程将 AI 与前端视频动画结合，实现了自动化动画生成，为创意内容制作提供了强大工具。

---

小贴士

• 确保 node.js 版本 >= 18

• 图片路径与文件名严格匹配

• claude.md 是关键交互文件，任何提示词修改都需更新此文件