altacrest/motion-how-to-video

使用 Claude Motion 製作旁白教學影片

這是 Novacrest 行銷團隊製作教學與文件影片的方法：真實的應用程式螢幕、流暢的游標、每個步驟一個簡短字幕、一個英文語音朗讀每個字幕、最終輸出一支 MP4 影片。這個方法源自 OmniOrders 快速入門影片（2026 年 10 月）。

影片所需的一切都已隨此技能提供（路徑相對於此檔案）：

• engine/shared.js 和 engine/base.css：螢幕截圖引擎 (SS) 及其外觀。不要從記憶中重建它們。
• examples/how-to-film/：參考影片「使用 Claude Motion 製作教學影片」(2026 年 10 月 27 日）的每個場景模組，包含 lines.json、scenes.json 和 shots.json。在編寫場景前請先閱讀它們：它們展示了每個 SS.def 選項的使用方式。
• scripts/voice.py：旁白腳本。使用 ElevenLabs API，每個字幕產生一個 MP3，並在安裝 Whisper 時進行校驗。它在使用者自己的終端機中執行。
• scripts/mix.py：將每個片段放置在其字幕下方，並寫入完成的 MP4（需要 ffmpeg）。

嚴格規則

• 只能使用從應用程式擷取的真實螢幕畫面。切勿重繪應用程式的 UI：在第一個快速入門影片中曾使用繪製的螢幕。顯示命令的簡單卡片是可以的，但繪製的應用程式或終端機視窗則不行。
• 使用測試帳號。不要在螢幕上顯示真實的客戶資料、金鑰、權杖或密碼：請用遮蓋物覆蓋它們，或使用測試帳號的虛擬值。切勿為使用者登入；請要求他們自行登入。
• 旁白為美式英文，且字幕即為腳本：每個步驟一個，使用任何人都能理解的簡單詞彙，不超過約 12 個字，不要使用破折號。語音會逐字朗讀每個字幕。當語音唸錯某個字時，請在 say.json 中放入口語拼寫；字幕保持不變。
• 切勿為了配合語音而拉伸影片。字幕的時間是根據其片段來設定的（步驟 4）。如果某個片段仍然過長，可以稍微加快速度（mix.py 最多允許 1.15 倍），或者縮短其台詞並重新配音。
• 先進行試播：為第一個場景的台詞配音並在繼續之前檢查它們，在每次語音或腳本變更後也需再次檢查。
• 不要讓 LLM 來評斷語音。voice.py 會在安裝了 faster-whisper 時使用 Whisper（詞錯誤率）為每個片段評分；否則由使用者聆聽判斷。
• 切勿在聊天中要求、列印或貼上 API 金鑰。ElevenLabs 金鑰僅存在於使用者電腦的檔案中。
• 在下載檔案、命名檔案及說明檔案來源前，務必先詢問使用者。

為什麼語音在使用者的終端機中執行：Claude 的工作區和使用者電腦上的 Claude shell 無法連線到 ElevenLabs（Novacrest 網路白名單封鎖了 api.elevenlabs.io 和 elevenlabsusercontent.com；已於 2026 年 11 月 12 日檢查），且金鑰絕不會透過聊天傳送。Claude 準備好一切，使用者只需貼上一個指令。ElevenLabs 連接器（自訂連接器，https://api.elevenlabs.io/v1/mcp）可以在沒有金鑰的情況下產生語音，但其音訊會以 elevenlabsusercontent.com 連結的形式返回，工作區無法下載，因此此處不使用。如果管理員允許這兩個網域，請重新考慮此方案。

步驟 1：範圍與字幕

一次取得下列資訊，僅詢問缺少的部分：流程（例如「在 OmniOrders 中建立轉帳」）、應用程式及其測試帳號、影片的用途（文件頁面、快速入門或 YouTube）以及產品的顏色。將步驟列表和每個步驟的一個字幕，加上標題行和結尾行，寫成 lines.json（{"id": "caption"}，按影片順序；id 如 open、ask-a、ask-b、end）。僅當某個台詞包含語音可能唸錯的字（例如 OmniOrders 唸成 "Omni Orders"、含有破折號的儲存庫名稱）時，才新增 say.json（{"id": "spoken text"}）。在聊天中向使用者顯示字幕，除非他們要求修改，否則繼續進行。

步驟 2：開始旁白

一旦字幕確定，立即開始旁白；在旁白執行的同時進行擷取和建構。

1. 在使用者的電腦上建立一個影片資料夾 ~/Downloads/<film-slug>/，包含 lines.json、say.json（如果有的話）以及一份 scripts/voice.py 的副本。如果有連結的資料夾，請使用 device_bash 將檔案寫入該處。如果沒有，請使用 SendUserFile 傳送檔案，並要求使用者將它們放在同一個資料夾中。
2. 第一次使用時，使用者需要一個具有文字轉語音存取權限的 ElevenLabs API 金鑰（請參閱 README 中的「ElevenLabs」）。檢查 ~/.config/elevenlabs/env 是否存在（測試檔案是否存在；切勿讀取其內容）。如果不存在，請使用設定行開始下方的區塊。
3. 提供使用者一個可直接貼到終端機的區塊：

   cd ~/Downloads/<film-slug>
   python3 voice.py setup        # 僅第一次：出現提示時貼上金鑰（輸入會被隱藏）
   python3 voice.py check        # 檢查金鑰是否有效及剩餘點數
   python3 voice.py --only open,<首個場景的 id>
   

   當試播聽起來沒問題時（voice.json 未顯示標記，或使用者已聆聽過），其餘部分執行 python3 voice.py。
4. 預設語音：Matilda（XrExE9yKIg1WjnnlVkGX），eleven_multilingual_v2，穩定性 0.5，相似度 0.75，速度 1.0，MP3 44.1 kHz 128 kbps；朗讀每一行時會以其前後的字幕作為上下文，使朗讀更流暢。僅在使用者要求時才變更語音或速度。voice.py 會列印將使用的字元數（約等於一個點數）；如果 check 顯示剩餘點數不足，請停止並詢問。
5. 音檔會存放在 voice/<id>.mp3；voice/voice.json 會列出每個片段的長度，以及（在安裝 Whisper 的情況下）實際聽到的內容和詞錯誤率。錯誤率高於 0.05 的行需要聆聽，在 say.json 中新增口語拼寫或修改措辭，然後執行 python3 voice.py --only <id> --redo。

步驟 3：擷取螢幕

1. 載入 claude-in-chrome 技能。在使用者已登入的 Chrome 瀏覽器中，於新分頁開啟應用程式。調整視窗大小，直到頁面可視區域為 1512 x 745（檢查 innerWidth 和 innerHeight）：這是引擎的世界尺寸，螢幕截圖會以 2 倍大小（3024 x 1490）輸出。
2. 在測試帳號中執行流程。使用 computer 螢幕截圖並設定 save_to_disk: true 來擷取影片所需的每個狀態：在每次點擊前後；對於輸入文字，需擷取空白欄位和已填入內容的欄位（影片會將輸入的文字以從已填入的截圖中裁剪出的補丁來呈現）。
3. 在工作區中，將截圖轉換為 webp 格式（品質約 90），命名為 <flow>_<step>.webp，並為每個輸入的文字行製作 2 倍大小的裁剪。在 shots.json 中記錄每個截圖的 URL 路徑，並在 shots.json 中記錄每個補丁在檢視像素空間（1512 x 745）中的位置。
4. 不要提交任何會修改測試帳號外部資料的內容。如果某個步驟可能導致此情況，請停止並詢問。

步驟 4：建構影片

1. 從 Motion 工件類型（在工件工具的類型列表中尋找）建立影片，title 設為影片名稱，並閱讀回傳的類型說明：它們會指導影片的建構。在請求中解決其問題，以避免需要填寫表單。風格：在真實螢幕截圖上使用引導游標，參考影片的外觀。顏色：使用產品的色板（OmniOrders： #16213E, #11ACE4, #F4F7FB, #2FD193）。長度：由語音決定（見下方），再加上 5 秒的標題卡片和 7 秒的結束卡片。
2. 將 engine/shared.js 不變地寫入影片的 modules/shared.js，將 engine/base.css 寫入 modules/base.css，僅修改其第一行上的四個顏色。將此影片自己的螢幕截圖和裁剪作為資產上傳；切勿複製其他影片的 _blob 引用。
3. 撰寫 lines.json（步驟 1 的檔案）、shots.json（每個截圖的 URL 路徑；"host" 是瀏覽器網址列中顯示的網域，之後是路徑，路徑以 / 開頭）、依據每個步驟使用 SS.def 建立一個場景模組（標題卡片使用 SS.open；SS.end 需要 mark、next 和 url），以及 scenes.json，內容包含每個場景的 dur 和 desc。將字幕宣告為 caps: [['<id>', tin, tout], ...] 以便 mix.py 能夠找到它們；沒有字幕的語音台詞（例如標題卡片的）也以相同方式在其模組中宣告，例如 const voiceOnly = [['open', 0.4, 4.6]];。參考範例：游標滑向控制項，一個圓環和一個點擊波紋標記它，鏡頭淡入，字幕位於深色底板上。
4. 根據 voice/voice.json 中的片段來設定字幕的時間：在每個場景中，第一個字幕在 0.3 秒時出現，每個字幕顯示的時間為其片段長度加上 0.45 秒，下一個字幕在 0.35 秒後出現。場景的 dur 是其最後一個字幕的結束時間加上約 0.4 秒，或者當螢幕上的動作需要更長時間時可以更長。將游標、圓環和鏡頭調整到這些時間視窗內。如果語音尚未準備好，先給每個字幕約 5 秒，等語音準備好後再重新調整時間。
5. 保持配樂安靜且現代：第一個快速入門影片的配樂曾被批評為「80 年代教堂管風琴」。
6. 使用者播放影片並提出修改要求；進行修改（更改過的字幕需要重新配音）。當他們滿意後，使用影片頁面上播放器下方的下載箭頭匯出 MP4：使用者點擊它，或者在獲得使用者同意後由 Claude in Chrome 點擊。它會出現在使用者的「下載」資料夾中。

步驟 5：混合

1. 將匯出的 MP4、voice/ 資料夾、scenes.json 和所有場景模組放在同一處：可以是使用者電腦上的影片資料夾（在安裝了 ffmpeg 的情況下，使用 device_bash 在該處執行 mix.py），或是雲端工作區（將它們暫存）。使用 ArtifactData (out_dir) 儲存從影片儲存的文件可以直接使用。
2. python3 mix.py cues --scenes scenes.json --modules <包含 scene-*.js 的資料夾> --lines lines.json 會產生 cues.json：每個字幕在影片中的開始和結束時間（場景的開始時間，即先前所有場景 dur 的總和，加上字幕本身的時間）。
3. python3 mix.py mix --film <匯出的 MP4> --voice voice --cues cues.json --out <產品>-<流程>.mp4 --web 會在每個字幕的時間點開始播放對應的音檔，當匯出的影片包含音軌時，將影片的配樂音量維持在語音的 25%，將語音標準化至 -16 LUFS，並複製影片畫面。如果某個片段需要加速超過 1.15 倍，它會停止；請縮短該台詞，重新配音，然後再次混合。
4. python3 mix.py frames --film <產品>-<流程>.mp4 --cues cues.json --out frames 會在每個字幕的中間點儲存一個影格。檢查每個影格：字幕是否可見、是否為正確的螢幕、是否沒有私人資訊。然後播放開頭幾秒：語音應與其字幕同時開始。對於其他需求，請遵循影片製作技能的 ffmpeg 規則。

步驟 6：交付

• 使用 SendUserFile 傳送完成的 MP4，並將其儲存到使用者已連結的資料夾中，檔名為 <產品>-<流程>.mp4。
• 對於網站：-web.mp4 副本應透過 PR 提交到網站儲存庫。提供使用者連結；由他們合併。
• 最後提供一個簡短的清單，列出使用者仍需執行的操作：終端機指令、匯出、合併 PR。

設定（每人一次，外掛程式的 README 中有詳細說明）

1. 從 GitHub 安裝：Claude > 自訂 > 外掛程式 > 新增 > 新增市集，輸入 altacrest/novacrest-skills 並選擇「使用」，保持「自動同步」開啟，進行同步，然後安裝「How-to video」。
2. ElevenLabs：一個具有文字轉語音存取權限的 API 金鑰，在任何影片資料夾中執行 python3 voice.py setup 即可儲存。
3. Claude in Chrome，並登入應用程式的測試帳號。