OpenFilm：让 coding agent 用 HTML 做视频的开源 AI 视频智能体

OpenFilm 是 openfilm 组织在 2026 年 10 月开源的 AI 视频智能体，目标是让 Codex、Claude Code 这类 coding agent 直接“写”出一部片子。它把影片拆成网页：每个镜头是一个 HTML 页面，用 frame(t) 画出任意时刻的画面；整部片子是一个 film.html，按轨道把页面、视频、图片和声音剪在一起。项目用 TypeScript 编写，MIT 许可，官网 openfilm.dev。本文按官方 README 整理，未在本机完整实测；命令和导出参数以当前版本为准。

一部片子就是一个文件夹

README 给出的结构很直接：一个文件夹里有 film.html，每个 <section> 是一条轨道，按时间线顺序排列，第一轨道在最上层。每个 clip 是一个元素，可以是网页、视频、图片或音频。播放哪一段用 media fragment 指定，例如 #t=12,18；从哪里开始用 at；位置和尺寸写在 style 的 left、top、width、height 里，外观交给 CSS。README 的示例甚至把 HTML、CSS 和轨道混在同一个文件里，读起来像一份可以播放的网页。

页面只需实现一个约定：

<script type="module">
window.film = {
  frame(t) { /* 画出第 t 秒的完整画面 */ },
  duration: 4,
  ready: loadFonts(),
};
</script>

README 强调一条规则：同一个 t 必须画出同一张图，帧可以乱序、并行、跨帧请求。这样同一份工程在任何尺寸、任何机器上渲染结果一致。浏览器能画的东西都能用：three.js、WebGL、canvas、SVG、CSS、GSAP、视频。其他能生成画面的工具，比如 Python、Blender 或视频模型，以视频或图片的形式作为素材进入时间线。

安装与常用命令

需要 Node 22.2 以上和 ffmpeg，首次运行会下载约 100 MB 的无头 Chromium。最省事的安装是交给 Agent：

npx skills add openfilm/openfilm

然后直接对 Agent 说“给我的 CLI 做一条 20 秒发布视频，带音乐”。如果 Agent 不支持 Skills，让它运行 npx -y openfilm@latest 并阅读打印出来的手册。也可以全局安装后用命令操作：

npx -y openfilm@latest            # 给 Agent 看的完整手册
openfilm open [folder | url]      # 在 Studio 里打开一部片子
openfilm look [what] [t | a-b]    # 检查画面、音轨或某个时间范围
openfilm render [a-b]             # 输出 MP4，支持 --4k、--blur、--alpha
openfilm get [what]               # 从已接入的服务取配音、音乐、图片、视频
openfilm doctor                   # 输出本机环境报告

openfilm look 是容易被忽略的一环。它把检查表里的每一帧画两遍，用两种打乱的顺序，指出结果发生变化的帧，同时报告页面错误、字体加载失败、音频缺失和被画框裁掉的文字。视频生成模型最不可靠的地方是“看起来差不多”，这个检查把一部分问题变成可复现的报告。

Studio 里手改

Studio 是在本机浏览器里运行的编辑器，README 建议用 Chromium 内核的 Chrome 或 Edge，因为预览和导出使用同一个引擎。画面里的文字、图层、时间线上的片段、位置、音量、速度和字幕都能改；修改会写回影片文件，Agent 下次编辑时能看到并保留。也可以保存命名版本，随时回退。

导出格式包括视频、GIF、音频或分轨、字幕、静帧、幻灯片、透明视频，以及给 Final Cut Pro、Premiere Pro、DaVinci Resolve 的时间线。桌面版是 Studio 加一个旁边的聊天窗口，可以从 openfilm.dev 或 Releases 下载，自带 ffmpeg 和无头浏览器。制作、编辑和渲染不需要账号；AI 配音、音乐、图片和视频要自己接 ElevenLabs、OpenAI、Google、fal 等服务，并在 Studio 的设置里填自己的 Key。

典型场景

一个开发团队要给新版本做 20 秒发布视频。产品经理把功能点写成一段说明，Claude Code 按 OpenFilm 的 Skill 生成 film.html，Studio 自动打开。设计师在时间线上换掉两张截图、调整标题字号和音乐淡出，最后 openfilm render --4k 出片。整个过程不需要打开传统 NLE，也不需要把素材上传到云端；如果某句字幕被裁切，openfilm look 会直接指出来。

和 Remotion 的分工

README 明确把 Remotion、HyperFrames 归为“框架”，并说 OpenFilm 不需要框架，一个 frame(t) 函数就够。实际差别在抽象层：Remotion 用 React 组件和 hooks 组织视频，适合已有 React 工程和复杂数据驱动的批量渲染；OpenFilm 让 Agent 直接写网页，结构更接近“一个文件夹加若干 HTML”，检查和渲染由 CLI 兜底。两者都能程序化出片，选择取决于团队更愿意维护 React 项目还是网页文件。

限制

项目 2026 年 10 月才创建，README 之外缺少长期使用案例，导出质量和复杂合成的边界需要自己测。无头 Chromium、ffmpeg 和 Node 的组合对机器有要求；frame(t) 的确定性规则意味着不能随手写依赖上一帧状态的动画，任何有状态的效果都要改写成按时间计算。生成式素材按服务商计费，项目本身不提供模型。它也不是传统剪辑器：需要逐帧精修、专业调色或多轨音频混音时，仍然要回到 NLE。

适合谁

适合已经用 coding agent 写代码、想把视频当作代码资产管理的开发者、技术布道和产品团队；也适合需要把视频生产接进脚本或 CI 的工程团队。需要传统剪辑手感、精细合成和成熟团队协作的后期人员，不适合用它替代 NLE。

入口

仓库：openfilm/openfilm
官网与桌面版：openfilm.dev
示例影片：openfilm/examples
规范：仓库内 packages/openfilm/MANUAL.md（给 Agent）与 SPEC.md（给播放器、渲染器实现者）
许可证：MIT；名称与标志有商标限制