系統訓練影片
記錄網頁系統的實際操作過程，並將其轉換為完成的訓練影片：每章一部短片，以及一部帶有章節標記的完整影片。無需配音。簡短的註解說明框會解釋正在進行的操作及其原因。
方法固定，因為每個部分都能解決實際的錄製問題。只有視覺外觀會根據不同系統而變化。
| 每個系統都保持不變的部分 | 來自系統本身的部分 |
|---|---|
| 1920 × 1080 影片，30 幀/秒，MP4 格式 | 卡片與註解說明的顏色，從頁面讀取 |
| 標題卡：標誌、前導文字、標題、一行文字、色帶 | 高亮、箭頭與點擊光圈的顏色 |
| 帶有箭頭的註解框，以及元素上的高亮 | 標題與內文字型，包含網路字型 |
| 角落的「第 N 步，共 M 步」計數器 | 角落圓角程度，從按鈕讀取 |
| 慢速游標、點擊光圈、平滑縮放、跳過載入的剪輯 | 標誌 |
| 音效，以程式碼產生 | 淺色或深色註解，根據背景決定 |
| 完整影片中的黑色章節卡片與標記 | 語言，以及從右到左的文字 |
規則及其存在原因
- 僅限使用含虛構資料的本地副本。 指令碼會真實地點擊與儲存，而影片可以與任何人分享。引擎會拒絕非本機位址。只有系統所有者可以設定
allowRemote: true，且僅限於不包含真實資料的測試伺服器。切勿指向線上系統，也切勿顯示真實人員的姓名、電子郵件或文件。 - 應用程式不會被修改。 所有內容都位於專案的
video-tour/資料夾中，該資料夾擁有自己的套件。如果某項工作在不修改應用程式的情況下無法展示，則跳過並回報。 - 影片不會儲存在儲存庫中。 它們會被放到儲存庫外部的資料夾。
- 遵守專案自身的規則。 首先閱讀其
CLAUDE.md或類似檔案。如果檔案說明由所有者執行 git，則不要執行 git。在小機器上，一次只執行一個繁重的工作。 - 不要偽造系統無法做到的事。 依賴於當前日期、外部服務或具有變化答案的功能（例如聊天機器人）的工作應被跳過並回報。任何在錄製前準備好的資料都必須在報告中揭露。
步驟 1：一次收集所需的資訊
首先在專案中查閱：README、package.json、文件、種子資料、測試帳號。然後將所有遺漏的資訊整理成一份清單並提出詢問，在獲得首次回覆前不要再次詢問。
- 如何在本機啟動系統，及其位址。
- 如何重置測試資料。沒有重置，章節之間會互相衝突資料。
- 測試帳號，每個影片所需的角色各一個。
- 影片的目標受眾。這決定了哪些工作重要以及卡片上的文字。
- 註解說明的語言。預設值：系統畫面的語言。
- 影片的儲存位置。預設值：專案旁的一個資料夾。
步驟 2：學習系統並規劃章節
閱讀其路由、選單及任何使用者文件，並在運行的系統中開啟頁面。然後撰寫章節計畫：為使用者實際操作的每個區域規劃一章，每個章節圍繞工作任務建構（例如「建立訂單並送出審核」），而不是螢幕導覽。一章通常包含 2 到 6 個步驟，長度為 1 到 4 分鐘。以「開始使用」章節作為開頭。列出你計畫跳過的內容，並說明原因。
步驟 3：設定並讀取系統的外觀
node ~/.claude/skills/system-training-videos/scripts/init.mjs <專案資料夾> --out "<影片資料夾>"
cd <專案資料夾>/video-tour && npm install && npx playwright install chromium
填寫 video-tour/tour.config.mjs 中的所有 TODO。透過執行以下指令（它會使用設定）來確認登入功能正常：
node video-tour/tour.mjs brand
此指令會訪問系統，讀取其外觀，寫入 theme.json 和標誌，並在 <影片資料夾>/_work/brand/ 中儲存四張預覽圖：title-card.png、chapter-card.png、callout.png 和 counter.png。檢查所有四張圖片。 顏色偵測僅是良好的猜測，而非事實，因此請以觀看者的角度判斷：這看起來像該系統嗎？標誌是否正確？標題是否使用其真實字型？在設定檔中使用 theme 修正任何問題，然後再次執行 brand。請參閱 references/theme-and-config.md。
步驟 4：第一章，然後一次核准
撰寫第一章（先閱讀 references/writing-chapters.md），然後：
node video-tour/tour.mjs make 1
make 會重置資料、進行快速排練、再次重置、錄製、建構並檢查。檢視它所列印的靜止幀與連絡表。
然後暫停，向專案負責人展示章節計畫、跳過的工作以及靜止幀。這是唯一的一次核准。現在修改外觀或計畫成本較低，而在完成整個系列後修改則成本高昂。獲得同意後，不間斷地完成其餘章節。
步驟 5：其他章節
對於每個章節：撰寫它，執行 make，並檢查其連絡表。check 能捕捉可衡量的問題：螢幕上顯示時間少於 2.5 秒的註解、攝影機捕捉到的載入畫面、瀏覽器錯誤、音量大小。它無法判斷意義，因此請親自檢查影格中是否有：
- 註解指向錯誤的元素，或被畫面邊緣裁切；
- 註解、計數器或彈出視窗遮擋了觀眾需要看到的內容；
- 錯誤訊息、空白頁面，或任何非虛構的內容；
- 縮放時切掉了應該顯示的內容。
如果連絡表中的某個畫面有疑慮，使用以下指令拉取一個完整影格：ffmpeg -ss 20 -i chapter.mp4 -frames:v 1 frame.png。
如果某個章節在兩輪修正後仍有問題，則跳過它、回報它，然後繼續。先前遇到的問題記錄在 references/troubleshooting.md 中。
步驟 6：完整影片
在所有章節建構完成且系統運行時：
node video-tour/tour.mjs join
這會寫入 <名稱>-training.mp4，包含開場卡、每章前的黑色卡片、結尾卡、章節標記，以及 chapters.txt（格式為「00:00 標題」，可直接用於 YouTube）。檢查長度與標記：
ffprobe -v error -show_entries chapter=start_time:chapter_tags=title -of csv=p=0 <完整影片>
步驟 7：報告
以簡短的句子，為非技術人員撰寫：
- 每個章節及完整影片的路徑與長度，以表格呈現。
- 包含每章一張靜止幀的資料夾。
- 包含開始時間的章節清單。
- 被跳過或遺漏的內容及其原因。
- 錄製前準備好的資料（影片中未顯示）。
- 你注意到並接受的微小視覺瑕疵。
- 你僅透過測量而非聆聽來檢查音效，因此建議在分享前由真人聆聽一個章節。
然後停止你啟動的伺服器。
參考檔案
references/writing-chapters.md：撰寫章節前閱讀。包含每個動作、保持影片清晰的模式，以及如何撰寫註解。references/theme-and-config.md：設定、brand讀取的內容，以及如何修正外觀。references/troubleshooting.md：當錄製失敗或影格看起來錯誤時閱讀。