Communitygithub.com

launch-video — 零 API 官網→成片

從產品官網做 SaaS 發布片:HTML/CSS 場景 → Playwright 抽幀 → ffmpeg MP4 + 本地 Kokoro TTS。無需 API 金鑰。含品牌抽取與聯繫表 QA。

launch-video — 零 API 官網→成片 是什麼?

Launch Video 第 1 步:官網 → HTML 場景 → Playwright/ffmpeg 成片,可選本地旁白,零 API。

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

在你喜歡的 AI 中提問

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

說明文件

啟動影片

渲染器:launch-video-skills npm 套件。完整場景合約:https://github.com/anudeepadi/launch-video-skills#scene-contract

  • npx launch-video-skills setup:每台機器執行一次(無頭 Chromium + Python 語音套件)。需要 Node 18+、Python 3.10+、ffmpeg。首次運行語音時,會將 Kokoro 權重(約 350 MB)和 whisper small.en(約 480 MB)下載至 ~/.cache/lvk。
  • npx launch-video-skills new <name>:建立 launch-videos/scenes/<name>/index.html 模板,並在旁建立 launch-videos/kit/。
  • npx launch-video-skills render <scene.html> [flags]:輸出至 ./out/。
  • Chromium 下載停滯 → export LVK_CHROME=/path/to/chrome-headless-shell(任何本地版本)。
  • macOS 上的 Python 在執行 SSL 時失敗 → export SSL_CERT_FILE=$(python3 -c 'import certifi;print(certifi.where())')。

要區分優秀的啟動影片和「AI 廢片」,請參閱 references/craft.md。在構思分鏡前先閱讀它。

步驟

  1. 來自實際產品的品牌和事實。 使用 Playwright 擷取網站。記錄逐字標題、副標題、功能名稱、網站自身的範例內容(示範討論串、提示、程式碼、問題列表)以及行動呼籲。讀取計算後的樣式以取得字型系列/粗細/字距,以及背景/文字/強調色的範例像素色彩(CSS 變數會過時)。將 Logo SVG 和任何圖片儲存至 launch-videos/scenes/<name>/assets/。僅在授權允許重新分發時使用網站的字型;否則使用最接近的內建字型(Inter、JetBrains Mono、Space Grotesk)。絕不虛構指標、客戶、整合或使用者介面。如果某項目標記為「計劃中」或「預覽」,則省略或標示之。若無法取得真實的使用者介面範例,請停止並說明原因。將來源 URL 和日期以註解形式放在場景頂端。
  2. 先寫腳本,再構思分鏡。 每個鏡頭一至兩行簡短的句子,取自網站的文案;總長度 20–40 秒。當口語形式不同時使用 say(點、縮寫:say: 'Build A.I. agents')。5–6 個鏡頭,每個一個概念:鉤子(2 秒內產品或標題出現在畫面上)→ 首次使用情境 → 產品實際運作(使用網站自身範例在 HTML 中重建的實際使用者介面,絕不使用螢幕截圖)→ 第二項能力 → 3 個支柱或運作方式 → 附有 Logo 的行動呼籲。安靜的品牌:music.style: 'ambient',柔和的音效(0.2–0.6)。開發工具:'pulse' 和打擊聲。語音為選用;純音樂在 X 上很常見。
  3. 撰寫 launch-videos/scenes/<name>/index.html,使用 ../../kit/kit.css 和 kit.js。從已建立的模板開始。將鏡頭標記為 data-shot="id",不硬編碼 --in/--out。語音台詞放在 SCENE.voice.lines 中(鍵、鏡頭、文字/口語、於/之後、pause 拍)。使用 data-on="key"、data-on="key:word"、data-edge="e" 將拍子與語音對齊。定義 SCENE 後呼叫 K.layout(),然後從 K.at/K.end/K.shot 推導出 JavaScript 拍子:打字速度 = 文字長度 / 朗讀持續時間,關鍵字上的游標點擊,來自相同常數的打字音效提示。onFrame(t) 必須是純粹的 t 的函數。JavaScript 轉換應放置在沒有 CSS 動畫類別的包裝器上。避免大範圍的 filter: blur、backdrop-filter 或全螢幕混合模式。
  4. 審查循環。 npx launch-video-skills render launch-videos/scenes/<name>/index.html --sheet 1。每一行 <- ASR heard: 都代表可能的發音錯誤:使用 say 重新拼寫並再次檢查(whisper 有時會聽錯正確的音訊;標記這些供人工聆聽)。檢查 sheet PNG 以發現:文字覆蓋在雜亂圖像上、小文字的可讀性、空白影格、過渡中的碰撞、打字在鏡頭結束前完成、語法高亮錯誤。使用 --stills t1,t2 進行全解析度檢查。反覆調整時使用品味意見(「太快了」、「不清楚發生了什麼」),而不是一次性修改。
  5. 渲染並驗證。 npx launch-video-skills render launch-videos/scenes/<name>/index.html --workers 4。接著:
    • ffprobe:h264 + aac,預期的持續時間。
    • volumedetect:平均約 -19 到 -17 dB,最大值低於 -1 dB。
    • 同步:使用 faster-whisper small.en 對最終 MP4 進行逐字時間戳記轉錄;每行第一個單詞應在記錄中列印的時間軸約 0.2 秒內。關鍵字應落在視覺節拍上。
    • 連續性:比較跨工作者邊界的影格(影格數 / 工作者數)。
  6. 交付。 交付 MP4 路徑。絕不覆蓋先前版本(使用 mv -n 或新的 --out)。清楚說明語音和音樂是合成的,且尚未經過人工檢查。提供避免「一鍵生成」聲稱的發文文案。付費語音(ElevenLabs、OpenAI、Google)可在套件的 lib/tts.py 中更換;僅在使用者想要更人性化的朗讀時提及。

相關技能