「Vibe 知识大赏」保姆级教程：用 AI 和代码做一支知识短片

一段知识短片，不出镜、不拍摄，也能用动态文字、图形和声音把一个概念讲得让人愿意看下去。这就是「Vibe 知识大赏」这类内容吸引人的地方。

反直觉知识、情绪共鸣和系列化选题，是这类短片常见的切入点。值得借鉴的表达方法是：选一个问题，把它讲清楚，再用画面帮助观众理解。

但流量数字会变化，活动也有期限。本文不把未经独立核验的涨粉数据当成结论；素材中“10 月 31 日前投稿”的描述，截至本文发布时已经是过去时间。准备参加活动，请以平台当前话题页为准。

这次我们把方法整理成一条可以动手走通的路线，并实际做了一段代码动画。先看效果，再拆步骤。

先看效果：一束光，走了多久？

下面这支《光行时》是本站制作的 12 秒、720 × 1280、24fps 静音样片。画面使用 Canvas 绘制，由 Playwright 导出 288 帧，再用 FFmpeg 合成为 MP4。

下载 MP4 样片 · 下载演示源码 ZIP

样片只讲一个事实：太阳表面发出的光到达地球，平均约需要 8 分 20 秒。 NASA 的科普资料也采用这一近似表述。它适合做短片，是因为一个日常经验——“我正在看太阳”——可以被转换为一个有记忆点的认识：“我看到的是几分钟前的它。”

这里先不追求配乐、旁白和复杂三维模型。把事实、字幕、画面与导出跑通，才有下一步增加表现力的基础。

一、先准备工具，分清谁在做什么

“让 AI 一句话出片”，背后仍然需要一套可执行环境。模型负责写代码和协助排错；真正绘图、截帧和编码的是相应软件。

工具	在流程中的职责	是否必需
AI 编程助手	帮你整理分镜、编写动画与导出脚本	可选，但能减少手工编码
HTML Canvas	绘制文字、图形、粒子与二维动画	本文样片使用
Three.js	制作相机运动、三维物体等效果	有3D需求时再加入
Playwright + Chromium	在固定时间点调用绘图函数并导出图片	本文逐帧方案使用
FFmpeg	把图片序列编码为MP4，按需合成音频	需要
Python	合成音效、分析节拍或生成辅助素材	按需
获授权的音频素材	配乐、音效或旁白	本文静音样片不需要

Claude Opus 5.5 可以作为编程助手的选择之一，模型信息以 Anthropic 官方页面为准。也可以使用其他能够完成任务的编程模型；本文没有进行模型之间的效果对比。

更关键的是运行环境：能聊天，不等于能访问你的本地文件、启动浏览器并执行 FFmpeg。 如果使用网页聊天窗口，需要确认它提供哪些工具；如果使用本地编程助手，则要准备好相应命令行环境。

不必为了复现本文购买来源不明的共享账号或依赖临时优惠。模型、套餐、额度和工具权限，直接在官方渠道核对即可。

二、选题：只讲透一个知识点

先看平台上观众愿意讨论什么，再决定自己的切入点。对标时记录“为什么想看”，比记录点赞数字更有用。

可以从三个方向找题：

• 反直觉问题：直觉会得出一个答案，事实却指向另一个答案。
• 当下事件的知识解释：围绕一个新闻问题，补上理解它所需的背景。
• 日常体验背后的机制：为什么会遗憾、为什么觉得时间越来越快、为什么反复听一句话会失去新鲜感。

动笔前，为选题写一句核心句。例如：“我们看到的太阳，是光走过约 8 分 20 秒后留下的影像。”如果一句话里同时塞进了光速、宇宙年龄、恒星演化和人生哲学，就先删掉三个。

接着做事实表：

准备说的内容	需要核对什么
数字、比例和距离	单位、近似条件、统计时间及来源
新闻或获奖信息	具体年份、奖项名称、官方公告
人物观点或经典引文	原文、作者、上下文，避免拼接错引
活动扶持、奖励与截止时间	平台当前规则，不沿用旧截图

可以让 AI 帮你找线索，但要打开来源核对。尤其不要把“看起来合理”的数字直接画成一张很漂亮的图。

三、标题与前两秒：先给观众一个理由

知识短片的标题不一定要喊“颠覆认知”。更稳定的做法，是把问题说具体。

方向	可尝试的标题写法	注意事项
数字与反差	你看到的太阳，为什么慢了约8分钟？	数字要有来源
日常体验	为什么一段日子过得很快，回忆起来却很长？	不把复杂结论写成绝对定律
热点解释	一条新闻背后，到底发生了什么？	别把旧新闻包装成刚发生
连续专题	一个概念，一次讲清：光行时	系列名称与实际内容保持一致

开头可以直接出现问题和画面：“你看到的太阳，其实来自过去。”然后给出解释，最后落回观众可以理解的尺度。

避免长黑场、慢慢出现的片头和大段背景铺垫。第一帧就告诉观众：这支片子在讲什么，为什么值得停留。

四、视觉风格：把“高级感”换成参数

“做得有电影感”对执行帮助不大。颜色、字体、字幕位置和运动节奏越具体，AI 越容易理解你要什么。

参考作品时，可以分析色彩、构图和节奏，但不要直接照搬他人的画面、配音、音乐和独特表达。用你有权使用的素材，重新组织自己的内容。

下面这段提示词适合提取风格参数：

请分析我提供的参考视频或关键帧，整理一份可执行的视觉规范。
只提取一般设计规律，不复制原作品的具体画面或文案。

请分别说明：
1. 配色：背景、正文、强调色，给出色值。
2. 光线：主光方向、对比、暗角和光晕的强度。
3. 质感：是否使用颗粒、粒子、模糊；控制在什么程度。
4. 字幕：字体类别、字号层级、行长、位置和安全区。
5. 动效：进入、停留和退出的时长；主要缓动方式。
6. 节奏：镜头切换与观点转折的对应关系。
7. 构图：主体、标题、字幕分别占什么位置。

最后输出一份风格参数表，并列出仍需我确认的项目。

本页样片采用近黑背景、暖金强调色和米白文字。图形很简单：两个天体、一条传播路径、一个移动光点。视觉始终围绕“光需要时间”展开。

五、制作流程：先看样片，再渲染全片

先写时间轴，不急着写代码

以一支60秒视频为例，可以先安排如下结构。这是叙事参考，不是必须照搬的模板。

时间	作用	需要交付的内容
0—2秒	抛出问题	首帧画面、钩子短句
2—15秒	建立理解	概念、场景与关键条件
15—40秒	解释机制	两到三个有因果关系的画面
40—55秒	回答开头	回到核心事实，解释其意义
55—60秒	留下余味	一个克制的结论或开放问题

让每一帧由时间决定

逐帧渲染时，最重要的接口是 window.draw(t)。输入几秒，就画出那个时刻的画面。

window.draw = function (t) {
  // 每次都从清空画布开始。
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 用时间直接计算位置，不依赖上一帧的累积状态。
  const progress = Math.max(0, Math.min(1, t / 8));
  const x = startX + (endX - startX) * progress;

  drawBackground(t);
  drawSunAndEarth();
  drawLightPoint(x);
  drawCaption(t);
};

上面是结构示意，ctx 和各绘图函数需要在项目中定义；可运行版本在本文源码包内。

导出时不要依赖真实时间、持续累加的粒子位置或无种子的随机数。否则同一个 t 可能画出不同结果，截帧后就会出现跳动或无法复现的问题。中文字体也要先加载完成，再开始截帧。

先审静帧，再审短样片

建议先看几个关键时间点：开头、第一次转折、解释最密集的画面和结尾。检查文字有没有被裁切、重点是否突出、手机上能不能读清。

然后只渲染前15秒。看完再决定字体、运动速度、字幕密度和声音节奏。本文为了展示整条导出链路，附的是一支独立的12秒样片，规格与后面的60秒提示词模板不同。

最后再处理声音

音乐、字幕和镜头应该互相配合，但不必把每一次变化都机械对齐节拍。先保证知识解释清楚，再处理重音、停顿和转折。

使用音乐库时，确认音乐对目标发布平台及用途的授权范围，不能因为能够试听或导出，就默认允许跨平台商用。没有合适的BGM，也可以先交付静音样片，避免用声音掩盖画面问题。

六、完整提示词：交给能执行代码的助手

下面是基于原素材重组的制作指令。先替换方括号内容，再交给具有文件、浏览器与命令行能力的编程助手。它是一份制作任务书，不是任何模型“一次必成功”的保证。

请用“代码生成视频”的方式，制作一支知识短片。

主题：[填写主题]
核心句：[观众看完必须记住的一句话]
事实来源：[提供官方链接；缺少时先检索、核验并列出出处]
时长：60秒
画幅：[1920×1080横屏 / 1080×1920竖屏，二选一]
帧率：30fps
视觉：[粘贴配色、字体、构图、安全区与运动参数]
音频：[我提供的已获授权音频 / 先做静音样片]

请按阶段完成：

1. 检查环境，说明哪些软件、字体或素材尚不具备。
2. 先核实事实和数字，区分事实、近似值及艺术表达。
3. 输出带时间码的分镜表：画面、字幕、音效、来源。
   前2秒直接出现问题和画面；一支片子只讲一个核心知识点。
4. 用HTML Canvas编写动画，确有必要时才加入Three.js。
   暴露window.draw(t)，画面完全由t决定。
   不依赖真实时间；随机效果使用固定种子。
5. 等待字体加载，导出多个关键时刻的静帧检查。
6. 先渲染15秒样片，附关键帧总览；发现遮挡、缺字、
   错误数据或节奏问题时先修复，再交付样片供确认。
7. 样片确认后，使用Playwright逐帧导出完整画面。
8. 如需音频，按分镜混音，核对授权、时长与峰值。
9. 用FFmpeg导出H.264视频；有音频时使用AAC，
   设置兼容的像素格式，并便于网页渐进播放。
10. 检查实际视频：时长、分辨率、首尾、字幕与声音。
    交付MP4、海报、字幕、分镜与来源清单、源码ZIP。

不要虚构完成状态。遇到错误请说明原因并修复，
每完成一个阶段简短报告结果；无法运行的部分明确标注。

七、想自己跑一遍？从这份源码开始

下载《光行时》演示源码，解压到独立目录。目录内有 scene.html、render.mjs 和 package.json，不要把它当成需要安装到 N24 网站里的插件。

在已经安装 Node.js 与 FFmpeg 的环境里，进入解压后的目录：

npm install
npx playwright install chromium
npm run render

输出位于 output/，包含帧序列、海报和 MP4。Windows、macOS、Linux 的中文字体环境不同；出现方框字时，先安装合适的中文字体，再重新渲染。

本文样片使用的核心编码命令如下。帧率必须与导出帧序列时保持一致。

ffmpeg -framerate 24 -i output/frames/%05d.jpg \
  -c:v libx264 -crf 21 -preset medium \
  -pix_fmt yuv420p -movflags +faststart \
  output/light-travel-demo.mp4

这是静音视频的导出方式。需要音乐或旁白时，再补充实际音轨与混音流程。不要把“有一个MP4文件”当成最终验收：一定要播放检查，而不只是看静帧。

八、常见问题

为什么 AI 给了代码，却没有视频？

先看它所在的环境是否允许写文件、运行浏览器、执行FFmpeg。环境不具备时，模型通常只能交付代码或制作说明；需要在本地运行，才能得到视频文件。

为什么预览流畅，导出却卡顿？

检查动画是否依赖真实时间或前一帧状态；检查截图帧率与编码帧率是否一致；也要确认没有缺帧或乱序。本文用固定时间点重画每帧，就是为了减少这类问题。

为什么不直接做三分钟？

时长越长，文字、分镜、素材和渲染成本越高。先做15秒样片，可以尽早发现风格和表达上的问题；确认后再扩展，比一次导出几千帧再返工更省事。

这样做就会涨粉吗？

不会有这样的保证。制作流程能帮助你控制质量与迭代成本，传播还受选题、表达、账号基础、发布时间和平台分发等因素影响。别把个别案例的成绩当成可复制的承诺。

写在最后

代码出片最有价值的地方，是把“我想做一个解释”变成可以反复调整的画面系统。改一句字幕、调整一个时间点，就可以重新渲染，而不必重新拍摄。

但真正值得留下的，仍然是那个问题有没有被讲清楚。

从一个知识点、一张分镜表、一段短样片开始。把第一支片子做完整，再去想下一支。

资料与来源

• Anthropic：Claude Opus 5.5 官方介绍：模型信息参考，不构成本文的模型对比测评。
• NASA Space Place：All About the Sun：太阳光到达地球约需8分20秒的科普依据。
• Playwright：截图文档：浏览器截图接口。
• MDN：Canvas API：画布绘图基础。
• FFmpeg 官方文档：编码与音视频处理参考。

选题及初始制作流程参考了署名为“观默（@guanmo_ai）”的素材。本文由 N24 重新组织与补充，不沿用原作者个人履历；页面中的样片、配图与演示代码为本站制作。原素材中的账号增长数据未独立核验，未作为标题或制作效果的依据。