bayvibe/promo-video-skill

Promo 影片技能 (Remotion)

從網站 URL 或使用者提供的品牌資訊產生宣傳影片。

兩種路徑

路徑 A：使用者提供了網站 URL

當使用者提供 URL 時：

1. 執行 python generate_promo.py --source <url> 來產生 src/data/brand.json 和 src/data/script.json
2. 立即向使用者顯示產生的腳本 — 呈現簡潔摘要：

   品牌名: xxx
   Tagline: xxx
   主色調: #xxx
   場景規劃:
     1. Intro (3s) — 品牌Logo + 名稱 + tagline
     2. Feature (5s) — 功能1 / 功能2 / 功能3
     3. Dashboard (4s) — 產品介面展示
     4. CTA (3s) — "xxx" + 按鈕
   

3. 詢問：「確認這個腳本，還是需要調整？」
4. 確認後，執行 npm run dev 並告知使用者前往 http://localhost:3000 預覽

路徑 B：使用者未提供任何資訊

當使用者只說「產出影片」/「做一個宣傳片」但沒有提供具體細節時，不要開始編寫程式碼。相反地，一次性地詢問下列問題：

1. 品牌名是什麼？（或者你要推廣的產品/專案名）
2. 一句話描述你的產品（用作 tagline）
3. 有品牌色嗎？（沒有的話我會幫你選）
4. 想突出哪幾個賣點？（最多3個）
5. 有網站 URL 嗎？（有的話我可以自動抓取資訊）

一旦使用者回答，直接根據他們的回答撰寫 src/data/brand.json 和 src/data/script.json。然後顯示腳本摘要並確認（與路徑 A 的步驟 2-3 相同）。

確認之後

1. 執行 npm run dev 啟動 Remotion Studio
2. 告知使用者前往 http://localhost:3000 預覽
3. 若要匯出：npx remotion render PromoVideo out/promo.mp4

設計指導原則

視覺原則

• 填滿畫面，減少留白 — 中間場景（Feature / Dashboard）用 flex: 1 或全寬佈局撐滿 1920×1080 畫布，避免大片空白
• 避免模板化重複版式 — 同一條影片裡不要反覆使用「左大標題 + 右卡片/mockup + 底部字幕」的骨架。每條影片至少使用 3 種明顯不同的構圖：例如滿版標題、斜向 ticker、中心軸構圖、拼貼式卡片、雜誌式分欄、全螢幕產品介面、程式碼 overlay、時間線/路徑式構圖。
• 同影片卡片圓角必須一致 — 每條影片定義一個 CARD_RADIUS token，所有卡片、面板、mockup 容器、feature blocks 使用同一個值。不要同一條影片裡一會兒直角、一會兒 12px、一會兒 34px。字幕、logo、小按鈕、進度條可以有自己的功能性圓角，但內容卡片必須統一。
• 卡片不是預設答案 — Feature 場景可以用錯位拼貼、縱深層疊、ticker、節點圖、編輯器面板、產品截圖裁切等方式表達；不要預設三等寬卡片橫排。
• 結尾頁必須換一種收束方式 — CTA/Ending 不要預設複用前面場景的左標題右卡片或左標題左按鈕。優先使用居中 lockup、海報式排版、環繞式資訊塊、全螢幕 typographic close、或品牌/網址作為視覺中心，形成明確的最後一拍。居中構圖時，CTA 按鈕和網址必須上下排列，保持中心軸線穩定。
• 主色調取自網站 CTA 按鈕 — 品牌色必須從 button/a 元素的 inline style 提取漸變色，不是隨機 CSS 顏色
• 全域字幕 — 每個場景底部居中顯示字幕條（藥丸形半透明背景），字號 32px，padding 18px 48px，彈簧動畫入場。字幕透過 script.json 每個場景的 subtitle 欄位控制，不設則不顯示
• 只支援 URL 輸入 — SVG 模式已移除，只接受網站 URL 作為資料來源

抓取規則

• 品牌名優先使用 og:site_name，其次 title tag（取 - 或 | 分隔的第一段）
• Tagline 優先使用 og:description，截斷到 80 字元以內
• 品牌色優先提取 button/CTA 元素 inline style 中的 gradient 顏色
• Feature 標題過濾長度 < 45 字元，跳過過長的句子
• 檢測網站 light/dark 主題，自動匹配背景色和文字色

資料驗證清單

產生資料後，檢查以下問題再給使用者確認：

• 品牌名是否簡短乾淨（不是完整 HTML title）
• Tagline 是否 < 80 字元
• 主色調是否來自 CTA 按鈕（不是隨機色）
• Feature 是否恰好 3 個，標題簡短有力
• 各場景文字在 1920×1080 畫布上是否可讀

視覺自檢清單（必須執行）

實現或修改影片後，必須自己做視覺審查，不能只跑 lint：

1. 執行 npm run lint
2. 用 npx remotion compositions src/index.ts 確認 composition 存在、時長正確
3. 每個主要場景至少匯出 1 張 still，自查佈局。例如：

   npx remotion still src/index.ts <CompositionId> /tmp/<id>-scene1.png --frame=30
   npx remotion still src/index.ts <CompositionId> /tmp/<id>-scene2.png --frame=120
   npx remotion still src/index.ts <CompositionId> /tmp/<id>-scene3.png --frame=210
   

4. 打開關鍵幀圖片檢查以下問題，發現任何一項必須先修復再交付：
   • 沒有關鍵文字、按鈕、字幕被裁切或超出畫布
   • 有意出血的裝飾/運動版式（如 ticker、背景圖形、超大標題裁切）必須看起來是設計選擇，而不是錯誤；可以越出畫布
   • 卡片內部控制項沒有越過卡片邊界，包括進度條軌道、圖表條、輸入框、按鈕、狀態條；這類無意溢出必須修復
   • 沒有元素互相遮擋到無法閱讀
   • 字幕居中，且沒有壓住主要 CTA 或核心畫面
   • 同一影片內所有內容卡片/面板/mockup 容器使用同一個 CARD_RADIUS
   • 至少 3 種不同版式，不是整條影片都在重複同一左右分欄結構
   • 畫面邊緣留有安全區：關鍵文字距離邊緣至少 64px
   • 長單詞、長 headline、按鈕文案沒有溢出容器
5. 使用者如果只要在 Studio 預覽，不要重複匯出 mp4；確保 http://localhost:3000 可打開即可。

檔案結構

src/
├── Root.tsx              # Remotion composition registration
├── PromoVideo.tsx        # Main video orchestrator
├── scenes/
│   ├── Scene01_Intro.tsx     # Logo + 品牌名 + tagline
│   ├── Scene02_Feature.tsx   # 三卡片等寬橫排彈入
│   ├── Scene03_Dashboard.tsx # 全寬產品介面模擬
│   └── Scene04_CTA.tsx       # 行動呼籲 + 按鈕
└── data/
    ├── script.json       # 影片腳本（文案、時序）
    └── brand.json        # 品牌資料（顏色、字型、Logo）

資料格式

brand.json

{
  "name": "Brand Name",
  "tagline": "One line description",
  "colors": {
    "primary": "#3E4E33",
    "secondary": "#687058",
    "background": "#FFFFFF",
    "surface": "#F8FAFC",
    "text": "#0F172A",
    "textSecondary": "#64748B",
    "accent": "#3E4E33"
  },
  "font": "Inter, sans-serif",
  "logoUrl": "",
  "features": [
    { "title": "Feature 1", "description": "Short desc" },
    { "title": "Feature 2", "description": "Short desc" },
    { "title": "Feature 3", "description": "Short desc" }
  ],
  "cta": {
    "headline": "Ready to get started?",
    "buttonText": "Get Started Free",
    "url": "https://example.com"
  }
}

script.json

{
  "fps": 30,
  "width": 1920,
  "height": 1080,
  "scenes": [
    { "id": "intro", "duration": 90, "headline": "", "subtext": "", "subtitle": "" },
    { "id": "feature", "duration": 150, "headline": "", "subtitle": "", "items": [] },
    { "id": "dashboard", "duration": 120, "headline": "", "subtitle": "" },
    { "id": "cta", "duration": 90, "headline": "", "buttonText": "", "subtitle": "" }
  ]
}

自訂

• 編輯 src/data/brand.json 可變更顏色、字型、Logo、品牌名稱
• 編輯 src/data/script.json 可變更場景文案與時序
• 編輯 src/scenes/ 中的場景元件可調整版型/動畫