用 Remotion Skills + DeepAgents，让 AI 帮你"写"视频代码
一行自然语言描述 → 一个完整的 React 视频项目。这是程序化视频生成的新范式。
一、背景：为什么需要 Remotion Skills？
传统视频制作流程是这样的：
痛点：周期长、迭代慢、改一个数字要重新渲染半天。
而 Remotion 提出了一个全新思路——用 React 组件写视频：
但问题来了——写 React 组件依然需要懂代码。于是就有了 Remotion Skills：
一套专为 Agent（如 DeepAgent、Claude Code）优化的工具集，让开发者用自然语言就能生成基于 React 的视频动画代码。
二、Remotion 是什么？
Make videos programmatically. 用程序化制作视频。
Remotion 是一个让你用 React 编写视频的框架，本质上是连接"网页技术栈"与"视频渲染"的桥梁：
核心能力：参数化内容、服务端渲染、构建可复用的视频应用。
三、Remotion Skills 的工作流
Remotion Skills 把整个视频制作流程Agent 化：
一句话概括：人类负责"说清楚要什么"，Agent 负责"把代码写出来"，Remotion 负责"把代码变视频"。
四、环境准备
4.1 安装 Node.js
# Windows 推荐使用 winget
winget install OpenJS.NodeJS.LTS
# 验证安装
node --version
npm --version
下载地址：https://nodejs.org
4.2 安装 Remotion CLI
# 方式一：全局安装
npm install -g @remotion/cli
# 方式二：项目本地安装
npm install @remotion/cli
五、创建第一个项目
5.1 初始化项目
npx create-video@latest
5.2 选择模板
Remotion 提供了 20+ 开箱即用的模板，覆盖了大部分常见场景：
推荐入门：Hello World（带简单动画的 Playground）。
5.3 创建流程
5.4 项目结构
关键目录树如下：
my-video/
└── .agent/
└── skills/
└── remotion-best-practices/ ← 🎯 核心
├── rules/
└── SKILL.md
📍 Agent 的 skills 全局路径：
C:\Users\<用户名>\.agents\skills
六、让 DeepAgents 调用 Remotion Skills
Remotion 是"代码即视频"的开发者工具，DeepAgents 是"指令即代码"的自动化接口。两者都是文本驱动产出的范式，天然匹配。
6.1 确认 Skills 已加载
deepagents skills list
输出示例：
Available Skills:
User Skills:
• find-skills
C:\Users\<用户名>\.agents\skills\find-skills\
• remotion-best-practices ← ✅ 关键
C:\Users\<用户名>\.agents\skills\remotion-best-practices\
Best practices for Remotion - Video creation in React
Built-in Skills:
• skill-creator
6.2 启动 DeepAgents
deepagents --model openai:deepseek-ai/DeepSeek-V3.2
启动后界面：
DEEP AGENTS v0.0.27
[OK] LangSmith tracing: 'default'
Thread: 8a81d1d9
Ready to code! What would you like to build?
6.3 用自然语言描述视频需求
任务：基于 my-video 现有项目，使用 Remotion Skills 制作 15 秒公司年度绩效展示视频。
视觉风格：深色科技风（深蓝/紫渐变），流畅转场
内容结构：
开场：动态 Logo 揭示 + "2026年度绩效报告"标题
数据页：3 个核心指标（营收、用户增长、市场份额），动态计数器从 0 增长，配合进度条
对比页：2025 vs 2026 双柱状图，柱子升起带弹性动画
亮点页：季度增长曲线图，关键节点弹出标注
6.4 完整调用流程
6.5 预览与渲染
# 浏览器实时预览
npx remotion preview
# 渲染输出最终视频
npx remotion render
七、Remotion Skills 的最佳实践
Remotion 项目本质是一个 Node.js/React 工程，包含大量依赖文件；LLM 又存在随机性与幻觉问题。要让 Agent 稳定输出高质量视频，需要注意三点：
7.1 明确项目路径
Remotion 项目本质是一个 Node.js/React 工程，包含大量依赖文件。路径混乱会导致 Agent 陷入困惑并止步不前。
✅ 建议：进入项目目录后再启动 DeepAgents。
7.2 谨慎的命令行操作
Remotion CLI 与系统环境深度耦合；作为资源密集型任务，天然需要高权限和系统资源——但 LLM 生成的命令不可完全信任。
✅ 建议：执行 npx remotion render 这类系统级命令前先人工 review。
7.3 准确的 Prompt 策略
Remotion 遵循声明式编程的 React 组件，精简提示词直接映射到代码属性，减少 LLM 的"自由空间"。
这不是"限制创意"，而是将主观描述转化为可验证的结果约束。
✅ 建议：明确指定时长、画幅、关键帧，而非"做得好看一点"。
八、命令行速查表
| 用途 | 命令 |
|---|---|
| 安装 Node.js | winget install OpenJS.NodeJS.LTS |
| 验证 Node.js | node --version / npm --version |
| 全局安装 Remotion CLI | npm install -g @remotion/cli |
| 创建项目 | npx create-video@latest |
| 查看已加载 Skills | deepagents skills list |
| 启动 DeepAgents | deepagents --model openai:deepseek-ai/DeepSeek-V3.2 |
| 预览视频 | npx remotion preview |
| 渲染视频 | npx remotion render |
九、写在最后
DeepAgents 结合 Remotion Skill，把视频制作从**"代码工程"转变为"对话创作"**。我们只需通过自然语言描述视频需求，Agent 即可自动生成完整的 React 代码、处理动画参数、管理资源依赖，甚至直接完成预览与渲染。
这一流程彻底将开发者的精力从繁琐的代码细节中解放出来，专注于创意策略与业务逻辑本身。
未来已来：让 AI 把你脑海里的画面，真正变成一段视频。
🔗 相关链接
博客标题备选方案（推荐第 1 个）：
- 《用 Remotion Skills + DeepAgents，让 AI 帮你"写"视频代码》（推荐 ⭐）
- 《当 AI 学会拍视频：Remotion Skills 实战指南》
- 《告别逐帧剪辑：用自然语言生成 React 视频》
- 《Remotion Skills 入门：从环境搭建到 AI 自动出片》
- 《让 DeepAgents 当你的视频导演：Remotion Skills 全流程》
需要我直接把这份笔记也保存到 D:\Documents\langchain\notes\ 目录下吗？📝