html-video：開源“HTML版剪映”，讓AI Agent自動做出專業視頻

作者：惡人筆記
日期：2026年6月6日 上午7:28
來源：WeChat 原文

✦整理版優先睇

速讀 5 個重點 高亮

html-video 係一個開源嘅「HTML 版剪映」，讓 AI Agent 低成本生成專業影片

整理版摘要

呢篇文章介紹嘅係 nexu-io 團隊開發嘅開源工具 html-video，佢係一個「HTML → 影片」嘅 meta-layer 框架，專畀本地 coding agent 用。作者想解決嘅問題係：內容創作者要製作專業影片嘅門檻好高，傳統工具複雜，雲端服務又貴又有廠商鎖定。html-video 嘅核心諗法係：由 AI Agent 透過編寫 HTML 動畫，直接喺本地渲染出 MP4 影片，成本近乎零。

整體來講，html-video 唔係萬能，而係喺「文字轉動畫影片」呢個場景下，性價比極高嘅補充工具。佢支援自動抓取文章、生成故事板、用 21 個精選 HTML 模板，仲可以加配樂。早期版本（v0.1 alpha）有啲限制，例如動畫複雜度上限、渲染時間長，但對於想做產品宣傳、知識解說、短視頻嘅程序員、產品經理同知識博主嚟講，已經夠實用。

成個流程就好似同一個識設計嘅 AI 剪輯師傾偈，講句嘢就自動整理內容、逐幀編輯，最後一鍵導出。相比傳統剪映手動操作，效率高好多。而且因為係本地運行，數據私隱有保障，模板開源可按需修改。

  • html-video 係低成本本地影片生成方案，特別適合文字轉動畫場景，性價比極高。
  • 方法係 AI Agent 透過 HTML 模板 + 無頭 Chromium 逐幀錄製，再 ffmpeg 編碼成 MP4，全程本地運行。
  • 對比雲端工具，冇邊際成本、冇廠商鎖定、完全可控，私隱安全。
  • 啟發在於 AI Agent 唔一定要直接輸出影片，用輕量 HTML 做 meta-layer 更務實有效率。
  • 可行動點：新手建議先裝 Claude Code 或 Open Design 呢類 Agent，從簡單單幀模板入手，提示詞要具體清晰。
值得記低
連結 github.com

html-video GitHub 倉庫

開源專案主頁，包含完整原始碼、安裝說明、模板列表同使用指南。

開啟
連結 x.com

原 X 帖子

作者分享嘅原始介紹帖，包含更多背景同社區討論。

開啟
整理重點

咩係 html-video？核心亮點

html-video 係一個「HTML → 影片」嘅 meta-layer 框架，專為本地 coding agent 設計。你只需畀 Agent 一句描述、一篇公眾號文章連結，或者一個 GitHub 倉庫，佢就會自動抓取內容、生成多幀故事板、用精選 HTML 模板填充動畫，最後喺本地渲染成 MP4 影片。

本地渲染，無額外費用：基於 Hyperframes 引擎，用無頭 Chromium 逐幀錄製 HTML 動畫 + ffmpeg 編碼，全程喺你電腦跑，唔似雲服務有單次渲染費用。

  • 21 個精選模板：包括 NYT 風格數據圖表、故障標題、液態漸變英雄頁、電影感光漏、打字機特效等，全部可動畫，支持多分辨率同畫幅，許可證以 Apache-2.0 為主，可用於商業。
  • 多 Agent 支持：自動檢測 Claude Code、Cursor、Open Design、Codex、Hermes、Grok 等 13 個本地 Agent，一鍵切換，亦可用 Anthropic API。
  • AI 配樂：可選接入 MiniMax 生成背景音樂同旁白，導出時自動混音。
  • 開源友好：Apache-2.0 協議，由 nexu-io 團隊開發，仲有姊妹項目 Open Design 同 HTML Anything。

呢個工具本質上係一個 meta-layer 框架：Agent 負責創意同內容填充，渲染引擎係可插拔嘅實現細節，目前 Hyperframes 成熟，未來計劃支援 Remotion、Motion Canvas 等。

整理重點

安裝同快速上手

環境需求好簡單：Node.js、pnpm、ffmpeg 同 Chrome/Chromium。跟住下面步驟就可以開波。

程式內容 bash 
git clone https://github.com/nexu-io/html-video.git
cd html-video
pnpm install
pnpm -r build
node packages/cli/dist/bin.js studio

執行 studio 之後，瀏覽器打開 http://127.0.0.1:3071 就可以用可視化界面。成個使用流程好直觀：揀模板或描述影片、貼文章連結或 GitHub 倉庫、Agent 自動生成故事板、逐幀編輯、預覽動畫、加 MiniMax 配樂、最後一鍵導出 MP4。

CLI 小工具都好實用：doctor 檢測已安裝 Agent 同引擎，search-templates 根據意圖搜索匹配模板。

  • 選模板或直接描述影片，例如「做一個產品宣傳短視頻」。
  • Agent 自動抓取內容並總結，生成多幀故事板。
  • 逐幀編輯文字、調整順序，預覽動畫效果。
  • 一鍵導出 MP4，整個過程類似同 AI 剪輯師傾偈。
整理重點

實際效果同分析

呢個工具嘅優點好突出。首先門檻大幅降低，唔需要識 Premiere 或 CapCut，識 prompt 嘅 Agent 就出到片，特別適合程序員、產品經理同知識博主。

內容忠實度高：直接基於真實文章或倉庫生成，避免 AI 幻覺；content-graph 確保邏輯連貫。

可控性強：本地運行，私隱安全；每幀可編輯；模板開源可改。

不過都有啲不足：目前係早期階段（v0.1 alpha），動畫複雜度有上限；渲染時間取決於電腦效能，複雜影片可能需時幾分鐘到十幾分鍾；硬件要求較高，需要好嘅 CPU/GPU 同 RAM；配音配樂依賴 MiniMax 第三方，唔係完全免費；模板暫時得 21 個，需要時間累積更多。

總括嚟講，呢個唔係一個取代所有影片工具嘅神器，而係一個高效補充，尤其喺從文字到動畫影片嘅場景，性價比極高。

整理重點

使用建議同未來展望

畀新手嘅建議，可以跟住呢幾個步驟，快啲上手。

  1. 1 先裝好一個主力 Agent，例如 Claude Code 或 Open Design，體驗最順暢。
  2. 2 從簡單單幀模板開始練手，再做多幀故事板。
  3. 3 提示詞要具體：提供清晰風格要求、時長、目標受眾，能顯著提升輸出質量。
  4. 4 渲染前檢查內容準確性，必要時手動微調文字。
  5. 5 如果想商用，最好先查看模板嘅 NOTICE.md，確保許可合規。

進階玩法：結合 Open Design 做完整工作流——設計靜態素材 → html-video 生成動態影片。

未來隨住模板增多同引擎豐富，呢個工具好可能成為好多人嘅 AI 影片生產力工具。喺 AI Agent 越來越強嘅今日，html-video 代表咗一個務實方向：唔盲目堆砌大模型，而係用輕量 HTML + meta-layer 將 Agent 能力落地成真實生產力。

合理使用，佢幫你節省大量時間；盲目依賴，效果可能平平。最終質量取決於你嘅內容功底同 Agent 協作水平。

最近又見到一個可以幫內容創作者嘅工具：html-video。呢個係一個可以令AI Agent透過寫HTML快速整出專業級影片嘅工具，俾人叫佢做「HTML版剪映」。佢成本超低、喺本地執行、冇廠商綁定，尤其適合產品宣傳、知識解說同短視頻創作。

一、html-video係乜？核心亮點

簡單講，html-video係一個「HTML→Video」嘅元層（meta-layer）框架，專為本地coding agent設計。

圖片

你只要俾Agent一句描述、貼一個微信公眾號文章連結，或者掟一個Github倉庫，佢就可以：

  • • 自動擷取內容（支援微信公眾號等服務端渲染頁面）；
  • • 生成多格故事板（content-graph）；
  • • 用精選HTML模板填充動畫內容；
  • • 本地渲染成真實MP4影片。

關鍵亮點：

  • • 本地渲染，冇額外費用：基於Hyperframes引擎，用無頭Chromium逐格錄製HTML動畫 + ffmpeg編碼生成MP4。全程喺你部腦度行，唔似雲端服務咁有單次渲染費用。
  • • 21個精選模板：包括NYT風格數據圖表、故障標題、液態漸變英雄頁、電影感光漏、打字機特效、Logo片尾等效果。每個模板都係真實可動畫嘅HTML，支援多解像度同畫幅。模板嘅使用許可清楚（以Apache-2.0為主），可以用喺商業項目。
  • • 多Agent支援：自動偵測Claude Code、Cursor、Open Design (Vela)、Codex、Hermes、Grok等13個本地Agent，支援一鍵切換。冇裝CLI都得，直接用Anthropic API都得。
  • • AI配樂：可選接入MiniMax生成背景音樂加旁白，導出時自動混音。
  • • 開源友好：Apache-2.0協議，由nexu-io團隊開發（佢哋仲有姊妹項目Open Design和HTML Anything）。
圖片

佢本質上係一個「meta-layer」框架：Agent負責創意同內容填充，渲染引擎係可插拔嘅實現細節。目前Hyperframes已經比較成熟，之後會計劃支援Remotion、Motion Canvas等方式。

二、安裝同快速上手

環境要求：Node.js、pnpm、ffmpeg（渲染需要）、Chrome/Chromium。

  1. 1. 克隆倉庫：
    git clone https://github.com/nexu-io/html-video.git
    cd html-video
  2. 2. 安裝依賴並構建：
    pnpm install
    pnpm -r build
  3. 3. 啓動Studio（可視化界面）：
    node packages/cli/dist/bin.js studio

    瀏覽器打開 http://127.0.0.1:3071 就可以用。

實際使用流程（喺Studio裏面）：

  • • 選擇模板或者直接描述影片（例如「做一個產品宣傳短視頻」）。
  • • 貼上文章連結或GitHub倉庫，Agent自動擷取並總結內容。
  • • Agent生成故事板（多格結構），你可以逐格編輯文字、調整順序。
  • • 預覽動畫效果。
  • • 加入MiniMax配樂（需要填API Key）。
  • • 一鍵導出MP4。

CLI小工具都好實用：

  • • doctor：偵測已安裝嘅Agent同引擎。
  • • search-templates：根據意圖搜尋匹配模板。

成個過程就好似同一個識設計嘅AI剪輯師傾偈咁，遠比傳統剪映手動操作高效。

三、實際效果與分析

優點（點解值得留意）：

  • • 門檻大幅降低：唔需要識Premiere或CapCut，識提示詞嘅Agent就可以出片。尤其適合程序員、產品經理、知識博主快速整Demo影片或者解讀影片。
  • • 內容忠實度高：直接根據真實文章/倉庫生成，避免AI幻覺；content-graph可以確保邏輯連貫。
  • • 可控性強：本地執行，私隱安全；可以編輯每格；模板開源可以改。
  • • 擴展性好：未來多引擎支援，會更強大。

潛在不足：

  • • 目前仲係早期階段（v0.1 alpha）：依賴Hyperframes，動畫複雜度有限；渲染時間取決於電腦性能（複雜影片可能需要幾分鐘到十幾分鐘）。
  • • 學習曲線：雖然Studio友好，但要發揮最大潛力，需要熟悉Agent提示技巧，同埋理解模板嘅inputs schema。
  • • 硬件要求：需要較好嘅CPU/GPU同記憶體，本地Chromium+ffmpeg會佔用啲資源。
  • • 配音配樂依賴MiniMax等第三方，唔係完全免費（但可選）。
  • • 模板數量有限：21個精選唔錯，但仲需要時間積累更多。

總括嚟講，佢唔係一個可以「取代所有影片工具」嘅萬能神器，而係一個高效補充，尤其喺「由文字到有動畫影片」嘅場景下，性價比極高。相比雲端AI影片工具，佢更透明、可控、零邊際成本。

圖片

四、使用建議與未來展望

俾新手嘅建議：

  1. 1. 先裝好一個主力Agent（例如Claude Code或Open Design），體驗最順暢。
  2. 2. 由簡單單格模板開始練習，再做多格故事板。
  3. 3. 提示詞要具體：提供清晰風格要求、時長、目標受眾，可以明顯提升輸出質素。
  4. 4. 渲染前檢查內容準確性，必要時手動微調文字。
  5. 5. 如果想商業用，最好先睇嚇模板嘅NOTICE.md，確保許可合規（項目設計上已經好友好）。

進階玩法：

  • • 結合Open Design做完整工作流：設計靜態素材 → html-video生成動態影片。
  • • 監控項目更新，多引擎適配後潛力可能會爆發。

喺AI Agent愈嚟愈強嘅今日，html-video代表咗一個務實方向，唔盲目堆砌大模型，而係用輕量HTML加元層將Agent能力落地成真實生產力。佢大幅降低咗影片創作門檻，但最終質素仍然取決於你嘅內容功底同Agent協作水平。合理使用，佢可以幫你節省大量時間；盲目依賴，效果可能平平。未來隨住模板增多同引擎豐富，佢好可能會成為好多人嘅「AI影片生產力工具」。

參考資料：

  • • GitHub: https://github.com/nexu-io/html-video
  • • 原X帖子：https://x.com/tuturetom/status/2062470358687498470

（文章係根據公開倉庫資訊整理，如果有更新，以GitHub最新README為準。）

最近又看到一個可以為內容創作者助力的工具：html-video。這是一個能讓AI Agent通過編寫HTML快速生成專業級視頻的工具，被稱為“HTML版剪映”。它成本極低、本地運行、無廠商鎖定，特別適合產品宣傳、知識解說和短視頻創作。

一、html-video是什麼？核心亮點

簡單說，html-video是一個“HTML→Video”的元層（meta-layer）框架，專為本地coding agent設計。

圖片

你只需給Agent一句描述、粘一篇微信公眾號文章連結，或扔一個Github倉庫，它就能：

  • • 自動抓取內容（支持微信公眾號等服務端渲染頁面）；
  • • 生成多幀故事板（content-graph）；
  • • 用精選HTML模板填充動畫內容；
  • • 本地渲染成真實MP4視頻。

關鍵亮點：

  • • 本地渲染，無額外費用：基於Hyperframes引擎，用無頭Chromium逐幀錄製HTML動畫 + ffmpeg編碼生成MP4。全程在你電腦上跑，不像雲服務有單次渲染費用。
  • • 21個精選模板：包括NYT風格數據圖表、故障標題、液態漸變英雄頁、電影感光漏、打字機特效、Logo片尾等效果。每個模板都是真實可動畫的HTML，支持多分辨率和畫幅。模板的使用許可清晰（以Apache-2.0為主），可用於商業項目。
  • • 多Agent支持：自動檢測Claude Code、Cursor、Open Design (Vela)、Codex、Hermes、Grok等13個本地Agent，支持一鍵切換。沒裝CLI也可以，直接用Anthropic API也行。
  • • AI配樂：可選接入MiniMax生成背景音樂+旁白，導出時自動混音。
  • • 開源友好：Apache-2.0協議，由nexu-io團隊開發（他們還有姊妹項目Open Design和HTML Anything）。
圖片

它本質上是一個“meta-layer”框架：Agent負責創意和內容填充，渲染引擎是可插拔的實現細節。目前Hyperframes已經比較成熟，後續會計劃支持Remotion、Motion Canvas等方式。

二、安裝與快速上手

環境要求：Node.js、pnpm、ffmpeg（渲染需要）、Chrome/Chromium。

  1. 1. 克隆倉庫：
    git clone https://github.com/nexu-io/html-video.git
    cd html-video
  2. 2. 安裝依賴並構建：
    pnpm install
    pnpm -r build
  3. 3. 啓動Studio（可視化界面）：
    node packages/cli/dist/bin.js studio

    瀏覽器打開 http://127.0.0.1:3071 即可使用。

實際使用流程（在Studio裏）：

  • • 選擇模板或直接描述視頻（如“做一個產品宣傳短視頻”）。
  • • 粘貼文章連結或GitHub倉庫，Agent自動抓取並總結內容。
  • • Agent生成故事板（多幀結構），你可逐幀編輯文字、調整順序。
  • • 預覽動畫效果。
  • • 添加MiniMax配樂（需填API Key）。
  • • 一鍵導出MP4。

CLI小工具也很實用：

  • • doctor：檢測已安裝的Agent和引擎。
  • • search-templates：根據意圖搜索匹配模板。

整個過程就像和一個懂設計的AI剪輯師聊天一樣，遠比傳統剪映手動操作要高效。

三、實際效果與分析

優點（為什麼值得關注）：

  • • 門檻大幅降低：不需要會Premiere或CapCut，懂提示詞的Agent就能出片。特別適合程序員、產品經理、知識博主快速做Demo視頻或解讀視頻。
  • • 內容忠實度高：直接基於真實文章/倉庫生成，避免AI幻覺；content-graph可以確保邏輯連貫。
  • • 可控性強：本地運行，隱私安全；可編輯每幀；模板開源可改。
  • • 擴展性好：未來多引擎支持，會更強大。

潛在不足：

  • • 目前仍是早期階段（v0.1 alpha）：依賴Hyperframes，動畫複雜度有上限；渲染時間取決於電腦性能（複雜視頻可能幾分鐘到十幾分鍾）。
  • • 學習曲線：雖然Studio友好，但要發揮最大潛力，需要熟悉Agent提示技巧，以及理解模板的inputs schema。
  • • 硬件要求：需要較好的CPU/GPU和內存，本地Chromium+ffmpeg會佔一些資源。
  • • 配音配樂依賴MiniMax等第三方，不是完全免費（但可選）。
  • • 模板數量有限：21個精選不錯，但還需時間積累更多。

總體來說，它不是一個能夠“取代所有視頻工具”的萬能神器，而是一個高效補充，尤其在“從文字到帶動畫視頻”的場景下，性價比極高。相比雲端AI視頻工具，它更透明、可控、零邊際成本。

圖片

四、使用建議與未來展望

給新手的建議：

  1. 1. 先裝好一個主力Agent（如Claude Code或Open Design），體驗最順暢。
  2. 2. 從簡單單幀模板開始練手，再做多幀故事板。
  3. 3. 提示詞要具體：提供清晰風格要求、時長、目標受眾，能顯著提升輸出質量。
  4. 4. 渲染前檢查內容準確性，必要時手動微調文字。
  5. 5. 如果想商用，最好先查看模板的NOTICE.md，確保許可合規（項目設計上已很友好）。

進階玩法：

  • • 結合Open Design做完整工作流：設計靜態素材 → html-video生成動態視頻。
  • • 監控項目更新，多引擎適配後潛力可能會爆發。

在AI Agent越來越強的今天，html-video代表了一種務實方向，不盲目堆砌大模型，而是用輕量HTML+元層把Agent能力落地成真實生產力。它大幅降低了視頻創作門檻，但最終質量仍取決於你的內容功底和Agent協作水平。合理使用，它能幫你節省大量時間；盲目依賴，效果可能平平。未來隨着模板增多和引擎豐富，它很可能成為很多人的“AI視頻生產力工具”。

參考資料：

  • • GitHub: https://github.com/nexu-io/html-video
  • • 原X帖子：https://x.com/tuturetom/status/2062470358687498470

（文章基於公開倉庫信息整理，如有更新，以GitHub最新README為準。）