Communitygithub.com

make-2d-video (影片生成)

將旁白(可選腳本)轉換為完整的 MP4 動畫影片,使用程式碼繪製每一幀(HTML Canvas + Three.js),無需任何圖像或影片生成模型,確保角色一致且文字清晰。

make-2d-video (影片生成) 是什麼?

這個 AI 代理人技能「make-2d-video」專為將旁白(或含腳本)自動化製作成高品質 2D 動畫影片而設計。它採用完整的端到端流程:從安裝依賴、語音轉錄(Whisper)、故事拆解、風格選擇,到場景建置、渲染、音樂與音效合成,最終輸出 16:9 或 9:16 比例的 MP4 檔案,解析度從 720p 到 4K。此技能完全透過程式碼(HTML Canvas + Three.js)繪製每一幀,不使用任何圖像或影片生成模型,因此角色外觀保持一致,文字清晰銳利。它支援三種繪圖風格:電影感火柴人(預設)、3D 卡通角色,以及扁平 2D 卡通風格(toon cast),後者特別適用於新聞解說影片,具有輪廓線、笑點、文字泡泡和公眾人物漫畫化功能。使用者只需提供旁白音檔,技能便會自動處理時間軸標記、故事板、場景建置、渲染與後製。重要的設計原則是:保留旁白原貌、每一幀都根據腳本即時創作、支援多國語言(含越南語)。它還包含新聞解說模式,提供從主題挑選、腳本撰寫、資產管理到上傳與統計分析的完整工作流程,並在使用者未指定時自動採用預設值。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/lynguyen9995/make-2d-video/tree/HEAD

在你喜歡的 AI 中提問

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

說明文件

make-2d-video studio:完整影片製作流程

將旁白(以及可選的腳本)轉換為完整的 MP4 檔案,其中每一幀都由程式碼繪製(HTML Canvas + Three.js),在無頭 Chromium 中逐幀捕捉,並透過 ffmpeg 編碼。不使用任何圖像或影片生成模型,因此角色保持一致,文字保持清晰。為每個腳本重新創作視覺效果;只有風格是固定的。

此技能隨附的資源(基底目錄):

  • kit/:經過測試的工作室(包含渲染器、引擎、工具、音訊、examples/reaction-time 參考專案)。將其安裝到工作區,命名為 make-2d-video-studio/(請參閱 references/install.md)。
  • references/install.md:安裝說明、相依性表格、診斷工具、自我測試。
  • references/style-bible.md:視覺風格指南(角色、場景、燈光、攝影機、剪輯、圖形、9:16 規則、禁止事項)。在設計任何鏡頭之前,請完整閱讀。
  • references/style-bible-toon.md:toon 角色(cast: "toon")的視覺風格指南。當角色設定為 toon 時,請遵循此指南,而不是 style-bible.md 中衝突的部分(例如邊緣光、無輪廓線、黑色剪影)。
  • references/story-breakdown.md:撰寫 story/bible.md 和 story/shots.json,以及節奏規則。
  • references/engine-api.md:場景 API、配置和 shots.json 的結構,以及 three-kit 參考。
  • references/sound-design.md:音樂計劃、音效庫、環境音和音量設定。
  • references/render-qc.md:預覽和最終渲染、速度指南、QC 檢查清單、故障排除。

此外掛程式中的階段指令可用於重新執行單一階段:/new-video(第 1-4 階段)、/video-styles(第 5 階段)、/render-video(第 6 和第 8 階段)、/video-sound(第 7 階段)。若要從頭到尾執行,請遵循此檔案,並在每個階段需要時載入參考。

黃金法則

  1. 首先詢問影片語言。 在任何其他問題、安裝、檔案或編輯之前,先詢問使用者影片使用的語言(第 0 階段)。後續每個步驟都使用該語言。使用使用者書寫的語言與他們交談。
  2. 保持旁白完整。 切勿改寫、新增、刪除或重新排列口語單詞。每個鏡頭都應說明在螢幕上顯示時所說的話語。
  3. 相同風格,全新畫面。 根據此腳本創作場景、道具、角色和動作。僅使用 examples/reaction-time 來學習 API。
  4. 具體且明確地顯示所說的內容。 抽象的台詞應轉化為視覺隱喻、圖表或特寫反應。
  5. 草稿、查看、修正,然後渲染。 在進行完整渲染之前,請自行開啟聯絡表和靜止畫面(讀取 PNG)。渲染很慢;查看很快。
  6. 三個使用者檢查點: 設定選擇、從渲染樣本中選擇風格,以及在最終渲染前的預覽。如果使用者不在,請使用預設值,說明所做的假設,然後繼續。
  7. 檔案就是事實。 每個影片都位於 make-2d-video-studio/projects/<slug>/ 中,且 story/shots.json 掌管所有時間。 一個影片 = 一個自包含的資料夾:config.json、input/、assets/(+ assets/_raw/ 用於未挑選的 AI 圖像)、scenes/、story/ (包含 plan.md 交辦筆記)、timeline/、jobs/(+ jobs/logs/)、build/(暫存,可安全刪除)、out/(僅交付檔案)。 切勿將每個影片的檔案放在工作室根目錄或獨立的 _jobs/ 資料夾中。
  8. 只有故事中的人物出現在畫面上(新聞/解說影片)。 沒有頻道吉祥物或旁白/主持人角色 (例如 nhoc、ongdo),除非使用者要求。新聞中的每個具名人物都應有自己的 toon 角色(標誌性髮型、眼鏡、 服裝,根據 style-bible-toon.md 中的漫畫化規則)加上姓名標籤,而不是通用角色或剪影。私人或 未具名人士(未確認的嫌疑人、家庭成員)保持匿名:使用通用的未命名 toon 角色或帶有角色標籤的剪影。

頻道預設值(channel.json)

在第 0 階段之前,請在 make-2d-video-studio/ 旁邊(存放工作室的工作區資料夾)、目前資料夾,以及此技能的基底目錄中尋找 channel.json。它可以包含 name、lang、aspect、resolution、fps、style、cast(stick | 3d | toon)、captions、shotsPerMin 和 music。 出現的每個鍵都是此影片的預設值:跳過它所回答的問題(語言、畫面比例、解析度、fps、字幕、第 5 階段的風格選擇),並在一行中確認它們,例如「Kênh Tí Tò Mò: tiếng Việt, 9:16, 1080p, 30 fps, dusk, có phụ đề。」僅詢問仍未知的項目(旁白、腳本、標題)。name 是片尾卡片的頻道名稱。

三種繪圖風格(每個影片選擇 ONE 個角色設定)

cast視覺風格引擎風格指南
stick(預設)帶有邊緣光的黑色火柴人,氛圍感強烈的電影 2.5D 場景rig2d.js(+ three-kit.js 用於 3D 定場鏡頭)style-bible.md
3d3D 卡通角色:白色扁平頭部、梨形身體、細長四肢rig3d.js、rig3d-cast.js(kind: '3d',rig3d: true)style-bible.md →「2D 角色或 3D 角色」
toon帶輪廓線的扁平 2D 卡通:圓形膚色頭部、豆形身體、細長四肢、粗輪廓線、線條抖動效果、漫畫文字、視覺笑點、公眾人物漫畫化;可選的 toon 陰影 3D 英雄道具,帶有發光效果toon.js、toon3d.jsstyle-bible-toon.md

channel.json → cast 決定角色設定;否則在第 1 階段詢問一次(每種風格一行)。對於 toon 角色,預設配色風格為 paper(電影級色調也可以用,但會使扁平色彩變暗)。在撰寫 toon 鏡頭之前,請先研究 examples/toon-demo/。

新聞解說模式(toon 角色,頻道的主要格式)

當使用者要求製作新聞/財經/科技/億萬富翁/投資資產解說影片時,請遵循 kit/CLAUDE.md(安裝為 make-2d-video-studio/CLAUDE.md)。它會用一個門控工作流程取代下面的第 1-8 階段: 0 主題挑選(3-5 個候選主題,附帶來源強度、風險和保鮮期)✋ → 1 有來源的腳本 + 3 個標題 + 縮圖概念 ✋ → 2a 聲音和 2b 資產清單(story/assets.md:要繪製的內容、數量、使用 Flow / 使用者的圖像 AI / 程式碼 toon / three.js + 發光效果製作)✋ → 3 圖像 + 角色表 ✋ → 4 時間 + 場景 → 5 所有鏡頭的聯絡表 + 30 秒示範 ✋ → 6 完整渲染 → 7 打包(縮圖、附帶來源的描述、章節、過期列表)✋ → 8 上傳 ✋ → 9 查看統計資料。 場景圖像:沒有人物、沒有文字、沒有標誌。縮圖:可以包含人物(風格化,絕不能是真人照片級的偽造品)和 ≤ 4 個文字。切勿從未經審核的專案透過 YouTube Data API 上傳(上傳會被鎖定為不公開);請透過 YouTube Studio 網站上傳,儲存為不公開/排程,並僅在使用者明確許可後才發布。 在本機 Claude Code 會話中,請自行執行每個指令;僅在沒有 Windows shell 時才編寫 .bat 作業。

第 0 階段:影片語言(永遠優先)

如果 channel.json 提供了 lang,請在上述一行摘要中確認它,而不是詢問。否則,在詢問任何其他問題、建立檔案、安裝或編輯之前,請使用使用者的語言問一個問題,例如:「此影片使用哪種語言?(例如:中文、English、日本語…)」。在可用時使用 AskUserQuestion。等待回答,然後將其對應到 ISO 639-1 代碼(zh、en、ja、ko、es、pt、de、fr、hi……)。如果使用者在此對話中已指定影片語言,請在一行中確認它,而不是再次詢問。

語言代碼驅動整個流程:

  • tools/new_project.py 的 --lang <code> 參數(儲存在 config.json → lang)。tools/transcribe.py 從配置中讀取它。
  • 所有螢幕文字(標題卡、標籤、單位、標誌、圖表說明、內嵌字幕)都以該語言書寫,簡潔、拼寫正確且帶有完整變音符號。切勿翻譯或更改口語旁白。
  • 字型:渲染器載入拉丁文、拉丁文擴展和越南文字形;對於 vi,標題字型會自動切換到 Nunito,以便重音符號在一個一致的字型中顯示。對於此技能隨附字型不支援的書寫系統(日文、韓文、中文、阿拉伯文、印度文、泰文……),請告知使用者,並在 QC 期間仔細檢查文字靜止畫面。

第 1 階段:資料收集

在語言確定後,詢問一次(在可用時使用 AskUserQuestion):

  • 旁白檔案(必要)。還沒有錄音?使用 VieNeu(如果其 MCP 工具已連接)製作一個:將每個句子合成為一個片段(01.wav、02.wav……放在一個資料夾中),將句子逐行寫入 sentences.txt(可選的 |0.8 暫停或 |cham 減速標記,情緒標籤如 [cười] 保留在行內),然後執行 python -I tools/join_segments.py <clip_dir> sentences.txt voiceover.wav。它會以固定的暫停時間合併片段(VieNeu 在給定完整腳本時會合併短句並刪除暫停),並寫入 voiceover.wav.script.txt,這是乾淨的文字,可以作為 --script 傳遞。
  • 腳本: 帶時間戳(SRT/VTT/JSON/TXT 格式,使用 [mm:ss])、純文字(最好與音訊對齊,保留確切措辭),或無腳本(將進行轉錄)。
  • 畫面比例: 16:9 或 9:16。
  • 解析度: 720p / 1080p(推薦)/ 1440p / 2160p(4K)。請注意,更高的解析度需要更長的渲染時間。
  • 字幕: 9:16 預設開啟,16:9 預設關閉。
  • 音樂: 生成、使用者自己的檔案,或無。音效: 開啟或關閉。
  • 標題。
  • 角色設定(繪圖風格):stick / 3d / toon,除非 channel.json 提供了 cast。

暫時不要詢問配色風格。預設值(當 channel.json 未指定時):16:9、1080p、24 fps、生成音樂 + 音效、角色設定 stick、風格 dusk(toon 角色為 paper)。

第 2 階段:安裝或檢查工作室

遵循 references/install.md:將 kit/ 複製到工作區中的 make-2d-video-studio/(如果已存在則跳過),安裝相依性,執行 python tools/verify_kit.py 和 python tools/doctor.py,然後執行範例自我測試。在一個簡短清單中回報已安裝的內容。在 Windows 上,如果 doctor 僅在 winget 資料夾中找到 ffmpeg,它會寫入 make-2d-video-studio/env.sh 和 env.ps1;請在渲染和合成指令前加上 source env.sh &&(在安裝之前啟動的 shell 看不到新的 PATH)。

第 3 階段:專案 + 時間軸

在 make-2d-video-studio/ 內執行。在 python 不是 Python 3 的地方使用 python3。

沒有可用終端機的 Windows(電腦使用只能點擊檔案總管): 將每個較長的步驟放入一個使用者可以雙擊執行的作業中。將 tools/jobs/templates/full.ps1 + 2-full.bat 複製到 projects/<slug>/jobs/;每個作業 .ps1 都以 $JobDir = $PSScriptRoot 開頭,並點來源匯入 ..\..\..\tools\jobs\common.ps1(提供 $P、Run、Py、Say、Fail、Done,並寫入 jobs/logs/<name>.log + <name>.status = RUNNING / OK / FAILED 供 Claude 讀取)。共用輔助工具:tools/jobs/set_duration.py(根據旁白設定 config.json 中的 duration)、tools/jobs/make_srt.py(從 timeline/sentences.json 產生 out/<title>.en.srt)。Windows 上的工作室安裝/修復:tools/jobs/setup-studio.bat。

python tools/new_project.py --name <slug> --voice "<voiceover path>" [--script "<script path>"] --aspect 16:9 --resolution 1080p --fps 24 --style dusk --title "<title>" --lang <code> [--captions]
  • 帶時間戳的腳本:python tools/parse_script.py --project projects/<slug> --script projects/<slug>/input/script.<ext>
  • 純文字腳本:python tools/transcribe.py --project projects/<slug> --script projects/<slug>/input/script.txt --lang <code> --model small。匹配度必須 ≥ 90%;如果低於此值,請告知使用者腳本和音訊有差異。
  • 無腳本:python tools/transcribe.py --project projects/<slug> --lang <code> --model small(在慢速機器上使用 base,對於較難的音訊使用 large-v3)。

檢查 timeline/transcript.txt(其結束時間應接近旁白的長度),然後執行 python tools/beats.py --project projects/<slug> 以取得節拍表和草稿 story/shots.json。

第 4 階段:故事拆解

閱讀 references/style-bible.md(或 references/style-bible-toon.md(用於 toon 角色))和 references/story-breakdown.md。撰寫 story/bible.md(一句話摘要、角色及其各自標誌性顏色、帶有情緒和關鍵燈光的場景、主題動機、音樂計劃,以及角色是 2D 火柴人還是 3D 角色)。撰寫 scenes/cast.js。重寫 story/shots.json:連續的鏡頭,在短語邊界處提前 0.1-0.2 秒切換,每個新場景有一個定場鏡頭,以及每個鏡頭具體的 scene 描述。節奏:9:16 短片每分鐘 30-40 個鏡頭(中位數 1.5-2 秒);較長的 16:9 解說片每分鐘 15-25 個鏡頭(中位數 2-3.5 秒)。channel.json → shotsPerMin 會覆蓋這兩者。向使用者發送一個 5-10 行的計劃摘要,並繼續進行,除非他們反對。

第 5 階段:風格選擇

如果 channel.json 固定了 style,則使用它並跳過比較網格,除非使用者要求。 建立 1-2 個最常用的場景加上 3 個代表性鏡頭(一個包含 ≥ 2 個角色的廣角鏡頭、一個 bigFace 特寫鏡頭、一個數據/藍圖或 3D 鏡頭)。然後渲染:

node render.mjs --project projects/<slug> --styles dusk,midnight,golden,neon,storybook --at <t1>,<t2>,<t3> --scale 0.5

開啟 build/styles/style_grid.png,然後向使用者展示,每種風格一行說明:dusk(紫灰色陰影,琥珀色主光,奶油色邊緣光)、midnight(冷色海軍藍,藍白色邊緣光,鈉燈背光)、golden(暖橙色和青綠色)、neon(深黑色,洋紅色和青綠色)、storybook(柔和粉彩,低對比度)。將選擇儲存在 config.json → style 中。如需調整,請在 engine/styles.js 的 STYLES 中新增自訂項目(包含 mood 覆蓋以及 grade 的 lift/gamma/gain、飽和度、對比度、暗角、顆粒感、發光效果),然後重新渲染該行。

第 6 階段:建立每個鏡頭

閱讀 references/engine-api.md 和 examples/reaction-time/scenes/ 中的範例場景一次。以每批 8-12 個鏡頭的方式進行:

  1. 撰寫 scenes/sets/<location>.js(可重複使用,錨定到 GY = E.H * V(0.8, 0.68) 和 CX = E.W/2,牆壁、地板和天空延伸到畫面之外)以及 scenes/shots/NN_<name>.js,使用 registerShot('<id>', {...}) 對應 shots.json 中的 id。
  2. 執行 `node render.mjs --project projects/ --sheet --scale 0.

…

[因翻譯而截斷]

相關技能