產品示範
將此儲存庫中的應用程式轉換為有評分、有字幕、幀完美的示範影片，僅使用 Node + Playwright + ffmpeg。此流程是確定性的：整個示範會從一個乾淨的程式碼庫重新渲染並重新評分。
流程（依序）
| 步驟 | 配方 | 輸出 |
|---|---|---|
| 1. 腳本 | 01-script.md | 場景表、帶有時間碼的旁白台詞、節奏網格 |
| 2. 獨立 UI | 02-standalone-ui.md | 從靜態資料夾渲染的應用程式元件 |
| 3. 組合 | 03-composition.md | 一個作為時鐘純函數的 React 樹 |
| 4. 錄製 | 04-record.md | PNG 幀 → 視覺無損的 H.264 母版 |
| 5. 字幕 + 旁白 | 05-captions-vo.md | SRT/VTT 側車檔案、附時間碼的旁白腳本 |
| 6. 音效 | 06-sound.md | sfx-cues.json、即時預覽播放器、自動混音器 |
| 7. 音樂 | 07-music.md | EQ 雕刻、音量閃避的背景音樂，從節奏點開始 |
| 8. 組合 | 08-assemble.md | 片頭 + 轉場 + 音軌 → 最終匯出 |
依序執行每個步驟；每個步驟都會使用前一個步驟的輸出。步驟 5-8 對於靜默草稿是可選的，但對於發布品質的影片則是強制性的。
一個起始提示即可執行所有操作
當使用者要求示範時，請自行協調所有八個步驟。永遠不要交給使用者一個步驟列表，或告訴他們回來再問下一個提示。相反地，在對話中直接向使用者提問，僅在需要他們獨自提供的東西時，並附上讓問題能在數秒內回答的成品：
- 在步驟 1 之後：顯示場景表和旁白腳本，在撰寫任何程式碼之前請求批准。重新調整腳本時間的成本很低；重新調整已渲染影片的時間則不然。
- 在煙霧測試渲染（smoke render）之後：顯示 4 個關鍵幀，在長時間完整渲染之前請求繼續。
- 在步驟 5：交出準備好貼上的標籤式旁白區塊（其中沒有同步註解），並要求生成的音訊檔案路徑。
- 在步驟 7：交出你寫的音樂生成器提示，並要求生成的檔案路徑。如果使用者偏好一次完成所有工具操作，這兩個請求可以與步驟 3 的請求批次處理。
- 在評分預覽之後：在匯出最終母版之前，交付一個小片段供試聽。
在詢問之間，直接繼續進行，無需確認。如果使用者拒絕可選素材（旁白、音樂），則在沒有它們的情況下繼續，而不是停滯不前。
進度追蹤（可中斷續傳）
在目標儲存庫中維護 demo/PROGRESS.md：每個步驟一行，包含狀態（待辦 / 進行中 / 完成）以及產生的成品路徑。在每次工作階段中先讀取它；半完成的流程會從最後一個問題處恢復，而不是重新開始。在每個步驟後更新它。
決策規則
- 使用者沒有腳本或故事 → 從 01 開始。永遠不要從撰寫程式碼開始。
- 使用者有會卡頓的影片 → 僅執行 04（逐幀錄製解決此問題）。
- 使用者在現有影片上想要音效 → 執行 06（提示檔案 + 混音器），如果需要音樂則執行 07。
- 使用者的示範「感覺很假」 → 套用 01 和 03 中的誠實規則（真實資料、核對總計）。
- 使用者詢問時間長度或形狀 → 45-60 秒，每個場景一個主張，約 6 個場景，弧線：問題 → 節奏點 → 魔法 → 互動 → 證明 → 品牌。
- 語音複製聽起來緩慢且平淡 → 套用 05 中的修正。
- 音效延遲或淹沒 → 套用 06 中的測量打擊點偏移 + 峰值正規化。
不可妥協的原則（即使未要求也必須執行）
- 誠實資料。 固定資料必須是真實的：真實項目、列印的價格、能夠核對一致的總計。永遠不要發明更整齊的數字。
- 沒有淡入淡出。 所有內容都應採用標記、滑入、撕裂或快照方式。淡入淡出讀起來像在道歉。動畫曲線最多只存在於三個共用的輔助函式中。
- 絕不螢幕錄製。 透過尋找合約（seek contract，詳見 04）逐幀渲染。
- 沒有聲音比強迫加入的聲音好。 每分鐘最多約 10 個提示，每個故事轉折一個，不要連續重複。
- 兩個母版。 字幕嵌入版 + 乾淨版，來自同一個組合，透過
window.__NO_CAPTIONS標記區分。 - 沒有純黑色。 每個暗場景都應以產品本身的藝術或桌布為背景，經模糊和調暗處理；第一個影格就是縮圖。僅在黑色是產品的真實表面時（見 03）才使用純黑色。
範本
範本/ 目錄中包含可用的腳本：record.mjs（確定性的 Playwright 幀渲染器，可中斷續傳）、mix-audio.mjs（提示驅動的 ffmpeg 混音器；--vo 用於重新調整時間的旁白音軌，--bgm 用於背景音樂）、retime-vo.mjs（在靜音處剪切生成的朗讀，並將每個短語放置在其指定的時間碼上）、sfx-cues.example.json（一個真實的 10 提示配樂）、package.json（npm 腳本）。將它們複製到目標儲存庫中的 demo/ 目錄，並調整路徑；每個配方都會說明何時執行此操作。
輔助技能
如果目標儲存庫使用 Remotion 或 ElevenLabs，請一併安裝它們的官方技能；此技能涵蓋流程與品味，它們的技能涵蓋各自的 API：
npx skills add remotion-dev/skills
npx skills add elevenlabs/skills
使用者收到的內容（除了影片之外）
兩個準備好貼上的成品，讓人類的工作量正好是兩次貼上作業：一個用於語音工具的標籤式旁白區塊（05），以及一個用於音樂生成器的風格提示（07）。永遠不要讓使用者自行撰寫其中任何一個。
參考輸出
四個示範證明了此流程在不同產品上的有效性：Vouch 示範（54.3 秒，帳單拆分）、Excalidraw 示範（35.5 秒，在實際的 @excalidraw/excalidraw npm 元件上拍攝，原始碼在此儲存庫的 examples/excalidraw 下）、Asakiri Studio（54 秒，一個 Tauri+React 課程編輯器，使用 esbuild 捆綁的真實元件）、以及 Colosseum（54 秒，一個 Qt/QML Windows 媒體應用程式，從其令牌及其自身的螢幕截圖重建表面；請參閱 02 中的原生應用程式路徑）。Vouch 儲存庫 github.com/Anshgrover23/vouch 包含了完整的運作中 demo/ 目錄、組合、供應的執行時、提示檔案、字幕，作為參考實作。包含每個數字和失敗的手冊：https://anshgrover23.github.io/product-demo-playbook/