企业官网建设流程全解析

如何用 Claude Code 等编码 Agent 提示词创建第一个 Remotion 视频？

【免费下载链接】remotion🎥 Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion

如果你想在不用手写 React 代码的前提下做出第一个视频，Remotion 文档给出了一条"纯提示词"路径：用一个编码 Agent（Claude Code、Codex、Kimi Code 或 OpenCode）在本地项目里对话，让它帮你创建并运行 Remotion 视频项目。整个流程在本地终端完成：先脚手架出一个 Blank 项目，安装 Remotion Agent Skills，启动预览，然后在另一个终端里启动编码 Agent，用提示词描述你想要的视频。

前提条件（以文档为准）：

• 已安装一个编码 Agent，文档列出的可用选项是 Claude Code、Codex、Kimi Code 和 OpenCode；
• 已安装 Node.js；
• 文档提示：大多数编码 Agent 需要付费订阅；
• 操作系统要求：macOS 需要 15（Sequoia）或更新版本，旧版本不受支持；Linux 发行版的 Libc 至少需要 2.35，并且需要按文档 Linux 依赖 额外安装一些包；Alpine Linux 和 nixOS 不受支持。

用 create-video 非交互地创建项目

在终端中运行：

npx create-video --yes --blank my-video

这条命令会在my-video目录中创建一个 Blank 模板项目。my-video是项目目录名，你可以换成自己的名字，后续所有cd my-video都要换成实际目录名。

--yes（-y，4.0.439 版本起可用）是 create-video 的非交互模式：所有交互式提问都会跳过并使用合理默认值，文档说明它"适用于脚本和 Claude Code 这类 AI Agent"。使用时有几个需要注意的行为，均来自同一份文档：

• 必须同时提供模板参数（如--blank）和目录参数；
• TailwindCSS 会在模板支持的情况下被安装，不需要可加--no-tailwind；
• Agent skills 不会被安装，需要之后手动添加（下一步就做）；
• 脚手架完成后不会打开编辑器；
• 如果当前目录已经在一个 Git 仓库内，命令会失败，所以请在仓库外的空目录执行。

官方安装页给出的完整命令链是：

npx create-video@latest --yes --blank my-video cd my-video npm i npx remotion skills add npm run dev

本文按步骤拆开说明。

安装依赖与 Remotion Agent Skills

进入刚创建的项目目录并安装依赖：

cd my-video npm install

然后安装 Remotion Agent Skills：

npx remotion skills add

根据 npx remotion skills 文档，skills 是"定义在 Remotion 项目中工作最佳实践"的指令集，对 Claude Code、Codex、Cursor 这类 Agent 有效。安装后，skills 位于项目内的.agents/skills目录，Claude Code 的兼容性通过把.claude/skills软链接到.agents/skills提供。日后更新用npx remotion skills update。

可选分支：skills 文档 也给出了等效安装方式npx skills add remotion-dev/skills；create-video 文档 中提到手动补装 skills 时使用的是这条命令。两条命令都来自官方文档，任选其一即可。

启动预览

在项目目录中启动本地开发服务器：

npm run dev

这一步会启动 Remotion Studio，用于在浏览器中预览视频。此时先保持它运行。

在另一个终端启动编码 Agent 并提示词创建视频

文档明确要求打开一个单独的终端窗口，再进入项目目录启动编码 Agent：

cd my-video claude # 或: codex / kimi / opencode

Agent 启动后即可用提示词创建视频。文档给出的示例提示词包括：

• /remotion-create Make a promo video for a record store—— 创建新的 Remotion 项目或 composition；
• /remotion-best-practices Make a promo video for a record store—— 这个 skill 包含其他所有 skill，不确定用哪个时用；
• /remotion-markup Create an animated title card using Inter.—— 写动画、布局、字体、媒体元素等 markup 时的最佳实践。

另外，安装页 还提供了一段可以直接粘贴给 Claude Code、Codex 或 OpenCode 的完整提示词：

Ensure Node.js is installed. Install Remotion Skills:npx -y skills@latest add remotion-dev/skills -g -yThen use them to create a video.

验证结果

判断视频是否成功的路径在文档中是两条：

1. 预览：npm run dev启动的 Remotion Studio 中查看画面；也可以直接对 Agent 说/remotion-studio，该 skill 的作用就是"启动 Studio 预览你的视频"。
2. 渲染：对 Agent 说/remotion-render调用一次渲染，生成视频或静态帧；Blank 模板自带的 README（packages/template-blank/README.md）中也列出了渲染命令npx remotion render。

可选：为 Claude Code 安装 Remotion 插件

如果你固定使用 Claude Code，文档还提供官方 Claude Code 插件，它内含 Remotion Agent Skills：

claude plugin marketplace add remotion-dev/claude-code-plugin claude plugin install remotion@remotion

安装插件后需要重启 Claude Code，之后让它创建或编辑 Remotion 视频时，相关 skills 会自动加载。

限制与说明

• npx create-video --yes ...在 Git 仓库内会直接失败，这是文档明确写出的行为，不要当成 bug。
• Agent Skills 不会随--yes脚手架一起安装，漏掉npx remotion skills add一步，Agent 就缺少 Remotion 最佳实践指令。
• 文档还注明 Remotion 的 MCP 已弃用，不推荐新安装；需要查文档时改用/remotion-docsskill。
• 更多可用的 skills（如/remotion-maps、/remotion-captions、/remotion-upgrade）见 Agent Skills 文档，按需使用。

完成以上步骤后，你会得到一个由 Agent 生成、可在 Studio 中预览并可渲染成视频文件的本地 Remotion 项目；下一步通常是继续用提示词迭代画面，或用npx remotion upgrade升级项目。

【免费下载链接】remotion🎥 Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion