如何用 Claude Code 等编码 Agent 提示词创建第一个 Remotion 视频【免费下载链接】remotion Make videos programmatically with React项目地址: https://gitcode.com/GitHub_Trending/re/remotion如果你想在不用手写 React 代码的前提下做出第一个视频Remotion 文档给出了一条纯提示词路径用一个编码 AgentClaude Code、Codex、Kimi Code 或 OpenCode在本地项目里对话让它帮你创建并运行 Remotion 视频项目。整个流程在本地终端完成先脚手架出一个 Blank 项目安装 Remotion Agent Skills启动预览然后在另一个终端里启动编码 Agent用提示词描述你想要的视频。前提条件以文档为准已安装一个编码 Agent文档列出的可用选项是 Claude Code、Codex、Kimi Code 和 OpenCode已安装 Node.js文档提示大多数编码 Agent 需要付费订阅操作系统要求macOS 需要 15Sequoia或更新版本旧版本不受支持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-y4.0.439 版本起可用是 create-video 的非交互模式所有交互式提问都会跳过并使用合理默认值文档说明它适用于脚本和 Claude Code 这类 AI Agent。使用时有几个需要注意的行为均来自同一份文档必须同时提供模板参数如--blank和目录参数TailwindCSS 会在模板支持的情况下被安装不需要可加--no-tailwindAgent skills 不会被安装需要之后手动添加下一步就做脚手架完成后不会打开编辑器如果当前目录已经在一个 Git 仓库内命令会失败所以请在仓库外的空目录执行。官方安装页给出的完整命令链是npx create-videolatest --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 Skillsnpx 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/skillscreate-video 文档 中提到手动补装 skills 时使用的是这条命令。两条命令都来自官方文档任选其一即可。启动预览在项目目录中启动本地开发服务器npm run dev这一步会启动 Remotion Studio用于在浏览器中预览视频。此时先保持它运行。在另一个终端启动编码 Agent 并提示词创建视频文档明确要求打开一个单独的终端窗口再进入项目目录启动编码 Agentcd my-video claude # 或: codex / kimi / opencodeAgent 启动后即可用提示词创建视频。文档给出的示例提示词包括/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 skillslatest add remotion-dev/skills -g -yThen use them to create a video.验证结果判断视频是否成功的路径在文档中是两条预览npm run dev启动的 Remotion Studio 中查看画面也可以直接对 Agent 说/remotion-studio该 skill 的作用就是启动 Studio 预览你的视频。渲染对 Agent 说/remotion-render调用一次渲染生成视频或静态帧Blank 模板自带的 READMEpackages/template-blank/README.md中也列出了渲染命令npx remotion render。可选为 Claude Code 安装 Remotion 插件如果你固定使用 Claude Code文档还提供官方 Claude Code 插件它内含 Remotion Agent Skillsclaude plugin marketplace add remotion-dev/claude-code-plugin claude plugin install remotionremotion安装插件后需要重启 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
