sanky369/vibe-building-skills

Remotion 腳本撰寫器

將影片目標（可選加上程式碼庫）轉換為 Remotion 腳本 JSON——一個場景接一個場景的規格，精確到讓 Remotion 代理無需追問即可實作。核心原則：腳本是渲染的唯一真理來源——每個持續時間、元素、動畫和旁白都以數字和確切字串表示，絕不使用「大約 5 秒」或「一些介紹文字」。兩個代理收到相同輸入時，必須產生結構完全相同的腳本。

使用時機與不使用時機

• 當輸出將透過 Remotion 以程式方式渲染時使用：Web 應用程式的產品展示、含動畫程式碼的教學影片、動態圖形作品、資料視覺化影片、短格式社交動畫。
• 產品影片的概念與節拍尚未決定 → 先執行 skills/creative/product-video；其節拍表將成為此技能的場景列表。
• 人物面對鏡頭影片 → skills/creative/talking-head（Remotion 不是合適工具）。
• 靜態圖形 → skills/creative/social-graphics。
• 此技能僅撰寫腳本 — 實作 React 元件、在 Remotion Studio 中預覽及渲染，均由下游的 Remotion 代理技能處理。

規則文件 — 撰寫腳本前請先閱讀

• rules/prompt-structure.md — 建構腳本的輸入欄位（目標、目標受眾、程式碼、影片類型、持續時間、風格、動畫、轉場）。在將輸入標準化為輸入物件時閱讀。
• rules/script-generation.md — 權威的輸出 JSON 結構與生成指示。發送腳本前務必閱讀；以下骨架僅為摘要，該檔案才是合約。
• rules/animation-patterns.md — 經核准的動畫/轉場詞彙表，附有確切的 JSON 形狀與時間指南。指定任何 animation 或 transitionToNextScene 值時閱讀；請勿發明該文件以外的動畫類型。
• rules/scene-templates.md — 常見情況的現成場景 JSON（標題卡、功能展示、程式碼導覽、資料視覺化、結尾/CTA）。當場景符合已知模式時閱讀；從模板開始並編輯。
• examples/product-demo-example.json — 完整的實作腳本。閱讀以校準精細程度。

輸入

一次性詢問所有遺漏的項目，僅限缺少的（欄位名稱依 rules/prompt-structure.md）：

1. 目標 與 目標受眾 — 影片應達成什麼目的？為誰而作？
2. 影片類型 — product-demo | coding-tutorial | animation | data-visualization | social-media？
3. 持續時間（秒）與發佈平台（決定寬度/高度/FPS）。
4. 程式碼 — 程式碼庫路徑、儲存庫 URL 或程式碼片段，若影片涉及應用程式或程式碼。
5. 風格 — 視覺/品牌限制（顏色、字型、標誌；若有 skills/creative/creative-strategist 風格指南則使用）。

推論而非詢問：從程式碼庫推斷 語言；從平台推斷尺寸（1920×1080 橫向預設，1080×1920 垂直社交，FPS 30）；若未指定，從 風格 推斷動畫/轉場偏好。不要停滯： 只要已知目標、影片類型與持續時間，即可陳述假設並繼續。

工作流程

1. 分析原始素材

若提供 程式碼，則探索它：找出關鍵功能、使用者流程、資料結構與值得展示的 UI 表面。根據 目標 相關性對功能排序 — 影片僅展示前 3–5 項，而非全部。若無程式碼，則從使用者描述中提取等效列表。

2. 結構化場景

依 影片類型 的決策規則：

• product-demo → 標題卡 → 問題/情境 → 每個功能一個場景（前 3–5 項）→ 結尾/CTA。
• coding-tutorial → 標題 → 概念設定 → 每個程式碼步驟一個場景（展示程式碼，然後解釋）→ 總結。
• data-visualization → 標題 → 情境 → 每個圖表/洞察一個場景 → 要點。
• social-media → 鉤子場景（≤3 秒）→ 1–2 個回報場景 → CTA；總時長 ≤60 秒。
• animation → 從創意概念（或 skills/creative/product-video 節拍表）推導節拍。

時間計算為強制要求：場景持續時間加上轉場重疊必須精確等於 duration。TransitionSeries 轉場會與相鄰場景重疊 — 需考慮重疊，而非直接相加持續時間。總時長保持在約 5 分鐘以下（渲染效能啟發式原則）。

3. 完整指定每個場景

為每個場景填寫所有欄位：sceneNumber、title、durationInSeconds、visuals.background、visuals.elements[]（type、確切內容字串、字型、大小、顏色、位置、來自 rules/animation-patterns.md 的 animation）、audio.voiceover（確切的口述句子 — 確認其能在約 2.5 字/秒的速度下符合場景持續時間）及 transitionToNextScene。若情況相符，使用 rules/scene-templates.md 模板。

4. 編譯資產與技術需求

列出所有場景中引用的每個圖片、影片片段、音軌、字型與標誌於 requiredAssets 中 — 任何被引用的項目都不能遺漏。資產生成超出範疇：將每個標記為使用者提供或精確描述；靜態圖片可透過 skills/creative/image-generation 產生（儲存庫管道：docs/creative_cli.py，模型 fal-ai/nano-banana-pro）。列出 remotionPackages（例如每當使用轉場時需用 @remotion/transitions）以及任何第三方函式庫。

5. 根據品質門檻驗證，然後交付 JSON

傳遞腳本以及交接備註（見下方）。下游的 Remotion 代理將生成元件、設定合成、在 Studio 中預覽並渲染。

必要輸出格式

發送一個完全符合 rules/script-generation.md 結構的 JSON 物件：

{
  "videoMetadata": {
    "title": "...",
    "durationInSeconds": 60,
    "width": 1920,
    "height": 1080,
    "fps": 30,
    "videoType": "product-demo"
  },
  "scenes": [
    {
      "sceneNumber": 1,
      "title": "...",
      "durationInSeconds": 5,
      "visuals": {
        "background": "#RRGGBB 或資產引用",
        "elements": [
          {
            "type": "text|image|code|chart",
            "content": "確切內容",
            "animation": {
              "type": "<來自 rules/animation-patterns.md>",
              "durationInSeconds": 1
            }
          }
        ]
      },
      "audio": {
        "voiceover": "確切的口述句子。"
      },
      "transitionToNextScene": {
        "type": "<來自 rules/animation-patterns.md>",
        "durationInSeconds": 1
      }
    }
  ],
  "requiredAssets": {
    "images": [],
    "videos": [],
    "audio": [],
    "fonts": [],
    "logos": []
  },
  "technicalRequirements": {
    "remotionPackages": [],
    "thirdPartyLibraries": []
  }
}

在 JSON 後附上簡短的 Markdown 交接備註：總持續時間檢查（顯示場景數學計算）、您所做的 1–3 個假設，以及使用者在渲染前必須提供的資產。

品質門檻（交付前檢查）

• 場景持續時間加上轉場重疊總和精確等於 videoMetadata.durationInSeconds；在交接備註中顯示算術過程。
• 每個 animation 與轉場 type 都存在於 rules/animation-patterns.md 中 — 無自創類型。
• 每個旁白句子符合其場景的約 2.5 字/秒速度；沒有場景包含旁白或標題未說明用途的視覺元素。
• 場景中引用的每個資產都出現在 requiredAssets 中；文字元素使用的字型需列出。
• 規格中內建 Remotion 正確性：基於影格的時間控制（透過 useCurrentFrame()）、使用 damping: 200 的彈簧效果進行揭示、透過字串切片（而非逐字元不透明度）實現打字機效果、僅使用確定性亂數（來自 Remotion 的 random()，絕不使用 Math.random()）、在重型序列上使用 premountFor、使用 <Sequence>/<Series>/<TransitionSeries> 進行排序。
• content 欄位為最終文案，而非「功能說明在此」這類佔位符。
• 旁白為自動草稿 — 在交接備註中標示使用者可能想要完善。

整合

• skills/creative/product-video → 輸入：產品影片的概念 + 節拍表 + 關鍵影格；每個節拍成為一個場景。
• skills/creative/creative-strategist → 輸入：風格指南（顏色、字型、氛圍），應用於 visuals 與 style。
• skills/creative/original-design → 輸入：設計語言簡報；每個場景的視覺詞彙必須來自該領域。
• skills/creative/image-generation → 產出：列在 requiredAssets.images 中的靜態資產。
• skills/creative/social-graphics → 消費：渲染後的靜態圖片/縮圖，用於貼文資產。
• 下游：Remotion 代理技能（此儲存庫外部）消費 JSON 以構建元件、預覽與渲染。