从参考视频到成片：7 个提示词让 Codex 接管 Remotion 全流程

我把一条 8 秒参考视频和一段 BGM 交给 Codex，依次发了 7 个提示词。它自己检查环境、安装工具、拆镜头、写 Remotion、渲染并验收，做出了下面这条成片。

更重要的是，它不是一次性 Demo：以后每天只换一份 JSON，就会自动生成新日期、新文案、新封面和不覆盖旧文件的 MP4。

真正关键的不是 AI 会写代码，而是把“安装、执行、验证、失败后继续修”全部写进提示词。Windows 和 macOS 都能照着复现。

下面把这 7 个提示词原样拆开，并说明每一步看到什么才算通过。

最终模板具备这些能力：

• 1080×1440、30fps、8 秒，开场与任务页使用 18 帧交叉过渡；
• 一份 JSON 控制日期、任务、奖励、彩蛋、称号和结尾；
• 自动生成 YYYYMMDD-vNN 日期版本视频和完整日期封面；
• 自动抽帧并检查排版、分辨率、帧率、时长和 AAC 音轨。

这是最终封面和任务页：

这篇教程不会要求你在终端里逐条输入命令。你看到的所有大段代码框都是发给 Codex 的提示词。每一步后面，我都会写清楚 Codex 应该交付什么，以及看到什么才算真正通过。

一、为什么不是“每天改代码”，而是让 JSON 驱动视频

Remotion 的核心价值，是用 React 和逐帧数据生成真实视频。文字、图片、位置、透明度和声音都可以由数据控制。对“每日任务”这种固定版式来说，最合理的结构不是每天复制一份视频工程，而是把项目分成两层：

1. 模板层：负责地球、云朵、纸飞机、任务面板、字体、颜色、动画、音频和渲染规则。
2. 内容层：只保存当天日期和文案，也就是 daily-quest.json。

最终的内容入口长这样：

{
  "date": "auto",
  "title": "地球online:",
  "mainTitle": "【每日任务】",
  "dailyTasks": [
    "给窗边的光拍一张今日存档",
    "清空一个小角落的杂物",
    "慢慢喝完一杯喜欢的饮品"
  ],
  "reward": "【松弛值 +8，生活感 +7】",
  "bonusTitle": "彩蛋任务（选做）",
  "bonusTasks": [
    "把枕头拍松，奖励自己发呆一分钟"
  ],
  "unlock": "完成后解锁【今日补能员】称号",
  "footer": "慢一点，也是在好好前进"
}

date 写成 auto 时，渲染脚本使用当天日期；需要补做历史视频时，也可以写成八位日期。模板始终读取当前 JSON，同时把每次敲定的内容归档为 daily-quest-YYYYMMDD.json。这样既方便每天使用，也能追溯哪一天用了哪组文案。

JSON 的另一个好处是，它把“文案问题”和“动画问题”分开了。任务太长，就让 Codex 只调整文案或排版；云朵飞得不自然，就只改动画组件。不会为了换一句话而动整套视频代码。

二、开始前只准备三样东西

如果系统弹出管理员权限确认，你只需要确认 Codex 正在申请的安装权限，不需要自己查找软件或研究安装步骤。

1. 一个空文件夹

在 Codex 中打开你准备放项目的空文件夹。文件夹名字建议使用英文，例如 earth-online-daily-quest，这样可以降低跨平台工具处理路径时的编码风险。

如果文件夹不是空的，也不要让 AI 直接覆盖。后面的每条提示词都明确要求：先检查现有内容，不删除文件，不覆盖历史成片，遇到同名目录先停下来说明情况。

2. 一条参考视频

把你想分析的短视频直接附在 Codex 对话里。参考视频的作用不是让 AI 复制素材，而是帮助它确定：

• 画面比例和时长；
• 开场与任务页分别持续多久；
• 标题、地球、日期和列表的视觉层级；
• 颜色、字体、留白和分割线；
• 云朵、飞机、转场和声音在什么时间发生变化。

我使用的参考视频约 8.17 秒。Codex 每隔半秒抽一帧后，得到下面这张完整联系表：

从联系表可以快速看出：前约两秒是开场，后面基本保持任务页稳定展示。原片开场和任务页的高分辨率关键帧如下：

这里的参考画面仅用于学习和视觉拆解。公开发布博客、课程或商业成片前，请确认你有权展示参考视频及截图。我们的项目会重新绘制地球、图标和动画，不直接复制原片资产。

3. 一段有使用权的背景音乐

把音乐文件也附给 Codex，并明确它是你有权使用的素材。教程不推荐来历不明的“免费音乐”，也不提取参考视频音轨。Codex 会检查音乐时长和开头静音，必要时转码，然后裁成 8 秒，做轻微淡入淡出并压低音量。

案例迭代过程中，我曾尝试过本地合成提示音和多段音乐，结果要么像蜂鸣，要么在任务画面切换时听感突变。对可复用模板来说，最稳妥的默认方案是一首治愈 BGM 全程连续播放，转场主要由画面承担。

三、提示词 1：让 Codex 检查、安装并验证环境

第一条提示词不要只说“帮我创建 Remotion 项目”。如果环境不完整，AI 很可能先给你一份安装教程，把工作重新推回给你。正确做法是明确要求它直接检查、安装、继续执行，并在最后提供证据。

把下面整段发给 Codex：

请在当前文件夹从零创建一个名为 earth-online-daily-quest 的 Remotion 项目。

先识别当前操作系统是 Windows 还是 macOS，并检查完成项目所需的 Node.js、npm、Git、FFmpeg 和 Remotion 渲染浏览器。不要给我安装教程，也不要让我手动执行命令；请直接使用当前系统已有的包管理能力或官方来源安装缺失项。只安装缺失的软件，不要无意义升级已经可用的环境。

要求：
1. 选择当前受 Remotion 支持的 Node.js LTS 版本，并锁定项目依赖版本和 lockfile。
2. 浏览器使用 Remotion 默认的跨平台发现或下载机制，不写死 Windows exe、macOS 应用目录或当前电脑的绝对路径。
3. FFmpeg 必须能够被后续脚本调用，用于参考视频分析、抽帧和最终验收。
4. 不删除当前目录中的任何文件；如果目标目录已存在，先检查并报告，不要覆盖。
5. 创建最小 Remotion Composition 后，实际完成一次类型检查、Studio 启动检查和单帧渲染测试。
6. 如果某一步失败，请读取完整错误、定位原因并继续修复，不要在第一次失败后只给建议。

完成后用表格报告：操作系统、Node.js 版本、npm 版本、FFmpeg 版本、Remotion 版本、浏览器状态、类型检查结果和单帧渲染文件路径。只有这些项目全部通过，才结束任务。

Codex 应该交付什么： 一个能启动、能渲染单帧的 Remotion 项目，以及一张环境验证表。它可能需要你确认系统权限，但不应该让你自己搜索下载页面。

看到什么才算通过： Node、npm、FFmpeg、Remotion 和浏览器都显示具体版本或明确可用状态；类型检查成功；项目目录里出现单帧图片。仅仅出现“依赖已安装”四个字不算通过。

Remotion 的浏览器配置默认值允许框架自行寻找或下载兼容浏览器，因此跨平台项目通常不需要把某台 Windows 电脑上的 Chrome 路径写进脚本。相关行为可以在 Remotion 官方配置 API 中核对。

四、提示词 2：先拆解参考视频，不要急着写动画

很多人把参考视频交给 AI 后，第一句话就是“照这个做”。这样得到的结果通常只有颜色相似，时间节奏和信息层级并不准确。应该先让 Codex 把视频变成可讨论的数据。

请分析我附在对话中的参考视频，先不要实现 Remotion 动画。

请完成以下工作：
1. 找到附件对应的视频文件，检查分辨率、帧率、总时长、视频编码和音频流。
2. 每隔 0.5 秒抽取一帧，生成带时间顺序的完整联系表；另外保存开场稳定帧和任务页稳定帧。
3. 按时间轴拆出场景：开场、交叉过渡、任务页，并估算各自的起止时间。
4. 分析品牌文字、主标题、地球、日期、任务标题、正文、奖励、彩蛋任务、称号和底部文案的层级、位置、字号比例、颜色和对齐方式。
5. 分析地球、云朵、纸飞机、任务图标和页面转场的运动方向、位移范围、显隐节奏与缓动类型。
6. 分析音频在开场、转场和任务页有没有明显变化，但不要提取或复用参考音轨。
7. 把结论写成 video-breakdown.md，包含时间轴表、视觉规格、动画清单和需要重新绘制的资产清单。

所有分析必须来自实际视频和抽帧结果，不要凭印象补全。不要删除原视频和任何抽帧文件。完成后向我展示联系表路径，并用不超过 15 条要点总结最重要的实现依据。

Codex 应该交付什么： 视频技术信息、半秒联系表、两张关键帧和一份拆解文档。

看到什么才算通过： 你能从联系表中直接确认场景切换时间；拆解文档给出具体比例和帧段，而不是“字体偏大、动画轻柔”这种无法编码的形容词。

五、提示词 3：创建 JSON 驱动的跨平台模板

拆解完成后，再让 Codex 搭项目骨架。这里需要一次性锁定视频规格、数据接口、文件职责和输出命名，否则后面每轮优化都可能破坏另一部分。

现在根据 video-breakdown.md 创建可复用的“地球 online 每日任务”Remotion 模板。

项目要求：
1. Composition 固定为 1080×1440、30fps、240 帧。开场从第 0 帧开始，任务页从第 48 帧开始，两个场景重叠 18 帧交叉过渡。
2. 唯一内容入口是 src/data/daily-quest.json，字段固定为 date、title、mainTitle、dailyTasks、reward、bonusTitle、bonusTasks、unlock、footer，并建立对应 TypeScript 类型。
3. date 支持 auto 或 8 位 YYYYMMDD；auto 按本地日期解析。任务正文来自数组，不把文案写死在组件里。
4. 按职责拆分 Root、DailyQuestVideo、OpeningScene、TaskPanel、PixelEarth、PixelIcon 和 AudioTrack，避免把整个视频写在一个文件中。
5. 自动引入支持简体中文的开源像素字体，把字体文件和许可证放进 public/fonts；保留系统中文字体作为回退。
6. 创建跨平台渲染脚本：每次输出 earth-online-daily-quest-YYYYMMDD-vNN.mp4，同一天自动递增版本，不覆盖旧视频；同时渲染第 44 帧完整日期封面，并记录 latest-render.json。
7. 创建 opening-check 和 panel-check 验收脚本，读取 latest-render.json 对最新视频抽帧。
8. 不写死当前电脑的盘符、用户目录、路径分隔符或浏览器可执行文件。使用 Node 路径 API 和 Remotion 默认浏览器机制。
9. README 只记录项目使用方式、JSON 字段、输出规则、字体与音乐授权，不要求你重复安装环境。

先完成静态排版，不要急着堆动画。运行类型检查，并分别渲染开场和任务页静态帧。检查所有中文是否清楚、无溢出、无重叠；发现问题直接修复后再报告。

Codex 应该交付什么： 可复用项目骨架、JSON 类型、静态开场、静态任务页、版本化渲染脚本和 README。

看到什么才算通过： 修改 JSON 后画面文字随之变化；同一天重复渲染会得到 v01、v02，而不是覆盖 final.mp4；Windows 和 macOS 脚本中都没有专属绝对路径。

字体可以选择 Fusion Pixel Font 一类支持中文的开源像素字体，但必须让 Codex 同时保存许可证并在 README 标注来源。不要只下载字体文件却遗漏授权信息。

六、提示词 4：重做治愈像素动画，而不是添加一堆弹跳

“灵动”并不等于所有元素一起弹。这个模板最终采用的是一条很短的小剧情：地球从第一帧就在画面中，云朵分成前后景缓慢漂移，纸飞机沿贝塞尔曲线从左下穿云飞向右上；飞机离开后，地球和云层继续轻微呼吸，直到任务页接管画面。

请根据参考拆解优化模板的视觉和动画，方向是“治愈像素小世界”，不是现代圆角 UI，也不是强弹窗游戏界面。

开场要求：
1. 第 0 帧就能读到“地球online:”“【每日任务】”、完整地球和日期，文字只做 2-4px 轻微落位与透明度稳定，不做逐字打字。
2. 地球使用独立像素 SVG，亚洲、东南亚和大洋洲轮廓可识别；显示尺寸约 580px，主体保持清晰，只用大气圈、浅阴影和纸张颗粒增加柔和感。
3. 地球持续做约 ±3px 浮动和 ±0.8% 呼吸，不明显旋转。
4. 三朵云使用更形象的像素贴纸 SVG，分为远景和前景，独立控制速度、透明度和层级。云朵经过地表时动态显隐，不要出现静止白块。
5. 白色纸飞机在第 6-44 帧沿左下到右上的贝塞尔路径飞过地球，根据路径切线调整朝向；尾迹只保留 3-4 个逐渐消散的浅蓝像素。
6. 飞机接近两朵前景云时，云朵只让开 4-6px；不使用 bounce、spring 或夸张变形。
7. 第 48-66 帧开场轻微上移淡出，任务面板从右下方小幅滑入，形成 18 帧交叉过渡。

任务页要求：
1. 左对齐三条日常任务、一条彩蛋任务，蓝色正文和粉色奖励保持高对比；可以一行显示的彩蛋文案不要提前换行。
2. 日常任务使用摊开的爱心书本图标，彩蛋任务使用有盒盖和蝴蝶结的礼物图标，均为清晰的内联像素 SVG。
3. 两个标题图标持续轻微呼吸，缩放约 0.97-1.04，并错开相位；标题文字和分割线不能跟着抖动。
4. 所有动画由 useCurrentFrame、interpolate、Easing 和 Math.sin 驱动，不使用 CSS animation，不使用会过冲的弹性动画。

完成后渲染第 0、12、24、36、48、60、90 帧做联系表。肉眼检查云朵在飘、飞机在飞、标题清楚、任务页稳定；如运动不明显或文字溢出，继续调整并重新渲染，直到满足要求。

Codex 应该交付什么： 新的地球和图标 SVG、完整逐帧动画，以及覆盖开场和转场的关键帧联系表。

看到什么才算通过： 不逐帧对比也能看出飞机穿云；云朵有前后层次但不抢标题；第一帧不空；任务标题、正文和图标在呼吸过程中不改变布局。

七、提示词 5：让 Codex 处理授权 BGM

音频最容易出现三个问题：文件开头有静音、任务页音量突然变化、最终 MP4 根本没有音轨。这一步不靠“听起来应该有”，而是让 Codex 同时做听感设计和技术验证。

请把我附在对话中的授权背景音乐接入当前 Remotion 视频。不要使用或提取参考视频音轨，也不要加入奖励蜂鸣、点击、强 ding 等刺耳提示音。

请直接完成：
1. 找到附件音乐，检查格式、采样率、声道、时长、开头静音和峰值音量。
2. 如果格式或编码不适合浏览器稳定播放，转成项目内适合 Remotion 的音频文件，并保留原始附件不删除。
3. 单首 BGM 从第 0 帧连续覆盖到第 240 帧。开头约 0.5 秒淡入，结尾约 0.7 秒淡出；如果源音乐开头有明显静音，自动寻找合适起点后裁切。
4. 将整体音量控制在舒适背景范围，不使用固定高音量。目标是画面切换时音乐连续，不因任务页出现而突变。
5. AudioTrack 使用 Remotion 帧数计算音量，不使用 CSS、定时器或浏览器随机行为。
6. 渲染一版测试 MP4，确认最终包含 AAC 音轨，并检查平均音量和峰值没有削波。

完成后报告源文件信息、处理后的文件路径、裁切起点、淡入淡出长度、最终音轨编码和音量检测结果。听感与技术检查都通过后才结束。

Codex 应该交付什么： 项目内音频文件、AudioTrack、带声测试视频和音量检测报告。

看到什么才算通过： MP4 明确包含 AAC 音频流；开场到任务页没有音乐断点；没有奖励蜂鸣；结尾不会在第 8 秒突然截断。

八、提示词 6：渲染不是结束，验收通过才是结束

AI 很容易在“文件生成成功”时结束任务，但一个 MP4 存在，不代表它能发布。完整验收至少要同时检查代码、关键帧、文件命名和音视频流。

请对当前模板做一次完整发布验收。不要只运行渲染；如果发现问题，请修改代码或脚本并重新验证，直到全部通过。

验收项目：
1. TypeScript 类型检查无错误。
2. 根据 daily-quest.json 渲染 1080×1440、30fps、240 帧的 H.264 MP4。
3. 按 JSON 日期生成 YYYYMMDD-vNN 文件名；存在旧版本时递增，不覆盖任何历史视频。
4. 同时生成第 44 帧封面，封面必须显示完整八位日期。
5. 从最新视频抽取 1 秒开场图和 3 秒任务页图。
6. 生成覆盖 0-8 秒的成片联系表，检查地球、云朵、飞机、转场、任务列表、奖励、彩蛋和底部文案。
7. 检查所有文字没有裁切、溢出、重叠或过早换行；任务图标呼吸时标题和分割线不能位移。
8. 检查最终文件的宽高、帧率、时长、视频编码、音频编码、采样率和声道。
9. 更新 latest-render.json，确保检查脚本读取的是刚生成的版本。

最终用一张表报告每项验收的预期值、实际值和通过状态，并给出视频、封面、开场检查图、任务页检查图和联系表的完整路径。任何一项失败都不要标记完成。

Codex 应该交付什么： 日期版本 MP4、完整日期封面、两张检查图、成片联系表、最新产物清单和验收表。

看到什么才算通过： 所有验收项都有实际值，不是笼统的“正常”；输出路径指向同一个最新版本；图片中能直接看到完整日期和完整任务文案。

这是最终 v12 每半秒的联系表，可以同时检查动画节奏和转场结果：

九、提示词 7：以后每天只说主题，让 Codex 生成文案并归档

模板完成后，日常使用不需要再碰 React。每天给 Codex 一个日期、主题和情绪方向，让它先生成适合手机画面的短文案，再归档和渲染。

请为“地球 online 每日任务”模板生成并渲染今天的新版本。

日期：[填写 YYYYMMDD，或写 auto]
主题：[例如 周末松弛、开学适应、下班恢复、轻量运动]
语气：轻松、治愈、有一点像素游戏感，适合学生和打工人，不说教。

文案规则：
1. 生成三条日常任务，必须低门槛、当天可完成、彼此类型不同。
2. 生成一条彩蛋任务，允许有一点荒诞感，但不能令人尴尬或造成危险。
3. 每条尽量保持单行可读；避免生僻词、长定语和重复句式。
4. 奖励写成“【属性 +数字，属性 +数字】”；称号写成“完成后解锁【称号】称号”。
5. footer 是一句不超过 16 个汉字的治愈结尾。
6. 先检查文案长度是否适合当前任务面板，再更新 src/data/daily-quest.json。
7. 把同一份内容归档为 src/data/archive/daily-quest-YYYYMMDD.json；如果归档文件已存在，不要覆盖，先报告冲突。
8. 运行完整渲染与验收流程，自动递增版本，并输出新视频和完整日期封面。

先向我展示最终 JSON 和长度检查结果，然后继续完成归档、渲染和验收。不要修改视觉模板、动画参数、字体或音频。

Codex 应该交付什么： 一份经过长度检查的当天 JSON、一份日期归档、新版本视频、新封面和验收结果。

看到什么才算通过： 任务可执行、语气统一、没有不自然换行；归档日期与视频日期一致；新输出版本没有覆盖昨天或同一天的旧版本。

十、五个常见问题，直接把修复提示词交给 Codex

保姆级教程不应该假设每台电脑第一次都顺利。下面五条不是让你研究错误，而是当相应问题发生时，直接交给 Codex继续处理。

1. 系统权限或安装能力失败

刚才的环境安装没有完成。请先读取完整错误，区分是权限不足、系统策略、网络失败还是包管理能力不可用。不要让我手动寻找安装包。

请在不删除现有文件的前提下选择当前系统可行的官方安装方式；如果确实需要管理员确认，只暂停并明确告诉我正在申请什么权限、为什么需要。权限确认后继续安装和原来的验证流程，不要从头重建项目。最后重新输出环境验证表。

2. Node、npm 或依赖状态混乱

请诊断当前 Node.js、npm、package.json、lockfile 和 node_modules 是否版本不兼容或安装不完整。先读取项目声明和实际版本，再选择与当前 Remotion 兼容的修复方式。

不要删除源码、public、out 或历史成片；不要盲目升级所有依赖。修复后重新完成依赖一致性检查、TypeScript 检查和单帧渲染，并报告实际版本与结果。

3. Remotion 浏览器下载或启动失败

请完整诊断 Remotion 无法启动渲染浏览器的问题，检查下载缓存、网络、系统架构、执行权限和项目中是否残留了其他电脑的硬编码浏览器路径。

移除平台专属路径配置，改用 Remotion 默认的跨平台浏览器发现或下载机制。不要让我手动下载 zip。修复后实际渲染一张 PNG，并报告浏览器来源、架构和输出路径。

4. 中文字体不清楚、缺字或文字溢出

请检查字体文件是否真实加载、许可证是否保留、中文字符是否完整覆盖，以及字体加载是否在 Remotion 截帧前完成。不要只更换 font-family 名称。

分别渲染开场和任务页原始分辨率检查图，定位缺字、发虚、裁切、重叠和不必要换行。优先调整容器宽度、字号、行高和文案长度，不缩放整个画面。修复后对比前后检查图，并确认最长任务和彩蛋文案仍然可读。

5. 视频无声、黑屏或输出规格错误

请把这次渲染视为失败并进行端到端诊断。检查 Composition、帧范围、资源路径、字体等待、音频解码、渲染日志和最终媒体流，不要只重复运行同一条渲染。

找到根因后做最小修复，保留历史输出并生成新版本。重新检查 0秒、1秒、3秒和7秒画面，以及最终宽高、帧率、时长、H.264视频流和AAC音频流。只有画面非空、文字完整、音频存在且规格全部正确时才结束。

这些提示词有一个共同点：要求 AI 先读取证据，再做最小修复，最后重新跑原来的验收。 如果只说“再试一次”，它很可能重复同一个失败动作。

十一、Windows 和 macOS 为什么可以共用一套提示词

跨平台不是把 Windows 命令和 macOS 命令各写一遍，而是让项目本身不依赖某台电脑：

用户看到的流程在两个系统上应该完全一致：选文件夹、上传两个附件、依次粘贴提示词、查看 Codex 的交付和验收表。底层安装方式可以不同，但不应该由你承担这个分支判断。

十二、这套模板真正节省的不是八秒，而是以后每一天

第一次制作模板，时间主要花在拆解参考视频、确定信息层级、调整地球比例、让云朵和纸飞机动得自然，以及保证中文任务在手机上清楚。这个过程值得认真做，因为完成以后，每天的工作只剩下一句话：

为明天生成一组轻松、治愈、适合学生和打工人的每日任务，检查排版后归档并渲染新版本。

Codex 会把这句话变成当天 JSON，再交给 Remotion 生成视频。模板负责稳定，JSON 负责变化，验收脚本负责阻止错误成片进入发布环节。

这也是我认为 Codex + Remotion 最适合内容创作者的地方：Codex 不是替你“写几段代码”，而是接管整条本地制作流程；Remotion 也不是只做一次动画，而是把已经确认的审美和规则变成可以重复执行的系统。

当环境安装、文件命名、封面生成、音频检查和关键帧验收都被写进提示词以后，你不需要先成为前端工程师，也能从一条参考视频出发，做出一套真正可以每天复用的短视频模板。

最后提醒两点：背景音乐和参考画面要确认使用权限；如果将 Remotion 用于团队或商业项目，也请在发布前查看其最新的官方许可说明。