vibe-knowledge-film
Plan and build a 2–5 minute, 16:9 knowledge video with subtitles and no narration. The skill helps turn each idea and verb into a recognizable visual action, then render and review the film with code.
OriginalShow the original description
抖音「Vibe知识大赏」式的无旁白知识短片:2–5 分钟、16:9、没有人声,观众读底部一行字幕,同时看屏上把这句话演出来。核心是讲解设计:给每个概念找一个外行认得的形象,画得像它本身(不用点、线、圈代替),句子里说到什么屏上就是什么、动词真的发生; 提问、命名、结论不硬配图。
全片由代码逐帧画出(Canvas + seek(t) + Playwright + ffmpeg)。内含四条参考片的逐句拆解、六种画法、找形象的方法、分镜表格式、两套外观、渲染引擎和合成配乐。
用户说"做一条 vibe 知识大赏的视频""像《信息论·惊奇之学》《运气的形状》《超常刺激》《自指》那样的片子""代码直出的知识短片""没有旁白的字幕科普片""把这个概念直观地讲清楚", 或者给了一个题目、一份文案要做成这种片子时使用。只做 16:9 横屏。有人声口播的讲解片不用这个。
Run score Not tested
See how to installGood for
- Turn a topic into a no-narration explainer video
- Adapt a script into visual scenes and subtitles
- Explain an abstract idea through concrete examples
- Create a code-rendered 16:9 knowledge short
Files included (48)
- SKILL.md15.7 KB
- .gitignore92 B
- engine/audio.py9.0 KB
- engine/fonts/OFL-CormorantGaramond.txt4.3 KB
- engine/fonts/OFL-CourierPrime.txt4.3 KB
- engine/fonts/OFL-JetBrainsMono.txt4.3 KB
- engine/fonts/OFL-Lora.txt4.3 KB
- engine/fonts/OFL-NotoSansSC.txt4.3 KB
- engine/fonts/OFL-NotoSerifSC.txt4.2 KB
- engine/get_fonts.py2.3 KB
- engine/index.html1.5 KB
- engine/render.py9.0 KB
- engine/vk-kit.js27.1 KB
- engine/vk.js22.1 KB
- examples/fold_C.gif16.2 MB
- examples/fold_C/film.js23.0 KB
- examples/fold_C/gen_blob.py4.3 KB
- examples/fold_C/index.html1.6 KB
- examples/fold_C/layout.js2.4 KB
- examples/fold_C/storyboard.md4.0 KB
- examples/fold_old_vs_new.jpg218.6 KB
- examples/info_C/film.js7.3 KB
- examples/info_C/index.html1.5 KB
- examples/kit_gallery/film.js4.8 KB
- examples/kit_gallery/index.html1.5 KB
- examples/look_fold_C.jpg138.0 KB
- examples/look_info_C.jpg120.4 KB
- examples/look_kit_gallery.jpg185.2 KB
- examples/look_pigeon_B.jpg173.6 KB
- examples/look_stim_B.jpg340.5 KB
- examples/pigeon_B.gif28.6 MB
- examples/pigeon_B/film.js11.0 KB
- examples/pigeon_B/index.html1.5 KB
- examples/pigeon_B/storyboard.md2.2 KB
- examples/README.md4.0 KB
- examples/stim_B/film.js9.3 KB
- examples/stim_B/index.html1.5 KB
- LICENSE1.5 KB
- README.md2.5 KB
- references/analysis.md32.2 KB
- references/engine.md15.8 KB
- references/prompts.md26.4 KB
- references/script.md8.5 KB
- references/visual-grammar.md10.3 KB
- references/visualization.md37.9 KB
- references/worlds.md10.3 KB
- requirements.txt30 B
- scripts/new_film.py3.3 KB
SKILL.md (original)
Review the instructions the agent will receive before you install.
Vibe 知识短片
一种没有旁白的知识短片:观众读底部的一行字幕,同时看屏上把这句话演出来。
做这种片子的人是科普作者兼导演。色、字、辉光、片名卡都是皮;片子好不好,看的是观众能不能一眼认出屏上的东西、看见它在变、看完讲得出"因为……所以……"。
配图不是讲解
这个 skill 做过一条失败的《折叠》(讲蛋白质和 AlphaFold):全片的主体是一串星点连成的折线。 字幕说"只换掉第 6 个,形状就变了,这就是镰刀型贫血",折线换了个卷法、变成玫红色。 颜色、字体、节奏都像参考片,可观众从头到尾没见过蛋白质是个什么东西、错一个字母到底坏在哪。 那串星点换给任何一段文案都成立——它是配图。
重做以后,同一段内容是:镜头从血管里的红细胞钻进去,找到一串珠子;第 6 颗变了色;拉出来,细胞弯成了镰刀;
再钻进去,珠串卷成一团抓住氧分子;变色的那颗在表面成了黏点;一团粘一团连成长杆;长杆从里面把细胞顶弯。
两版的对照图是 examples/fold_old_vs_new.jpg,重做的成片在 examples/fold_C/。
动手前先读 references/visualization.md。 四条参考片逐句的"文案 → 屏上是什么 → 观众为什么懂"、六种画法、什么时候不画、
怎么给概念找形象、分镜表怎么写,都在那里。本文件只是流程。
交付物:一个工程目录(storyboard.md 分镜表 + film.js + 渲染出的 renders/final.mp4),加上事实表。
八条规矩
- 先找形象,再写文案。 每个概念先找到一样外行认得的东西来演它;句子里要有屏上看得见的东西和动作。画不出来的句子,改句子。
- 屏上的主体叫得出日常名字,而且长得像它本身。 一串有光泽的珠子、一个中间凹下去的红细胞、一条带刻度的数轴、一句古诗。 点、线、圈、柱子、方框不算;一个圆圈加一个标签也不算。
- 句子里的动词,屏上真的做。 "砍掉一半"就盖住一半,"粘住"就真的卡上去。数是算出来的;示意的地方写明"示意"。
- 先例子,后道理。 名字、公式、结论,排在观众看过例子之后。开头十秒让观众看见一件事或者自己试一下,然后才是片名。
- 该画的画,该停的停。 提问、命名、结论、引文、出处,不配新画面——参考片里大约每五句有一句是这样。
- 一个世界、一把尺子、几样道具用到底。 一个场景撑两句以上,每句只改一处;结尾回到开头的画面。
- 没有人声,外观统一,画面现写。 文案就是字幕,每句一眼读完;一条片一套色、字、画法,每种颜色全片一个意思。画面和代码是为这份文案现写的,不套模板,不搬别的片子里的东西。
- 每个事实带出处。 年份、人名、数字上屏;不加水印,不加署名。
改到自己满意为止
第一次渲出来的画面几乎都有毛病。这种片子是看着图改出来的,不是写完代码就完了的——fold_C 那 33 秒改了三轮才成片。
- 每做完一镜就截图看。
--sheet看全局,--stills看原尺寸,--motion看转场。看的是图,不是代码。 - 看的时候当自己是第一次看的观众。 遮住字幕和小字过三问:这是什么 / 它在干什么 / 我明白了什么。答得含糊就是没做好。
- 对着
references/visualization.md第八节的表逐条查:主体够不够大、认不认得出、发不发白、小字压没压在东西上、字幕区干不干净、转场说不说得清。 - 至少改两轮再给用户看。 每一轮:把看到的毛病列出来 → 改 → 重截同样的时刻 → 确认改掉了、没改坏别的。还有毛病就接着改,不要带着自己都看得出的毛病交片。
- 拿参考片当尺子。 把自己的静帧和
examples/里的 look 图并排放,再对照references/visualization.md第八节的表。差一截,就还没做完。 - 交片时说实话。 还不满意的地方、没做的东西、没完整看过的部分,直接列出来。
力气不多的时候(时间紧,或者想得不深),照下面做,质量也守得住:
- 不跳步。 每一步的过关标准逐条对,没过不往下走。尤其是第 2、3 步:没有形象和分镜表,后面改多少轮都救不回来。
- 拿不准就查表。 这一句该怎么演,去
visualization.md第一节的四张表里找最像的一行,照它的画法做;该不该画,查第三节。 - 画面现写,不套模板。 文案不同,屏上的东西就不同,代码也不同。
examples/是看别人怎么把一份分镜表做出来的,不是零件库——别把那里的珠子、细胞、数轴搬进自己的片子,也别让自己的片子长成它的样子。能带走的只有做法:先截图再改,实心的东西画在底层,推拉用对数缩放。 - 宁可少,不要糊。 时间只够把三个概念做好,就只做三个;每一镜都认得出,比多讲两个概念重要。
- 先做 30 秒。 开头 30 秒过了三问、给用户看过,再铺全片。
流程
每一步后面是过关标准。没过就停在这一步改,不往下走。用户说"直接做"时,第 2、3 步的确认可以不等,但东西照样要写出来。
命令里的 scripts/、engine/ 指本 skill 目录下的路径;工程目录建在用户自己的项目里。
0. 看清手里有什么
- 只有题目:从第 1 步做起。
- 有文案:照样过第 1、2 步。文案里画不出来的句子(里面没有东西、没有动作)要改;保留原文的意思、事实和说话的口气,改完给用户看改了哪些。
句长和句数的标准见
references/script.md。 - 用户手里有一版做坏的:先看那一版(截帧对着字幕看),重做同一段内容,交片时给一张新旧对照图。
1. 立题和事实表
写下:一句话论点;3–12 个概念的清单,每个概念用大白话写"要观众明白什么"和"外行卡在哪"。 再列事实表:每个年份、人名、数字的出处和把握程度。把握不足的去查,查不到就换例子。
过关:论点一口气说得完;每个概念你能不用术语讲给外行听。讲不出来的,先去把它弄懂——含糊的句子都是没弄懂的时候写出来的。
2. 找形象
这是决定片子好坏的一步,时间主要花在这里。照 references/visualization.md 第五节,对每个概念按顺序问:
它本身是个东西吗 / 是个过程吗 / 是个量吗 / 是观众脑子里的事吗 / 是条规律吗 / 都不是就上字。
找到以后再问:观众在生活里哪儿见过它;换一个尺度看是什么样;它坏了会怎样;怎么画才像它本身、从哪个认得的画面进场。
然后定全片的那一个形象、那一把尺子,和哪些东西会回场。
过关:
- 每个概念的形象叫得出日常名字,说得出它长什么样;
- 至少一半的概念找到了生活里的锚;
- 没有哪个形象换给别的文案也成立;
- 说得出全片哪一下最让人"哦——"。
这是给用户看方案的第一个时机。钩子给三个方向和一个推荐。
3. 文案和分镜表一起写
格式和自查在 references/visualization.md 第六节,例子在第七节。一句字幕一行:画法(六种之一,或"不画")、屏上是什么、它在干什么、屏上的小字、观众明白了什么、声音。
字幕的量和句式按 references/script.md。没有分镜表不建工程。
过关:
- 遮住字幕一列,只读"屏上是什么,在干什么",看得出在讲什么;
- 每一句里的名词,屏上找得到;
- "不画"的大约占五分之一——一个都没有,是把结论也画了;占了一半,是没找到形象;
- 每个场景撑了两句以上,每句只改一处;
- 每一镜过得了三问:这是什么(日常的词)/ 它在干什么(一个动词)/ 观众明白了什么。
这是给用户看方案的第二个时机:把分镜表给他看。
4. 选外观
外观跟着题材走,在分镜表之后定。
| 题目是 | 选 |
|---|---|
| 一个心理 / 行为机制,从动物或生活场景讲到"你该怎么办" | B 寓言 |
| 一个抽象概念或一个看不见的机制,拆成几个当场可演的小实验 | C 夜曲 |
只有这两套。它们的色、字、版式、常驻元素、片名卡、声音都在 references/worlds.md。拿不准选 C;B 最费工。
同时定下颜色的含义,全片不破例。
5. 建工程,先做最难的一镜
python scripts/new_film.py <工程目录> --world C # 或 B
python engine/render.py <工程目录> --sheet 3 8 15 22 # 指定时刻拼一张;--sheet 16 是均匀 16 帧
python engine/render.py <工程目录> --stills 5.9 18.1 # 原尺寸截几帧
python engine/render.py <工程目录> --motion 8.2 10.6 # 这段时间里取 12 帧拼一张,看转场
python engine/render.py <工程目录> --serve # 浏览器预览
new_film.py 建出来的 film.js 只是能跑起来的骨架,里面一行画面都没有:没有现成的钩子、没有现成的图表。每一镜都照分镜表现写。
先填 SUBS,再把分镜表里最难画的那一镜做出来,截静帧。引擎的用法在 references/engine.md。examples/ 可以翻,看的是别人怎么把一张分镜表变成画面,不是去找能搬的零件。
字体缺了跑 python engine/get_fonts.py。
过关:拿这张静帧,遮住字幕和小字,问"这是什么、它在干什么"——答得出来;缩到手机横屏大小还分得清;纵向 80%–95% 只有字幕;
对着 visualization.md 第八节的表查过一遍。答不出来就重画,或者回第 2 步换形象。第一版几乎不会过,改两三轮是正常的。
6. 前 30 秒
30 秒里讲得完多少就讲多少,不要为了"讲完"往里塞。一个道理硬压进 30 秒,每句都只能点到为止,画面跟不上,看起来就抽象。 宁可只讲一件事,让它在屏上从头到尾发生一遍(参考片的开头 30 秒也只讲了一件事:鸟丢下自己的蛋去孵假蛋)。
景别要变。同一个固定画面不要撑过三四句:全景交代在哪,中景看它做什么,近景看关键的那一下;该单独给一个画面的地方(一条规则、一次对比)就换一张画,别在原画面上叠东西。
python engine/render.py <工程目录> --clip 0 30 head
渲之前先用 --motion 把每个转场前后各抽一张拼图看:镜头怎么进、东西怎么变、有没有哪一帧说不清在干什么。有就改,改完再渲。
过关:字幕出现后 0.3 秒内屏上有动作;"哦——"之前有铺垫、之后停得住;场景之间是长出来的或者推拉过去的,不是硬切。 这是给用户看画面的时机。
7. 铺全片
一个概念一个函数;常驻元素和字幕在 draw 的最外层统一画。
每做完两三个概念,--sheet 拼一张自查:有没有东西伸进字幕区,有没有两样东西同时抢着动,相邻两段是不是长得一样,该回场的东西回来了没有。
长片按章拆文件(见 engine.md)。
python engine/render.py <工程目录> --det # 同一帧渲两次必须一样
python engine/render.py <工程目录> --jobs 4 # 全片,4 路并行
8. 声音
- C:
film.js里用fr.sfx(时刻, 名字)登记事件(每一下变化一声、推拉时的上滑音、落定时的低音、提问那一镜不出声),然后python engine/render.py <工程> --events && python engine/audio.py <工程>。 - B:用户给一首配乐,
python engine/audio.py <工程> --bgm 曲子.mp3 -8。先量配乐的速度,把每段的开头对到小节线上, 最大的那次揭晓对到配乐重新进入的那一拍。用户没给配乐就说明白:成片目前只有事件音,等配乐。
9. 终检
整片渲出来以后做三遍:
- 静音、遮住字幕看一遍。 每一段在讲什么,看得出来吗?
- 只读字幕一遍。 通顺吗?有没有哪句里的名词,屏上找不到?
- 对照下面的门槛。
| 门槛 | |
|---|---|
| 讲解 | 成片和分镜表对得上;抽五镜过三问都答得出;没有只是配图的画面;屏上的数前后对得上;尺子和道具回过场 |
| 画与不画 | 提问、命名、结论没有硬配图;也没有连着几句画面不变 |
| 结构 | 片名在 6–24 秒之间出现;结尾回到开头的画面;最后一屏是片名 + 文献 |
| 字幕 | 每句一行;B 停留约 3 秒、C 约 3–5 秒;一句最多染一处颜色 |
| 画面 | 字幕区没有别的东西;任何一刻只有一个主体在动;一镜最多一条小字;颜色含义全片一致 |
| 节奏 | 没有硬切;主体出完之后停住让人读;每 20–30 秒一段无字幕的纯画面 |
| 事实 | 屏上每个数字和事实表一致;每个概念有出处;示意的地方写明了 |
| 技术 | --det 通过;1920×1080,30fps;没有水印和署名 |
不合格的时间点列出来,改完只重渲那一段(--clip)确认,再渲全片。交片时把没做到的地方直说,包括成片有没有完整看过。
文件
references/visualization.md | 讲解设计:四条参考片逐句的文案 → 屏上是什么 → 观众为什么懂;六种画法;什么时候不画;怎么找形象、怎么画得像它本身;分镜表;《折叠》两版对照;看图改图的毛病表 |
references/visual-grammar.md | 定了画法之后的速查:常见句型、版式、常驻元素、颜色、转场、动效手感 |
references/script.md | 文案:量、骨架、句式、事实、标题 |
references/worlds.md | 两套外观的规格:色、字、版式、片名卡、声音 |
references/analysis.md | 四条参考片的结构、节奏、制作痕迹(外观和技术层面) |
references/prompts.md | 逆向出的提示词:完整 brief、分步提示词、返工话术 |
references/engine.md | 引擎 API、命令、写法、坑 |
engine/ | vk.js vk-kit.js render.py audio.py get_fonts.py |
scripts/new_film.py | 建工程:index.html + 一份没有画面的 film.js 骨架 |
examples/ | 看别人怎么做过一次,不是零件库。fold_C(夜曲,《折叠》开头 33 秒)和 pigeon_B(寓言,《鸽子的迷信》开头 33 秒):自己题目的样片,各带分镜表;fold_old_vs_new.jpg:同一段内容的两版对照;两段对照参考片做的复刻;一张货架图;look_*.jpg 是各自的拼图 |
Reviews
No reviews yet. Tell others what you thought.
Comments
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.