为编码代理搭建可验证的 Remotion 空白项目
让编码代理直接“生成一段视频”时,安装失败、项目代码错误和渲染问题常被混在同一次对话里,出错后很难定位。更稳妥的起点是先创建一个官方空白项目,在不生成业务画面的情况下确认 Node.js、包管理器、依赖、开发服务器和 Remotion Skills 分别可用。本文给出这条最小路径,并明确每一步应保留的验证证据;模型接入、品牌素材和渲染参数不在本篇范围内。
开始前确定工作目录
选择一个允许创建新目录的位置,不要在已有项目内部无意嵌套仓库。先确认当前目录和工具版本:
node --version
npm --version
本文不固定 Node.js 版本。版本要求应从准备使用的 Remotion 当前官方文档及生成项目的 package.json 中核对。命令无法执行时,先完成 Node.js 和 npm 的官方安装,不要继续让编码代理猜测环境问题。
团队还应先确定包管理器。本文使用 npm,后续不要在同一仓库混用其他包管理器并提交多份锁文件。
按官方命令创建空白项目
Remotion 官方起始页当前给出了命令行创建空白项目的流程。下面使用 my-video 作为示例目录名:
npx create-video@latest --yes --blank my-video
cd my-video
npm i
npx remotion skills add
npm run dev
逐条执行比一次性交给代理更容易定位失败:
create-video@latest创建空白项目目录。cd切换到新项目,避免依赖安装到错误位置。npm i按项目清单安装依赖并生成或更新 npm 锁文件。npx remotion skills add使用 Remotion 提供的命令添加 Skills。npm run dev启动项目定义的开发脚本。
@latest 会取得执行时的当前发布版本,因此团队需要把最终生成的 package.json 和锁文件提交到版本控制,后续协作与持续集成按锁文件安装,而不是每次重新生成模板。
验证项目而不是只看命令退出
创建完成后检查仓库中至少存在:
package.json,用于确认脚本和依赖来源。- npm 锁文件,用于固定已解析的依赖树。
- Remotion 项目的源代码入口。
- 由 Skills 命令产生且准备纳入项目的说明或配置。
不要在文章中假定 Skills 一定写入某个固定路径;以当前命令输出和实际 Git Diff 为准。可以运行:
git status --short
如果目录尚未由 Git 管理,则直接查看新建文件,并在初始化版本控制后再次确认。重点是知道命令改变了什么,而不是只看到“安装完成”。
npm run dev 启动后,使用终端实际输出的本地地址打开 Remotion 开发界面。验收条件包括:
开发脚本保持运行且没有立即退出。
浏览器能够打开终端输出的地址。
空白项目的 Composition 可以在界面中被识别。
终端和浏览器控制台没有阻断预览的错误。
这些检查只证明开发环境可用,不证明视频可以在目标渲染环境成功导出。
让 Claude Code 先做只读环境检查
在项目根目录启动 Claude Code 前,确认 claude --version 能在当前终端执行。进入会话后先给只读任务:
不要修改文件。阅读 package.json、锁文件和 Remotion 源代码入口。
说明开发脚本、Composition 入口和当前 Skills 相关文件位于哪里。
所有结论引用具体文件;无法确认的内容明确说明。
把回答与文件系统和 package.json 对照。只有路径、脚本和依赖信息一致,才继续生成组件。这样可以同时验证 Claude Code 是否从正确项目根目录启动。
为第一次修改设定边界
环境通过后,第一次改动只验证组件、预览和 Diff 链路,不要同时导入字体、远程素材、音频和复杂动画。任务可以写成:
先读取项目中的 Remotion Skills 和现有 Composition。
列出将修改的文件和验证方法,确认后再执行。
只创建一个由纯色背景和静态文字组成的短 Composition,不使用外部素材或网络请求。
完成后运行项目已有检查,并说明哪些验证没有执行。
这里不指定帧率、尺寸和时长,让它先沿用生成模板的现有配置。若业务确有固定交付参数,应在下一步作为明确需求加入,并通过实际预览和渲染验证。
常见失败如何分层
创建命令失败
保留完整命令、当前目录、Node.js 与 npm 版本以及错误原文。先判断是命令解析、网络、权限还是包管理器问题,不要同时修改项目代码。
依赖安装失败
检查 package.json、锁文件状态和 npm 原始错误。不要在没有根因时删除锁文件或随意升级所有依赖,因为这样会改变待排查的版本集合。
开发服务器运行但页面打不开
使用终端输出的地址,不假设固定端口。确认进程仍在运行,再检查本机网络、端口占用和浏览器错误。
Claude Code 读到错误目录
退出会话,回到含有目标 package.json 的项目根目录重新启动。不要通过复制整份文件内容掩盖启动目录错误。
Skills 文件位置与旧教程不同
以当前 npx remotion skills add 的输出和文件变化为准,并对照官方文档。不要手工创建一个旧路径来满足文章中的假设。
环境验收记录
在进入业务视频开发前,保存以下结果:
Node.js 与 npm 版本输出
项目生成命令及退出状态
package.json 与锁文件
Skills 命令产生的文件变化
npm run dev 的实际地址与运行状态
空白 Composition 的预览结果
尚未验证的渲染与部署环境
版本输出是复现信息,不应被改写成性能或兼容性结论。
结论与限制
Remotion 环境搭建的关键是把模板创建、依赖安装、Skills 添加、开发服务器和编码代理上下文分别验收。空白项目先通过,再加入业务组件,能让后续错误更容易归因。
本文只覆盖本地开发预览。字体、媒体编解码、浏览器运行时、并发渲染和部署环境会带来额外依赖,仍需在目标交付环境中单独验证。命令和生成结构也可能更新,应以 Remotion 当前官方文档及实际命令输出为准。