AI 视频创作的新范式：Codex + Remotion

✍ 知识猫图解🕐 2026-07-03📦 15.2 KB 🟢 已读 𝕏 文章列表

文章探讨了将视频制作转化为代码工程的“视频即代码”新范式。通过结合 Codex（负责编写和迭代代码）与 Remotion（负责 React 组件渲染视频），创作者可以实现视频的组件化、参数化和版本控制，解决高频生产中的可控性与复用难题。文章详细介绍了工作流、工具链选型、项目结构搭建以及避坑指南，强调了从单次生成向系统化生产转变的重要性。

视频生成 Remotion Codex 视频工程工作流 AI创作 React 自动化组件化 Agent

# AI 视频创作的新范式：Codex + Remotion，正在把视频变成代码工程 **作者**: 知识猫图解 **日期**: 2026-07-02T10:27:52.000Z **来源**: [https://x.com/GeekCatX/status/2072628315072889163](https://x.com/GeekCatX/status/2072628315072889163) --- ![Image](/doc/2666/image/img_6c54342229a6.jpg) 输入一句提示词，模型就能把文字变成画面。它解决了从无到有，却没有解决从“能看”到“能用”：标题要向左移 20 像素怎么办？字幕提前 8 帧出现怎么办？品牌色、转场和版式要复用到下一条视频怎么办？客户只改一句文案，是否又要重新生成整段画面？当视频进入高频生产，真正困难的往往不是生成一段素材，而是稳定地控制、修改、复用和交付。这正是“视频即代码”开始成立的地方。在这种工作流里，视频不只是一个导出的 MP4，也是一套由代码、组件、素材、字幕、音频、分镜和渲染配置组成的工程。Codex 负责理解项目、编写和修改代码、运行命令、排查错误；Remotion 负责把 React 组件逐帧渲染为视频。需要处理真实素材、数学动画、转码或抠像时，再把 FFmpeg、video-use、Manim、SAM 2、MatAnyone 等工具接入流水线。以前做视频，主要是在时间轴上拖动素材。现在做视频，也可以像开发软件一样：先定义结构，再组合组件，然后预览、测试、修改和渲染。 ## 一、AI 视频的分水岭：从“生成结果”到“管理系统” 提示词生成视频，本质是在追求一个结果；视频即代码，本质是在建设一套系统。两者并不冲突。生成式模型擅长创造镜头、角色和场景，解决“画面从哪里来”；代码化视频擅长控制字幕、排版、节奏、数据和品牌规范，解决“这些素材如何稳定组成一条片子”。如果只做一条实验短片，直接生成可能更快。但如果要连续做 50 条栏目视频、为 100 个客户生成个性化产品介绍，或者每周更新数据榜单，可控性与复用率就比单次惊艳更重要了。这时，视频工程会表现出与软件工程相似的特征： - 可版本化：项目用 Git 管理，每次修改都有记录，也能回滚。 - 可组件化：片头、字幕、图表、转场和行动号召封装成组件。 - 可参数化：替换文案、数据、图片、配色，就能生成新版本。 - 可测试：先渲染关键帧或短片段，检查排版、遮挡、时间轴和安全边距。 - 可自动化：从结构化数据生成分镜，批量渲染不同尺寸和语言版本。 - 可协作：人负责内容与审美判断，Agent 负责实现、检查和机械迭代。这不是把创作降格为流水线，而是把不值得重复的劳动交给流水线。 ## 二、为什么是 Codex + Remotion Codex 的价值不只是“会写 React”，而是它能在一个真实项目里持续工作：读取目录和现有代码，理解组件之间的关系，根据反馈修改文件，运行构建或渲染命令，查看报错后继续修复。相比一次性生成一段代码，这种围绕仓库进行多轮迭代的能力，更接近一名工程协作者。OpenAI 对 Codex CLI 的说明也将读取、修改和运行本地代码列为核心能力。 Remotion 则提供了视频工程的执行层：用 React 描述画面，用帧数和时间控制动画，在浏览器里预览，最后逐帧编码为真正的视频文件。内容还可以由 API 或参数驱动，并通过 Remotion Lambda 做分布式云渲染。Remotion 官方介绍明确支持 React 创作、浏览器预览、程序化内容与云端渲染。两者组合，形成了清晰分工：Codex 把自然语言需求翻译为项目修改，Remotion 把项目代码翻译为确定的视频帧，人决定什么值得表达，以及结果是否足够好。例如，“把第二幕缩短半秒，把标题放到人物后面，字幕不要超过两行，结尾替换成竖屏 CTA”，不再只是一段模糊提示，而可以被拆成具体的组件、层级、帧区间和样式修改。这就是代码化工作流最重要的优势：反馈可以落到确定的位置。 ## 三、什么视频最适合代码化并非所有视频都应该用代码制作。电影叙事、纪录片剪辑、依赖演员表演的情绪片，仍然高度依赖导演、摄影和剪辑师的连续判断。代码不会自动提供审美，也不会替你决定哪个停顿最有力量。 “视频即代码”最适合结构明确、视觉规范稳定、需要频繁修改或批量生产的内容： - 产品介绍与 SaaS 功能演示 - 数据可视化和年度报告 - 知识科普、课程讲解和技术教程 - 新闻快报、榜单和信息卡片 - 品牌栏目片头、片尾与包装 - 多语言、多尺寸的营销素材 - 基于模板的个性化视频以产品介绍为例，传统项目通常是一个完整时间轴；代码化项目则可以拆成开场、问题、功能、数据、评价、价格和 CTA 等场景组件。下次换产品时，不必重新搭建整条视频，只要替换数据、截图、Logo 和主题配置。真正产生复利的不是某一个动画，而是组件库和生产规范。 ## 四、一个可维护的视频项目长什么样下面是一种简单的项目结构： ``` public/ images/ # 图片与产品截图 audio/ # 配音、音乐和音效 fonts/ # 项目字体 frames/ # 关键帧检查图 src/ components/ # 字幕、按钮、图表等通用组件 scenes/ # 按分镜拆分的场景 theme/ # 颜色、字体、间距和安全边距 data/ # 文案、字幕时间戳和图表数据 Root.tsx # Composition 注册入口 ``` 这套结构的重点不是目录名称，而是把三类东西分开： 1. 内容：文案、数据、字幕和素材 2. 表现：组件、动画和视觉主题 3. 生产配置：分辨率、帧率、时长与渲染参数三者解耦后，同一套视觉系统可以消费不同内容，同一份内容也可以输出 16:9、9:16 和 1:1 等多个版本。 ## 五、不要先做一分钟，先跑通十秒钟很多人第一次用 Coding Agent 做视频，会直接提一个巨大需求：做一条 60 秒宣传片，要有高级转场、动态字幕、3D 效果和背景音乐。这通常会同时引入脚本、审美、素材、依赖、动画和渲染问题。一旦结果不对，很难判断是哪一层出了错。更稳的做法是先完成一个 10 秒样片，只验证四件事：项目能否正常预览和渲染；字体、配色和版式是否成立；三个场景的节奏是否自然；反馈能否被准确修改。第一步：创建项目 Remotion 当前官方入口是： ``` npm init video cd my-video npm install npm run dev ``` 第二步：让 Codex 先读项目，不要急着改 ``` 请先阅读当前 Remotion 项目，不要修改代码。请告诉我： 1. Composition 在哪里注册； 2. 当前有哪些组件； 3. 如何启动预览和执行渲染； 4. 如果制作一个 10 秒产品介绍视频，建议新增哪些文件。 ``` 这一步的目的是先对齐项目事实，避免 Agent 根据过时模板猜测文件结构。第三步：生成最小样片 ``` 请基于当前项目制作一个 10 秒的产品介绍样片。要求： 1. 画幅为 16:9； 2. 只有三个场景：标题、核心卖点、行动号召； 3. 场景组件放入 src/scenes/； 4. 颜色、字体、间距和安全边距统一放入 src/theme/； 5. 所有时间计算使用 useVideoConfig() 提供的 fps； 6. 先保证预览和渲染成功，不安装非必要依赖； 7. 完成后列出修改文件、预览命令和渲染命令。 ``` 第四步：先看关键帧，再看整片不要每改一个像素就渲染完整 MP4。先检查第 0、3、6、9 秒的静帧，能更快发现文字溢出、元素遮挡、字体缺失、对比度不足和安全边距问题。静帧通过后，再渲染十秒样片，重点检查动画连续性、字幕同步、转场节奏与音画关系。第五步：把主观反馈改写成工程约束 “高级一点”“更有感觉”很难直接执行。更有效的反馈是： ``` 1. 开场标题宽度不超过画面安全区的 70%； 2. 第二幕只保留一个主标题和两个卖点； 3. CTA 在最后 1.5 秒保持静止，按钮对比度提高； 4. 任何字幕最多两行，底部保留 8% 安全边距； 5. 不改变现有目录结构和视频总时长。 ``` 这个最小闭环是整套方法的核心：需求 → 代码 → 预览 → 检查 → 反馈 → 修改 → 渲染。十秒钟跑通以后，再扩展到三十秒、六十秒和批量生产。 ## 六、Remotion 是主干，但不必包办一切稳定的视频系统通常不是一个工具，而是一组边界清楚的工具。 1. HyperFrames: HTML 即视频如果 Remotion 是“React 即视频”，HyperFrames 更接近“HTML 即视频”。它使用 HTML、CSS 和 JavaScript 描述画面，通过虚拟时钟按帧驱动浏览器渲染，再输出 MP4。HyperFrames 文档将其定位为面向人与 Agent 的确定性 HTML 视频运行时。它适合网页动效、竖屏信息卡、数据榜单和批量模板。对于已有 Web 页面或熟悉 CSS、GSAP 的团队，这是一条更直接的路线。 2. video-use + FFmpeg：处理真实拍摄素材 Remotion 擅长生成和编排图形层，但口播、访谈和播客切片首先需要理解真实素材。video-use 采用转录优先的方式：Agent 读取带有词级时间戳、说话人和声音事件的文本，再决定裁剪位置；FFmpeg 执行切割、拼接、压制和音频处理；Remotion 负责字幕、标题和视觉包装。video-use 项目说明这类流程适合长视频拆短视频、访谈高光、课程精华和教程包装。 3. Manim：精确表达数学与算法当内容包含公式、坐标系、几何变化或算法过程，Manim 往往比通用动效工具更合适。它以 Mobject、Animation 和 Scene 为核心组织数学动画，再将渲染结果交给 Remotion 统一包装。Manim 官方文档 4. SAM 2 + MatAnyone：分割与精细抠像要实现人物遮挡文字、主体跟踪、背景替换或无绿幕合成，需要把“主体在哪里”和“主体边缘的透明度是多少”分开处理。SAM 2 可以在图像和视频中选择并跟踪对象；MatAnyone 更聚焦人物视频抠像和稳定的细节边缘。前者适合目标分割，后者适合生成更细腻的 Alpha Matte。两者都可能在遮挡、相似对象、头发边缘和长视频中出现误差，因此仍需关键帧检查和人工修正。Meta SAM 2；MatAnyone 项目 5. FFmpeg：所有路线的底层工具转码、裁剪、拼接、音频混合、格式转换和最终压制，仍然离不开 FFmpeg。它不负责创意，却是连接各类生成、动画和剪辑工具的基础设施。工具选型可以归纳为： ![Image](/doc/2666/image/img_7745843e3957.jpg) ## 七、最容易踩的七个坑 1. 把 Agent 当成审美总监 Agent 可以快速实现方案，但它不知道你的品牌为什么应该克制、热烈或专业。没有参考图、设计令牌和明确约束，结果很容易滑向通用模板感。 2. 一开始就追求复杂效果复杂度会乘法增长。先验证结构、节奏和可渲染性，再增加 3D、粒子、抠像或高级转场。 3. 没有统一的项目结构如果不规定素材、组件、字幕、关键帧和临时文件的位置，项目很快就会失控。目录规范应该在第一条视频之前建立。 4. 用字符数猜字幕时间真人语音的停顿、语速和重音并不均匀。应使用词级时间戳驱动字幕，并在断句层做二次处理。 5. 到处写死 30fps 动画应该根据项目的 fps 计算，而不是散落硬编码帧数。否则切换到 24fps 或 60fps 后，节奏会整体漂移。 6. 每次修改都全量渲染先检查静帧，再检查局部片段，最后输出全片。渲染策略本身也是生产效率的一部分。 7. 让 Agent 随意安装依赖和执行脚本第三方包、外部服务和素材上传都可能引入安全、许可和供应链风险。要求 Agent 先解释用途、来源、权限与替代方案，再批准执行。 ## 八、真正的终点不是一条视频，而是一套生产系统当十秒样片的闭环稳定后，接下来最值得积累的不是更多提示词，而是更多可复用资产： - 选题、脚本和分镜模板 - 片头、字幕、图表和 CTA 组件库 - 品牌主题、字体与动效规范 - 配音、转录与字幕对齐流程 - 关键帧和局部片段审阅流程 - 横屏、竖屏和多语言适配规则 - 渲染队列、失败重试与发布前检查清单当这些模块建立起来，输入就可以逐渐标准化为主题、脚本、数据、素材、音频、品牌和目标平台，输出则不只是一条成片，而是一个可预览、可修改、可追踪、可再次渲染的项目。这套系统不会替代创作者。恰恰相反，它会迫使创作者把真正重要的判断说清楚：这条内容为什么值得做？信息应该以什么顺序出现？哪个画面是必要的？什么节奏符合品牌？哪些反馈属于审美偏好，哪些可以转化成规则？创作者负责价值、叙事和品味。Agent 与代码负责实现、复用和规模化。 ## 结语：未来最稀缺的不是提示词，而是工作流生成式视频解决的是“如何更快得到一段画面”。视频即代码解决的是“如何稳定地生产、修改和复用一类视频”。 Codex + Remotion 的真正意义，不是多了一个新奇的视频玩法，而是让视频第一次可以被当作长期维护的工程资产：能被拆分、复用、测试、版本化和自动化。对个人创作者，这意味着一个人也能搭建自己的视频工作台；对内容团队，这意味着栏目包装和营销素材可以沉淀成系统；对开发者，这意味着视频不再只存在于剪辑软件的时间轴里，也可以成为产品能力的一部分。下一阶段最有竞争力的 AI 视频创作者，未必是最会写提示词的人，也未必是最熟悉某一个模型的人。更可能是最会把创意、模型、代码、素材和审阅机制连接成稳定工作流的人。单次生成带来惊喜，系统化生产才会带来复利。 ## 相关链接 - [知识猫图解](https://x.com/GeekCatX) - [@GeekCatX](https://x.com/GeekCatX) - [11K](https://x.com/GeekCatX/status/2072628315072889163/analytics) - [OpenAI 对 Codex CLI 的说明](https://help.openai.com/en/articles/11096431) - [Remotion 官方介绍](https://cloudrun.remotion.dev/) - [HyperFrames 文档](https://hyperframes.video/docs/getting-started/introduction) - [video-use 项目说明](https://github.com/browser-use/video-use) - [Manim 官方文档](https://docs.manim.community/en/stable/tutorials/building_blocks.html) - [Meta SAM 2](https://ai.meta.com/research/sam2/) - [MatAnyone 项目](https://github.com/pq-yang/MatAnyone) - [Upgrade to Premium](https://x.com/i/premium_sign_up) - [6:27 PM · Jul 2, 2026](https://x.com/GeekCatX/status/2072628315072889163) - [11.8K Views](https://x.com/GeekCatX/status/2072628315072889163/analytics) - [View quotes](https://x.com/GeekCatX/status/2072628315072889163/quotes) --- *导出时间: 2026/7/3 10:43:49*

🔗 相关文档