Skip to content
cccskills
FreePublished on GitHub

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 横屏。有人声口播的讲解片不用这个。

HeyChengC/vibe-knowledge-film769 stars(GitHub 769 + cccskills 0)
Works withPlaywright

Run score Not tested

See how to install

Good 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),加上事实表。

八条规矩

  1. 先找形象,再写文案。 每个概念先找到一样外行认得的东西来演它;句子里要有屏上看得见的东西和动作。画不出来的句子,改句子。
  2. 屏上的主体叫得出日常名字,而且长得像它本身。 一串有光泽的珠子、一个中间凹下去的红细胞、一条带刻度的数轴、一句古诗。 点、线、圈、柱子、方框不算;一个圆圈加一个标签也不算。
  3. 句子里的动词,屏上真的做。 "砍掉一半"就盖住一半,"粘住"就真的卡上去。数是算出来的;示意的地方写明"示意"。
  4. 先例子,后道理。 名字、公式、结论,排在观众看过例子之后。开头十秒让观众看见一件事或者自己试一下,然后才是片名。
  5. 该画的画,该停的停。 提问、命名、结论、引文、出处,不配新画面——参考片里大约每五句有一句是这样。
  6. 一个世界、一把尺子、几样道具用到底。 一个场景撑两句以上,每句只改一处;结尾回到开头的画面。
  7. 没有人声,外观统一,画面现写。 文案就是字幕,每句一眼读完;一条片一套色、字、画法,每种颜色全片一个意思。画面和代码是为这份文案现写的,不套模板,不搬别的片子里的东西。
  8. 每个事实带出处。 年份、人名、数字上屏;不加水印,不加署名。

改到自己满意为止

第一次渲出来的画面几乎都有毛病。这种片子是看着图改出来的,不是写完代码就完了的——fold_C 那 33 秒改了三轮才成片。

  • 每做完一镜就截图看。 --sheet 看全局,--stills 看原尺寸,--motion 看转场。看的是图,不是代码。
  • 看的时候当自己是第一次看的观众。 遮住字幕和小字过三问:这是什么 / 它在干什么 / 我明白了什么。答得含糊就是没做好。
  • 对着 references/visualization.md 第八节的表逐条查:主体够不够大、认不认得出、发不发白、小字压没压在东西上、字幕区干不干净、转场说不说得清。
  • 至少改两轮再给用户看。 每一轮:把看到的毛病列出来 → 改 → 重截同样的时刻 → 确认改掉了、没改坏别的。还有毛病就接着改,不要带着自己都看得出的毛病交片。
  • 拿参考片当尺子。 把自己的静帧和 examples/ 里的 look 图并排放,再对照 references/visualization.md 第八节的表。差一截,就还没做完。
  • 交片时说实话。 还不满意的地方、没做的东西、没完整看过的部分,直接列出来。

力气不多的时候(时间紧,或者想得不深),照下面做,质量也守得住:

  1. 不跳步。 每一步的过关标准逐条对,没过不往下走。尤其是第 2、3 步:没有形象和分镜表,后面改多少轮都救不回来。
  2. 拿不准就查表。 这一句该怎么演,去 visualization.md 第一节的四张表里找最像的一行,照它的画法做;该不该画,查第三节。
  3. 画面现写,不套模板。 文案不同,屏上的东西就不同,代码也不同。examples/ 是看别人怎么把一份分镜表做出来的,不是零件库——别把那里的珠子、细胞、数轴搬进自己的片子,也别让自己的片子长成它的样子。能带走的只有做法:先截图再改,实心的东西画在底层,推拉用对数缩放。
  4. 宁可少,不要糊。 时间只够把三个概念做好,就只做三个;每一镜都认得出,比多讲两个概念重要。
  5. 先做 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. 终检

整片渲出来以后做三遍:

  1. 静音、遮住字幕看一遍。 每一段在讲什么,看得出来吗?
  2. 只读字幕一遍。 通顺吗?有没有哪句里的名词,屏上找不到?
  3. 对照下面的门槛。
门槛
讲解成片和分镜表对得上;抽五镜过三问都答得出;没有只是配图的画面;屏上的数前后对得上;尺子和道具回过场
画与不画提问、命名、结论没有硬配图;也没有连着几句画面不变
结构片名在 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.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

Report a problem with this skill