程式碼生成與渲染
您的任務是將摘要轉換為 plan.json 並將其渲染。參考專案已實作啟動影片語法 - 您只需提供資料，無需從頭編寫影片。
參考專案的打磨水準即是此工具將產生的每支影片的水準。 因此，強烈預設做法為：撰寫 plan.json，不修改其他任何內容。您為單次執行新增的每一行程式碼，都是無法延伸到下一支影片的打磨，也是新的渲染失敗風險。
檔案結構
pitchframe/
├── plan.json ← 場景計畫。這就是影片本身。
├── palette.json ← 提取的色彩。資料，非敘述。
├── public/assets/*.png ← 擷取的螢幕截圖。
├── scripts/
│ ├── extract-palette.mjs ← tailwind → CSS 變數 → 即時 URL
│ ├── apply-palette.mjs ← 從 palette.json 寫入 src/theme.ts
│ └── capture.mjs ← 開發伺服器 + Playwright 擷取
├── src/
│ ├── Root.tsx ← 註冊 LaunchVideo 合成
│ ├── LaunchVideo.tsx ← 將 beats 對應到 Sequences。負責交叉溶解。
│ ├── theme.ts ← 自動生成。所有色彩在此解析。
│ ├── lib/
│ │ ├── types.ts ← plan 合約
│ │ └── motion.ts ← 緩動、淡入淡出、點擊脈衝、保持漂移
│ ├── components/ ← Background, Cursor, FocusOverlay, Zoom, Panel, …
│ └── scenes/
│ ├── TypographyBeat.tsx
│ ├── InteractionBeat.tsx ← 英雄時刻
│ ├── UIBeat.tsx
│ └── CTABeat.tsx
└── output.mp4
撰寫計畫
載入 pitchframe-launch-video 以了解結構與架構。簡要說明：
- 四個部分 — setup、hero、payoff、CTA。按此順序，永遠不變。
- 恰好一個
interactionbeat，且它佔用 至少 30% 的幀數。 - 持續時間來自摘要中的
thesis_weight，而非預設值。 - 將
video_thesis和hero_moment複製到計畫中，以便評論階段能檢查影片是否與聲明一致。
渲染前務必確認算術正確
一次失敗的渲染耗費兩分鐘；一個 beats 漂移的計畫則需要重新渲染加上察覺問題的時間。請手動檢查，每次皆然：
- Beats 連續 — 每個
frames[0]等於前一個frames[1]。 - 第一個 beat 從 0 開始；最後一個 beat 恰好在
total_frames結束。 total_frames === duration_seconds * fps。- 無任何文字排版 beat 少於 45 幀。
- Interaction beat ≥
total_frames的 30%。
思考座標，而非猜測
target_element.coordinates 和 zoom_target 是相對於螢幕截圖的百分比。它們是關於有趣像素所在位置的宣告，如果焦點偏離 10%，英雄鏡頭就會對準空白的瀏覽器 chrome。
開啟螢幕截圖，找到目標元素，轉換為百分比，並驗證結果是否符合 beat 應展示的內容。當動作的後果發生在目標之外的位置（例如拖曳的目的地、更新在其他地方的欄位）時，將 zoom_target 指向後果，而非游標觸及之處。
色彩：絕不出現在計畫中，也絕不出現在元件中
theme.ts 由 apply-palette.mjs 從 palette.json 生成。這是唯一書寫色彩的地方。
node pitchframe/scripts/extract-palette.mjs # → palette.json
node pitchframe/scripts/apply-palette.mjs # → src/theme.ts
由此衍生的規則：
- 絕不將色彩放在
plan.json中。 計畫指定哪個詞被強調；主題定義強調的顏色。 - 絕不將色彩常數寫在元件中。 如果您需要一個主題未提供的色調，請在生成器中新增衍生 token，以便所有後續影片都能使用。
- 絕不手動編輯
theme.ts。 下次生成時它會被覆蓋。
如果兩個產品的影片看起來顏色完全相同，表示 theme.ts 未重新生成。這是最先檢查的事項，然後才處理其他問題。
渲染
cd pitchframe && npx remotion render LaunchVideo output.mp4
先進行三項檢查，耗時一秒鐘，可避免兩分鐘的失敗渲染：
plan.json可解析；上述算術成立。- 計畫中提及的每張螢幕截圖都存在於
public/assets/中。Interaction beat 需要同時有before_screenshot和after_screenshot。 pitchframe/中存在node_modules。如果沒有，請先執行npm install。
預期 20 秒影片需時 20–60 秒渲染。
渲染失敗時
在變更任何內容之前，請先閱讀實際錯誤訊息。
| 狀況 | 原因 | 解決方案 |
|---|---|---|
Cannot find module '../plan.json' | Scaffold 不完整 | 重新執行 npx pitchframe install |
Cannot find name 'ACCENT' 等 | theme.ts 未生成 | 執行 apply-palette.mjs |
| 字型延遲渲染逾時 | 離線，或字型不在 Google Fonts 上 | 在 palette.json 中將 fonts.sans 設為 Inter 並重新生成 |
| 圖片解碼錯誤 | 螢幕截圖損壞或不完整 | 重新擷取該截圖 |
| 合成持續時間不匹配 | total_frames 與 beats 不一致 | 修正算術 |
| OOM / Chrome 崩潰 | 螢幕截圖過大 | 將寬度超過約 4000px 的截圖縮小；使用 --concurrency=2 |
絕不透過重寫合成來回應渲染失敗。請修正資料。
如果渲染連續失敗兩次，請停止並保留證據。 保留 plan.json、palette.json 和資產在原來位置，並告知查看哪個檔案。一次失敗但計畫可檢查的渲染是可恢復的；而透過重寫「修正」的渲染則無法恢復。
何時需要修改元件
僅當計畫需要場景元件確實無法表達的內容時。如果必須修改，請遵循三條規則：
- 新增，絕不重寫。 新的鏡頭運動是
lib/camera.ts中SHOTS的一個條目，而非重構元件 — 並且它必須列在pitchframe-motion-language中，否則永遠不會被選中。 - 使用
lib/motion.ts和lib/camera.ts。EASE、EASE_OUT、clickPulse、heldDrift、entranceBlur是這個領域的標準。手寫的緩動會讓某個 beat 看起來像來自不同的影片。彈簧、彈跳和彈性曲線皆被禁止。 只有一個攝影機系統。 請勿在Stage.tsx之外新增perspective或 3D 變換；這個 repo 曾經有兩個，它們漂移了，導致鏡頭看起來不像同一個人拍攝的。 - 保持資料驅動。 您新增的任何功能都必須能透過
plan.json中的欄位觸發。如果觸發它的唯一方式是編輯元件，那它就是一次性的，不屬於參考專案。
以下操作永遠是錯誤的：色彩常數；將產品名稱或文案硬編碼到元件中；新增頂層合成；改變 1920×1080 / 30fps 的合約；匯入動畫庫。
新增 beat 類型幾乎總是錯誤的解答。 架構中只有四種，因為啟動影片只需要四種。新的 beat 類型通常是偽裝的功能性 beat，而一旦架構能表達功能列表，計畫就會開始包含多餘內容。
渲染成功後
回報路徑和編輯提示：
完成。影片位於 ./pitchframe/output.mp4
如需編輯，只需提出要求：
"延長英雄時刻"
"將鏡頭對準變更的欄位"
編輯由 pitchframe-editing 處理，而非重新執行整個管線。