vibe-video — AI 驅動短影音生成器（程式碼 → MP4）
將任何想法轉化為短暫、富有氛圍的影片，全程只需程式碼。AI 會撰寫 Canvas/JS 動畫，逐幀渲染畫面，並合成為 MP4 檔案，可選擇加入背景音樂。
使用時機
當使用者想要建立一個短影音（15s–60s），且內容屬於以下類型時，可使用此技能：
- 知識解說 — 諾貝爾級事實、科學原理、心理學洞察
- 情感隱喻 — 依戀、焦慮、放手、記憶
- 產品宣傳 — 應用功能、品牌故事、發布公告
- 社會觀察 — 行為模式、文化現象
- 抽象概念藝術 — 純粹視覺詩歌、循環動畫
工作流程（5 個步驟，請勿跳過）
步驟 1：釐清需求（最多問 3 個問題）
與使用者確認以下事項：
- 時長 — 15s / 30s / 45s / 60s（預設 30s）
- 畫面比例 — 9:16（直式）/ 16:9（橫式）/ 1:1（正方形）（預設 9:16）
- 風格 — 請參閱
style-presets.md中的風格預設 - 主題與情感弧線 — 核心訊息是什麼？想留下什麼感受？
步驟 2：產出分鏡表
在撰寫任何程式碼之前，先產出分鏡表：
| 時間 | 視覺描述 | 字幕（≤20 字元） | 視覺/音效提示 |
|------|----------|-----------------|----------------|
| 0-3s | ... | ... | ... |
規則：
- 每個字幕停留 ≥2s；關鍵結論 ≥3s
- 前 3 秒要有鉤子（反直覺事實 / 情感開場 / 核心痛點）
- 總共 5–8 個鏡頭，節奏為慢→快→慢
- 視覺描述必須指定：形狀、顏色、運動方向、運鏡方式
等待使用者確認後再繼續。如果使用者要求修改，只修改指定的鏡頭。如果超過 3 個鏡頭變更，則重新輸出完整的分鏡表。
步驟 3：撰寫渲染程式碼
複製 assets/templates/animation.js + animation.html 作為起點 — 它們實作了圖層系統、字幕淡入淡出、基於種子的偽隨機背景，以及 window.seek(t) 合約，並包含即時瀏覽器預覽。編輯 STORYBOARD 和 draw*() 函式。
請參閱 rendering-guide.md 以取得完整技術規格。快速參考：
// 時間驅動動畫 — 每個視覺效果都是 t 的純函式
//（不要使用 Math.random() 或 Date.now() — 如果需要隨機性請使用基於種子的 PRNG，
// 這樣任何影格重新渲染時都會相同，便於靜止畫面和中斷渲染後繼續）
function seek(t) {
// t = 目前時間（秒）
// 回傳此影格的視覺狀態
// 對位置 / 不透明度 / 縮放使用線性內插
}
// 圖層系統
// 圖層 0：背景（漸層 / 粒子）
// 圖層 1：主要物體
// 圖層 2：動態裝飾（光線 / 粒子 / 線條）
// 圖層 3：字幕疊加
// 匯出
// Playwright 無頭模式 → 對每個影格截圖 → ffmpeg 合成
步驟 3.5：分鏡表 → H3 提示（預先檢查）
將此步驟插入在已確認的分鏡表與第一行程式碼之間。分鏡表是為人類設計的；H3 需要不同的語法。事先轉換可防止此管線中唯一無法修復的錯誤 — AI 鏡頭重繪了需要保持角色一致的角色。
# 先檢查：時間軸間隙、H3 視窗（4–15s）、引擎指派、點數估算
node assets/templates/lint-storyboard.js examples/storyboard-sample.txt
然後，針對每個 H3 鏡頭，發出一個六區段的提示區塊，並將其攝影機編號與剪輯標記複製回動畫程式碼中，使兩個圖層同步移動。
完整程序、欄位規則、檢查清單與 lint 表格：storyboard-to-h3.md
步驟 4：渲染與合成
先預覽靜止畫面 — 檢查一個影格約需 1 秒，完整渲染則需數分鐘：
# 在 t=0 / 4 / 10 秒進行外觀檢查（自動使用已安裝的 Edge 或 Chrome）
node assets/templates/still.js --html animation.html --times 0,4,10
# 渲染影格（12–15fps 通常足夠；流暢動作需要 24–30）
node assets/templates/render-playwright.js --html animation.html --out ./frames --fps 30 --duration 15
# 合成（若 ffmpeg 不在 PATH 環境變數中，請設定 FFMPEG=/path/to/ffmpeg）
bash assets/templates/composite.sh ./frames output.mp4 30
# 加入背景音樂
bash assets/templates/composite.sh ./frames output.mp4 30 bgm.mp3
# 混合模式：Canvas 圖層疊在 AI 氛圍背景板之上（透明影格，無須遮罩）
node assets/templates/render-playwright.js --html animation.html --out ./frames --fps 30 --duration 56 --alpha true
bash assets/templates/composite.sh --overlay plate.mp4 ./frames output.mp4 30
Windows 注意：如果 bash composite.sh 運作異常（Git Bash 模擬 / PATH 環境變數被截斷），請直接透過 Node.js 的 child_process.spawn 呼叫 ffmpeg — 詳見 rendering-guide.md 的疑難排解章節。
傳統手動指令：
# 渲染影格
node render.js # 輸出 frames/frame_0001.png ...
# 使用 ffmpeg 合成
ffmpeg -framerate 30 -i frames/frame_%04d.png -c:v libx264 -pix_fmt yuv420p output.mp4
# 加入背景音樂
ffmpeg -framerate 30 -i frames/frame_%04d.png -i bgm.mp3 -c:v libx264 -c:a aac -pix_fmt yuv420p -shortest output.mp4
步驟 5：交付
交付內容：MP4 檔案 + 分鏡表 + 原始碼。檔案大小目標：30 秒影片小於 50MB。
此技能包含的檔案
| 檔案 | 用途 |
|---|---|
SKILL.md | 本檔案 — 主要技能定義 |
style-presets.md | 6 種視覺風格預設，附色彩調色盤與渲染提示 |
rendering-guide.md | 技術規格：Canvas 渲染、緩動函式、確定性規則、疑難排解 |
metaphor-library.md | 抽象概念的視覺隱喻對應 |
caption-guide.md | 字幕排版、時機與語氣規則 |
bgm-guide.md | 依影片類型選擇背景音樂的指南 |
storyboard-to-h3.md | 預先檢查：分鏡表 lint + H3 六區段提示區塊（在撰寫程式碼之前執行） |
../assets/templates/lint-storyboard.js | 分鏡表 lint 工具：時間軸間隙、H3 的 4–15 秒視窗、引擎指派、點數估算 |
../assets/templates/animation.js + animation.html | 可直接編輯的範本（圖層、字幕、基於種子的背景、即時預覽） |
../assets/templates/render-playwright.js | 影格渲染器：自動偵測瀏覽器（Edge/Chrome/chromium）、畫面同步截圖 |
../assets/templates/still.js | 單一影格靜止畫面渲染器，用於低成本外觀檢查 |
../assets/templates/composite.sh | ffmpeg 合成腳本（影片 / 影片+背景音樂，可使用 FFMPEG= 覆蓋路徑） |
../assets/templates/render-template.js | Node-canvas 變體（無需瀏覽器；CSS/字型支援有限） |
範例提示
知識解說
製作一個 30 秒 16:9 的知識影片，說明為什麼切洋蔥會讓人流淚。
風格：科技藍圖。故事弧線：現象 → 機制 → 解決方法。
情感隱喻
製作一個 30 秒 9:16 的情感影片，主題是佔有慾。
風格：柔和光輝。視覺隱喻：光線纏繞 → 鬆開 → 螢火蟲。
產品宣傳
製作一個 15 秒 9:16 的產品宣傳影片，推廣一款專注應用程式。
風格：極簡線條。故事弧線：痛點 → 解決方案 → 結果。
授權條款
MIT — 請參閱 LICENSE 檔案。免費供個人與商業使用。