Communitygithub.com

Kinetic Reels

根據一個主題製作 Instagram、TikTok、YouTube Shorts 或 LinkedIn 專用的完整垂直短影片(1080x1920 MP4,長度 38 至 60 秒)。包含逐字同步動態字幕、AI 語音(Gemini TTS)、真實螢幕截圖與商標動態卡片、音效及免費 CC0 音樂。

Kinetic Reels 是什麼?

Kinetic Reels 是一項以程式驅動的專業短影片製作技能,專為 AI 代理(如 Claude Code、Cursor、Codex)設計。它模擬動態設計師的工作流程:透過 HTML 頁面繪製影片的每一幀、使用無頭瀏覽器以 30 fps 逐格渲染,最後由 ffmpeg 合成語音與音樂,確保每次輸出結果一致。支援的輸出平台包含 Instagram Reels、TikTok、YouTube Shorts 與 LinkedIn。使用前需確保已安裝 Node.js、Python 3、ffmpeg 及 Chromium,並免費取得 Gemini API 金鑰。製作流程涵蓋 12 個步驟:先確認主題與事實、規劃場景、建立專案資料夾、撰寫語音稿件與逐字字幕、生成語音、設定動畫時間碼、收集真實素材(螢幕截圖與商標)、建構 reel.js 動畫邏輯、審核影片靜態幀、編輯音效與背景音樂、最終渲染輸出,最後交付 MP4 檔案與封面圖。此技能也內建了經實際驗證的觀眾留存規則,例如第一句就要揭露亮點、畫面從第一幀就開始動態、每 0.8 到 1.5 秒更換圖片,以及為影片專門撰寫的行動呼籲(CTA)。

相容平台✓Claude Code~Codex CLI~Cursor✓Gemini CLI
npx skills add https://github.com/Shaddy37/kinetic-reels/tree/HEAD/skills/kinetic-reels

在你喜歡的 AI 中提問

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

說明文件

Kinetic Reels 是做什麼的?

你的製作方式如同動態設計師,但全由程式碼完成:一張 HTML 頁面繪製影片任意時間點 t 的畫面,由無頭瀏覽器以 30 fps 逐格渲染,ffmpeg 再加入語音與音樂。同樣的輸入,每次都產生同樣的影片。

以下 SKILL 代表本檔案所在的資料夾。所有命令請在使用者的專案資料夾(即 reels/ 與 .env 所在處)執行。在 Mac/Linux 上使用 python3,在 Windows 上使用 python。

首次製作前(僅需一次)

  1. 執行 node "SKILL/scripts/doctor.mjs"。如果顯示 FIX 行,請執行 node "SKILL/scripts/setup.mjs",然後依剩餘 FIX 行的指示處理。直到顯示 ALL GOOD 為止。
  2. 使用者需要在 .env 中設定 Gemini API 金鑰(GEMINI_API_KEY=...,可免費從 https://aistudio.google.com/apikey 取得)。切勿印出金鑰,也絕不要提交 .env。
  3. kinetic.config.json 儲存使用者的帳號名稱(浮水印)、姓名及一張用於片尾卡片的方形照片。new-reel.mjs 會在第一次執行時建立此檔案;請向使用者索取這三個值並填入。

製作短影片(依序執行每個步驟)

  1. 主題與事實。 確定一個主題。從第一手來源(官方文件、儲存庫、廠商官網)進行研究,並將每個論述寫入 facts.md,附上網址與閱讀日期。沒有事實,就不做論述。
  2. 規劃場景(在開始建立前展示給使用者看)。列表型內容 38 至 45 秒(5 至 7 項),解說型內容最長 60 秒。每個場景需包含:秒數、旁白內容、畫面描述、確切的素材檔案名稱及其來源。若找不到素材(商標、照片、螢幕截圖),請立即停止並向使用者索取。絕不繪製假商標、杜撰 UI 或生成人物。
  3. 建立資料夾: 執行 node "SKILL/scripts/new-reel.mjs" <slug> [--logo claude]。角落的商標應使用該主題本身的商標(檔案位於 as/ 中;若缺少請加入真實的 SVG)。
  4. 稿件。 撰寫 tts.json(語音內容,分為鉤子/主體/收尾/行動呼籲等部分,各有不同風格)與 script.txt(字幕,字詞與順序完全相同)。規則:請參考 references/SCRIPT.md。標籤與風格:請參考 references/VOICE.md。
  5. 語音: 執行 python "SKILL/scripts/voice.py" reels/<slug>,再執行 python "SKILL/scripts/tighten.py" reels/<slug>(將停頓調整為 0.34 秒,正常語速)。聆聽錄音,或使用任何轉錄工具檢查:若遺漏句子或名稱錯誤,請修正文字後重新執行 voice.py。
  6. 字幕與時間碼: 執行 python "SKILL/scripts/captions.py" reels/<slug> 會輸出 DUR、SCN 與 CAPS。將這些數值貼入 reel.js。若某個字詞出現過早或過晚,可手動微調時間錨點([email protected])。
  7. 真實素材: 使用 node "SKILL/scripts/docshot.mjs" <url> reels/<slug>/as/<name>.png [--selector "css"] 擷取螢幕截圖,商標則來自廠商官網或 SKILL/assets/logos。每個素材在畫面上都會附上小型來源說明。詳細說明:references/ASSETS.md。
  8. 建構 reel.js。 請先閱讀 examples/claude-code-shortcuts/reel.js:這是範本短影片,展示了所有模式。可使用的元件:references/COMPONENTS.md。圖片位於 y 260 至 1100 區域,字幕則佔據 y 1150 至 1570 區域。
  9. 審核: 執行 node "SKILL/engine/shot.cjs" reels/<slug> audit,必須顯示 LAYOUT PASS。然後執行 node "SKILL/engine/shot.cjs" reels/<slug> prev 0 <每個場景中的一個時間點>,並查看每個靜態幀(開啟 JPG 圖檔)。修正後重複此步驟。對照 references/SCRIPT.md(鉤子規則)檢查 0、0.5、1、2、3 秒這五張鉤子靜態幀。
  10. 音效: 編輯 mix.py(DUR、SCN,每個圖片切換對應一個音效;請參考 references/SOUND.md),然後執行 python reels/<slug>/mix.py。若要更換背景音樂:執行 python "SKILL/scripts/music.py" search "lofi chill",再執行 pull <id> reels/<slug>(僅限 CC0)。
  11. 渲染: 執行 node "SKILL/engine/render.cjs" reels/<slug>,再執行 python "SKILL/scripts/finish.py" reels/<slug>(必須顯示 PASS),最後執行 node "SKILL/engine/shot.cjs" reels/<slug> cover 0.6。
  12. 交付 reels/<slug>/out/final.mp4 與 out/cover.jpg,以及一段說明文字,其中第一行包含主題關鍵字,搭配 3 至 5 個主題標籤,並附上 facts.md 中的來源。

讓觀眾留下來的規則(來自實際成果,而非理論)

  • 收尾亮點放在第一行。「幾乎沒人知道的 7 個 Claude Code 快捷鍵」勝過「今天我想給你看個東西」。
  • 第一幀就要有動態。讓入場動畫從負時間開始(popV(t,-0.3,...)),使第一個畫面已經在移動。絕不允許空白或靜止的第一幀。
  • 從頭到尾保持一致的視覺風格。絕不從暗色開場再切到亮色:這會讓觀眾覺得是另一支新影片而滑走。
  • 列表型內容:使用計數標題(快捷鍵 3/7 + 圓點)以及第二行的開放式循環(「而第七個為我省下好幾小時」),並在結尾回收。
  • 每 0.8 至 1.5 秒更換一張圖片。展示效果,而非描述效果。
  • 語音要清晰突出。音樂保持小聲(sfx.mix_reel 中的預設值已經過測試)。
  • 行動呼籲需為這支短影片專屬寫作(儲存、分享給適合的人,或提出真正的問題)。絕不使用「按讚追蹤」。

故障排除

請參考 references/TROUBLESHOOTING.md。常見問題:ffmpeg 不在 PATH 中、Chromium 未安裝、語音 API 回傳 429(目前有免費額度限制,請等待或啟用計費)、審核工具回報 CLIP(文字超出卡片寬度:請縮短文字或將卡片寬度增加至 920 px)。

相關技能