跳到正文
cccskills
免费在 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.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

抖音「Vibe知识大赏」式的无旁白知识短片:2–5 分钟、16:9、没有人声,观众读底部一行字幕,同时看屏上把这句话演出来。核心是讲解设计:给每个概念找一个外行认得的形象,画得像它本身(不用点、线、圈代替),句子里说到什么屏上就是什么、动词真的发生; 提问、命名、结论不硬配图。

全片由代码逐帧画出(Canvas + seek(t) + Playwright + ffmpeg)。内含四条参考片的逐句拆解、六种画法、找形象的方法、分镜表格式、两套外观、渲染引擎和合成配乐。

用户说"做一条 vibe 知识大赏的视频""像《信息论·惊奇之学》《运气的形状》《超常刺激》《自指》那样的片子""代码直出的知识短片""没有旁白的字幕科普片""把这个概念直观地讲清楚", 或者给了一个题目、一份文案要做成这种片子时使用。只做 16:9 横屏。有人声口播的讲解片不用这个。

HeyChengC/vibe-knowledge-film星标 769(GitHub 769 + cccskills 0)
集成工具Playwright

实测评分 未实测

查看安装方法

适用场景

  • 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

包含的文件(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(原文)

安装前可以查看交给 AI 代理的指令内容。

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 是各自的拼图

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

报告此技能的问题