Communitygithub.com

ahmadrashad1/video

製作完成、含旁白的 Loom 風格螢幕錄影影片(MP4、1080p、使用使用者自己的 Fish Audio 語音複製、字幕、無網路攝影機),用於展示網站或網頁應用程式。

video 是什麼?

此技能讓 AI 代理(如 Claude Code)能夠根據使用者的指令,自動規劃、錄製並產出專業的螢幕錄影示範影片。它會先分析目標應用程式或網站、檢查頁面元素,然後撰寫包含旁白腳本與操作步驟的計畫,並在使用者批准後,使用 Fish Audio 語音複製技術生成語音、進行螢幕錄製,最後輸出含字幕的 1080p MP4 檔案。整個流程透過 `loom` 命令列工具完成,支援瀏覽器與實驗性的桌面應用程式錄製。此工具的主要價值在於省去手動錄影與剪輯的時間,並能產出語氣自然、旁白與畫面同步的教學或展示內容,特別適合開發者快速製作功能介紹或客戶示範。

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

在你喜歡的 AI 中提問

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

說明文件

含旁白的示範影片

你負責規劃並執行示範。loom 命令(啟用此技能後會在你的 PATH 環境變數中)處理旁白、錄製、渲染與驗證。請直接在任何目錄下以 loom … 形式執行。影片會儲存在 loom status 顯示的 recordings 資料夾中(預設為 ~/Videos/loom/<slug>/)。下文以 <rec> 代表該資料夾。

請求:$ARGUMENTS

如果請求是現有錄影的 slug(loom status 會列出它們),則從其第一個未完成的步驟繼續執行。尚未批准的計畫仍需獲得批准。

不可違反的規則

  1. 切勿錄製未經批准的計畫。 撰寫計畫時需設定 "approved": false,呈現給使用者,待使用者明確批准(或使用者明確表示無需審閱即可繼續)後,才將其設為 true。
  2. 具破壞性或不可逆的操作(例如刪除、購買、部署、發送、付款、修改生產環境設定)必須標記為 "destructive": true,且在使用者為本影片明確同意後,才能傳入 --allow-destructive 參數。
  3. plan.json 或旁白中不得包含機密資訊。 輸入的密碼/令牌應使用 "secret_env": "VAR";螢幕上顯示的金鑰、電子郵件、令牌、帳號則放入 "redact"(使用 CSS 選擇器,在整部影片中模糊處理)。切勿列印 ~/.config/loom/*.env 的內容。
  4. 不得偽造畫面。 每個場景都必須由錄製器真實執行。如果某個場景失敗,請修正計畫並重新錄製。切勿偽造結果,也切勿將 loom verify 驗證失敗的影片標示為完成。
  5. 無網路攝影機,僅限本人語音。 旁白使用使用者自己的 Fish Audio 語音模型。未經他人許可,切勿使用或建議使用他人的語音。

工作流程

0. 語音設定(首次執行)

執行 loom status。如果顯示 VOICE NOT CONFIGURED,請先設定語音;參照 /loom:setup 技能 (${CLAUDE_PLUGIN_ROOT}/skills/setup/SKILL.md)。向使用者詢問他們自己的 Fish Audio 語音模型 ID;切勿自行發明或重複使用他人的。如果使用者現在不想設定,你可以使用 --provider espeak 的機器人預覽語音繼續,但需清楚告知這並非他們的真實語音。

A. 了解需求

釐清:哪個應用程式/URL、觀眾應達成的目標、觀眾對象,以及是否需要登入。如果其中一項確實不清楚,則提出一個簡潔的問題;否則,做出合理的假設並陳述這些假設。

B. 檢查真實應用程式

loom inspect <url> --out <rec>/<slug>/inspect

閱讀螢幕截圖(<rec>/<slug>/inspect/page.png)並使用列印出的選擇器。檢查示範將會造訪的每個頁面(依循操作流程),以確保選擇器是真實的,而非猜測的。優先使用 #id、[data-testid=…],然後是 role=button[name="…"],最後是 text=…。本地檔案可使用 file:///… 格式的 URL。

C. 撰寫計畫

建立 <rec>/<slug>/plan.json,請遵循 ${CLAUDE_PLUGIN_ROOT}/skills/video/reference/plan-schema.md。指引:

  • 4 到 10 個場景;以 title 場景開頭,以簡短的 recap 場景結尾。
  • 旁白:第一人稱、口語化,就像同事在錄製 Loom。每個場景 1-3 句話(約 6-20 秒)。描述觀眾在操作進行時所看到的內容;不要逐字讀出選擇器或 URL。
  • 操作在該場景的旁白播放時執行;請保持夠短以符合時間(約每秒 2.6 個字的語速)。如果流程過長,請拆分為更多場景。
  • 在每個會改變狀態的場景中加入 expect,以便捕捉失敗。
  • 重複執行 loom validate <slug> 直到通過。

以表格形式(場景 · 螢幕上發生的操作 · 旁白)向使用者呈現計畫,並說明任何破壞性操作、需要的機密資訊以及預估長度。暫停並等待批准。獲得批准後設定 "approved": true。

D. 旁白

loom voice <slug>:為每個場景產生一個 WAV 檔案,使用複製的語音(已快取;僅有變更的場景會重新產生)。檢查時長是否合理。

E. 錄製

loom record <slug>(僅在符合規則 2 時加上 --allow-destructive)。 如果失敗,請閱讀錯誤訊息和 <rec>/<slug>/raw/failure-<scene>.png,修正計畫中的選擇器/等待時間,然後重新執行。必要時重新檢查頁面。

F. 產出

loom render <slug>(如果使用者想要燒錄字幕,加上 --captions burn;預設為嵌入的字幕軌加上 subtitles/captions.srt)。

G. 驗證(務必執行)

loom verify <slug>,然後使用 Read 工具檢查 <rec>/<slug>/scenes/*.jpg 中的每個縮圖:預期的螢幕狀態是否可見?是否有任何敏感資訊未模糊處理?是否有錯誤頁面或 Cookie 橫幅遮蓋了內容?如果出現警告指出操作耗時超過旁白,請考慮拆分該場景。修正並重新執行必要的步驟,直到驗證通過。

H. 報告

提供 <rec>/<slug>/final_video.mp4 的路徑、長度、場景列表,以及任何注意事項(例如使用了預覽語音)。提醒 VS Code 的內建預覽功能播放 MP4 時沒有聲音;請使用一般的影音播放器。計畫批准後,步驟 D 到 G 的捷徑:loom run <slug>。

疑難排解

  • loom: command not found → 此技能的 bin/ 目錄不在 PATH 中;請改為執行 ${CLAUDE_PLUGIN_ROOT}/bin/loom。
  • loom needs uv → 告知使用者安裝 uv(命令會一併顯示)。
  • 找不到元素 → 在該頁面重新執行 loom inspect;加入 wait_for。
  • Cookie/同意橫幅 → 在第一個場景中加入 click 來點擊接受按鈕。
  • 登入 → 使用 secret_env 進行 type 操作;要求使用者匯出該變數。
  • Fish Audio 401 → API 金鑰錯誤。402 → 該模型無 API 額度;建議增加額度或將技能的模型設定切換為 s2.1-pro-free。
  • 桌面(非瀏覽器)示範 → 加上 --recorder obs(OBS 必須正在執行,且已啟用 WebSocket 並設有螢幕擷取場景)。此路徑為實驗性功能。

相關技能