炸裂！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 瞬间化身动效大师：

npx skills add remotion-dev/skills

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

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

1. 初始化环境

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

npx create-video@latest

推荐配置：

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

2. 启动预览与 AI 会话

• • 预览模式：进入项目目录后运行

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 生成更易执行的代码。

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