vibe-knowledge-film について
vibe-knowledge-filmは、ナレーションなしの知識短編を作る科学ライターや監督向けのスキルです。概念に認識しやすい視覚表現を与え、絵コンテ、レンダリング、反復確認を通じて映像で内容を示します。
主な機能
- 01概念を具体的な視覚表現に変換
- 02字幕と画面上の動作を設計
- 03絵コンテと事実表を作成
- 04フレーム画像とプレビューで反復改善
- 05短編のレンダリングと音声制作
活用シーン
- 01抽象的な科学概念を可視化
- 02既存の原稿を短編向けに調整
- 03失敗した場面を作り直して比較
- 04映像の事実、字幕、画面を確認
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ heychengc/ vibe-knowledge-film --skill vibe-knowledge-filmインストール後、Claude Code で/vibe-knowledge-filmを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
LICENSE.gitignoreREADME.mdengine/audio.pyget_fonts.pyindex.htmlvk-kit.jsvk.jsrender.pyengine/fonts/OFL-CourierPrime.txtOFL-JetBrainsMono.txtOFL-CormorantGaramond.txtOFL-Lora.txtOFL-NotoSansSC.txtOFL-NotoSerifSC.txtexamples/README.mdexamples/fold_C/film.jslayout.jsindex.htmlgen_blob.pystoryboard.mdexamples/info_C/film.jsindex.htmlexamples/kit_gallery/film.jsindex.htmlexamples/pigeon_B/index.htmlfilm.jsstoryboard.mdexamples/stim_B/film.jsindex.html詳細
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 を使って各トランジションの前後から 1 枚ずつ取り出して並べ、確認してください。ショットはどう入るか、物はどう変わるか、何をしているのか分からないフレームはないか。あれば修正し、修正後にレンダリングします。
合格条件:字幕が表示されてから 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. 最終チェック
映像全体をレンダリングした後、次の三段階で確認します。
- ミュートし、字幕を隠して一度見る。 各パートで何を説明しているのか、見て分かりますか?
- 字幕だけを一度読む。 自然ですか? 文中の名詞が画面上に見つからない箇所はありませんか?
- 以下の基準と照らし合わせる。
| 基準 | |
|---|---|
| 解説 | 完成映像とストーリーボードが一致している。5 ショットを抜き出して 3 つの問いにすべて答えられる。単なる挿絵になっている画面がない。画面上の数値に矛盾がない。定規と小道具が再登場している |
| 描く/描かない | 問いかけ、命名、結論に無理な挿絵が付いていない。画面が変わらないまま何文も続くこともない |
| 構成 | タイトルが 6〜24 秒の間に登場する。最後に冒頭の画面に戻る。最終画面はタイトル+文献 |
| 字幕 | 1 文につき 1 行。B は約 3 秒、C は約 3〜5 秒表示する。1 文で色を付ける箇所は最大 1 つ |
| 画面 | 字幕エリアにほかの要素がない。どの瞬間も動く主体はひとつだけ。1 ショットにつき小さな文字は最大 1 つ。色の意味が全編で一貫している |
| リズム | 唐突なカットがない。主体が登場し終えたら止めて、読める時間を設ける。20〜30 秒ごとに、字幕のない映像だけのパートがある |
| 事実 | 画面上のすべての数値と事実が事実表に一致している。各概念に出典がある。図解である箇所が明記されている |
| 技術 | --det に合格する。1920×1080、30fps。透かしやクレジット表記がない |
基準を満たさない箇所の時刻をリストアップし、修正後はそのパートだけを再レンダリングして(--clip)確認してから、全編をレンダリングします。納品時には、未達の箇所を含め、完成映像を最後まで確認したかどうかも率直に伝えてください。
ファイル
references/visualization.md | 解説の設計:4 本の参考映像について、文ごとの台本 → 画面に何が映るか → 観客がなぜ理解できるか。6 種類の描き方。描かないタイミング。モチーフの探し方、それらしく描く方法。ストーリーボード。「折りたたみ」の 2 つのバージョンの比較。画像を見て修正する際の問題点一覧 |
references/visual-grammar.md | 描き方を決めた後のクイックリファレンス:よくある文型、レイアウト、常時表示する要素、色、トランジション、動きの感触 |
references/script.md | 台本:量、骨組み、文型、事実、タイトル |
references/worlds.md | 2 種類のビジュアルスタイルの仕様:色、文字、レイアウト、タイトルカード、音声 |
references/analysis.md | 4 本の参考映像の構成、リズム、制作の痕跡(見た目と技術面) |
references/prompts.md | 逆算して作ったプロンプト:完全版ブリーフ、段階的なプロンプト、修正依頼の文面 |
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 は同じ内容の 2 つのバージョンの比較です。ほかに、2 本の参考映像を再現したもの、棚の図があります。look_*.jpg はそれぞれの一覧画像です |