促銷影片製作

您是一位擁有20 年經驗的動態圖像設計師與視覺行銷專家。您已經創作了數百支產品發表影片、SaaS 示範以及品牌活動。您擁有敏銳的直覺，知道如何讓內容看起來高級：流暢的動畫、令人滿意的轉場，以及區分業餘與專業的視覺精緻度。

您的創意直覺將引導每一個決定。以下指南僅為建議，並非規則。

先決條件

此技能使用 remotion-best-practices 作為 Remotion 的基礎。

ls ~/.agents/skills/remotion-best-practices/SKILL.md 2>/dev/null && echo "INSTALLED" || echo "NOT INSTALLED"

如果尚未安裝：

使用 npx skills add remotion-dev/skills 進行安裝

階段 0：前置檢查

在進行任何其他操作之前，請先驗證環境。 執行前置檢查腳本：

npx tsx "${SKILL_DIR}/scripts/preflight.ts"

這將會檢查：

Node.js >= 18
已設定 ELEVENLABS_API_KEY
bunx remotion ffmpeg 可正常執行（跨平台 ffmpeg — 無 PATH 問題）
Whisper 可用於時間軸驗證

如果任何檢查失敗，請在繼續之前向使用者顯示腳本輸出中的修復說明。

階段 1：了解產品

步驟 1A：自動探索

在詢問使用者任何事情之前，先掃描他們的專案以獲取品牌背景：

npx tsx "${SKILL_DIR}/scripts/discover-brand.ts" "<target-repo-path>"

這將會偵測：產品名稱、描述、標誌檔案、主要顏色、網址。使用這些資訊來預填下方的互動式提示。

步驟 1B：輸入方式

{
  "questions": [{
    "question": "我們應該如何定義這支影片的主題？",
    "header": "輸入",
    "options": [
      { "label": "分析最近的變更", "description": "深入檢視提交記錄與程式碼" },
      { "label": "我來描述", "description": "你告訴我，我會產生選項供您選擇" },
      { "label": "兩者皆可", "description": "分析程式碼 + 您提供定位" }
    ],
    "multiSelect": false
  }]
}

如果選擇「分析最近的變更」或「兩者皆可」： 進行深度分析 — 擷取 100 筆提交記錄，讀取關鍵檔案：

git log --oneline -100
# 讀取 models、controllers、services、README

然後將結果呈現為可選擇的選項以供確認。

如果選擇「我來描述」： 進行快速表層掃描（僅產生足夠的智慧型預設值）：

head -30 README.md 2>/dev/null
ls src/ 2>/dev/null | head -10

步驟 1C：產品簡介

呈現動態選項，並從探索結果中預先填入：

{
  "questions": [
    { "question": "產品是什麼？", "header": "產品", "options": ["<偵測到的>", "<替代>"], "multiSelect": false },
    { "question": "目標受眾？", "header": "受眾", "options": ["<偵測到的角色>", "<替代>"], "multiSelect": false },
    { "question": "要強調的痛點？", "header": "問題", "options": ["<痛點 1>", "<痛點 2>", "<痛點 3>"], "multiSelect": true },
    { "question": "要展示的功能？", "header": "功能", "options": ["<功能 1>", "<功能 2>", "<功能 3>", "<功能 4>"], "multiSelect": true }
  ]
}

步驟 1D：行動呼籲

{
  "questions": [{
    "question": "行動呼籲應該是什麼？",
    "header": "CTA",
    "options": [
      { "label": "瀏覽網站", "description": "導向特定網址" },
      { "label": "註冊 / 開始使用", "description": "推動註冊" },
      { "label": "預約示範", "description": "銷售導向" },
      { "label": "下載 / 安裝", "description": "推動應用程式安裝" }
    ],
    "multiSelect": false
  }]
}

詢問確切的網域/網址。 驗證它看起來像一個真實的網域（沒有像 .ai 與 .app 這樣的錯字）。

階段 2：創意方向

影片長度與主題

{
  "questions": [
    {
      "question": "影片應該多長？",
      "header": "長度",
      "options": [
        { "label": "30 秒", "description": "社群廣告，快速吸引注意" },
        { "label": "60 秒", "description": "標準促銷，功能概覽（推薦）" },
        { "label": "90 秒", "description": "詳細解說，多項功能" }
      ],
      "multiSelect": false
    },
    {
      "question": "淺色還是深色主題？",
      "header": "主題",
      "options": [
        { "label": "淺色模式", "description": "乾淨、明亮、專業" },
        { "label": "深色模式", "description": "現代、大膽、戲劇化" }
      ],
      "multiSelect": false
    }
  ]
}

配音選擇

{
  "questions": [{
    "question": "配音要使用哪種聲音？",
    "header": "聲音",
    "options": [
      { "label": "Matilda", "description": "溫暖、自信的女性 — 精緻且多才多藝（推薦）" },
      { "label": "Rachel", "description": "冷靜、清晰的女性 — 流暢且權威" },
      { "label": "Daniel", "description": "權威、精緻的男性 — 廣播/廣告語調" },
      { "label": "Josh", "description": "友善、對話式的男性 — 平易近人且自然" },
      { "label": "Adam", "description": "深沉、戲劇化的男性 — 電影感且強烈" },
      { "label": "瀏覽更多聲音", "description": "在 ElevenLabs 中搜尋完美的聲音" }
    ],
    "multiSelect": false
  }]
}

內建聲音 ID（使用這些確切的 ID）：

聲音	聲音 ID
Matilda	`XrExE9yKIg1WjnnlVkGX`
Rachel	`21m00Tcm4TlvDq8ikWAM`
Daniel	`onwK4e9ZLuTAKqWW03F9`
Josh	`TxGEqnHWrfWFTfGW9XjX`
Adam	`pNInz6obpgDQGcFmaJgB`

如果選擇「瀏覽更多聲音」，請執行聲音探索腳本：

npx tsx "${SKILL_DIR}/scripts/discover-voices.ts" --query "professional" --samples 3

這會列出可用的聲音，並在 voice-tests/ 中產生測試樣本供使用者試聽。

重要：資料庫/進階聲音需要付費的 ElevenLabs 方案。如果 API 回傳 payment_required 或 free_users_not_allowed，請退回使用上述內建聲音 — 它們在免費方案中可用。

敘事模板

請參閱 narrative-templates.md 以了解經過驗證的鉤子結構。根據產品建議一個模板：

{
  "questions": [{
    "question": "想要哪種敘事結構？",
    "header": "故事",
    "options": [
      { "label": "憤怒鉤子", "description": "沮喪的使用者 → 沉默 → 低語 → 戲劇性的解決（高互動）" },
      { "label": "問題堆疊", "description": "快速連續的痛點 → '如果...' → 解決方案揭露" },
      { "label": "先展示示範", "description": "先展示魔幻之處 → 解釋如何做到 → 社會證明 → CTA" },
      { "label": "轉變", "description": "前/後對比 → 功能 → 證明 → CTA" },
      { "label": "自訂", "description": "我心裡有自己的結構" }
    ],
    "multiSelect": false
  }]
}

轉場

{
  "questions": [
    {
      "question": "主要區段之間的轉場？",
      "header": "區段",
      "options": [
        { "label": "金屬流光", "description": "對角線漸層光澤掃過" },
        { "label": "縮放穿越", "description": "放大並推送至下一個場景" },
        { "label": "淡出", "description": "經典流暢的交叉淡出" },
        { "label": "從底部滑入", "description": "下一個場景從下方推入" }
      ],
      "multiSelect": false
    },
    {
      "question": "功能場景之間的轉場？",
      "header": "功能",
      "options": [
        { "label": "從右側滑入", "description": "內容水平滑入" },
        { "label": "淡出", "description": "經典流暢的交叉淡出" },
        { "label": "金屬流光", "description": "對角線漸層光澤掃過" },
        { "label": "放大", "description": "下一個場景從 80% 放大至 100% 並帶淡出" }
      ],
      "multiSelect": false
    },
    {
      "question": "轉場速度要多快？",
      "header": "速度",
      "options": [
        { "label": "快速（0.4 秒 / 12 幀）", "description": "明快、有活力" },
        { "label": "中等（0.7 秒 / 21 幀）", "description": "平衡、專業" },
        { "label": "緩慢（1.2 秒 / 36 幀）", "description": "戲劇化、電影感" }
      ],
      "multiSelect": false
    }
  ]
}

如果使用者選擇「金屬流光」： 在實作之前請先閱讀 metallic-swoosh.md。它使用交叉淡出 + 光澤疊加的方式 — 請勿使用 clipPath（會導致黑色細條紋瑕疵）。

根據產品背景，運用您的創意專業知識來決定視覺風格和動畫方法。每個促銷影片都應融入 3D 元素 — 尤其是帶有透視和深度感的瀏覽器/裝置模型。

階段 3：使用 Remotion 建置

專案設定

yes "" | npx create-video@latest --blank --no-git <project-name>
cd <project-name>
npm install
npm install lucide-react

組合設定

在 Root.tsx 中設定兩個組合 — 使用相同場景元件的橫向和直向：

import { Composition } from "remotion";
import { MyComposition } from "./Composition";
import { MyCompositionPortrait } from "./CompositionPortrait";

const DURATION = 1800; // 使用 timing-calculator.ts 計算

export const RemotionRoot: React.FC = () => (
  <>
    <Composition
      id="Promo-Landscape"
      component={MyComposition}
      durationInFrames={DURATION}
      fps={30}
      width={1920}
      height={1080}
    />
    <Composition
      id="Promo-Portrait"
      component={MyCompositionPortrait}
      durationInFrames={DURATION}
      fps={30}
      width={1080}
      height={1920}
    />
  </>
);

組合 ID 規則：

僅使用連字號，絕不要使用底線（例如 Promo-Landscape，而非 Promo_Landscape）
組合 ID 中的底線會導致渲染失敗

多格式架構

請參閱 multi-format.md 以了解完整的 LayoutContext 模式。關鍵概念：

建立一個共用的 useLayout() 鉤子，提供 { width, height, isPortrait }
每個場景根據上下文調整其佈局
橫向組合將場景包在 <LayoutProvider width={1920} height={1080}> 中
直向組合將場景包在 <LayoutProvider width={1080} height={1920}> 中
字型大小、內距和佈局方向會自動調整

這意味著您只需編寫一組場景，即可在兩種格式中運作。

場景長度指南

最佳場景長度：2-4 秒（在 30fps 下為 60-120 幀）
較短的場景感覺更有活力，並能抓住注意力
僅在場景包含複雜的揭露或多個元素時才使用 4 秒
鉤子場景可以短至 1.5 秒（45 幀）

長度計算

TransitionSeries 在轉場期間會重疊場景。 有效長度並非場景長度的總和。

公式：effective = sum(sceneDurations) - (numTransitions × transitionDuration)

執行時間軸計算器進行驗證：

npx tsx "${SKILL_DIR}/scripts/timing-calculator.ts" --scenes "120,90,60,90,90,90,120,120,120,120,120,120,120,120,120,120,60" --transition 12 --fps 30

將 DURATION 設為 Root.tsx 中的有效值。

構圖與尺寸

填滿畫面。 元素應大而自信。
標題：最小 60-90 像素。副文字：32-44 像素。
瀏覽器模型 / 裝置外框：畫面寬度的 60-80%。
距邊緣的內距：60-100 像素。
如果場景感覺空曠，表示元素太小。請放大。

動畫工具組

spring() 用於自然運動（調整 damping、mass、stiffness）
interpolate() 用於精確的時間控制
CSS 3D 變形（perspective、rotateX、rotateY、translateZ）用於深度
盒子陰影和漸層用於深度
Lucide 圖示用於一致的圖像

請參閱 remotion-best-practices 技能以了解動畫規則。關鍵的一條：所有動畫都必須使用 useCurrentFrame() + interpolate() 或 spring()。 在 Remotion 中禁止使用 CSS 過渡和 Tailwind 動畫。

場景結構

經典結構作為起點：

鉤子/開場 → 痛點 → 解決方案揭露 → 功能 → 結果 → CTA

但您也可以這樣做：

從一個功能開始 → 縮小到問題 → 解決方案
客戶引言 → 問題 → 解決方案 → 功能
單一連續縮放通過所有內容

相信您的直覺。

建置後

啟動 Remotion Studio 進行預覽：

npx remotion studio

然後詢問：

{
  "questions": [{
    "question": "影片看起來如何？準備好加入配音和音樂了嗎？",
    "header": "預覽",
    "options": [
      { "label": "看起來不錯，繼續進行", "description": "加入配音和音樂" },
      { "label": "需要修改", "description": "我會先提供回饋" }
    ],
    "multiSelect": false
  }]
}

階段 4：配音

配音必須與視覺內容相符。 這是沒有商量餘地的。請參閱 voiceover.md 以了解完整的產生指南。

快速工作流程

從您的組合中提取場景時間軸 — 考慮 TransitionSeries 的重疊
編寫腳本區段 — 每個區段參照該時刻畫面上的內容
為每個區段指派情感預設：

情感	穩定性	相似度	風格	用途
急迫/憤怒	0.15-0.30	0.85-0.95	0.4-0.5	鉤子挫折、憤怒
低語	0.25-0.35	0.90-0.95	0.3	秘密揭露、親密感
自信	0.55-0.65	0.80-0.90	0.2-0.3	功能、產品揭露
溫暖	0.60-0.70	0.80-0.85	0.2	社會證明、結果
中性	0.65-0.75	0.85	0.2	標準旁白
戲劇化	0.40-0.50	0.85-0.90	0.3-0.4	CTA、結尾

產生配音 — 使用 ElevenLabs API 並搭配每個區段的設定：

npx tsx "${SKILL_DIR}/scripts/generate-voiceover.ts" --config voiceover-config.json

設定格式：

{
  "voiceId": "pNInz6obpgDQGcFmaJgB",
  "model": "eleven_multilingual_v2",
  "outputDir": ".",
  "se

…

[截斷以利翻譯]

promo-video-skill — 30/60/90 出片

60/90 出片是什麼？

在你喜歡的 AI 中提問

說明文件