Codex使用Remotion制作知识类代码视频.docx - Word

Remotion 网页动画视频制作任务

你需要使用 Remotion 技能完成一个完整的“数据/主题讲解类网页动画视频”。

最终目标不是简单制作一个网页,而是制作一个真正具有视频感、讲解感、视觉设计感和完整叙事逻辑的动画视频。


一、首先向我索取必要信息

在开始任何开发工作之前,不要自行假设主题和 API Key。

你需要先向我索取以下两个信息:

  1. 科大讯飞语音合成 API Key / Secret 等必要鉴权信息
  2. 本次视频需要围绕的主题

如果我没有提供这两项信息,不要开始正式制作。


二、技术要求

必须使用:

  • Remotion
  • HTML / CSS / JavaScript / React 等 Remotion 所需技术
  • Remotion 推荐的科大讯飞 API 进行中文语音合成
  • 最终生成 MP4 视频
  • 同时生成一个可以直接打开预览的单独 HTML 文件

HTML 要求

最终 HTML 必须尽可能做到:

  • 单文件
  • 不依赖本地开发服务器
  • 不需要启动 Node.js
  • 不需要安装额外环境
  • 双击 HTML 即可打开预览
  • 网页中的动画、文字、图形等内容均可正常运行

如果 Remotion 的某些能力无法直接完整封装进单 HTML,需要优先寻找最简单可靠的实现方式,而不是留下一个只能通过开发服务器运行的半成品。


三、主题研究与真实性要求

整个视频必须围绕我提供的主题展开。

这是一个非常重要的硬性要求:

所有数据、数字、事实、历史事件、实验结果、研究结论、人物信息、机构信息等,都必须真实存在。严禁为了让动画更精彩而编造数据。

你可以并且应该进行联网搜索,对资料进行查证。

数据研究要求

对于需要数据支撑的内容:

  1. 搜索可靠来源
  2. 优先使用:
    • 官方机构
    • 政府/国际组织
    • 学术论文
    • 大学/研究机构
    • 官方统计数据
    • 权威数据库
    • 主流媒体
  3. 对关键数据进行交叉验证
  4. 不确定的数据不要使用
  5. 不要为了凑动画而制造不存在的数据
  6. 不要把推测写成事实
  7. 如果不同来源的数据存在差异,需要明确说明数据口径或选择更可靠的数据来源

内容来源

制作过程中应该记录关键事实对应的来源,方便后续检查。

如果某个数据没有可靠来源,就不要使用。


四、视频内容设计

不要把整个视频设计成:

5秒 → 换一个页面 → 5秒 → 再换一个页面

这种机械式 PPT 动画。

必须把它当成一个真正的视频讲解作品进行设计。


叙事结构

根据主题自动设计合理的视频结构,例如:

1. 开场 Hook

快速提出一个能够吸引观众的问题、现象或数据。

例如:

“你可能不知道,这个看似普通的现象,背后隐藏着……”

开场应该具有明显的视觉冲击力。


2. 问题提出

告诉观众:

  • 我们正在讨论什么
  • 为什么值得关注
  • 问题到底是什么

3. 数据与事实

通过:

  • 数字
  • 图表
  • 时间线
  • 地图
  • 对比
  • 动态指标
  • 信息卡片
  • 数据可视化

逐步展示真实资料。


4. 逻辑分析

不能只是“展示数据”。

必须建立:

事实 → 数据 → 解释 → 关系 → 结论

让观众能够理解为什么会得到这个结论。


5. 关键转折

根据主题寻找真正有价值的:

  • 反常识数据
  • 巨大差异
  • 时间变化
  • 因果关系
  • 关键节点
  • 意外结果

利用视觉和节奏制造转折。


6. 最终结论

最后对整个视频进行总结。

不要突然结束。

需要让观众明确知道:

“所以,我们最终得出了什么结论?”


五、视频节奏要求

这是非常重要的要求。

不要固定每 N 秒切换一次场景。

场景持续时间应该根据:

  • 旁白内容
  • 信息量
  • 视觉重点
  • 数据变化
  • 叙事节奏
  • 情绪变化

动态决定。

例如:

一句非常重要的数据,可以停留更久。

连续快速的数据,可以快速切换。

复杂图表需要给观众足够的理解时间。

高潮部分可以加快节奏。

结论部分可以适当放慢。

最终效果应该像一个真正的视频,而不是 PPT 自动播放。


六、视觉设计要求

整体视觉必须达到正式成片级别,而不是普通网页 Demo。

根据主题自动选择合适的视觉风格。

可以使用:

  • 深色科技风
  • 新闻数据可视化
  • 纪录片风
  • 科技发布会风
  • 极简高级风
  • 未来感 UI
  • 数据大屏风
  • 地图可视化
  • 信息图表

但不要为了“炫酷”而炫酷。

视觉效果必须服务于信息表达。


七、动画要求

动画不能只有简单的:

fade in
fade out
slide

需要合理结合:

  • 数字滚动
  • 图表生长
  • 数据变化
  • 文字逐字出现
  • 文字分组出现
  • 缩放
  • 位移
  • 视差
  • 景深感
  • 镜头推进
  • 镜头拉远
  • 图形展开
  • 粒子
  • 遮罩
  • Morph / 形态变化
  • 页面之间的连续转场
  • 元素共享运动
  • 数据之间的视觉关联

动画必须具有明确的视觉逻辑。

例如:

一个数字从 100 → 150,不应该只是两个数字淡入淡出,而应该让观众看到“100增长到150”的过程。


八、场景切换要求

场景之间必须尽量做到连续转场。

不要:

场景 A 完全结束 → 黑屏 → 场景 B 出现

应该尽可能做到:

场景 A 的元素 → 经过动画 → 变成场景 B 的元素

例如:

  • 一个数字放大后变成下一场景标题
  • 一条曲线延伸到下一场景
  • 地图缩放进入下一场景
  • 一个图表元素移动到下一张图表
  • 镜头推进进入下一场景
  • 背景空间发生变化

让整个视频像一个连续的视觉作品。


九、配音要求

必须使用科大讯飞 API进行语音合成。

配音:

  • 中文
  • 青年女性
  • 自然
  • 富有情感
  • 有明显的语气变化
  • 不要机械朗读
  • 不要像导航语音
  • 不要像机器人
  • 语速自然

旁白应该根据视频节奏进行分段。

不要把整个视频文本一次性合成为一条超长音频。

应该根据:

  • 场景
  • 句子
  • 语义
  • 节奏

合理切分。


十、旁白与动画必须同步

这是验收重点。

动画不能和旁白脱节。

例如旁白说:

“2010年,这个数字只有100。”

此时应该出现:

2010
100

旁白继续:

“到了2020年,它已经增长到300。”

画面应该同步:

2010 → 2020
100 → 300

而不是旁白已经讲到下一部分,画面还停留在上一部分。


十一、文字设计

视频中的文字必须:

  • 清晰
  • 易读
  • 层级明确
  • 不堆文字
  • 不出现大段论文式内容
  • 重点数据突出
  • 标题与正文有明显层级

不要为了塞信息,把一整段文章直接放到屏幕上。

应该把文章转化为:

标题 + 关键词 + 数据 + 图表 + 简短解释


十二、图表要求

如果主题涉及数据:

优先使用动态数据可视化。

例如:

  • 折线图
  • 柱状图
  • 面积图
  • 饼图
  • 环形图
  • 排名
  • 时间线
  • 数据卡片
  • 百分比
  • 地图
  • 对比图

图表必须符合真实数据。

不能出现:

数据是真实的,但为了动画效果修改了数值。

如果使用动画插值,只允许改变视觉表现,不允许改变实际数据含义。


十三、声音与节奏

除了旁白之外,如果条件允许,可以加入适当的:

  • 背景音乐
  • 转场音效
  • 数据出现音效
  • 强调音效

但是:

不能让音效盖住旁白。

声音应该服务于视频内容,而不是喧宾夺主。


十四、禁止事项

严禁:

  1. 编造数据
  2. 编造研究结论
  3. 编造人物/机构信息
  4. 把推测写成事实
  5. 使用未经验证的网络信息作为关键结论
  6. 为了视觉效果修改真实数据
  7. 每固定几秒机械切场景
  8. 使用大量没有意义的炫酷动画
  9. 大量堆叠文字
  10. 让旁白与画面不同步
  11. 留下明显的占位符
  12. 留下 TODO
  13. 留下 Demo 数据
  14. 留下测试文字
  15. 留下调试 UI
  16. 在最终视频中出现进度条
  17. 在最终视频中出现播放器控制器
  18. 把开发界面当成最终作品
  19. 为了兼容旧代码增加复杂的兼容层
  20. 没有验证就声称制作完成

十五、最终视频画面要求

最终视频只允许出现:

网页动画内容本身。

不要出现:

  • 播放器 UI
  • 浏览器地址栏
  • 进度条
  • 调试信息
  • FPS
  • Remotion 控制器
  • 开发工具
  • 代码
  • 水印
  • 测试按钮

视频应该是一个完整、干净的成片。


十六、自我检查机制

完成第一版后,不能直接宣布完成。

必须主动进行一次完整的自检。

至少检查以下内容:

内容检查

  • 数据是否真实
  • 数据来源是否可靠
  • 是否存在编造内容
  • 是否存在事实错误
  • 是否存在前后矛盾
  • 是否存在数字矛盾
  • 是否存在逻辑跳跃
  • 因果关系是否被错误表达
  • 结论是否能够由前面的事实支撑

叙事检查

检查:

开场 → 问题 → 数据 → 分析 → 转折 → 结论

是否逻辑完整。

确认观众即使不了解这个主题,也能够理解整个故事。

视觉检查

检查:

  • UI 是否美观
  • 是否有明显设计缺陷
  • 是否存在元素重叠
  • 是否存在文字溢出
  • 是否存在文字太小
  • 是否存在动画卡顿
  • 是否存在动画突变
  • 是否存在布局跳动
  • 是否存在不自然的转场
  • 图表是否准确
  • 数字是否正确
  • 视觉层级是否合理

动画检查

重点检查:

  • 文字动画
  • 数字动画
  • 图表动画
  • 视差动画
  • 镜头运动
  • 场景转场
  • 元素连续运动
  • 动画速度
  • 缓动曲线
  • 动画衔接

不能出现明显的:

“这里明显是程序动画,而不是视频动画”

的感觉。


十七、实际运行检查

必须实际运行项目并进行预览。

不要只检查源代码。

至少完成:

  1. 启动 Remotion 项目
  2. 实际预览
  3. 检查完整视频
  4. 修复发现的问题
  5. 再次预览
  6. 最终渲染 MP4
  7. 检查最终 MP4 是否能够正常播放

如果发现问题:

修改 → 重新运行 → 再检查

不要仅仅告诉我“理论上应该没问题”。


十八、最终输出文件

最终至少需要生成:

项目目录/
├── index.html          # 单文件网页,可直接打开预览
├── output.mp4          # 最终视频
└── 其他必要资源

如果可以做到,应尽量让 index.html 自包含。

最终 MP4 必须是完整成片。


十九、最终验收标准

最终作品必须同时满足:

内容

真实、准确、有来源、有逻辑。

叙事

像一个真正的视频讲解,而不是 PPT。

设计

高级、现代、美观、有统一视觉语言。

动画

流畅、自然、有节奏,不机械。

配音

自然、有感情、像真人讲解。

同步

旁白、文字、图表、动画高度同步。

成片

没有进度条、没有调试元素、没有开发痕迹。

技术

HTML 可以直接打开预览,并成功生成 MP4。


二十、执行原则

在开发过程中遵循以下原则:

  1. 先研究,再设计。
  2. 先确定叙事,再制作动画。
  3. 先保证内容正确,再追求视觉效果。
  4. 动画服务于内容,不为了动画而动画。
  5. 数据必须真实。
  6. 所有关键结论必须有依据。
  7. 不要过度工程化。
  8. 优先选择简单、可靠、当前可运行的实现。
  9. 发现问题立即修复,而不是绕过问题。
  10. 最终必须实际运行和渲染验证。

现在开始

在开始制作之前,请先向我询问:

① 科大讯飞语音 API Key / Secret 等必要鉴权信息

② 本次视频需要围绕的主题

拿到这两项信息后,再开始进行资料搜索、内容策划、视觉设计、Remotion 开发、配音、动画制作、自检以及最终 MP4 渲染。

第1页,共1页
本文共0个字符
中文(中国)
辅助功能
文档日期2026-10-08 9:40:36