Communitygithub.com

Justice219/行動應用程式電影級影片

利用真實3D手機、應用程式實際畫面、旁白功能操作、同步重點標示、極簡文字、粒子效果與音效設計,打造電影級的行動應用程式導覽影片。適用於應用程式介紹或功能展示影片及其修改。

行動應用程式電影級影片 是什麼?

這是一個基於程式碼的影片製作工具,能將真實的行動應用程式工作流程轉化為具有導演風格的3D影片。它整合了 Three.js、Playwright、FFmpeg 和 Python 等技術,提供一個可編輯的生產模板,而非傳統的 After Effects 專案。此技能適用於 Claude Code 或 Cursor 等 AI 代理平台,透過指令自動化執行從初始專案建立、螢幕捕捉、旁白生成、動態特效到最終導出的完整流程。其核心優勢在於保留應用程式的真實性(例如實際的觸控目標位置、滾動偏移量與螢幕色彩),並支援透過 ElevenLabs 進行語音生成。使用者需遵循嚴格的生產順序,包括安裝依賴項、設定專案設定檔、編寫攝影機動作與旁白,最後執行渲染、混音、驗證與打包指令,以確保影片的時序精準與視覺一致性。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Justice219/mobile-app-cinematic-video/tree/main

在你喜歡的 AI 中提問

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

說明文件

行動應用程式電影級影片 是做什麼的?

將真實的應用程式工作流程轉化為導演的3D影片,使用內含的 Three.js、Playwright、FFmpeg 和 Python 生產模板。這是一個可編輯的基於程式碼的影片工作流程,而非 After Effects 專案。

從應用程式和現有方向開始

  • 在開始製作前,檢查現有的匯出內容、專案原始碼、當前用戶回饋、實際運行時的主題以及可用的應用程式資料。保留已批准的選擇。對於新專案,要確定要展示的功能、目標觀眾、格式以及可用的螢幕截圖。
  • 使用虛構的測試數據或授權的錄製來捕捉真實的應用程式組件。測量實際的觸控目標位置、滾動偏移量和重點區域的邊界。切勿用虛構的畫面取代真實的功能行為並稱之為真實。如果使用僅限原生環境的視覺化效果,請在交付來源中標註清楚。
  • 匹配運行時的顏色。附帶的範例調色盤僅是預設值,並非其他應用程式的品牌。暗色模式貫穿始終、極少的編輯文字以及手機退出/品牌揭示是原始專案的偏好設定,但當用戶另有要求時可以進行配置。

生產流程

請閱讀 references/workflow.md 了解生產方法及精密的時序/幾何細節。在進行或更新螢幕捕捉時,請閱讀 references/capture.md。在編寫動作、攝影機姿態、滾動或文字時,請閱讀 references/timeline.md。

  1. 對於新專案,從此技能資料夾執行 python3 scripts/scaffold.py /absolute/new/project。它會複製 assets/template 並創建標籤清晰的合成示範畫面。在實際交付物前,請替換這些畫面。對於現有的影片,直接編輯其專案資料夾,而不是重新搭建。
  2. 在生成的專案中,依照倉庫 README 文件安裝 Node/Python 依賴項和 Chromium。根據實際應用程式主題、可選的擁有字體以及品牌圖片/裁剪來設定 project.json。目前的渲染器以 30 fps 輸出 1080×1920,CSS 應用程式捕捉為 430×860 且 DPR 為 3;更改畫面比例需要協調幾何和座標變更。
  3. 捕捉工作流程並編寫 source/films.json。每次使用一個主要的攝影機動作、快速的觸覺回饋以及清晰的設定 → 動作 → 結果節奏。確保在旁白提及的功能保持可見。使用簡短的添加文字進行強調;側邊字幕是單獨的交付物。
  4. 編寫 source/narration.json,並且僅在獲得語音生成授權時,使用 python3 source/narrate.py 生成缺失的旁白。通過進程環境提供 ELEVENLABS_API_KEY 和 ELEVENLABS_VOICE_ID。快取 MP3/對齊配對檔案;切勿將秘密放入原始碼、螢幕截圖、日誌或 ZIP 檔案中。失敗的付費請求會停止,不會自動重試。使用快取的音頻進行迭代。
  5. 使用返回的字元時間戳以及 0.65 秒的混音偏移量 來指導重點標示、觸控、攝影機對焦、文字和結尾。渲染預覽影格,檢查它們,然後渲染最終影片。模板支援 --preview、--only INDEX 和 --manifest PATH;混音/驗證/打包使用 source/films.json。
  6. 執行 python3 source/mix.py。優先使用 assets/audio/sfx 中授權的音效庫樣本;如果缺少樣本,則使用原始的程式化備用方案。確保效果在語音下保持清晰可辨。模板會將瞬態峰值與動作對齊,並在旁白下降低效果音量。
  7. 執行 python3 source/verify.py,以視覺方式檢查關鍵轉場和旁白時刻,並聆聽最終混音。自動黑幀/響度檢查並不能確保顯示了正確的功能。檢查字幕和所有承諾的文字。
  8. 在匯出通過後執行 python3 source/package.py。在分享前檢查壓縮檔的明確內容和媒體權利。交付 MP4、可選的 SRT/VTT、預覽圖、可編輯的原始碼和來源資訊。發佈、部署和貼文保持在用戶要求的範圍內。

保留這些不變量

  • 應用程式紋理使用 sRGB 和 toneMapped:false;場景燈光不得重新著色應用程式。
  • 重點標示和滾動像素使用相同的已測量滾動插值。在滾動完成後,紋理圖集需保持啟用狀態;否則,較短的滾動持續時間可能會暴露空白區域。
  • 攝影機對焦在退出變換之前計算,這樣攝影機就不會跟隨離開的手機。在結束旁白期間迅速開始品牌揭示;不要留下停滯畫面的空白。
  • 世界空間的粒子具有深度測試和透視縮放。保持它們從屬於應用程式內容。
  • 在 macOS 上明確使用 GPU (--enable-gpu --use-angle=metal),以 frame / 30 渲染確定的時間,並將影格與背壓一起管道傳輸到 FFmpeg。
  • 不要將憑證檔案、專有應用程式原始碼、未授權的字體/SFX 或客戶資料複製到可重複使用的技能或公共倉庫中。

可選的 scripts/demo_audio.py 為離線管線的冒煙測試創建合成音調。它明確不是旁白,絕不能冒充為完成的配音。

相關技能