Communitygithub.com

createsomethingq3k/vibe-knowledge-film

將一個知識點製作成「Vibe知識大賞 / 比特新語」風格的無旁白、純代碼逐幀動畫知識短片:深色底發光幾何、底部一行字幕、搭配《Vibe知識大賞(開智小曲)》或代碼合成配樂,輸出1920×1080 30fps約2:40的mp4,附事實表與製作日誌。

vibe-knowledge-film 是什麼?

這個技能專為生成「Vibe知識大賞」或「比特新語」風格的無旁白知識動畫短片而設計,完全由Canvas代碼逐幀繪製。它遵循嚴謹的流程:從選題、查證事實、撰寫字幕分鏡,到編寫film.js、配樂卡點,最後用Playwright逐幀導出並以ffmpeg合成,自動進行音畫同步、字幕速度等品質檢測。支援兩種配樂模式:用戶提供的授權音樂(如開智小曲)或代碼合成配樂,片長可跟隨曲子或自定。主要用於復刻或創作如《半衰期》範例片那類硬核知識短片,不適用於有旁白、口播或實拍剪輯的專案。它確保每個上屏的事實都有出處、畫面持續運動且卡在音樂節拍上,並透過嚴格的流程(如三個確認點、事實表分級)來避免常見的AI幻覺與製作問題。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/createsomethingq3k/vibe-knowledge-film/tree/HEAD

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

Vibe 知識短片(代碼逐幀版)

成片規格:1920×1080、30fps、約 159 秒(跟曲子走)或自定、沒有人聲、一屏一句中文字幕、畫面全部由 Canvas 代碼畫。 示例《半衰期》(examples/halflife/)全部由元件拼成,復刻驗證:和原樣片 67 幀逐像素一致、混音逐取樣一致。examples/gallery/ 是同一套元件換題材的示範。

這類片子觀眾買帳的是三樣東西:真實的事實(年份、原始資料、論文)、一直在動的畫面、卡在音樂上的揭曉。下面每條規則都是為了守住這三樣。

底線(每條都有出過事的原因)

  • 上螢幕的每個數字、人名、年份、引文都要有出處,寫進事實表;查不到就不寫,示意畫面標「示意」。AI 寫引語時很會「編得像真的」——舊版《半衰期》裡那句盧瑟福英文名言就是編的。
  • 浮水印只寫用戶自己的號名或片名。照著參考幀做時,AI 會把參考作者的名字一起畫進去(舊 demo 左上角寫著「比特新語」),那等於冒用。
  • 配樂只用用戶提供、有授權的檔案;不從別人影片裡扒音軌,不去來路不明的站下載,skill 也不附帶任何曲子。B 站發布時在 B 站投稿流程裡新增音樂。
  • 片尾和發布文案都寫 AI 製作宣告。
  • renderFrame(t) 只由 t 決定:亂數用 VF.rng(種子),不用計時器,不在幀之間存狀態。否則導出會抖、每次渲染都不一樣。

準備

SK=~/.claude/skills/vibe-knowledge-film
$SK/engine/setup.sh          # 檢查 node / ffmpeg(libx264) / numpy,裝 playwright 包,找本機瀏覽器

流程(三個確認點,確認後再往下)

① 選題和路線 → 確認 1

用 AskUserQuestion 問清(推薦項排第一):

  • 選題:用戶只給方向時給 3 個候選。好選題 = 硬核概念 × 能落到「你」身上的情感點(熵增 → 生活的力不從心;半衰期 → 遺忘是不是背叛),最好還有一個反直覺的轉折。見 references/story.md。
  • 配樂:bgm(用戶提供開智小曲等授權檔案,畫面卡曲子,片長 = 曲長)或 synth(代碼合成,片長自定)。
  • 署名(浮水印寫什麼)、時長(預設跟曲子 159 秒)。

② 查證 → 事實表

每個要上螢幕的事實:說法 | 出處 | 可信度(T1 原始文獻 / T2 權威二手 / T3 只能當「據說」)| 用在哪一句。 查證常常會改寫故事:《半衰期》查到「遺忘是冪律、越舊越穩」,推翻了原副標題,反而成了結尾的反轉。查到衝突就停下來告訴用戶。

③ 字幕稿 + 分鏡 → 確認 2

按六段式寫(鉤子 → 片名 → 歷史錨點 → 機制演示 → 反直覺轉折 → 落回觀眾 → 獻詞與參考),一屏一句、≤ 6.5 字/秒、關鍵詞用 {} 高亮、需要出處的句子帶第 4 項小字。 分鏡每段寫:畫面在演什麼(一句字幕對應一個螢幕上動作)、「真的在算」的東西(用真資料、真公式、固定種子跑模擬)、音效。範本 templates/事實表與字幕分鏡.md。把事實表 + 字幕分鏡給用戶看,點頭再寫代碼。

④ 建片、寫 film.js

$SK/engine/new_film.sh <片目錄> <片名>                 # 六段式骨架
$SK/engine/new_film.sh <片目錄> <片名> --from halflife  # 從《半衰期》起步 / 對照

先按要演的內容挑元件:references/components.md 有「講什麼 → 用什麼」對照表,examples/gallery/元件圖鑑.png 是全部元件的樣子。骨架範本已經用元件拼好六段,換資料和文字即可;元件不夠用再在 film.js 裡寫區域函式(API 見 references/engine.md,完整寫法見 examples/halflife/film.js)。規則:

  • 最難的那一鏡先做,出靜幀看立不立得住,再做別的。
  • 字幕、場景、音效都按「分鏡時間」寫;卡曲子的事交給 warp(第 ⑤ 步),不要逐個改時間點。
  • 場景裡每 2–3 秒要有新動作;長停留加微動(流光、掃光、緩推),引擎自帶的呼吸鏡頭幅度小,單靠它壓不住「靜止」。
  • 新出現的字(場景裡畫、字幕裡沒有的)加進 strings。

⑤ 配樂與卡點

  • bgm:曲子放進片目錄,跑 python3 $SK/engine/analyze_bgm.py <曲子> --json out/bgm.json。如果是開智小曲,先比對 data/kaizhi-xiaoqu.json 的 sha256:一致就直接用裡面的小節網格和建議錨點;不一致(別的來源會整體偏 0.1–0.3 秒)就以新測的 低頻突入點 為準重建網格。然後在 meta.music.warp 寫錨點:片名閃白 → 第 1 個 drop,設問/靜默 → 回落段,反轉揭曉 → 第 2 個 drop,落點和獻詞 → 樂句開頭。細節見 references/music.md。
  • synth:在 meta.music.synth 按段落寫各聲部電平、靜默包絡(照著示例的 SYNTH 改)。

⑥ 自檢(不出全片)

node $SK/engine/export.mjs <片目錄> events          # 音效表 + 字幕時序
node $SK/engine/export.mjs <片目錄> stills          # out/stills.png,16 格總覽;也可指定秒數 3,16.9,43.6
cd <片目錄> && python3 -m http.server 8765 --bind 127.0.0.1   # 瀏覽器開 film.html 拖時間軸、聽配樂

逐格看:字有沒有壓線出界、畫面有沒有空一半、曲線貼不貼資料點、有沒有東西飄錯位置、字幕和動作對不對得上。這些代碼不報錯,只有看才看得出來——《半衰期》在這一步抓到了 5 個。

⑦ 出片 + 質檢

$SK/engine/build.sh <片目錄>        # 音效表 → 配樂 → 逐幀渲染 → -14 LUFS 合成 → qa.py(背景跑,約 5–12 分鐘)
$SK/engine/build.sh <片目錄> --skip-render   # 只改了聲音

qa.py 報 ✗ 必須改,! 要嘛改、要嘛交付時說明是有意的。機器也會冤枉人:報「黑場」先抽幀看,深色底常被誤判。讀法見 references/qa.md。

⑧ 交付 → 確認 3

給用戶:成片路徑、片長、質檢結果、還不夠好的地方。補 製作日誌.md(每個翻車點:現象 → 原因 → 改法,做教程時就是鏡頭清單)。需要發布文案時見 references/publish.md。

命令速查

命令作用
engine/setup.sh環境檢查與安裝
engine/new_film.sh <目錄> <片名> [--from halflife]新建片子(複製一份引擎快照進去,日後升級引擎不影響舊片)
node engine/export.mjs <目錄> events / stills [秒,…] / render [起 止]導出音效表 / 總覽圖 / 影片(給起止秒只渲染一段)
python3 engine/audio.py <目錄>配樂 + 音效 → out/mix.wav
python3 engine/analyze_bgm.py <曲子> [--json 檔案]BPM、小節、能量曲線、低頻突入點
engine/build.sh <目錄> [--skip-render]一鍵成片 + 質檢
python3 engine/qa.py <目錄> [成片]單獨質檢

參考檔案(用到再讀)

檔案什麼時候讀
references/story.md選題、六段式、字幕規則、事實表分級
references/style.md視覺規範:配色、字型、五層畫面、版式座標、動效密度
references/components.md寫場景前:21 個元件 + 5 個資料工廠、「講什麼 → 用什麼」、參數
references/engine.mdVF 基礎 API、meta 欄位、場景寫法
references/music.md配樂兩種模式、開智小曲結構、drop 檢測、warp 錨點、音效表
references/qa.md質檢每項的含義、閾值和常見誤報
references/pitfalls.md動手前掃一遍:做《半衰期》踩過的 30 個坑 + 同類專案的坑
references/publish.md發布文案、AI 宣告、音樂與引用的處理
examples/halflife/完整示例:film.js(元件版)、事實表與字幕分鏡、製作日誌
examples/gallery/元件圖鑑:同一套元件換題材;元件圖鑑.png 總覽
data/kaizhi-xiaoqu.json開智小曲的實測結構與建議錨點

相關技能