炸裂！Claude Code + Remotion：动效设计进入“口头指令”时代

在 2026 年的今天，动效设计（Motion Design）的门槛正在被 AI 彻底粉碎。 最近，Remotion 发布的一段展示 AI 自动构建动效的视频在社交媒体上疯狂传播，播放量突破 830 万。 这背后最核心的技术突破，就是 Claude Code 结合了 Remotion 官方维护的 Agent Skills（智能体技能）。

这意味着，你不再需要手动调整关键帧，只需通过简单的文字对话，就能生成商业级的 React 动态视频。

---

一、 核心神器：Remotion Agent Skills

Remotion 是一款允许开发者使用 React 编写视频的强大框架。 而新发布的 Agent Skills 则是为 Claude Code 等 AI 袋里量身定制的一套“最佳实践指令集”。 它告诉 AI 如何正确地在 Remotion 项目中编写代码、组织文件以及调用 API。

通过以下命令，你就能让你的 Claude 瞬间化身动效大师：

代码语言：javascript

复制

npx skills add remotion-dev/skills

---

二、 手把手教学：从零到一的动效流程

想要复刻那段播放量 800 万的视频吗？只需遵循以下步骤：

1. 初始化环境

首先，确保你已安装 Node.js 和 Claude Code（需订阅权限）。在终端运行：

代码语言：javascript

复制

npx create-video@latest

推荐配置：

• Empty 模板• 确认安装 TailwindCSS• 安装 Agent Skills。

2. 启动预览与 AI 会话

• 预览模式：进入项目目录后运行代码语言：javascript

复制

npm run dev

启动 Remotion Studio。

• 召唤 Claude：在另一个终端窗口输入 claude 启动会话。

3. 文字即设计（The Prompting）

你可以向 Claude 下达复杂的指令。例如：

Claude 会自动分析项目结构，创建新的 Composition（合成）文件，并在 Remotion Studio 中实时呈现效果。

4. 素材集成与多帧迭代

如果你需要加入个人品牌元素，只需将图片（如个人头像）放入 public 文件夹，并将路径告知 Claude。 你可以继续要求它：

Claude 会自动处理片头（Intro）、主体动效和片尾（Outro）的逻辑。

---

三、 深度洞察：如何成为顶尖的“AI 操盘手”？

在体验这项技术的过程中，有几个关键的心法值得注意：

• 保持简约，避免过度复杂：目前的 AI 袋里在处理极其复杂的动效时，可能会出现格式混乱或布局错位。 最佳实践是保持设计简洁，如终端打字效果、文字流动和视觉链接，这些效果的稳定性最高。• 技能的“复利”效应：在 2026 年，单纯的写作或编程已不足够。 掌握了 AI 动效设计后，你将从一个文字写作者进化为一名 AI 操盘手（AI Operator）。 这意味着你可以独自一人完成从文案、调研、图像生成到动效推广视频的全流程，这种全栈能力将使你在市场中极具竞争力。• 利用提示词构建器：如果你不知道如何精准描述需求，可以利用专门的“动效设计提示词构建器技能”来辅助思考，引导 Claude 生成更易执行的代码。

---

准备好用代码“说”出你的下一个爆款视频了吗？

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。原始发表：2026-01-26，如有侵权请联系[email protected] 删除