KishoreCR728/project-video

Project-to-Video

將任何專案轉換為高級行銷影片。該技能在專案的儲存庫內（或針對網址）執行，分析產品實際內容，並基於真實功能與真實 UI 生成 Remotion 影片。

黃金規則：流程為 分析 → 分鏡 → 核准 → 建置 → 渲染。在分鏡腳本獲得使用者核准之前，絕對不要撰寫任何 Remotion 程式碼。

自動模式： 如果使用者的請求包含「全自動」、「無需中斷」、「一氣呵成」、「自動駕駛」，或明確要求不間斷的端到端運行，則切換至自動模式：跳過分鏡核准暫停（直接寫入 video/storyboard.md，並聲明您正以自動模式進行，然後繼續建置），自動決定所有開放問題，採用合理的預設值（解說類型、1080×1920 @ 30fps，品牌標記按標準優先順序），僅在遇到真正障礙時才停止（網站無法訪問、經三次修復嘗試仍失敗的渲染錯誤）。啟動本地開發伺服器仍需明確的使用者授權 — 但如果使用者提供了運行命令，或儲存庫具有明確的標準開發命令（npm run dev、docker compose up），則將「全自動」本身視為該授權。在自動模式下，仍需連同 MP4 一起提供分鏡腳本，以便使用者事後審查並請求場景層級的變更。

階段 0 — 偵測輸入

按優先順序建立您可用的資源：

1. 實際網址（正式或 UAT/暫存）— 最佳來源。若未提供，請向使用者詢問。
2. 本地開發伺服器 — 如果儲存庫已存在但未運行任何服務，提供啟動選項。讀取 package.json / docker-compose.yml / Makefile / README 以找到開發命令。在啟動任何項目之前，請要求使用者確認（環境變數、連接埠和資料庫各有不同）。若無法啟動，則回退至純程式碼分析。
3. 僅程式碼 — 靜態分析儲存庫；視覺元素將為純 SVG 重現。

同時詢問（或從上下文推斷）：

• 哪種影片類型？（解說 / 展示 / 發布 / 預告片 — 參閱 references/video-archetypes.md）
• 哪種畫面比例？預設：1080×1920 直立，30 fps。提供 16:9 和 1:1 作為額外渲染選項。
• 是否有任何品牌標記？檢查儲存庫中是否有設計標記 JSON；否則從實際網站提取顏色/字型；否則使用 assets/brand-theme.json 的預設值。

階段 1 — 分析專案

目標：建立一份 video/project-brief.md 檔案，其中所有後續的宣稱都能追溯到來源。

靜態分析 — 讀取 README、docs/、儲存庫中的登陸頁面文案、路由/頁面結構、功能模組、產品名稱與標語。

實際分析（如果存在網址）— 使用 Playwright 執行 scripts/capture-screens.mjs 以：

• 在目標畫面比例及桌面尺寸下，對關鍵頁面（首頁/英雄區、儀表板、3–5 個核心功能畫面）進行截圖
• 如果影片類型為展示或發布，錄製 1–2 個核心流程的短螢幕錄影（3–6 秒）
• 提取網站實際的顏色、字型與標題文案

撰寫 video/project-brief.md，內容包含：產品是什麼、目標受眾、前 5–7 項功能（每項附上證據來源）、視覺識別（顏色/字型/標誌），以及所捕獲資產的清單（含檔案路徑）。

規則：沒有虛構的功能，沒有誇大的宣稱。 如果不在儲存庫、文件或實際網站中，就不要出現在影片中。

階段 2 — 分鏡腳本（強制核准關卡）

閱讀所選影片類型的 references/video-archetypes.md，了解其場景結構與時長，然後使用僅來自專案簡報的材料，逐一填寫 references/storyboard-template.md 中的每個場景。

• 旁白為螢幕上的文字，非配音。保持螢幕文字簡短（每行最多約 8 個詞彙，同時最多顯示 2 行），並安排節奏使每行都易於閱讀（每個詞彙在螢幕上最少停留 0.35 秒）。
• 預先分配每個場景的幀數預算，使總和完全符合影片類型時長。
• 針對每個場景，標記哪些視覺元素是 SVG，哪些是裝置框架內的實際 UI 截圖（混合風格 — 參閱標準文件）。
• 在結尾包含音樂與音效建議部分（風格、BPM 感覺、重音位置）。請勿尋找或嵌入音訊檔案。

儲存為 video/storyboard.md，呈現給使用者，然後停止。在使用者核准或編輯之前，不要繼續進行。（例外：在自動模式下，呈現分鏡腳本摘要後立即繼續，無需等待。）

階段 3 — 建置 Remotion 專案

獲得核准後，完整閱讀 references/remotion-standards.md — 其中包含所需的動畫值、轉場規則以及混合 SVG + 截圖裝置框架模式。然後建立專案結構：

video/
├── remotion.config.ts
├── src/
│   ├── index.ts            # registerRoot
│   ├── Root.tsx            # 按畫面比例配置的 <Composition>
│   ├── config.ts           # fps、時長、每個場景的幀數預算
│   ├── theme.ts            # 所有顏色/字型/間距 — 單一事實來源
│   ├── scenes/             # 每個分鏡場景一個檔案
│   ├── components/         # DeviceFrame、CountUp、AnimatedChart、ConnectorLine、ParticleField、TextReveal…
│   └── assets/screens/     # 階段 1 捕獲的資產（透過 staticFile 匯入）

嚴格規則：

• 每個顏色、字型、圓角半徑和陰影都來自 theme.ts。場景中不得有硬編碼值。
• 場景時長來自 config.ts，且必須加總等於影片類型總時長。
• 所有圖表/圖示圖形均為內聯 SVG。實際產品 UI 僅能出現在使用階段 1 截圖的 DeviceFrame 元件內部 — 當存在真實截圖時，絕不要用 SVG 偽造產品截圖。
• 全程使用 TypeScript、Remotion 4.x、使用 @remotion/transitions 處理場景切換。

階段 4 — 預覽、渲染、交付

1. npx remotion studio — 驗證每個動畫，以實際播放速度檢查文字可讀性，確認時間安排。
2. 修正問題，然後執行 npx remotion render <CompositionId> out/<archetype>-vertical.mp4。
3. 如果需要，渲染其他畫面比例。
4. 交付：MP4 檔案、storyboard.md、project-brief.md 以及可編輯的專案。說明 theme.ts 和 config.ts 是兩個可用於重新品牌化或重新調整時間的檔案。

參考檔案

• references/video-archetypes.md — 解說（60 秒）、展示（75–90 秒）、功能發布（30 秒）、預告片（15 秒）的場景結構及時長。在階段 0/2 時閱讀。
• references/storyboard-template.md — 每個場景的表格格式。在階段 2 時閱讀。
• references/remotion-standards.md — 動畫值、轉場、混合裝置框架模式、SVG 規則。在階段 3 之前完整閱讀。
• scripts/capture-screens.mjs — Playwright 截圖腳本。在階段 1 時執行（node scripts/capture-screens.mjs <url> <outDir>；需要 npm i playwright + npx playwright install chromium）。
• assets/brand-theme.json — 備用品牌標記；盡可能使用專案提取的值覆蓋。