Vibe知识大赏视频怎么做：用 Claude Code + Opus 5.5 代码生成知识动画（Canvas / Remotion 两条路线）
阅读说明
官方文档查阅日期：2026-10-25；GitHub 仓库信息查阅日期：2026-10-25。活动规则见 抖音 Vibe知识大赏是什么。本文不写价格，也不承诺播放量或流量。
一句话结论
Vibe知识大赏视频，本质是让编程代理写一段"画面完全由时间 t 决定"的动画代码，再逐帧截图压成 MP4。模型只交付代码，画面由浏览器或 Remotion 渲染。新手先走 Canvas 路线（单个 HTML，依赖少）；已经装好 Remotion 的，直接用 Remotion 路线。
Claude Models overview 写明 Claude 模型的输出是文本，所以"Opus 5.5 直接生成视频"的说法不准确：它写的是代码，MP4 是渲染出来的。模型怎么选，见 Claude Opus 5.5。
这种视频长什么样
据话题下的作品和多个开源项目 README 的归纳，常见形态有这些共同点（这是第三方总结，不是抖音规定）：
| 维度 | 常见做法 |
|---|---|
| 画幅 | 1920×1080 横屏居多，30 fps |
| 时长 | 1–3 分钟，一条只讲透一个知识点 |
| 声音 | 多数没有人声旁白，信息全靠底部字幕；配纯音乐和动作音效 |
| 画面 | 深色底、代码绘制的图形动画；字幕说到什么，屏上就演什么 |
| 结构 | 反常识钩子 → 例子或实验 → 机制演示 → 落到日常 → 结尾金句和出处 |
有人声口播、要配图片素材的讲解片也存在，但制作量更大。下面按无旁白形态写。
两条路线怎么选
| Canvas 路线 | Remotion 路线 | |
|---|---|---|
| 画面怎么写 | 一个 HTML 页面，暴露 draw(t) 或 render(t)，画面只由时间决定 | React 组件，用 useCurrentFrame() 取帧号 |
| 怎么导出 | Playwright 或 Puppeteer 驱动浏览器逐帧截图，ffmpeg 合成 | npx remotion render，或在 Studio 里点 Render |
| 优点 | 单文件、零构建，双击能预览，适合短平快 | 预览、时间轴、字幕、音频都有官方能力；Agent Skills 教代理写对 API |
| 要注意 | 自己处理字体加载、确定性随机数、音画合成 | 公司使用要先看 Remotion License |
| 现成 Skill | vibe-knowledge-film、concept-reel、xiazhuo 版 vibe-knowledge-video | GuanLi22 版 vibe-knowledge-video |
两条路线的共同前提是 Claude Code（或其他能执行命令的编程代理）、Node.js / Python、ffmpeg。Claude Code 和 Remotion 的安装见 环境搭建，本文不重复。
七步做一条
1. 选题并核实事实
挑一个有反直觉结论、能画出来、有可查出处的知识点：经典实验、诺奖成果、概率或心理学效应都常见。动手前先让代理逐条列事实和出处，查不到可靠出处的直接换题。知识类评论区很较真，这一步省不得。
示例提示词（非官方）
先不要写代码。
主题：【例如：幸存者偏差】
1. 列出这个主题里要用到的每一条事实，给出处（论文/书/机构 + 年份）。
2. 查不到可靠出处的事实标出来，不要用。
3. 给我 3 个不同的切入角度，每个用一句话说清"观众看完会明白什么"。
2. 写字幕稿
无旁白的片子，字幕就是全部文案。常见约束：每屏一句、一眼读完；每句停留 2–3 秒以上；名词和公式放在观众看过例子之后。总时长按句数倒推，不要为了压时长删结论句。
3. 分镜表
一行一个镜头：时间段 | 屏上主体（叫得出名字的东西） | 它在做什么 | 字幕。HeyChengC/vibe-knowledge-film 的 SKILL.md 有一条很好用的检查：把字幕遮住，问"屏上这是什么、在干什么"，答不出来就换画面。点、线、方框加标签不算画面。
4. 定视觉风格
一条片只用一套配色和字体。可以让代理先出 2–3 种风格的静帧，你挑一个。想要现成的风格词表，看 mg-styles-15；场景结构可参考 四种场景模板。
5. 写代码，先做最难的一镜
把分镜表交给代理，先只做最难画的一镜或开头 10–30 秒样片，截几张关键帧看构图、文字遮挡和可读性，改两三轮再铺全片。
Canvas 路线的关键约束：
示例提示词（非官方）
用一个 HTML 文件 + Canvas 写这支片子。
- 暴露 window.draw(t)，画面完全由 t（秒）决定；不要用 requestAnimationFrame、Date.now() 和不带种子的随机数。
- 字体加载完成后再开始渲染。
- 1920×1080，30fps，时长 【60】 秒。
- 先只实现分镜表里第 【3】 镜，给我 t=【12, 14, 16】 三张静帧，我确认后再做其余镜头。
分镜表：
（粘贴）
Remotion 路线：在项目里用 /remotion-create 建 composition，用 /remotion-markup 写画面（Remotion Agent Skills 列出的技能），npm run dev 打开 Studio 逐帧检查。更完整的提示写法见 从提示词到成片。
6. 渲染导出
- Canvas：用 Playwright 打开页面，循环调用
draw(t)并截图，把图片序列交给 ffmpeg 编成 H.264 MP4。几个开源 Skill 都带了现成的渲染脚本，不必自己写。 - Remotion：
npx remotion render <CompositionId> out/video.mp4，或在 Studio 里点 Render。渲染原理和参数见 Remotion 渲染文档。
渲染时间随时长、帧率、画面复杂度和机器性能变化，先渲染短片段确认，再出全片。
7. 配乐和音效
- 音效：常见做法是让代理用 Python（numpy）合成重击、呼啸、提示音，按分镜里的动作时间点混进去。
- 配乐：用你有权使用的音乐。想让切镜踩在重拍上，先测 BPM 和重拍时间，再把镜头切点对齐。GuanLi22/vibe-knowledge-video-skill 就是专做这件事的。
- 混音时限制峰值，避免爆音。
可以直接装的开源 Skill
下面都是第三方仓库，不是 Anthropic、Remotion 或抖音官方项目，我们没有逐个跑过。数据查阅于 2026-10-25（时间为北京时间），星数会变，以仓库页面为准。
| 仓库 | 路线 | 星数 | 许可 | 最近提交 | 适合 |
|---|---|---|---|---|---|
| HeyChengC/vibe-knowledge-film | Canvas + Playwright + ffmpeg | 603 | MIT（部分参考材料除外） | 2026-10-13 | 想要两套成熟画风（夜曲 / 寓言）的人 |
| xiazhuo123456789/vibe-knowledge-video | Canvas + Playwright + ffmpeg | 84 | MIT | 2026-10-13 | 想要模板 + 配乐合成 + 自动质检脚本的人 |
| LuZhong-Li/vibe-knowledge-video-skill | HTML + 无头浏览器 + ffmpeg | 24 | MIT | 2026-10-12 | 想看一份完整制作规范和成片工程的人 |
| Jogzh/concept-reel | Canvas + Playwright + ffmpeg | 23 | MIT | 2026-10-13 | 想要 15 种风格可选、带测试的人 |
| GuanLi22/vibe-knowledge-video-skill | Remotion | 1 | MIT | 2026-10-22 | 已用 Remotion、想让切镜卡在重拍上的人 |
| xxjj2024/Vibe-Knowledge-Awards-Video-Production | 单 HTML + puppeteer-core + ffmpeg | 0 | 未声明 | 2026-10-17 | 想看一条片从提示词到成片的完整记录 |
每个仓库的功能和上手方式，见 Vibe知识大赏是什么 · 开源制作工具。
装进 Claude Code 的通用方法：Claude Code Skills 文档 写明，个人技能放在 ~/.claude/skills/<skill-name>/SKILL.md，项目技能放在项目里的 .claude/skills/<skill-name>/SKILL.md。把仓库里含 SKILL.md 的那个目录放进去，再按各自 README 装 Python 依赖、Playwright 浏览器和字体。
常见坑
| 现象 | 常见原因 | 怎么改 |
|---|---|---|
| 导出的视频卡顿、每次渲染画面不同 | 动画依赖真实时间或无种子随机数 | 改成纯 draw(t)，随机数固定种子 |
| 字体变成方块或默认字体 | 截图时字体还没加载完 | 等字体加载完成再开始逐帧截图 |
| 画面像 PPT | 屏上只有文字和方框 | 每个概念找一个具体形象，让字幕里的动作真的发生 |
| 声画不同步 | 画面和音效各自估时间 | 用同一份时间线（分镜表或 JSON）驱动画面和音效 |
| 文件太大 | 颗粒、噪点推高码率 | 用 ffmpeg 再压一遍发布版，母版另存 |
Claude Code 用量、上下文和报错的处理见 报错处理与省用量。
常见问题
不会写代码能做吗？
可以让代理写全部代码，但你要能装环境、跑命令、看静帧给反馈。完全不想碰命令行，可以看 Claude 的 Claude Motion（面向 Team / Enterprise 的 beta 功能），它不是专门为这个活动设计的。
一定要用 Opus 5.5 吗？
不一定。上面的开源项目 README 里提到 Claude Code、Codex、Cursor、豆包等都能用来写代码或剧本；画面质量取决于模型、提示和你的修改轮数。
做出来的视频能直接投活动吗？
活动规则（话题、标题前缀、截止时间）见 抖音 Vibe知识大赏是什么。开源项目里部分参考材料（例如 vibe-knowledge-film 的 references/、examples/ 中复刻的他人短片）版权属于原作者，不要当成自己的作品发布。
相关阅读
- 抖音 Vibe知识大赏是什么？活动规则与工具汇总
- 用 Opus 5.5 做视频：完整教程
- 环境搭建：Claude Code + Remotion / HyperFrames
- 从提示词到成片
- 四种场景模板
- 开源 Skill 与工具
- Opus 5.5 做视频热门开源项目
参考来源
- Claude API · Models overview：https://platform.claude.com/docs/en/about-claude/models/overview（查阅日期：2026-10-25）
- Claude Code · Skills：https://code.claude.com/docs/en/skills（查阅日期：2026-10-25）
- Remotion · Agent Skills：https://www.remotion.dev/docs/ai/skills（查阅日期：2026-10-25）
- Remotion · Claude Code plugin：https://www.remotion.dev/docs/ai/claude-code-plugin（查阅日期：2026-10-25）
- Remotion · Render：https://www.remotion.dev/docs/render（查阅日期：2026-10-25）
- Remotion · License：https://www.remotion.dev/license（查阅日期：2026-10-25）
- Playwright · Installation：https://playwright.dev/docs/intro（查阅日期：2026-10-25）
- FFmpeg · Documentation：https://ffmpeg.org/ffmpeg.html（查阅日期：2026-10-25）
- 上表各 GitHub 仓库的 README 与 LICENSE（查阅日期：2026-10-25）