Communitygithub.com

JaviMaligno/agilabs-video-studio

將已發布的部落格文章轉換為一部 30-60 秒、1080x1920 的直式解說影片,包含配音與動畫,以 AGILabs 品牌風格呈現,並使用 Remotion 在本機渲染。當被要求從文章或部落格貼文製作影片、Reels、短影音或解說影片時,或需要重新渲染已透過此插件製作的影片(內含 video.config.mjs 和 src/timeline.ts 的資料夾)時使用。

agilabs-video-studio 是什麼?

此技能(agilabs-video-studio)可將一篇完整的部落格文章,自動轉化為一部 30-60 秒、直式 (1080x1920) 且具備配音與動畫的解說影片,並嚴格遵循 AGILabs 品牌規範。它整合了四個子技能:腳本撰寫(explainer-script)、動畫與時間軸(explainer-animation)、語音合成(narration)以及最終渲染(Remotion)。工作流程從挑選文章開始,接著撰寫腳本並等待審核,然後透過複製 Remotion 範本模板來建立影片資料夾,再構建時間軸、執行 lint 與測試、進行事實查核(每項數據、宣稱都需對應到原文句子)、生成語音並進行音訊品質檢查,最後渲染輸出 MP4 與字幕檔案。它支援重新渲染(只重錄文字變更的語音行)、多語言配音(西班牙語選項),並在最終交付前強制進行事實查核與品牌合規門檻。此技能適用於 Claude Code、Cursor 或任何支援插件技能的開發環境,讓使用者無需手動編輯影片編輯軟體,就能快速產出高品質的技術解說內容。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/JaviMaligno/agilabs-video-studio/tree/HEAD/skills/article-video

在你喜歡的 AI 中提問

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

說明文件

文章影片

統籌從文章到最終 MP4 的完整流程。其他技能負責細節;請在需要它們的步驟中載入:

  • explainer-script:撰寫腳本並為每個場景挑選一個視覺畫面。
  • explainer-animation:元件目錄、時間軸、訂製元件、靜態畫面。
  • narration:語音合成(Cartesia,Kokoro 作為備用)、發音、音訊品質檢查。

Remotion 專案位於插件的 template/ 資料夾中(安裝為插件時為 ${CLAUDE_PLUGIN_ROOT}/template;在插件儲存庫中則與 skills/ 目錄相鄰)。

不可妥協事項

  • 事實查核。螢幕上或口語中的每個數字和每項宣稱,都必須追溯到文章中的一句話。將表格保留在 factcheck.md 中(宣稱、出現位置、引用文章句子)。數字必須完全按照文章的寫法呈現:相同的四捨五入、相同的單位、使用「14/20」而非「70%」。不一致之處應在時間軸中修正,絕不在文章中修改。事實查核涵蓋旁白以及螢幕上顯示的數字與宣稱,不包含其他部分。視覺畫面的選擇應以衝擊力為優先,而非作為實驗的逐字重現:可以使用示意場景(自由重現真實資料、為清晰度放置標記、風格化的機制),因為嚴謹性存在於文章及其儲存庫中。
  • 語氣。旁白應以文章的寫作方式發聲:第一人稱(「我執行了…」、「我發現了…」),宣稱的強度不得超過文章本身。如果文章使用保留語氣的措辭(「在此設定中」、「在這 20 次運行中」),腳本也必須使用保留語氣的措辭。不得使用比來源更強烈的措辭。
  • 品牌。僅限 AGILabs:AGILabs 標誌和 javieraguilar.ai。任何地方不得出現個人姓名,無論是卡片、海報、字幕或檔案中繼資料中。
  • 審核關卡。未經腳本核准,不得進行任何建置。

工作流程

  1. 挑選文章。使用指定的文章。如果未指定,請閱讀已發布的文章並提出 2-3 個候選,每個候選需包含其標題、一句吸引人的標語、關鍵數字(引用)和一個視覺構想。優先選擇包含實驗、明確數據且機制可繪製的文章。讓使用者選擇。

  2. 使用 explainer-script 撰寫腳本:旁白行(英文,西班牙文為選項)、每個場景對應到函式庫元件或標記為「訂製」的視覺構想,以及每個數字的來源句子。

  3. STOP 等待核准。顯示腳本並等待。如有要求,套用編輯並再次顯示。

  4. 建立影片資料夾。複製範本但不包含其產生的檔案:

    • 在插件儲存庫內部:examples/<article-slug>/;
    • 從任何其他儲存庫:./video/<article-slug>/。
    rsync -a --exclude node_modules --exclude out --exclude public/audio --exclude public/music \
      --exclude .env "${CLAUDE_PLUGIN_ROOT}/template/" "video/<article-slug>/"
    cd "video/<article-slug>" && npm ci
    

    將已核准的腳本儲存為該資料夾中的 script.md。

  5. 使用 explainer-animation 構建時間軸:設定 src/settings.ts(articleTitle、voices、subtitles、targetSeconds、poster)並根據腳本撰寫 src/timeline.ts。如果腳本有標記,則添加訂製元件,每個元件需附帶其 frameState 測試。

  6. Lint:執行 npm run lint。修正所有發現的問題(長度、字幕速度、未知元件)。當添加或更改元件時,也請執行 npm test。

  7. 根據文章進行事實查核並撰寫 factcheck.md(請參閱上方說明)。

  8. 配音:執行 npm run tts,然後執行 npm run audio-qa(請參閱 narration)。聆聽它標記的任何內容。再次執行 npm run lint:實際行長度將取代估計值。

  9. 靜態畫面,並檢視它們。為每個場景以及每約 3 秒渲染一張靜態畫面,並閱讀每個 PNG。檢查品牌、安全區域、無任何溢出、數字與文章相同,以及字幕與螢幕上的節奏匹配。一個乾淨的建置不代表畫面看起來正確。

  10. 渲染:執行 npm run render(直式英文)。-- --es 用於西班牙語剪輯版本,-- --landscape 用於 1920x1080。然後再次執行 npm run audio-qa 以測量混音(-16 LUFS 整合值)。

  11. 交付:執行 npm run deliver 會寫入海報 PNG、SRT 和 out/manifest.json。檢視海報。提供 MP4 路徑和海報;發布是獨立的步驟。

重新渲染現有影片

開啟其資料夾,如果缺少 node_modules 則執行 npm ci,更改 src/timeline.ts 或設定,然後從步驟 6 重複。TTS 只會重新配音文字有變更的行。

檔案存放位置

  • 原始碼(時間軸、設定、訂製元件、script.md、factcheck.md)會被提交。
  • out/、public/audio/、public/music/、node_modules/ 和每個 .mp4/.wav 不會被提交。
  • .env 存放 TTS 金鑰,絕不會被提交或列印。

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

相關技能