知識動畫影片生成是做什麼的？

使用者給一段口播（文稿或音訊）+ 一張風格參考圖，你負責選模板、設計分鏡、寫程式碼、渲染出片。

技術棧：Remotion（React 寫影片）+ Python 腳本（配音/對齊/混音）+ ffmpeg。

核心原則：風格決定工具。 先定類型，再按該類型的模板選工具和寫畫面。

作者：小白姐姐（Xiao Bai）· GitHub @newbaisays-aigc · MIT 協議 專案地址：https://github.com/newbaisays-aigc/knowledge-animation-video

本 Skill 與具體 AI 工具無關。 只要你的宿主環境能讀 SKILL.md、能跑 shell 命令、能寫檔案，就能使用它。 TTS 優先使用 components/common/scripts/tts.py（Edge TTS，需連網）；若環境不允許安裝 Python 依賴，改用宿主自帶的語音合成能力，輸出同樣的 vo.mp3 + 逐句時間表即可。模型選擇不限：任何能寫程式碼的模型都可以，程式碼量大時優先使用推理能力強的模型。

第 1 步：開場選擇（必須先做，不要跳過）

一次性向用戶問清下面 4 個問題。如果平台支援分頁式提問就用分頁，否則直接用文字列出編號讓用戶回覆。

問題 1：影片類型（一句話記住：要震撼選 3D，要親和選手繪，要推導選公式，要講結構選資訊圖，講歷史選檔案，看作品選美術館）

編號	類型	適合的內容	適合的人
A	3D 數據	有硬數據：數據新聞、產品發布、行業報告、財報解讀	財經科技博主、新媒體編輯、市場和產品同學
B	手繪塗鴉	偏觀點和故事：歷史人文、社會現象、讀書筆記、心理學	文科老師、知識付費講師、讀書博主
C	數學公式	抽象的數學、物理公式，演算法和 AI 原理	理科老師、做課件的學生、技術博主
D	資訊圖	流程、方法、系統架構、產品功能、業務流程	職場彙報、企業培訓、B 端和 SaaS 運營
E	復古檔案	歷史人物、歷史事件、發明史、品牌故事、老物件	歷史博主、人文科普、品牌內容、文旅
F	美術館	名畫賞析、藝術史、文物、設計、建築、攝影作品	藝術博主、美育老師、博物館和文旅、設計師
G	幫我選	使用者不確定時，看完口播稿後由你推薦	—

問題 2：影片比例

16:9 橫螢幕（1920×1080）：B 站、西瓜、YouTube、課件
9:16 直螢幕（1080×1920）：抖音、影片號、小紅書
1:1 方形（1080×1080）：朋友圈、資訊流

問題 3：口播方式

文稿：使用者給文字，你來配音（TTS）
音訊：使用者給錄好的音訊，你來轉寫對齊
無配音：只要畫面 + 背景音樂

問題 4：要不要字幕

要字幕（預設推薦）：逐句顯示在畫面底部，適合手機靜音觀看
不要字幕：畫面更乾淨，適合後期在剪映等軟體裡自己加字幕

注意：口播方式選「無配音」時，字幕是觀眾理解內容的唯一途徑，要提醒使用者建議保留。

問完後，單獨發一條訊息向使用者要素材，然後停下來等使用者回覆。兩樣素材沒有收齊之前，不要寫稿、不要出分鏡、不要做任何生成。

這條訊息照下面的話術發（可按使用者已選的類型替換舉例）：

好的，接下來請給我兩樣素材：

素材 1：口播 發一段文稿或一段錄好的音訊。第一次跑建議短一點，15～30 秒（約 60～120 字），方便測試，消耗也少。如果你還沒有稿子，告訴我主題和時長（例如「介紹拿破崙，20 秒」），我先幫你寫一版給你確認。

素材 2：風格參考（很重要） 風格用嘴巴說不清，直接給我看最準。下面任選一種都行：

上傳一張或幾張圖片

發一個連結：Pinterest、小紅書、B 站、YouTube 的圖片或影片連結都可以

實在沒有，回覆「用預設風格」

找參考的小技巧：去 Pinterest 或小紅書搜「[類型關鍵詞]」，挑一張最喜歡的。

各類型的搜尋關鍵詞：美術館 →「museum art documentary motion」；復古檔案 →「vintage documentary motion graphics」；3D 數據 →「數據可視化 3D」；手繪塗鴉 →「手繪動畫 / doodle explainer」；數學公式 →「3Blue1Brown 風格」；資訊圖 →「資訊圖動畫 / infographic motion」。

收素材時的規則：

使用者只給了主題沒給稿子：先寫稿子，單獨發給使用者確認，確認後再往下走。
使用者只給了口播、沒給參考：再提醒一次要參考，使用者明確回覆「用預設風格」後才用模板預設風格。
使用者給的是連結：先打開連結取得真實的圖片或影片（Pinterest 連結可用 https://widgets.pinterest.com/v3/pidgets/pins/info/?pin_ids=<pin 編號> 取得圖片和影片位址）。如果是影片，均勻抽 8～10 幀拼成一張圖來看。 介面打不開時不要卡住，也不要憑連結文字猜風格——直接請使用者上傳截圖或圖片；使用者明確說「用預設風格」才用模板預設風格。

如果使用者選了 G（幫我選），讀完口播稿後按下面的規則推薦，並說明一句理由，等使用者確認：

稿子裡有較多數字、百分比、排名、增長 → A 3D 數據
講一件作品（畫、文物、建築）值得細看的細節 → F 美術館
講真實歷史人物、事件、發明、品牌的來龍去脈 → E 復古檔案
以觀點、故事、心理概念為主，數字很少 → B 手繪塗鴉
出現公式、定理、推導、演算法步驟 → C 數學公式
講步驟、流程、框架、模組關係 → D 資訊圖

第 2 步：讀取模板

確定類型後，只讀取對應的那一個模板檔案，不要全部讀取：

A → templates/3d-data.md
B → templates/hand-drawn.md
C → templates/math-formula.md
D → templates/infographic.md
E → templates/vintage-archive.md（同時讀 components/vintage-archive/README.md，直接複用元件庫）
F → templates/gallery.md（同時讀 components/gallery/README.md，直接複用元件庫）

每個模板都按 7 塊結構寫成：規格定尺寸，風格定長相，節奏定時間，畫面定動作，音樂定情緒，工具定實現，交付定檢查。

調整規則：

規格、交付：基本不動，只把比例換成使用者選的那個。
風格、節奏、畫面、音樂：根據使用者的內容和參考圖來調。
工具：跟著模板走，不要混用別的模板的工具。

元件庫： components/ 下存放已經調好的可複用元件。對應模板有元件庫時，必須先讀它的 README，優先複用元件和腳本，只為本片新寫特有的畫面。這樣效果穩定，也能少出錯。目前已有：

components/common/：所有模板共用的腳本，包括配音（tts.py）、自錄音訊對齊（align.py）、三版本混音（mix_audio.py）和匯出（export_versions.sh）。第 4 步和第 7 步直接用這些腳本。
components/3d-data/：3D 數據參考實現（SpaceX 財報快訊原始碼），包括 3D 中文字、發光軌跡、網格地面、全息體和遮罩轉場
components/gallery/：美術館（WebGL 液態玻璃鏡片畫布、鏡頭視圖數學、作品輪盤、放大鏡、作品檔案卡和細節排版，附蒙娜麗莎完整範例）
components/vintage-archive/：復古檔案（紙標籤、相片卡、絲帶、印章、紅圈、黃銅銘牌、翻書、黃銅放大鏡、整屏名畫、木桌、膠片疊層，加上取圖、做舊、配音、混音腳本，附拿破崙完整範例）

做出新的滿意效果後，把通用部分沉澱回元件庫。

第 3 步：分析參考圖

仔細看參考圖，提取並寫下這幾項（後面所有鏡頭都要遵守）：

主色 3～5 個（寫出色值，如 #0B1E3F）
背景：純色 / 漸層 / 紋理 / 深色或淺色
質感：扁平 / 立體光影 / 玻璃 / 紙張 / 線稿
字體氣質：粗黑 / 圓體 / 手寫 / 襯線
構圖特點：留白多少、元素密度、居中還是偏置
如果參考是影片，再補充：鏡頭運動方式、轉場方式、文字出場方式、節奏快慢

參考風格和所選模板衝突時（例如選了手繪，卻給了一張 3D 玻璃質感圖），先把衝突告訴使用者，給出兩三種融合方案讓使用者選，再往下走。不要自己悄悄決定。

第 4 步：處理口播，確定時間軸

文稿模式：

先輕度整理文稿：去掉錯別字和不適合朗讀的符號（如 ~ * #），不改使用者的意思。
用 components/common/scripts/tts.py 生成配音和逐句時間（數字寫成阿拉伯數字；環境不支援 Python 依賴時，改用宿主自帶的語音合成能力，輸出同樣的 vo.mp3 和逐句時間表）。

音訊模式：

用 components/common/scripts/align.py 音訊稿件輸出目錄 對齊。有稿件時字幕用稿件原文；沒有稿件時用識別文字。
沒有稿件，或者相似度低於 60% 時，把結果給使用者核對。

無配音模式：

按每秒 4～5 個漢字估算每句時長。

最終得到一張句子時間表，作為分鏡的依據。影片總時長以配音時長為準，畫面跟著配音走。

第 5 步：出分鏡方案，等使用者確認（不要直接渲染）

用表格列出分鏡，每個鏡頭一行：

鏡頭	時間	對應口播	畫面內容	動效	音效

要求：

一句口播通常對應 1 個鏡頭，長句可以拆成 2 個。
每個鏡頭都要有一個「主角元素」，並且寫清楚它怎麼動（從哪來、到哪去、多長時間）。
口播裡的數字、關鍵詞必須出現在畫面上。
鏡頭之間寫清楚轉場方式。

發出分鏡後問使用者：「這個方案可以嗎？哪個鏡頭想改？」使用者確認後才進入第 6 步。 這一步能避免方向錯了白白消耗積分。

第 6 步：生成影片

按模板裡「工具定實現」的要求搭專案、寫程式碼、渲染：

初始化 Remotion 專案（若環境裡已有就複用），按使用者選的比例設定寬高，幀率 30。
每個鏡頭寫成一個獨立元件（Scene01、Scene02……），統一放進主 Composition 按時間排列。這樣後面改某個鏡頭時，只動那一個檔案。
把參考圖提取出的配色寫成一個公共的主題檔案，所有鏡頭都從這裡取顏色。
字幕（僅當使用者在問題 4 選了要字幕時）：逐句顯示，和配音時間對齊。使用者選了不要字幕，就不渲染字幕層，但仍然保留句子時間表用於畫面卡點。橫螢幕放在底部，距底約 8%；直螢幕放在畫面中下部，距底約 25%，避開平台的按鈕和文案區。
背景音樂和音效：按模板「音樂定情緒」的要求生成或選取。背景音樂音量壓到配音的 15%～25%，有人聲時自動降低。
先渲染 3～5 張關鍵幀截圖自查（構圖、文字是否溢出、顏色是否符合參考圖），沒問題再渲染完整 MP4。

遇到報錯時，先讀錯誤資訊定位到具體鏡頭，只修改那個鏡頭，不要整體重寫。

包裝設計是硬要求。 不能只是把圖片和文字擺在純色背景上。每個鏡頭都要從參考裡提取「包裝元素」，再把它們做成可複用的元件，例如：桌面或場景底紋、相紙或卡片邊框、撕邊紙標籤、絲帶橫幅、印章、手繪紅圈、黃銅銘牌、書本翻頁、膠片顆粒、暗角和閃爍。數字和關鍵詞要放在這些包裝元素上出場，不要以裸文字出現。

素材來源與授權（硬要求）。 素材需要真實圖片時（歷史人物、名畫、文物），用 components/vintage-archive/scripts/fetch_commons.py 從維基共享資源下載，它會同時生成 ATTRIBUTION.md，記錄每張素材的作者、授權協議、來源頁面：

Public domain（公有領域）：無需署名，但建議在片尾保留來源
CC BY / CC BY-SA：必須署名 —— 片尾或說明文案裡寫上「作品名 · 作者 · 來源頁 · 協議名」
CC BY-SA：除署名外，衍生作品還須以相同協議發布

下載後先看圖再寫鏡頭（見第 7 節踩坑 1），交付前對照 ATTRIBUTION.md 逐條核驗署名是否落實。字體由 setup_assets.sh 下載，均為 OFL 1.1 / Apache 2.0，可商用可嵌入，但需隨成品保留許可聲明。

文字可讀性規則：所有文字必須放在包裝元素內部，不能有文字懸在紙片、橫幅外面。印章、強調標籤用高對比配色（如黃底紅字、深底淺字），不要用半透明紅字直接疊在紙上。

音樂和音效： 如果使用者有本地素材庫（如 D 盤的音效庫），先問路徑，再按情緒從庫裡挑背景音樂，按動作挑音效（翻頁、紙張、拍立得、鉛筆、呼聲轉場、鼓擊、重低音、海浪等）。背景音樂要選一段能在影片結尾自然收尾的片段。只有在沒有素材庫時，才用程式合成。

第 7 步：交付與修改

導出版本： 渲染前問使用者要導出哪幾個聲音版本（可多選，音效每個版本都保留）：

完整版：旁白 + 音樂 + 音效
無旁白版：音樂 + 音效（適合使用者自己重新錄口播）
無音樂版：旁白 + 音效（適合使用者在平台上自己配版權音樂）

做法：畫面只渲染一次（靜音），再分別合成不同音軌，不要渲染多遍。components/common/scripts/ 裡有現成腳本：mix_audio.py 一次輸出三條音軌，export_versions.sh 負責合成導出。其他模板照同樣的思路做。

交付時告訴使用者：

成片檔案位置、時長、比例、是否帶字幕、導出了哪幾個聲音版本
用的是哪套模板、主色是什麼
一句話提示：「哪個鏡頭不滿意直接說，比如『結尾的地球想換個樣式』，我只改那一段。」

使用者提出修改時：

先確認是第幾個鏡頭（不確定就根據描述的內容反查分鏡表）。
只修改該鏡頭的元件檔案，其他鏡頭一律不動。
改完先截圖給使用者看，確認後再重新渲染完整影片。

更新這個 Skill 本身時

如果使用者要求修改 Skill 的內容（加模板、加元件、改文件）並推送到 GitHub：

每次推送都必須打一個新 tag，版本號格式 vMAJOR.MINOR.PATCH，與 frontmatter 的 metadata.version 一致。
不要手寫 git tag / git push / gh release，統一用 tools/release.py：

python tools/release.py --bump minor --note "本次更新說明"

它會依次完成：改版本號 → 更新 CHANGELOG.md → 重新打包 .skill → 提交 → 打 tag → 推送 → 建立 GitHub Release（附分發包）。

改完之後不需要問使用者「要不要發布」，直接按上面的命令執行即可。

實測踩坑清單（第一輪 27s 復古檔案成片跑出來的，照做能省很多返工）

取素材

維基共享資源的檔名會騙人。 標題寫著 Winged Victory of Samothrace，下下來是牆上那塊刻字。取圖後必須先看圖再寫鏡頭，不要按檔名分配畫面。
直構圖照片不能塞整螢幕（FullPainting / objectFit:cover 會裁掉主體）。直圖一律用相片卡（PhotoCard）——復古檔案模板本來就是「桌上擺照片」，不是滿螢幕鋪圖。

寫畫面

帶弧邊或異形底的容器裡放多行字，不能按 flex 居中拍腦袋算。絲帶橫幅（Ribbon）的紙面下緣是中部上弓的曲線，副標題曾經整排掉出紙外。要按「曲線最窄處」的高度校核，或渲染單幀後裁切放大 2 倍目視確認留白。
元素入場要留夠穩定時間：本幕不足 60 幀時，Drop 彈簧入場的東西會沒落定就被切場（紙片飛出畫面右邊界）。入場的紙片 at 幀之後至少留 30 幀靜止。

跑腳本

export_versions.sh 的入口參數必須是含 registerRoot() 的檔案（常見是 src/index.ts），傳 Root.tsx 會報 "does not contain registerRoot"。
渲染前先抽 3～5 張關鍵幀自查，不要一次渲染到黑。自查的方法是裁切放大局部看文字是否溢出，而不是只看整幀縮圖——整幀看不出來的 10px 溢出，放大後一清二楚。

知識動畫影片生成