預告影片
預告片以幾個節奏展示一個功能，每個節奏有一個明確焦點，並配以音樂。每個畫面都是產品的真實截圖；動感來自鏡頭移動、從那些截圖中切割出來的行各自就位，以及剪輯與音樂節拍的配合。整支影片都是程式碼（一個 HTML 頁面和一個時間表，由 HyperFrames 渲染），因此新的截圖、更改的標題或不同的音樂剪輯只需重新執行即可。
人員負責指導品味，並會反覆迭代。在完整渲染之前先展示連絡表格，保留每一次渲染，並記錄更改了什麼以及原因。從 references/taste.md 中的預設值開始：它們是第一輪審查後收斂的結果。
設定
- Node 22+ 並安裝 npx（HyperFrames 透過
npx [email protected]執行；無需安裝），ffmpeg 在 PATH 中（HyperFrames 製作快照和渲染也需要它），uv（Python 工具聲明自己的依賴項），以及產品專案中用於擷取的 Playwright 和 Chromium。渲染會從 CDN 載入 GSAP 和 Inter 字體，因此需要網路連線。 SK=<此技能目錄>/scripts。- 在任何儲存庫的追蹤檔案之外的工作資料夾中操作（一個被 gitignore 的
.logs/<video>/，或一個暫存資料夾）：
<work>/
assets/<theme>/ 每次擷取傳遞的截圖和 boxes.json
capture/ 此產品的擷取腳本
video/ index.html 和 timeline.js（從範例複製）；assets/ 存放截圖、品牌圖示、音樂
NOTES.md 每個版本及其更改原因、重建指令
1. 簡報
用一次簡短的交換確認，提供預設值：
- 長度：除非另有要求，否則 10 秒。在硬性上限內，減少節奏，絕不加快動作。
- 節奏：三或四個，每個工作在一個畫面上（輸入 URL、檢視發現的結果、查看結果、品牌）。每個節奏有一個 2-3 個單詞的標題，不包含數字。
- 範例資料應一目了然：一個知名的網站，這樣結果（競爭對手名稱、favicons）容易辨識。
- 外觀：產品自己的主題 token（暗色模式是預告片的好預設）及其真實的品牌圖示，取自其即時網站，而不是您繪製的標誌。
- 音樂：檔案，以及任何 10 秒的片段是否可行（參見步驟 5）。
- 哪個分支或工作目錄具有每個畫面的最新 UI。在擷取前檢查它是否落後於遠端。
2. 擷取
以 1440x900、2x 解析度，使用 $SK/capture.mjs（與 narrated-video 相同的輔助工具）擷取真實截圖：輸入文字時的輸入幀、鏡頭向下平移時的高截圖（2400 px）、場景框架、切割行或點擊的每個元素的測量框。為暗色模式傳遞 { colorScheme: 'dark' } 給 cap.page()。絕不繪製 UI 或編輯像素。詳細資訊，包括凍結動畫幀以及在不支付請求費用的情況下擷取載入狀態：references/capture.md。在使用前檢查每個截圖。
3. 組合
將 examples/openseo-ai-visibility/video（index.html、timeline.js）複製到工作資料夾中，將截圖、品牌圖示和音樂放入 video/assets/，然後重寫 timeline.js：時間表、標題、調色板、截圖路徑和高度、測量框、每個場景的相機關鍵影格以及指標。index.html 根據該檔案構建每個場景：行使用測量框從其截圖中切割出來。各部分如何運作以及重要的數字：references/composition.md。
4. 草稿和檢查
cd video
npx --yes [email protected] lint # 必須報告 0 個錯誤
npx --yes [email protected] snapshot --at 0,1.2,2.4,2.6,3.4,4.4,6.0,8.2,9.5 --no-end # 放入 snapshots/
快照只需幾秒鐘，因此用它來代替草稿渲染。快照每個場景開始、點擊、標題進入以及每個溶解的中間，並檢查它們（每次執行也會寫入聯絡表）：每個影格一個焦點且居中，標題清晰可見、不遮擋焦點物體，頁面平坦時沒有空白頁邊，揭示結束時沒有缺失的行。然後檢查每個場景的全解析度影格，確保文字清晰。
5. 音樂
uv run $SK/beats.py song.mp3 # 節奏、每秒響度、每個重拍
uv run $SK/beats.py song.mp3 --window 51.9 10 # 候選剪輯在影片時間內的重拍
挑選剪輯，將其開始時間寫入 index.html 中的 <audio> 元素，並將其重拍時間寫入時間表，然後將剪輯對齊到這些重拍上：主要的點擊落在重拍上，每次場景切換落在重拍上，標誌落在最強的重拍上。選擇剪輯並映射它：references/music-sync.md。
6. 渲染和驗證
npx --yes [email protected] render -o renders/<video>-vN.mp4 --fps 60 --crf 14 \
--video-frame-format png --experimental-fast-capture=false # 10 秒影片約耗時 15 秒
uv run $SK/verify-sync.py renders/<video>-vN.mp4 <計劃的重拍時間...> # 每個重拍在一個影格內；否則退出 1
uv run $SK/sheet.py renders/<video>-vN.mp4 renders/sheet-vN.png <時間...>
按版本命名渲染並全部保留；人員會進行比較。用於分享的靜態圖片（社交圖片、縮圖）是指定時刻的 4K 快照：npx --yes [email protected] snapshot --at 7.3 --no-end --zoom 0,0,1920,1080 --zoom-scale 2 -o stills 會寫入一個 3840x2160 的 PNG。
7. 審查和迭代
提供 mp4 路徑（以及如何打開它）、節奏及其時間，以及任何與請求不同之處。在 NOTES.md 中記錄每一輪。工作範例的第一版歷經七輪；每一輪的更改記錄在 examples/openseo-ai-visibility/NOTES.md。
嚴格規則
- 僅限真實螢幕。行揭示時，可能在真實行落下之前短暫覆蓋帶有表格自身背景（從截圖取樣）的行；一旦行落下，畫面就是原始截圖。
- 在渲染前檢查截圖中是否有機密和個人資料（金鑰、電子郵件、其他人姓名、localhost URL）。
- 音樂和截圖保留在人員的機器上；未經要求請勿發布任何內容。
- 恢復產品儲存庫中因建置或預覽而重新產生的任何追蹤檔案。
最耗時的錯誤記錄在 references/gotchas.md。