網站轉 Reel 是做什麼的？
使用網站本身製作一部關於該網站的簡短垂直影片：真實頁面、真實點擊、真實狀態。每一幀都由一個 Canvas 渲染器根據時間的純函數繪製，然後離線擷取並編碼。此技能是從 Dawas Shlef Reel 工作流程提煉而來。examples/dawas-shlef/ 存放該專案的時間軸、語音台詞、擷取腳本與審查筆記，作為實際參考範例。請僅作為參考，不要將其場景列表直接套用在不同的產品上。
需同時載入：
video-director以取得製作原則及其scripts/check_timeline.py與scripts/qa_video.py。playwright-cli以執行所有瀏覽器步驟。
如果缺少其中任一技能，請明確告知，不要試圖繞過。
不可妥協事項
這些源自打造本技能的簡報，適用於每個專案：
- 僅使用真實 UI。 擷取運作中的本地端網站。透過點擊真實控制項並擷取真實結果來顯示狀態變化，絕不透過繪製方式呈現。不要憑空創造畫面、計數或提示通知。
- 保持使用者環境原樣。
- 不要重新設計、修改、部署或發佈該網站。
- 不要啟動行銷活動或提交表單。
- 僅建立展示資料（例如一個書籤），並在使用後移除。記錄儲存空間的前後狀態。
- 絕不清除現有使用者資料。
- 停止您啟動的伺服器與瀏覽器連線。除非獲得使用者同意，否則不要關閉他們原本的網站伺服器。
- 畫面上顯示公開 URL，絕不顯示 localhost。 URL 需提早出現（3 秒內）並顯示在結尾卡片上。
- 宣稱內容僅限於
brand.json→claims。 文字說明絕不能比來源更強烈。評論家應標記任何不符合規定的內容，例如簡報未提及時卻說「無需帳號」。 - 語音。
- 絕不克隆任何人的聲音。
- 絕不暗示產生的語音是真人的錄音。
- TTS 旁白僅能以第三人稱介紹創作者，例如「由 X 製作」，而非「我是 X」。螢幕上的第一人稱台詞需相應修改。
- 告知使用者發佈時需標註 AI 音訊。
- 未完成的剪輯不得稱為最終版。 無聲剪輯稱為「動畫草稿」。檔案只有在包含音效且通過 QA 後才能命名為
*-final。 - 不要宣稱你未經測量的事項。 你無法觀看或聆聽輸出成果。請報告你執行過的檢查與查看過的靜態畫面，並清楚說明哪些事項是無人見過或聽過的，例如 TTS 發音或即時感受。
- 切勿為使用者發佈或張貼內容。 你可以應要求上傳至他們的 GitHub，但發佈到 Instagram 或其他社交平台永遠是使用者的責任。
工作流程（三個審核關卡）
| 階段 | 你產出的內容 | 關卡 |
|---|---|---|
| 0. 初始資訊收集 | 一輪問題（見下方）。閱讀簡報、資產與網站。填寫 brand.json。 | |
| 1. 提案與風格設計 | TREATMENT.md，包含一句話摘要、鉤子、節拍表（附台詞）、英雄時刻與宣稱。一個唯讀的網站調查。2-4 張來自真實渲染器的風格畫面。第一份 timeline.json。 | 使用者核准。 |
| 2. 無聲動畫草稿 | 擷取畫面、完整時間軸、渲染幀並編碼為 *-animatic-silent.mp4。品質保證。從已編碼的 MP4 產生聯絡表、轉場與細節表，以及分鏡圖。評論家審查並進行一輪修正。審查筆記。 | 使用者核准節奏與構圖。 |
| 3. 最終版 | 配合已核准畫面的旁白（錄製，或使用者選擇 TTS）。配樂與音效。混音至 -16 LUFS 且 ≤ -1 dBTP。字幕。*-final.mp4。品質保證。評論家進行一輪修正。封面。更新筆記。 | 使用者聆聽並核准。 |
在使用者在場時使用 ask-first 模式。只問一次，之後所有決定自行處理，並在審查筆記中記錄為 DECISION: … because …，以便每一項都可透過一次回覆撤銷。
初始問題（一輪，建議選項優先）
僅詢問簡報與網站未提供的資訊。
- 內容與目標對象： 影片必須傳達的核心訊息、目標觀眾，以及字幕語言與方言。
- 平台與長度： Instagram Reels 9:16，解析度 1080×1920（預設），45 秒主剪輯外加獨立剪輯的 15 秒版本，以及是否需要 16:9（預設否）。
- 事實： 允許的宣稱與品牌的正確拼寫、創作者名稱及公開 URL。
- 資產： 品牌顏色與字型、標誌或字標，以及要展示的網站狀態與功能。
- 音效： 使用者自行錄製旁白（首選），或使用 TTS 並揭露，或僅使用音樂與字幕。詢問音樂版權。
- 邊界： 哪些內容不可觸碰（網站伺服器、現有使用者資料、表單）。
對於「現在就製作影片」但無可用錄音的情況，詢問如何取得音效。選項包括：僅音樂+字幕無語音、使用者自行錄製、或使用產生的旁白。若選擇 TTS，在安裝任何東西前先檢查已安裝的項目。安裝 edge-tts 會將腳本文字傳送至 Microsoft 的線上服務，因此需先取得使用者同意，並讓他們選擇語音。
專案結構
將 templates/project/ 複製到新的專案資料夾中，然後編輯：
brand.json 名稱、字標、創作者、公開 URL、色板代碼、字型、宣稱、neverSay、語音、安全區域
reel.html, reel.js 渲染器（品牌中立；從時間軸讀取所有資訊）
vo-lines.json 旁白台詞：[最早開始秒數, 文字, 最晚結束秒數]
assets/fonts, assets/icons, assets/previews
capture3x/ 擷取畫面 + boxes.json（從 tools/capture.js 的輸出寫入）
tools/
survey.js 唯讀頁面調查（標題、連結、Y 軸位置、儲存空間鍵值）
capture.js 擷取畫面 + 標註框、建立與還原展示資料
cli3x.config.json / cli4x.config.json / render.config.json playwright-cli 設定檔
build_timelines.py 從 brand.json（+ vo/*.json）產生 timeline.json + timeline-ad15.json
styleframes.js, stills.js, render-frames.js, shot-storyboard.js run-code 腳本
make_vo.py, make_audio.py, make_srt.py 語音、音效、字幕
review_frames.py, storyboard.py 從已編碼的 MP4 產生表格
指令
CLI 代表 node "<argo>/node_modules/playwright/cli.js" cli，或直接使用已安裝的 playwright-cli。每個 run-code 腳本都是一個簡單的 async page => {}。參數透過頁面 URL 查詢傳遞，--raw 僅輸出回傳值。
# 擷取（本地網站需已運行；使用乾淨的記憶體連線階段）
CLI -s=cap open --config=tools/cli3x.config.json "about:blank"
CLI -s=cap --raw run-code --filename=tools/survey.js
CLI -s=cap --raw run-code --filename=tools/capture.js # 將 {"caps": ...} 儲存至 capture3x/boxes.json
CLI -s=cap close
# 時間軸與關卡
python -X utf8 tools/build_timelines.py
python -X utf8 ~/.claude/skills/video-director/scripts/check_timeline.py timeline.json
# 渲染（暫時靜態伺服器，使用後關閉）
python -m http.server 4380 --bind 127.0.0.1
CLI -s=render open --config=tools/render.config.json "http://127.0.0.1:4380/reel.html?tl=timeline.json&out=<abs frames dir>×=1.2,24.5"
CLI -s=render --raw run-code --filename=tools/styleframes.js
CLI -s=render goto "http://127.0.0.1:4380/reel.html?tl=timeline.json&out=<abs frames dir>&from=0&to=1349"
CLI -s=render --raw run-code --filename=tools/render-frames.js # 長時間影片：背景執行或分段執行
# 編碼（無聲動畫草稿；最終版需加上 -i out/audio/<film>-mix.wav -map 0:v -map 1:a -c:a aac -b:a 192k -ar 48000 -t <dur>）
ffmpeg -framerate 30 -start_number 0 -i <frames>/frame_%04d.png -frames:v 1350 -c:v libx264 -preset slow -crf 16 -pix_fmt yuv420p -r 30 -vf setsar=1 -movflags +faststart out/reel-animatic-silent.mp4
# 測量與審查（一律從已編碼的 MP4 進行）
python -X utf8 ~/.claude/skills/video-director/scripts/qa_video.py out/reel-final.mp4 --beats timeline.json --lufs -16 --tp -1 --out out/qa-reel
python -X utf8 tools/review_frames.py out/reel-final.mp4 timeline.json reel
python -X utf8 tools/storyboard.py out/reel-final.mp4 timeline.json reel
CLI -s=render goto "http://127.0.0.1:4380/out/storyboard-reel.html?shot=<abs>/out/storyboard-explained.png"
CLI -s=render --raw run-code --filename=tools/shot-storyboard.js
# 第三階段
python -X utf8 tools/make_vo.py && python -X utf8 tools/build_timelines.py && python -X utf8 tools/make_audio.py && python -X utf8 tools/make_srt.py
在 Windows 上，請使用 python -X utf8 搭配 PYTHONIOENCODING=utf-8 執行 Python，否則阿拉伯語輸出可能會出錯。
審查循環
- 評論家。 在第二階段後與第三階段後，將 MP4、時間軸、表格與 QA 報告提供給一個全新上下文的子代理。要求其提供一個排名清單：必須修正、應該修正、小毛病，每個項目附上時間碼與具體修正方式。唯讀，少於 500 字，不憑空創造問題。
- 一輪修正。 執行一輪修正，然後從已編碼的 MP4 重新檢查。
- 範圍修正。 若修正範圍僅限於部分幀，備份這些幀，僅重新渲染該範圍，然後與備份進行 diff。未變更的幀在重新編碼前必須完全位元組一致。
- 評論家的報告是模型輸出。 它絕不代表使用者核准。
交付物
out/<film>-animatic-silent.mp4（第二階段）與out/<film>-final.mp4（第三階段）。out/storyboard-explained.png、out/contact-sheet-<film>.jpg、out/review/、out/qa-*/。timeline*.json、vo-lines.json、vo/、out/audio/（混音檔與分軌）、out/subtitles-*.srt。out/cover/reel-cover.jpg及其 3:4 網格預覽。voiceover-script-*.txt，標記為已配音（引擎、語音、揭露資訊）或未錄製。review-notes.md：ffprobe 中繼資料、結構、每項檢查及其編號、評論家表格與其修正、DECISION、清楚說明的限制、確切指令，以及留待使用者決定的項目。範本為references/report-template.md。
參考資料（請在到達該階段時閱讀）
references/motion.md：攝影機模型、轉場、文字時間軸、標註、字幕、結尾卡片、停留。references/capture.md：調查、擷取、真實狀態交換、方框、還原展示資料。references/sound-and-voice.md：錄製 vs TTS、將旁白對齊畫面、英雄寂靜、配樂、混音、字幕。references/instagram-reels.md：格式、安全區域、鉤子、CTA 用語、封面、AI 標籤。references/gotchas.md：我們遇到的所有錯誤及其修正。references/report-template.md：審查筆記與最終訊息的骨架。examples/dawas-shlef/：完整的實際範例（不含擷取畫面或字型，需重新擷取）。