作者注：讓編程 Agent 做視頻，目前主要有兩條路徑：代碼逐幀渲染出 MP4，或者生成網頁演示再錄屏。本文對比兩者的原理、交付物和適用場景，並給出 5 步選型方法。
很多開發者已經習慣讓 Claude Code、Cursor、Codex 幫忙寫頁面和腳本，但“讓編程 Agent 直接做視頻”仍然讓人猶豫。常見的擔心是：Agent 只會寫代碼，怎麼產出有節奏、有聲音、能直接發佈的視頻？本文介紹 代碼逐幀渲染與網頁演示錄屏兩條路徑，幫你判斷自己的需求該走哪一條。
這不是又一篇“AI 一鍵生成視頻”的科普。兩條路徑都基於開源技能集 garden-skills 中的真實技能：motion-showreel 負責代碼逐幀渲染，web-video-presentation 負責網頁演示錄屏，它們的工作流、檢查點和交付物都有明確約定。
核心價值：讀完本文，你將知道兩條路徑各自的原理和邊界，能在 5 步之內爲自己的視頻項目選定路徑，並瞭解如何爲編程 Agent 配置合適的大模型。
編程 Agent 做視頻的 2 條路徑核心要點
先用一張表看清兩條路徑的本質差異。簡單說，代碼逐幀渲染是“Agent 當動效導演 + 渲染農場”，網頁演示錄屏是“Agent 當演示文稿工程師，人來按錄製鍵”。
| 要點 | 代碼逐幀渲染（motion-showreel） | 網頁演示錄屏（web-video-presentation） |
|---|---|---|
| 核心原理 | 確定性 render(t) 頁面，按時間逐幀捕獲 |
Vite + React + TypeScript 網頁，點擊或鍵盤推進後錄屏 |
| 交付物 | MP4 成片 + 可編輯源碼 | 可錄製的 16:9 網頁演示工程 |
| 典型時長 | 短片 5–60 秒，章節式長片最長約 20 分鐘 | 取決於講解腳本，按章節和步驟推進 |
| 聲音處理 | 畫面與音樂、音效、旁白共用一條時間軸 | 可選的旁白音頻合成，一個畫面步驟對應一個旁白節拍 |
| 最適合 | 產品宣傳片、Logo 片頭、動態字體、循環動畫 | 課程講解、文章轉視頻、產品演示、技術分享 |
代碼逐幀渲染路徑詳解
motion-showreel 的關鍵在於“確定性”。Agent 寫出的頁面暴露一個 render(t) 函數，給定時間 t 就能畫出唯一確定的一幀，渲染器按幀率逐幀調用並捕獲畫面。因爲同一頁面能產出靜幀、聯繫表、三方向風格板、代理版和母版，所以從提案到成片始終是同一份源頭，不會出現“預覽好看、成片走樣”的問題。運動模糊、超採樣和膠片顆粒都只是渲染參數開關。
聲音方面，這條路徑把剪輯點、重拍和音效放在同一條時間軸上，數字是共享的。音樂既可以用內置的零依賴合成器或 Tone.js 採樣鋼琴合成，也可以對齊用戶自己的音軌，並做節拍和 drop 檢測。旁白只朗讀用戶提供的腳本，畫面跟隨真實語音時間戳走，而不是反過來。
網頁演示錄屏路徑詳解
web-video-presentation 走的是另一種思路：把視頻當成“會動的演示文稿”。它固定一個 1920×1080 的舞臺並按視口縮放，保證錄屏時畫面穩定；演示由 (chapter, step) 光標驅動，每次點擊或按鍵推進一個視覺步驟，對應一句旁白。
這條路徑更像傳統的“寫稿 → 做頁 → 錄製”。技能會先把原始文章改寫成旁白腳本，再把腳本節拍映射到全屏場景，在腳本、主題、大綱、實現模式和可選音頻這幾個節點強制停下來讓你確認。錄製時進度控件只在鼠標懸停時出現，舞臺保持乾淨。
兩條路徑的工作流對比：讓編程 Agent 做視頻的關鍵差異
如果只看最終都是視頻文件，兩條路徑似乎差不多；但從工作流細節看，它們對人和模型的要求完全不同。下面這張表從 8 個維度拆開對比。
| 維度 | 代碼逐幀渲染 | 網頁演示錄屏 |
|---|---|---|
| 人工檢查點 | 2 個：確認需求、確認風格幀 | 5 個：腳本、主題、大綱、實現模式、可選音頻 |
| 風格資產 | 43 種風格庫（瑞士編輯、水墨、合成波、軟 3D、電影片頭、國潮等） | 23 個內置主題（編輯風、終端風、工程藍圖、瑞士國際主義等） |
| 風格定義範圍 | 外觀、運動、鏡頭語法、聲音調色板 | 設計 Token，控制配色、字體與版式 |
| 語音方案 | Gemini / MiniMax TTS，只讀用戶腳本；也可用真實錄音 | 可插拔 TTS，內置 MiniMax mmx-cli 與 OpenAI TTS，另有 ElevenLabs、edge-tts、Azure、Google Cloud、macOS say 接入片段 |
| 音樂音效 | 獨立來源，自動爲語音讓位 | 主要圍繞旁白，不強調配樂 |
| 質量驗收 | 尺寸、幀率、時長、幀數、黑幀、響度、真峯值、循環接縫、確定性全部需 PASS | 依賴錄屏前的人工預覽 |
| 是否需要人錄製 | 不需要，直接渲染出 MP4 | 需要，用錄屏工具錄製網頁 |
| 當前版本 | v0.1.0 | v1.2.2 |
這裏有一個容易被忽略的設計點：motion-showreel 把“技術驗收”和“審美判斷”嚴格分開。前者是機器可檢查的硬指標，必須全部通過；後者的評審意見交給用戶，由用戶最終拍板。這種分工讓 Agent 不會因爲“覺得好看”就跳過黑幀或響度超標的問題。
網頁演示錄屏則把控制權更多留給人。5 個檢查點看起來繁瑣，但對講解類視頻非常必要，因爲腳本措辭、章節劃分是內容質量的核心，最好由作者本人確認。
編程 Agent 做視頻快速上手
第一步：安裝技能
兩個技能都遵循 SKILL.md 規範，可以裝進 Claude Code、Claude.ai、Cursor、Codex CLI、Gemini CLI、OpenCode 等環境。下表列出常用安裝方式，命令直接在終端或 Agent 對話框中輸入即可。
| 安裝方式 | 操作要點 | 適合人羣 |
|---|---|---|
| skills CLI | 運行 npx skills add ConardLi/garden-skills -s motion-showreel，或把 -s 後換成 web-video-presentation；加 -a claude-code 可指定 Agent |
任意 Agent 用戶，一行安裝 |
| Claude Code 插件市場 | 先執行 /plugin marketplace add ConardLi/garden-skills，再安裝 motion-showreel-skills@garden-skills 或 presentation-skills@garden-skills |
Claude Code 用戶 |
| Releases 固定版本 zip | 下載對應版本 zip 並校驗 SHA-256，解壓到 .claude/skills/、.agents/skills/ 或 .codex/skills/ |
CI、離線環境、需要可復現的團隊 |
| 手動複製 | 克隆倉庫後把技能目錄複製到項目的技能目錄 | 想二次修改技能的開發者 |
第二步：準備驅動模型
編程 Agent 做視頻的大部分工作是“寫代碼 + 理解需求 + 審視畫面”，所以驅動模型的代碼能力和長上下文表現最關鍵。如果你的 Agent 支持自定義接口，只需配置兩個參數：API Key 和 base_url。OpenAI 兼容格式的 base_url 可填寫 https://api.apiyi.com/v1,Anthropic 格式的接入地址與具體參數請以 API易 文檔中心 docs.apiyi.com 爲準。
第三步：用一句清晰的需求啓動
啓動時把關鍵信息一次說全，能減少來回確認的輪次。以代碼逐幀渲染爲例，技能會主動確認主題、時長、橫豎屏、音樂與音效來源、旁白模式；網頁演示錄屏則需要你提供原始文章或腳本，以及大致的章節劃分。
- 代碼逐幀渲染示例需求：爲一款開發工具做 30 秒橫屏產品片，合成波風格，用內置合成器配樂，無旁白。
- 網頁演示錄屏示例需求：把一篇技術文章做成 8 分鐘講解視頻，工程藍圖主題，需要中文旁白。
🚀 快速開始：如果你還沒有爲 Agent 配置模型接口，可以先在 API易 apiyi.com 註冊並獲取測試額度。平臺同時兼容 OpenAI 與 Anthropic 兩種接口格式，Claude Code 這類 Agent 和自研腳本都能直接接入，便於先跑通一個短片樣例再決定路徑。
第四步：在檢查點認真拍板
代碼逐幀渲染在風格幀階段，未指定風格時會給出三個差異明顯的方向，這是決定成片氣質最便宜的時機。網頁演示錄屏在大綱階段確認後纔會進入實現，此時修改章節成本最低。兩條路徑都建議把主要意見集中在檢查點提出，而不是成片後返工。
第五步：驗收與交付
代碼逐幀渲染交付 MP4 和可編輯源碼，建議保留源碼，後續改文案、換配色只需重新渲染。網頁演示錄屏交付的是工程，你需要用錄屏工具按章節錄制，必要時把可選 TTS 生成的音頻與錄屏在剪輯軟件中對齊。
爲編程 Agent 做視頻選擇驅動模型
兩個技能本身不綁定模型，但實際效果高度依賴驅動 Agent 的大模型。下表整理了在 API易 上可調用的相關模型，價格全部以 API易 價格頁 docs.apiyi.com/models 的實際數據爲準，計費單位與口徑請以價格頁標註爲準。
| 模型 | 在本文場景中的角色 | API易 價格（輸入 / 輸出 / 緩存） | 可用平臺 |
|---|---|---|---|
| claude-opus-5-5 | 複雜動效編排、長片章節規劃、主力編碼 | $4 / $20 / $0.2 | API易 apiyi.com |
| claude-sonnet-5-5 | 日常編碼主力，性價比均衡 | $2 / $10 / $0.1 | API易 apiyi.com |
| kimi-k3.1-pro | 長文改寫旁白腳本、中文內容整理 | $2 / $10 / $0.2 | API易 apiyi.com |
| deepseek-v4.1-flash | 批量小改動、字幕整理等輕量任務 | $0.3 / $1.2 / $0.006 | API易 apiyi.com |
| gpt-image-2.6-flare / gpt-image-2.6-sunburst | 生成封面、風格參考圖、片中素材 | 文本輸入 $5 / 圖片輸入 $8，輸出 $30 | API易 apiyi.com |
關於語音合成需要特別說明：motion-showreel 內置的是 Gemini 與 MiniMax TTS，web-video-presentation 內置的是 MiniMax mmx-cli 和 OpenAI TTS。這些 TTS 模型如果在 API易 價格頁中查不到，即表示 API易 目前暫未上線該模型，我們會盡快上線；在此之前請按技能文檔直接使用對應服務商，或換用技能支持的其他 TTS 方案。同樣，文心 ERNIE 系列目前 API易 沒有上線，如果你的流程依賴它，需要另行接入。
💰 成本建議：做視頻時 Agent 會反覆讀取同一份 brief、風格定義和工程代碼，緩存命中率通常較高。選擇帶緩存價格的模型能明顯降低多輪迭代成本，具體可在 API易 價格頁 docs.apiyi.com/models 按模型逐一對照。
5 步決策：編程 Agent 做視頻該選哪條路徑
前面講了原理和工具，下面把選擇過程壓縮成 5 個問題，按順序回答即可得出結論。
- 內容是“講清楚”還是“看得爽”？ 以信息傳遞爲主選網頁演示錄屏，以視覺衝擊爲主選代碼逐幀渲染。
- 時長有多長？ 60 秒以內的短片天然適合逐幀渲染；十幾分鍾以上的課程講解，網頁演示錄屏更好維護。
- 是否需要精確的音畫同步？ 卡點剪輯、音效命中、循環無縫這類需求，只有共享時間軸的逐幀渲染能穩定做到。
- 是否接受人工錄屏？ 如果希望全自動產出、可在 CI 中重複渲染，選逐幀渲染；如果願意親自按節奏講解或錄製，網頁演示錄屏更靈活。
- 後續是否頻繁修改？ 兩條路徑都保留源碼，但網頁演示改一頁文字立即可見，逐幀渲染則需要重新出片。
| 典型場景 | 推薦路徑 | 理由 |
|---|---|---|
| 新品發佈 30 秒宣傳片 | 代碼逐幀渲染 | 風格庫豐富，音畫同軸，直出 MP4 |
| Logo 片頭 / 標題序列 | 代碼逐幀渲染 | 確定性渲染保證每次輸出一致 |
| 技術文章轉講解視頻 | 網頁演示錄屏 | 自動改寫旁白腳本，一步一節拍 |
| 在線課程章節 | 網頁演示錄屏 | 主題統一，章節結構清晰，便於逐課維護 |
| 帶旁白的年度回顧短片 | 代碼逐幀渲染 | 畫面跟隨真實語音時間戳，支持章節式長片 |
| 產品功能演示 | 網頁演示錄屏 | 點擊驅動，演示節奏可控 |
💡 選擇建議：如果拿不準，可以先用同一份需求分別讓 Agent 做一個 15 秒樣片和一頁演示，比較產出質量與迭代成本。通過 API易 apiyi.com 用同一個 Key 切換 Claude、Kimi、DeepSeek 等模型，也方便順便比較不同驅動模型在你項目上的表現。
常見問題 FAQ
Q1：什麼是“讓編程 Agent 做視頻”？
指讓 Claude Code、Cursor、Codex 等編程 Agent 通過寫代碼來產出視頻。它不是直接調用視頻生成模型，而是用網頁、動畫和渲染腳本組織畫面與聲音，因此結果可編輯、可復現。
Q2：代碼逐幀渲染和網頁演示錄屏有什麼區別？
代碼逐幀渲染在視覺表現和音畫同步上更強，直出 MP4，但適合較短的片子。網頁演示錄屏在講解結構和後期維護上更有優勢，但需要人工錄製。前者像動效工作室，後者像演講幻燈片工程。
Q3：這兩個技能目前是什麼版本，支持哪些 Agent？
按 garden-skills 倉庫信息，motion-showreel 爲 v0.1.0，web-video-presentation 爲 v1.2.2。兩者遵循 SKILL.md 規範，官方標註已在 Claude Code、Claude.ai、Cursor、Codex CLI、Gemini CLI、OpenCode 上測試。
Q4：這種方式最適合哪些場景？
– **產品營銷**：發佈會預熱短片、功能亮點動效。
– **品牌視覺**:Logo 演繹、片頭片尾、動態字體海報。
– **知識傳播**：技術文章轉講解視頻、課程章節、內部培訓。
– **開發者內容**：架構講解、工具演示、開源項目介紹。
Q5：如何給編程 Agent 配置模型接口？
在 API易 apiyi.com 註冊並創建 API Key，然後在 Agent 或腳本中填寫 Key 與 base_url。API易 兼容 OpenAI 和 Anthropic 兩種接口格式，具體地址與參數見文檔中心 docs.apiyi.com，模型價格以 docs.apiyi.com/models 爲準。
Q6：旁白可以讓 Agent 自己寫嗎？
兩個技能的取向不同。motion-showreel 的 TTS 只朗讀用戶提供的腳本，避免 Agent 擅自編寫臺詞；web-video-presentation 會把原始文章改寫成旁白腳本，但必須經過你在腳本檢查點確認。你可以用 API易 上的 kimi-k3.1-pro 或 claude-sonnet-5-5 先起草腳本，再自行審定。
Q7：這兩條路徑有哪些已知限制？
代碼逐幀渲染依賴瀏覽器逐幀捕獲，長片渲染耗時較長，複雜 3D 或粒子效果會顯著增加渲染時間。網頁演示錄屏的最終質量受錄屏工具和操作者影響，難以完全自動化。另外部分內置 TTS 服務需要單獨開通，若 API易 價格頁查不到對應模型，即表示暫未上線。
Q8：可以兩條路徑混用嗎？
可以，而且很常見。比如用代碼逐幀渲染做 10 秒片頭和章節轉場，用網頁演示錄屏做主體講解，最後在剪輯軟件中拼接。兩者都基於網頁技術，配色和字體可以共享同一套設計規範。
編程 Agent 做視頻核心要點 Key Takeaways
- 兩條路徑本質不同：逐幀渲染直出 MP4，網頁演示需人工錄屏。
- 逐幀渲染靠確定性：同一
render(t)頁面產出預覽與母版，結果可復現。 - 網頁演示靠結構：一個視覺步驟對應一句旁白，適合長講解。
- 檢查點決定質量:2 個與 5 個檢查點分別對應視覺優先與內容優先。
- 技術驗收與審美分離：黑幀、響度、幀數等硬指標必須全部 PASS。
- 模型選擇影響成本：驅動模型可在 API易 統一接入，價格以 docs.apiyi.com/models 爲準。
總結
讓編程 Agent 做視頻，關鍵不在於“能不能”，而在於選對路徑：
- 代碼逐幀渲染：適合短片、片頭、強節奏的視覺作品，音畫同軸、直出成片。
- 網頁演示錄屏：適合講解、課程、文章轉視頻，結構清晰、便於維護。
- 5 步決策：依次判斷內容目標、時長、音畫同步、是否接受錄屏、修改頻率即可選定。
建議先用一個 15 秒樣片跑通全流程，再擴展到正式項目。驅動模型方面，推薦通過 API易 apiyi.com 統一調用 Claude、Kimi、DeepSeek 與 GPT Image 系列模型，接口兼容 OpenAI 與 Anthropic 格式，價格以價格頁實際數據爲準。
📚 參考資料
- GitHub – garden-skills:motion-showreel 與 web-video-presentation 技能所在倉庫
- 鏈接：
github.com/ConardLi/garden-skills -
說明：包含兩個技能的 README、SKILL.md 與安裝方式
-
Agent Skills 規範:SKILL.md 格式說明
- 鏈接：
agentskills.io -
說明：瞭解技能目錄結構與 Agent 如何按需加載技能
-
API易 文檔中心：接口接入說明
- 鏈接：
docs.apiyi.com -
說明：OpenAI 與 Anthropic 兼容格式的接入參數
-
API易 模型價格頁：各模型實際計費
- 鏈接：
docs.apiyi.com/models - 說明：本文所有價格數據均以此頁爲準
作者:API易 技術團隊
技術交流：歡迎在 API易 網站首頁聯繫我們，更多接入資料可訪問 docs.apiyi.com 文檔中心
