Communitygithub.com

白板解說影片生成器

製作一部長篇(5-20 分鐘)的手繪白板風格解說影片,涵蓋論文、文章或概念,其中的每個標籤、底線、圓圈和圖形都會準確地畫在說出的詞語上,逐張投影片建構,並配有論文本身的圖形註解、章節晶片、困難的多選測驗和一個小動畫主持人。

白板解說影片生成器 是什麼?

這個技能「whiteboard-explainer」用於透過 Rust 框架「fframes」與本機語音技能,打造專業、同步解說的白板動畫影片。它將語音與視覺元素緊密結合,確保每個手繪筆畫、文字標籤、圖形註解都在對應的詞彙被說出時即時繪製,營造「所見即所說」的沉浸式學習體驗。支援的平台包括 Claude Code 等可執行 Rust 二進位檔與 Python 腳本的開發環境,且需要 fframes 1.3.0(建議加入 3D 支援)、FFmpeg、LLVM/clang,以及 faster-whisper 與 numpy 等 Python 套件。核心工作流程從研究來源、撰寫腳本(含精確多選測驗)、使用本機 TTS 產生語音並進行 Whisper 字詞對齊,再到分鏡繪製與子代理協作渲染,最後產出包含章節晶片、圖形卡片、3D 插圖(可選)與小動畫主持人的完整影片。此技能特別適合需要將複雜論文、技術概念或部落格文章轉化為視覺化、易於理解的長篇教學影片的開發者與教學設計者。

相容平台✓Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/Ayushmaniar/claude-explainer-skills/tree/HEAD/plugins/explainer-skills/skills/whiteboard-explainer

在你喜歡的 AI 中提問

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

說明文件

白板解說影片

核心風格:語音和畫面同步移動。 所有內容(繪圖、文字、底線、圓圈)都會在說出相應詞語時逐一繪製,每張投影片逐步建構。在撰寫分鏡腳本前,請先閱讀 references/style-guide.md;其中包含色彩、螢幕文字規則、逐步揭露方式、同步時間表以及整部影片的結構。

每部影片都從 template/ 開始(複製它,不要從頭開始):將此技能的 template/ 複製到 <project>/video/,然後執行 source env.sh && cargo build --release。二進位檔為 target/release/explainer(Windows 上為 explainer.exe;env.sh 中的 R ... 會執行它)。範本是一個約 95 秒的示範(「一分鐘解釋二元搜尋」),包含四個可供複製的場景;template/README.md 有所有命令。從專案資料夾執行 Python 腳本,格式為 python -I narration/<x>.py,需安裝 numpy、soundfile、librosa、faster-whisper 和 pillow。其內容包含:

  • src/kit.rs:繪圖工具包(手繪筆畫、hand/note 文字、underline、circle、arrow、stamp、counter、用於論文圖形的 Card 搭配 mark/ring/spot/zoom、camera、shrink_aside、圖示)。直接使用整個檔案。
  • src/lib.rs:場景分派、章節晶片(含 0.1 秒淡入)、圖片表格、SceneCues(c.w(beat, "word") 表示詞語被說出的時機)。示範場景:s_intro.rs(開場、標題、結尾回顧)、s_idea.rs(以口頭詞語建構的投影片)、s_figure.rs(帶有圓圈/標記/註解/點和縮放的圖形卡片)、s_quiz.rs(含陷阱戳記的 mcq 測驗)。
  • src/objs.rs:可重複使用的物件(mcq、grid、token、vecbar、hbar、code_panel、chat_card、quote_card、axes/trace、vec_arrow、photo……)加上一個「本影片」章節:將每個影片的重複出現物件放在此處,讓所有場景以相同方式繪製。
  • src/duck.rs:主持人精靈(腳部位置、根據語音包絡線的點頭動作、每場景位置:開場/測驗/結尾時較大,其他時候放在右下角)。沒有精靈就沒有主持人。
  • src/t3d.rs(可選):即時模式的立方體和 View3,用於張量/陣列的 3D 插圖。
  • narration/:script.py(場景 → 節拍,測驗用 PAUSE)、tts.py(語音設定;尋找 local-tts 的 say.py)、build_vo.py(語音 + 每行快取 + 停頓塑形 + 速度 + faster-whisper 字詞對齊 → audio/narration.wav、src/cues.rs、src/envelope.rs)、words.py(檢查所有 c.w(...) 鍵、遺漏的分派分支和殘留的佔位符;寫入 WORDS.md)、est_cues.py(在語音存在前產生暫定提示和無聲音軌)、audit_vo.py / tts_try.py(發音審核)、make_srt.py(含 DISPLAY 對應、OVERRIDE 和 --review 的字幕)、envelope.py、glitch.py(最終檔案檢查)。
  • tools/:prep_figs.py(從 figs/*.png 寫入 src/figs.rs)、get_pet.py(下載主持人精靈)、font_metrics.py、make_demo_fig.py、lowprio.py(以閒置優先順序執行工作)。
  • media/:字型。只有媒體檔案可以放在其頂層(include_media_dir! 會對其他檔案報錯),因此授權文字放在 media/licenses/。
  • HELPERS.md:提供給每個場景輔助人員的簡要說明(規則、檔案對應、建構與檢查迴圈)。
  • STORYBOARD.md:示範的分鏡腳本,顯示輔助人員所需的詳細程度。
  • THIRD_PARTY.md:字型、精靈、fframes 和 FFmpeg 授權。

需求

  • Rust(穩定版)和來自 crates.io 的 fframes 1.3.0(固定在 template/Cargo.toml 中;檢查其授權條款是否符合您的用途)。
  • FFmpeg 共享函式庫(FFmpeg 7+「shared」建構)和 LLVM/libclang,用於 fframes 建構。template/env.sh 會讀取 FFMPEG_DIR 和 LIBCLANG_PATH;在 Windows 上,還要將 FFmpeg 的 bin 目錄加入 PATH,同時供 cargo 和建構後的二進位檔使用(缺少 DLL 時,若透過管道執行,會以靜默方式結束並回傳 127)。
  • Python 3.10+,需安裝 faster-whisper(字詞對齊、審核)和 numpy。
  • local-tts 技能(同一個外掛)用於語音。有 GPU 會快很多;但所有功能在 CPU 上也能執行。
  • 主持人精靈(可選):來自 github.com/gennadi-kuzmin/awesome-codex-pets 的 Codex 寵物(192x208 像素)。執行 python -I tools/get_pet.py --list,然後執行 python -I tools/get_pet.py <pet-id> 下載並分割成 sprites/。該儲存庫的 MIT 授權涵蓋其程式碼;在發布影片前,請檢查每個寵物的藝術作品權利。選擇明亮的寵物(深色寵物在黑色背景上會消失)。沒有精靈時,影片將在沒有主持人的情況下渲染。

fframes 版本與官方技能

新影片使用 fframes 1.3.0。創作者的官方技能 fframes-video 涵蓋通用 API,並隨每個版本更新,因此請閱讀它以了解此技能未涵蓋的內容:其 SKILL.md,然後是 references/api.md、audio.md、design.md 和 3d.md。使用以下命令安裝: npx skills add https://fframes.studio -g -a claude-code -y(如果您的權限阻止安裝,請要求使用者執行);相同的檔案位於 github.com/dmtrKovalenko/fframes 的 skills/fframes-video/ 目錄下。此技能僅保留此風格特有的內容:外觀、流程以及以下注意事項。當兩者對渲染有歧異時,以本技能的注意事項為準。

1.3 新增且值得使用的功能:

  • 3D 鏡頭(fframes::three_d):請參閱下一節。
  • 更精確的檢查:frame 3s --crop x,y,w,h(以影片像素為單位的縮放裁切,用於修飾筆畫和小標籤)、frame --ids(勾勒並命名每個具有 id 的元素)、strip 2s,5s,9s(並排顯示選定時間點)和 inspect --pops(找出在一幀內彈入或彈出的內容;將主持人的眨眼分組)。--pops 檢查的是影格,而不是編碼後的 mp4,因此仍然需要在最終檔案上執行 glitch.py。
  • Lottie:功能 lottie、frame.play_lottie(ctx, "x.json", LottieOptions { .. }),用於現成的動畫圖示。預設情況下仍使用手繪工具包筆畫;僅在 Lottie 符合白板外觀時才使用它。
  • include_media_dir!(pub struct M, "media", stereo) 會將立體聲檔案保持為立體聲。

白板影片中的 3D 鏡頭

僅在深度或移動攝影機本身就是解說的一部分時使用 3D:一個可以從中提起一層的圖層堆疊、張量形狀、記憶體階層、實體裝置、損失曲面、或一個傾斜的論文圖形卡片。文字、標籤、圖表和箭頭仍保持為手繪 SVG。每章僅限一兩個 3D 時刻:影片本質上仍是白板風格。references/three_d_example.rs 是一個 4 秒的測試(一個旋轉的圖層堆疊,帶有提起的圖層、固定在上面的手寫標籤、繪製在 3D 平面上的 svgr 紙卡)。

  • fframes = { version = "=1.3.0", features = ["compile-time-svgtree", "cli", "3d", "wgpu"] }。 3D 可與 CPU 影格渲染器搭配使用:使用 wgpu 時,3D 在 GPU 上渲染並讀回(120 幀 1080p:在 RTX 4070 筆記型電腦上約 1.4 秒,使用 Renderer::cpu() 約 4.2 秒)。當 GPU 忙碌時,將渲染器切換為 .cpu()(範例會讀取 FF_3D=cpu),其他設定無需更改。wgpu 類型可能在 main.rs 中需要 #![recursion_limit = "256"]。
  • 黑板外觀:Background::Transparent 置於工具包的 BG 矩形之上、Material::shadow_catcher 地板、ToneMapping::Neutral 以保持工具包色調準確,以及 Material::standard(c).roughness(0.45).clearcoat(0.4),適用於在縮圖尺寸下仍可辨識的厚實物件。
  • 3D 物件上的手寫標籤:camera.project(scene.local_to_world(id, local), w, h) 會給出內嵌畫面內的像素座標;加上內嵌畫面的 x/y。使用工具包在觸發詞上繪製標籤。
  • 3D 中的論文圖形:ctx.render_svgr(svgr!(..), w, h) → Texture::from_image(&img) 置於 Geometry::plane 上,搭配 Material::unlit(0xffffff)。相同的路徑可將圖形 PNG 放到卡片上。
  • 移動的物件必須保持在內嵌渲染器的畫面範圍內,否則會在邊緣被裁剪。
  • 在 new() 中建構場景一次,然後為每個影格複製並擺放姿勢(請參閱官方 3d.md)。
  • 張量/陣列視覺化:即時模式效果很好。場景函數從 t 建立一個 Vec<Cube>(位置是簡單算術,因此區塊可以折疊、分割、展開、幽靈填充),使用一個共享的 rounded_box 幾何體渲染內嵌畫面,並為手繪箭頭投影點。僅在前層寫入立方體數字,並跳過淡出立方體的標籤(alpha < 0.6),否則會透出來。完整的 3D inspect 很慢(5400 幀約 10 分鐘):請在背景執行它。
  • 將固定的標籤在整個攝影機移動過程中與所有物件保持清晰距離(檢查鏡頭開始和結束時的靜止影格),並在 shrink_aside 完成後開始 3D 鏡頭,而不是在其期間開始。

工作流程

  1. 研究:將來源資料整理到 research/paper_notes.md:每個數字及其所在的表格/頁碼,以及措辭風險(百分比 vs 點數等)。將論文的圖形提取為圖片(figs/,在影片中顯示為白色卡片)。在螢幕上展示論文本身的圖表和圖形。
  2. 腳本(narration/script.py):約每分鐘 150 字,每個節拍一句話,為語音拼寫(「Swee Bench」、「T zero」、數字用文字表示)。以最驚人的數字開場 → 標題 + 論文卡片 → 路線圖 → 章節 → 3-4 個測驗(問題、選項 A-D、PAUSE、答案) → 結論海報(重複使用先前繪製的相同物件) → 附註 → 結尾。在語音建構後檢查長度;修剪台詞或提高 TEMPO(1.06 可行),而不是加快語速。
    • 測驗是困難且準確的選擇題(風格指南第 6 節):推理問題、四個選項(錯誤選項是真實常見的誤解)、只有一個可辯護的答案。撰寫 research/quiz_keys.md(每個選項都附有頁碼/表格參考,衍生數字用 Python 計算),並在建立語音前檢查。
    • 教學,而非摘要。 從零開始建構每個想法,並使用實際數字進行範例計算。在引入術語的同一行中定義每個術語,並將行話簡化為日常用語(「節點只是一個工作」)。大多數節拍以連接詞開頭(「所以,」、「現在,」、「但是」),讓轉折聽起來自然。保持在每分鐘 150 字左右:繪圖需要時間。
    • 在使用每個符號之前正確介紹它;在使用它的行中重複一個簡短的提醒。
    • 聽起來像真人,而不是 AI。 在撰寫前閱讀 references/natural-narration.md,然後執行 python -I scripts/aispeak_scan.py <project>/narration/script.py。修正編排好的開場(「這就是關鍵所在」)、非 X 而是 Y 的重新框架、可引用的結尾語和自問自答的問題,然後再建立語音。
    • 避免冒號片段行(「首先:...」、「三個基準點。」):語音會在該處停頓,下一行聽起來會很突兀。場景的第一個詞單獨出現(「探測。」)可能會被吞掉:寫成「接下來,探測。」。給「感謝觀看!」一個單獨的節拍。
  3. 分鏡腳本(STORYBOARD.md):每個場景,哪個元素出現在哪個觸發詞上、其大致位置(x、y)、大小和顏色、哪個圖形/裁切、以及重複出現的物件和顏色意義。要足夠具體以實現,而非設計。保留晶片區域(左上)和主持人區域(右下)。
  4. 語音:narration/build_vo.py 透過 local-tts 技能的 say.py 進行語音合成,搜尋路徑依序為 LOCAL_TTS_SAY、~/.claude/skills/local-tts/、~/.claude/plugins/**。GPU 忙碌?使用 GGML_BACKEND=CPU 和 WHISPER_DEVICE=cpu。每行會快取;修改台詞會強制重新錄製。shape() 會根據前面的標點符號限制每個剪輯內的靜音長度(無標點 0.14 秒,, 0.24 秒,:; 0.3 秒,.?! 0.42 秒),行之間 0.5 秒(問號後 0.7 秒)。 在繪製場景前先審核語音:audit_vo.py 會轉錄每個剪輯,不使用腳本作為提示(build_vo 使用提示的 Whisper 會隱藏錯誤發音),並將其與腳本進行比對。忽略美式拼寫和同音詞;修正真正的誤讀,使用 tts_try.py 測試修正(在整個句子中測試:一個名稱單獨時可能沒問題,但在句子中間可能會出錯)。已知的誤讀記錄在 local-tts 技能的注意事項中。每次重新錄製語音後重新執行審核(Qwen 偶爾會重複一個詞,「the the」)。語音尚未準備好?est_cues.py 會寫入暫定提示和無聲音軌,當 build_vo.py 覆寫兩者時,場景會自行重新調整時間。
  5. 工具包 + 1-2 個示範場景由您繪製並以完整尺寸檢查,以便輔助人員有品質標準。
  6. 將場景群組分派給平行子代理(小型、快速的模型,配合高度推理努力,在提示簡潔時表現良好;較強的模型僅用於示範場景)。首先將重複使用的物件放入 objs.rs 並填寫 HELPERS.md,使用絕對路徑指向 research/。將專案複製到每個代理的 work/<group>/ 目錄(跳過渲染和語音快取),目標目錄使用硬連結(cp -al target work/g/target,或為每個輔助人員設定 CARGO_TARGET_DIR;然後刪除該副本自身的 explainer crate 成品)以節省磁碟空間和建構時間。每個輔助人員僅編輯其 src/s_<group>.rs,進行建構、執行 words.py 和 inspect、檢查 strip 和完整影格。透過複製他們的 s_*.rs 回來合併;先對其他檔案進行差異比對。
    • 保持輔助人員快速。 建構是瓶頸:保持 [profile.release] incremental = true + codegen-units = 256(重新建構約 50 秒 → 約 25 秒),同時最多執行約 4 個輔助人員;將後續群組分配給先完成的任何人。一個群組 = 2 個相似複雜度的場景;將測驗或密集場景分開。預算:每個場景最多 3 輪建構和查看,檢查 12 幀的 strip 加上 @end,然後列出遺留的疑問,而不是進行打磨。每個輔助人員進行一輪針對性修正的成本較低。
    • 驗證他們的事實:檢查螢幕上的每個數字是否與 paper_notes 一致,並計算每個範例(輔助人員可能發明數字、進位錯誤,或示範中洩漏了後續測驗的答案)。檢查照片是否與旁白相符。
    • 自己審查每個輔助人員的 strip 和影格(他們自己的檢查圖片可能已過時),然後發出具體修正。他們常見的錯誤是將每個階段擠在上半部,使用小字型:給出 y 範圍和 px 尺寸。

… (原文因長度截斷,但已翻譯現有部分)

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相關技能