Vibe 知识大赏 · AI 知识视频制作
Goal: 用纯代码（HTML Canvas + Python 合成音乐）制作"Vibe知识大赏"风格的电影感知识短视频——无配音、全画面文字叙事、深空蓝黑底、历史文献再现、动画模拟推演、结尾学术引用。成片规格 1920×1080 / 30fps / 2:00–2:45 / MP4。
When to Use
用户想制作以下任一类视频时触发：
- "做一个 Vibe知识大赏 风格的视频"
- "把 XX（概念/论文/定理/哲学家/反直觉现象）拍成短视频"
- "用 AI/代码做一条知识科普视频"
- "做一条抖音知识号风格的片子"
- 用户提供一个知识点，要求"拍成大片"
When NOT to Use
- 用户要配音旁白型视频（本风格是纯文字叙事 + BGM，无 TTS）→ 确认后仍可用本 skill，但需在 brief 中注明改用配音轨
- 用户要竖屏短视频（本风格为 1920×1080 横屏，是抖音横屏知识大片）→ 若要竖屏需改画幅参数
- 用户只要图文/文章，不是视频
〇、风格 DNA（必须先读）
v2.0 新增：风格只是皮，讲解才是骨。动手前先读
references/visualization-design.md（讲解设计：配图与讲解的分界、给概念找形象的六级提问、六种呈现动作、约 1/5 句子不配新画面），它决定观众能不能看懂；再看本节决定皮相。
逆向工程自 8 条原片（详见 references/style-guide.md）：
| 维度 | 规范 |
|---|---|
| 画幅 | 1920×1080 横屏，30fps |
| 时长 | 2:00–2:45（119–166 秒） |
| 声音 | 无旁白配音。纯器乐 BGM，76–78 BPM 沉静纪录片节奏 |
| 背景 | 深蓝黑 #050510–#101028，全片一套配色不换 |
| 布局 | 左上角 @作者水印；顶部场景/时代标签带；中央动画；y≈70% 画面注释；y≈85-91% 双语旁白字幕（中文主句+英文斜体小字，每句都有） |
| 标题卡 | 15-20 秒处落《片名》：VIBE知识大赏 大写标签 + 金色衬线片名 + 副标题双语（Juno 系列标配） |
| 字幕节奏 | 每 2.5–4 秒一句旁白，一句 ≤ 20 字，停留够读完 |
| 双语 | 中文为主；旁白英文逐句对照；关键史料用原文斜体（法/德/英/拉丁） |
| 叙事弧 | 钩子→历史锚点→机制模拟→反直觉转折→现实落点→声明+引用收尾 |
| 画面密度 | 逐秒实测运动均值 3.97、静止秒 < 25%——画面必须一直在动（文字停留时也要有微动画） |
| 视觉母题 | 晾衣绳卡片 / 规则卡（金线图标）/ 文献复原（红印章）/ 万人模拟网格 / 手绘曲线 / 时间轴映射 |
| 严谨性 | 结尾必须给学术引用与免责声明；图示必须标注"示意图" |
一、总流程（七步，逐步执行，不可跳步）
选题核实 → 文案剧本 → 分镜表 → 用户确认 → 代码实现 → 渲染合成 → 自检交付
第 1 步：选题核实（Brief）
- 问用户拿：主题、希望观众记住的一句话、作者署名（默认 @用户昵称）。
- 用户没给的不要编；可以给 3 个选题建议让用户挑。
- 用 WebSearch 核实所有年份、人名、论文名、数字——错了整个片子报废。没把握的事实写进
NOTES.md，宁可不写也不要猜。
第 2 步：写剧本（script.md）
按叙事弧模板写（详见 references/narrative-templates.md），旁白总量 = 时长 ÷ 3 秒/句，例如 140 秒 ≈ 45–50 句。每句一行，标注出现时间。
每句旁白必须同时写中文主句 + 英文斜体对照（Juno 系列双语标配，如"先看37%，再出手 / Look at the first 37%. Then leap."）。
预留 15–20 秒处给《片名》标题卡（片名 + 一句话副标题 + 英文副标题）。
v2.0 新增——写剧本前先过两道方法关卡：
- 形象先行（
references/visualization-design.md）：对概念清单里每一个概念做"六级提问"，找到叫得出日常名字的形象；每个难概念拴一件观众上礼拜刚经历过的小事。找不到形象的句子，改句子，不硬配抽象动画。全片只定一个核心比喻，之后每个新概念都用它造句。 - 字幕稿文体（
references/copywriting-rules.md）：观众是在"读"片子——每句 ≤ 20 字、一句一个屏上动作；预留 25%–40% 无字幕时间（标题卡、模拟自己跑的段落）；每四到六句一个问句；"不是 A，是 B"句式只留给论点；数字精确到能上屏；末句是片名的回声；出现"今天我们来聊""这告诉我们"等口播腔即删。
第 3 步：分镜表（storyboard.md）
每个镜头写清：时间区间 / 画面构图与元素 / 动作（进场-主要-出场）/ 顶部标签 / 画面注释 / 双语字幕 / 转场方式。转场必须从内容里长出来（一条线变成地平线、卡片飞出重组），禁止默认淡入淡出。 画面密度铁律（实测值）：相邻 2 秒必须有肉眼可见的变化；文字停留超过 4 秒时，中央动画区必须有微动效（卡片摆动、星点闪烁、计数滚动）。
v2.0 新增——分镜表加两列、加一道自检：
- 每句字幕标注呈现动作（六种之一：让观众动手 / 照句子演 / 小题现场跑 / 同版式对照 / 收进一张图 / 停住亮字，见
visualization-design.md第 5 节），以及"观众明白了什么"一列。 - 自检：约 1/5 的句子不配新画面（提问/命名/结论/引文/过渡）——一个都没有说明把结论也画了，占一半说明没找到形象；遮住字幕只读"屏上是什么，在干什么"，要能看懂；结构上对照
references/structure-bible.md的十条叙事定律逐条过（悬念埋在哪秒、几层反转、读数何时开始跳、中段是否转到"你"、结尾回扣哪个画面）。 - 数字纪律（
references/quality-gate.md§5）：先算后写——屏上每个数字由代码算出或查证后记入 NOTES.md；模拟用固定种子，屏上计数真的在数；模拟数据标"模拟/示意"。
第 4 步：用户确认
把 brief + script + storyboard 给用户看。确认后才写代码。
第 5 步：代码实现（单文件 index.html）
- 技术路线：原生 JS + Canvas 2D 为主；文献/书页/报纸再现用 HTML+CSS+SVG 分层；可选 WebGL 着色器加胶片颗粒（性能代价 ×6，慎用）。想改用 Remotion 实现，读
references/remotion-track.md（方法论不变，工程对照表在那里）。 - 页面必须暴露
window.render(t)：给定秒数画出该帧。画面只由 t 决定：随机数带固定种子、不用计时器、帧间不保存状态。 - 布局按风格 DNA 的五区落位；字幕用
drawSubtitle(t)统一绘制。 - （v2.4）预览先行：页面能跑的第一时间起本地预览（
--serve或直接开文件），边写边让用户看到，不要闷头写完全片再给看——用户中途纠偏，比成片后返工省十倍。 - 先跑通 3 张关键静帧（开场钩子 / 机制演示高潮 / 结尾卡）给用户看风格，确认后再做全片。
- v2.0 补充：先做全片里最难演的那一镜，截原尺寸静帧，遮住字幕和小字自问"这是什么 / 它在干什么"——答不出来就重画或换形象（见
visualization-design.md§4 三道自检）。这一镜过不了，后面做得再顺都救不回来。
第 6 步：渲染合成
bash# 逐帧渲染（Playwright 无头浏览器） python3 scripts/render_frames.py index.html out_frames/ --fps 30 --duration 140 # 合成 BGM（76-78 BPM，numpy 合成，段落起伏对齐分镜） python3 scripts/synth_bgm.py bgm.wav --bpm 77 --duration 140 --sections storyboard.md # 合成 MP4（帧序列 + BGM，响度 -14 LUFS） bash scripts/build_video.sh out_frames/ bgm.wav final.mp4
第 7 步：自检交付（不过不出门）
bashpython3 scripts/qa_check.py final.mp4
六维评分（1–10）：前 2 秒抓人 / 手机缩放可读性 / 动作自然度（无匀速滑动、无空拍）/ 画面新鲜度（每 2–4 秒有新东西）/ 构图 / 声画对位。任何一项 < 8 分：列出最严重 3 个问题（带时间点）→ 修复 → 重新渲染 → 重评，循环直到全过。 重点排查：文字重叠、溢出、默认风格复活（居中大字+渐变）、缩放后糊字、角落多余标签。
v2.0 新增——机器质检之外的人工看图改图关（references/quality-gate.md）：
bashpython3 scripts/render_frames.py index.html review/ --duration 130 --sheet 16 # 全局总览 python3 scripts/render_frames.py index.html review/ --duration 130 --stills 18 62 # 细节原尺寸 python3 scripts/render_frames.py index.html review/ --duration 130 --motion 61 64 # 转场逐帧
按毛病对照表逐条查（主体太小、遮字幕认不出、发白发糊、小字压主体、伸进字幕带、转场说不清……），至少修两轮再交付：列毛病 → 修 → 重截同样的时刻 → 确认修好且没改坏别处。终检三遍：静音遮字幕看一遍、只读字幕看一遍、对照门槛表逐条过。
交付物：final.mp4 + script.md + storyboard.md + 抖音发布文案（模板见下）+ 诚实清单（还有哪些不满意、哪些段落没逐帧看过、哪些数字是示意）。
二、抖音发布文案模板
Vibe知识大赏 | 《标题》一句话钩子？ [2-3 句核心内容概括，含一个具体年份+人名+反直觉结论] #vibe知识大赏 #AI把知识拍成大片了 #claude5.5 [主题词 3-5 个]
三、铁律（Gotchas）
- 字体加载完成再截图（
document.fonts.ready），否则前几帧是默认字体。 - 你听不到声音——BGM 波形要画成图检查有没有爆音/静音段。
- 用 WebGL 时先渲 1 帧确认着色器生效再渲整片（着色器渲染耗时 ×6）。
- Canvas 文字必须手动换行，禁止依赖浏览器自动换行。
- 顶部标签与水印全片位置恒定，是"系列感"的来源。
- 禁止：居中大字+渐变背景、所有元素同时淡入、满屏小字、弹跳缓动、粒子爆炸、任何模板感。
- 每句旁白停留 ≥ 2.5 秒；同一画面停留 ≤ 4 秒必须有新元素进场。
- （v2.0）先找形象，再写句子。 概念先落到叫得出日常名字的东西上；画不出的句子改句子，不硬配抽象动画。全片一个核心比喻用到底。
- （v2.0）字幕说人话，屏上给证据。 术语、公式、精确数字做成画面小字/标注，不占字幕；屏上的数是真算的（固定种子模拟 + 屏上计数），示意必标注。
- （v2.0）一屏一件事，颜色是词汇。 每一刻只有一个主体在动；每种强调色全片一个含义不破例；底部字幕带（约 82%–95%）任何东西不许伸进来。
四、参考文件
方法论层（v2.0/v2.1 核心，按顺序读）
references/visualization-design.md— 讲解设计：配图与讲解的分界、概念→形象的六级提问、六种呈现动作、何时"不画"、分镜表七列格式。决定观众能不能看懂，最先读references/copywriting-rules.md— 字幕稿规范：句量句长、句式工具箱、禁用清单、一个比喻一套词汇、强调的克制规则、事实与出处references/structure-bible.md— 结构圣经：选题四项打分、三种骨架、标准时间轴、十条叙事定律、悬念/反转/常驻读数的设计方法references/visual-grammar.md— （v2.1）画面语法速查：常见句型→演法对照表、一屏一件事的分区纪律、常驻元素=报数的仪器、十种转场手法、动效手感六条references/quality-gate.md— 质量门：看图改图毛病对照表、两轮修复流程、终检三遍与门槛表、数字纪律references/beat-scaffold.md— （v2.2）逐拍写法骨架：130 秒标准片拆成 ~44 个功能位置，每拍的写作任务与写法公式、五条硬规矩references/image-prompts.md— （v2.2）出图提示词规范：风格后缀六件事、六条规则、一期典型出图清单、风格不一致的补救
工程层（v2.1）
references/render-craft.md— 渲染工程手册：render(t) 纯函数与固定种子、模拟预计算查表、辉光管线与 under 层、对数推拉、场景衔接、常见装置写法、性能references/rework-scripts.md— 返工话术与分步推进：八轮分步提示词（每轮有过关标准）+ 按毛病直说的返工话术表 + 验收反问清单references/alternate-worlds.md— 扩展视觉世界：题材→世界匹配、新世界七项设计清单、节奏经验值（每分钟句数/无字幕占比/静止帧比例）、"厂牌"概念references/remotion-track.md— （v2.4）Remotion 路线：把本方法论跑在 Remotion 里的完整对照（心智模型、跑片流程、参数化模板、与质量门的对接）
风格与模板层
references/style-guide.md— 风格 DNA 完整规范（布局坐标、配色、字体、五区结构、文献再现规范）references/narrative-templates.md— 8 条原片的叙事弧逐段拆解 + 通用剧本模板references/prompt-brief.md— 可直接填空的 XML 创作简报模板
脚本与运营（v2.1）
scripts/— 渲染 / 配乐 / 合成 / 自检 四件套（渲染器含--stills/--sheet/--motion看图模式）docs/common-mistakes.md— 常见错误对照表：渲染/剧本/画面/声音/事实五类症状速查docs/publish-guide.md— 发布指南：发布前检查清单、48 小时数据复盘、数据差先查叙事docs/topic-seeds.md— 选题种子库：五个出题方向、种子题示例、四关检验、自建题库方法docs/strict-mode.md— （v2.2）严格模式：两档工作模式、逐关完成标志、四个亲自把关点、弱模型降级方案docs/CHANGELOG-v2.md— v2.x 升级的完整说明（改了什么、为什么、怎么用）
