產品發布影片

設計並打造電影感十足、高衝擊力的產品發布影片，讓觀看者在實際觸碰產品之前，就能先感受到它。

此技能並非侷限於單一美學。視覺風格會根據產品的 DNA 進行調整 — 重要的是，無論選擇哪種方向，其執行成果都必須在動態、燈光、構圖和視覺敘事上，反映出一流的頂尖水準。

核心哲學

三個原則主導每一項決策：

意圖重於裝飾。 每個視覺元素、每個動作、每道光源都必須有其目的。無論是極簡還是極繁，沒有任何東西是為了填補空間而存在。所有一切都服務於推動敘事、凸顯功能，或喚起特定情緒。

感官轉譯。 一部出色的發布影片能讓觀看者感受到產品。將抽象概念（速度、安全性、舒適度）和物理特性（重量、質感、反應性）轉化為視覺和聽覺體驗。如果產品很快，觀看者就應該感受到速度感；如果產品很優雅，觀看者就應該在每個畫面中感受到精緻。

對比掌握。 優秀的影片仰賴並置。運用尺度的對比（微觀細節 vs. 廣角全景）、節奏的對比（狂野的能量 vs. 慢動作揭示）、光線的對比（陰影 vs. 高光）以及音效的對比（寂靜 vs. 重拍），創造出能抓住注意力的動態張力。

使用時機

製作產品發布或公告影片
建立具有電影品質的產品展示或功能導覽
製作品牌揭曉影片或預告片
產出搭配動態圖像的動畫產品展示
為任何產品進行影片結構的故事板和規劃
將產品視覺、照片或概念轉化為影片敘事

階段 0：了解產品

在進行任何視覺工作之前，深入了解你所展示的產品。這將塑造一切。

一次性地詢問使用者（不要分批提問）：

產品 — 這是什麼產品？它做什麼？它解決什麼問題？
受眾 — 誰會看這支影片？開發者？消費者？投資者？內部團隊？
核心訊息 — 觀看者看完後應該記住的「一件事」是什麼？
基調 — 觀看者應該感受到什麼？（印象深刻 / 興奮 / 平靜 / 受到啟發 / 感到賦能）
長度 — 影片要多長？（15 秒預告 / 30 秒短片 / 45-60 秒完整發布 / 90 秒以上深度介紹）
素材 — 你有 Logo、產品照片、螢幕截圖、錄影、品牌色或字型嗎？
旁白 — 影片需要旁白敘述嗎？如果需要，要用什麼語言？對於旁白角色（性別、語氣、能量高低）有偏好的設定嗎？
參考 — 你有欣賞的影片嗎？（例如 Apple 發表會風格、Nike 產品影片、Stripe 開發者美學、俏皮的 Notion 風格、精品手錶廣告等）
發布脈絡 — 這支影片會發布在哪裡？（登陸頁面、X/Twitter、LinkedIn、YouTube、Shorts/Reels/TikTok、投資人簡報、內部展示。）畫面比例、字幕和節奏取決於此。

如果使用者已經在對話中提供了相關脈絡，請從中提取答案並確認遺漏的部分。

關卡：在獲得（從使用者處或從脈絡推斷）上述所有 9 個問題的答案之前，不得進入階段 1。如果提供了素材，請對其進行審核 — 列出所有可用的素材，並規劃在何處使用它們以強化敘事。並非每個素材都必須出現，但不應無理由地忽略任何一個。

階段 1：建立美學

這是最重要的創意決策。 美學必須感覺是專為這個特定產品設計的 — 而不是一個更換了 Logo 的通用模板。

步驟 1.1：選擇視覺方向

根據產品的個性和使用者偏好的基調，提出 2-3 個獨特的美學方向。每個方向應包含：

名稱 — 一個簡短且能喚起情感的標籤（例如：「午夜精準」、「溫暖類比」、「電光脈動」）
氛圍 — 2-3 句描述該方向情感氛圍的文字
色板 — 4-5 種顏色及其十六進制色碼與角色（背景、主色、強調色、文字色、高亮色）
字體排印 — 來自 Google Fonts 或 Fontshare 的標題字 + 正文字體配對（禁止使用 Inter、Roboto、Arial 或系統字型）。字體必須體現產品的個性：
- 優雅的襯線字體（例如 Playfair Display, Cormorant）→ 奢華、編輯感、高級
- 大膽的怪誕無襯線字體（例如 Space Grotesk, Satoshi）→ 科技、大膽、現代
- 幾何無襯線字體（例如 Plus Jakarta Sans, General Sans）→ 乾淨、可信賴、SaaS
- 動態或可變字型（例如 Syne, Cabinet Grotesk）→ 青年文化、創意、俏皮
- 等寬或程式碼字型（例如 JetBrains Mono, Fira Code）→ 開發者工具、終端機美學
字體就是品牌視覺化的聲音。產品個性與字體不匹配，會削弱其他所有設計決策。
動態特徵 — 物件如何移動（彈簧般的快速彈跳、流暢的滑動、有彈性的反彈、電影般的緩慢揭示）
標誌性元素 — 讓這支影片與眾不同的「那一個」視覺主題（漸層網格背景、玻璃擬態卡片、粒子場域、幾何圖案、光條、電影感照片處理、附有說明的產品特寫等）

將這些以簡潔的卡片形式呈現，而非成段的文字。由使用者選擇一個方向或混合其中的元素。

負面範例（「AI 生成產物」檢查清單）

避免這些顯而易見的通用 AI 生成影片跡象：

深色背景搭配紫色漸層（頭號陳腔濫調）
在顯示文字上使用 Inter/Roboto/系統字型
統一的時間節奏 — 所有元素以相同的速度和延遲時間進入
使用表情符號作為圖示
缺乏深度或陰影的平面、均勻照明場景
具有相同動畫的千篇一律的卡片網格
文字只是「淡入」，與內容沒有空間關係
僅僅是純色的背景

關卡：向使用者展示 2-3 個美學方向。在使用者選擇或確認一個方向之前，不得進入階段 2。如果使用者說「就做吧」，請選擇最符合產品個性的方向，並在繼續前明確說出你的選擇。

階段 2：故事板

故事板是藍圖。每個場景都必須證明其存在的合理性。

強制要求：在撰寫任何程式碼之前，先寫出完整的故事板。將其儲存為專案根目錄下的 storyboard.json，並使用下方定義的架構。根據本節末尾的故事板審查檢查表進行驗證。連續兩個展示場景不得使用相同的版面配置或動畫模式。

「無限視覺預算」規則

在構思故事板時，請勿將你的想像力限制在使用者提供的原始素材上。

將使用者提供的 2D 素材（原始螢幕截圖、平面 Logo、基本照片）僅視為概念的種子或基礎紋理。
評估敘事需求。如果故事需要更多的視覺變化、補充場景或 B-roll 來構建更豐富的生態系統，請自然地將其納入故事板。
然而，只有當新的生成素材能積極服務於產品敘事和視覺層級時，才引入它們。不要僅僅為了增加複雜性而生成素材。

敘事弧線

產品發布影片遵循一個戲劇性的結構，即使是短影片也不例外：

幕次	目的	典型時長（30 秒影片）
鉤子	抓住注意力。提出問題、展現張力，或使用一個引人注目的視覺開場。	3-5 秒
揭示	介紹產品。也就是「英雄時刻」。	5-8 秒
展示	展示 2-4 個主要功能。每個功能都有自己的視覺節拍。	12-18 秒
高潮	最令人印象深刻的時刻 — 全螢幕展示、一個戲劇性的數據，或一個「哇」的轉場。	3-5 秒
結尾	Logo、標語、行動呼籲（CTA）。留下持久印象。	3-5 秒

對於較短的影片（15 秒），濃縮為：鉤子 → 揭示 → 結尾。對於較長的影片（60 秒以上），擴充「展示」部分以包含更多功能節拍，並在結尾前加入「社會證明」或「願景」節拍。

在撰寫任何一行程式碼之前，先規劃好影片結構。故事板是創意願景與技術執行之間的契約。

發布與動態消息規則

提早展示產品。 在發布、展示和社交媒體格式中，觀看者應在最初 3 秒內看到產品、產品介面或無庸置疑的產品元素。只有在能立即轉化為產品的情況下，才允許使用抽象鉤子。
為無聲播放設計。 如果影片可能出現在動態消息中，請預設許多觀看者會在無聲狀態下觀看。關鍵聲明、場景節拍、字幕和 CTA 必須在螢幕上可見，即使有旁白也是如此。

影片元數據

在開始建構之前，記錄以下決策：

時長、FPS、解析度 — 衍生自階段 0
發布脈絡 — 衍生自階段 0。記錄影片將發布的位置，以及任何影響節奏、字幕、安全區域或交付成果的限制。
顯示字型 + 正文字型 — 來自階段 1 的美學方向（含字重）
色板 — 定義角色，而不僅僅是顏色：背景、表面（較高層級元素）、主色（標題）、柔和色（次要文字）、強調色（CTA/高亮）、高亮色（特殊時刻）。每個角色都應有明確的使用規則。

敘事結構

選擇最適合產品故事的結構：

問題 → 解決方案 — 最適合解決明確痛點的產品。以問題開場營造張力，揭示產品作為答案，展示功能，以「哇」時刻達到高潮，以 CTA 結尾。
願景 → 現實 — 最適合有抱負的產品或新類別。描繪理想未來，承認差距，展示產品如何填補它，用功能證明，結尾。
蒙太奇 → 聚焦 — 最適合功能豐富的產品或重大更新。快速蒙太奇展示多個功能，暫停並減慢速度，深入探討 2-3 個關鍵功能，透過蒙太奇回歸展現廣度，結尾。
預告（15 秒或更短） — 用抽象視覺引起好奇心，快速閃現產品片段，揭示 Logo + 發布日期。

故事板架構

故事板儲存為專案根目錄下的 storyboard.json。這是唯一的真相來源 — 它驅動實作、旁白生成和時間控制。

{
  "meta": {
    "title": "產品名稱與影片類型",
    "durationSec": "影片總時長（秒）",
    "fps": 30,
    "width": 1920,
    "height": 1080,
    "narrativeStructure": "problem-solution | vision-reality | montage-focus | teaser",
    "fonts": {
      "display": { "family": "Google Fonts / Fontshare 字體系列名稱", "weights": ["700"] },
      "body": { "family": "Google Fonts / Fontshare 字體系列名稱", "weights": ["400", "500"] }
    },
    "colors": {
      "background": "#hex - 基本背景",
      "surface": "#hex - 較高層級元素，如卡片",
      "primary": "#hex - 標題和關鍵文字",
      "muted": "#hex - 次要文字和標籤",
      "accent": "#hex - CTA 和高亮",
      "highlight": "#hex - 特殊時刻和強調"
    }
  },
  "voice": {
    "enabled": "若影片有旁白則為 true，僅有音樂則為 false",
    "gender": "male | female | neutral",
    "age": "young adult | middle-aged | mature",
    "tone": ["用於 AI 語音搜尋的特質陣列：自信、溫暖、充滿活力、冷靜、權威、對話式、鼓舞人心"],
    "accent": "American | British | neutral | other",
    "pace": "fast | moderate | slow"
  },
  "scenes": [
    {
      "id": "唯一的連字號分隔場景識別碼",
      "act": "hook | reveal | showcase | climax | close",
      "startSec": "絕對開始時間。相鄰場景可重疊 0.2-0.5 秒以實現轉場",
      "durationSec": "場景長度。若有旁白，必須容納約每秒 2.5 個單詞的敘述",
      "purpose": "此場景為何存在、傳達什麼訊息",
      "emotionalBeat": "觀看者應感受到的情緒",
      "voiceover": "確切的旁白文字，若無則為 null。旁白是時間軸的骨幹 — 視覺元素與關鍵字詞同步。並非每個場景都需要旁白",
      "layout": "元素的空間排列（草圖或描述位置）",
      "elements": "每個視覺元素，包含描述、大小、顏色、位置",
      "animation": "每個元素的動畫：效果類型、延遲、持續時間、緩動函數",
      "camera": "視埠移動（縮放、平移、視差效果）",
      "lighting": "光線來源、何處明亮、何處在陰影中",
      "transitionOut": "此場景如何過渡到下一個場景"
    }
  ]
}

故事板描述必須極其具體。禁止使用如「酷炫轉場」或「元素動畫進入」等模糊描述 — 它們在實作時留有太多解釋空間，並導致產出平庸的結果。

必須用精確的力學描述每個元素的運動。不要寫「標題出現」，而要寫：「標題從下方 30px 彈入，縮放從 0.9→1，模糊從 8→0，歷時 0.5 秒，同時一道對角光束在 0.3 秒延遲後從左到右掃過文字表面。」不要寫「卡片動畫進入」，而要寫：「三張功能卡片從右側以 150 毫秒的間隔依次進入，每張卡片都從 translateX(40)→0、透明度 0→1 開始，並帶有一個細微的 3° 旋轉，最終回正到 0°。」

描述必須具體到讓兩位不同的開發者能據此產出幾乎相同的實作。如果一個描述可能導致截然不同的視覺結果，那它就不夠具體。

時間與節奏

節奏韻律。 一個節奏良好的影片會在緊張與釋放之間交替：

快 → 慢 → 快 → 慢 → 快 → 停頓

鉤子    揭示    功能   呼吸   高潮   結尾
(緊張) (舒緩) (活力) (暫停) (高峰) (解決)

發布影片最糟的狀況，就是從頭到尾維持單一節奏。無論視覺多麼華麗，單調的節奏只會讓觀眾昏昏欲睡。

時間分配。 根據總時長按比例分配時間。比例比精確的秒數更重要：

15 秒預告： 約 20% 鉤子、約 50% 產品快照、約 30% Logo 揭示。沒有時間進行展示或深入的敘事弧線。
30 秒發布： 約 15% 鉤子、約 25% 揭示、約 40% 展示（2-3 個節拍）、約 10% 高潮、約 10% 結尾。
60 秒深度介紹： 約 10% 鉤子、約 15% 揭示、約 50% 展示（4-5 個節拍）、約 15% 高潮、約 10% 結尾。

關卡：在將 storyboard.json 儲存到專案根目錄之前，請參照以下清單進行審查：

是否已針對每種發布脈絡設定畫面寬高比？（16:9 用於橫向影片，9:16 用於縱向/短影音，1:1 用於正方形的貼文）
是否已規劃社交媒體短影音版本，並包含動態安全區域？（重要文字和 Logo 在縱向模式下應保持在中央 80% 區域內，在橫向模式下應保持在中央 90% 區域內）
兩個連續的展示場景是否使用了不同的佈局或動畫模式？（如果使用相同的卡片網格佈局兩次，則違反此規則）
每個場景的描述是否精確到足以在沒有模糊推斷的情況下實作？
如果啟用旁白，倒數/高潮節拍是否預留了足夠的視覺空間（至少 1-1.5 秒無旁白的螢幕時間）？
連續的場景是否具有不同的情緒節拍？（情緒相同或相近的場景不應鄰接）

階段 3：使用 Remotion 實作

故事板獲得批准後，使用 Remotion（一個基於 React 的程式化影片框架）來建構影片。

設定

使用 npx create-video 建立新的 Remotion 專案，選擇適合這個範圍的模板（通常使用「空白」或「JavaScript」模板）。

npx create-video --template blank product-launch-video
cd product-launch-video

專案結構

組織你的 Remotion 專案，使其能完美對應故事板的結構：

product-launch-video/
├── package.json
├── src/
│   ├── Root.tsx              # 主要的 <Composition> 註冊
│   ├── Video.tsx             # 頂層影片序列，組合所有場景
│   ├── scenes/               # 每個故事板場景一個檔案
│   │   ├── Hook.tsx
│   │   ├── Reveal.tsx
│   │   ├── Showcase.tsx
│   │   ├── Climax.tsx
│   │   └── Close.tsx
│   ├── components/           # 場景間共用的可重複使用元件
│   │   ├── Logo.tsx
│   │   ├── FeatureCard.tsx
│   │   ├── TextReveal.tsx
│   │   ├── Particles.tsx
│   │   └── GradientBackground.tsx
│   ├── styles/               # 集中式設計標記
│   │   └── theme.ts          # 匯出色彩、字型、間距設定
│   └── transitions/          # 轉場效果
│       ├── fade.ts
│       └── slide.ts
├── storyboard.json           # 核准的故事板
└── public/                   # 靜態素材

實作規則

優先使用 <Sequence>。 Remotion 的 <Sequence> API 用於將時間軸劃分為對應故事板場景的區塊：

import { AbsoluteFill, Sequence } from 'remotion';

export const ProductLaunchVideo = () => {
  return (
    <AbsoluteFill>
      <Sequence from={0} durationInFrames={90} name='Hook'>
        <Hook />
      </Sequence>
      <Sequence from={75} durationInFrames={150} name='Reveal'>
        <Reveal />
      </Sequence>
      <Sequence from={210} durationInFrames={360} name='Showcase'>
        <Showcase />
      </Sequence>
      <Sequence from={540} durationInFrames={90} name='Climax'>
        <Climax />
      </Sequence>
      <Sequence from={615} durationInFrames={90} name='Close'>
        <Close />
      </Sequence>
    </AbsoluteFill>
  );
};

持續時間必須與 storyboard.json 同步。 場景 from 值計算為每個場景的 startSec 乘以 fps。始終使用 useCurrentFrame() 和 interpolate() 來驅基於時間的動畫。

使用 useVideoConfig 實現回應式設計。 絕不對寬度或高度進行硬編碼：

const { width, height } = useVideoConfig();

使用 spring 實現有機運動。 Remotion 的 spring API 是為真實的、物理的運動而設計的。盡可能使用它來取代線性插值，尤其是在出現和彈出動畫中：

import { spring, useCurrentFrame, useVideoConfig } from 'remotion';

const frame = useCurrentFrame();
const { fps } = useVideoConfig();

const scale = spring({
  frame,
  fps,
  config: {
    damping: 12,
    stiffness: 100,
  },
});

將樣式放在主題檔案中。 色彩、字型、間距和動畫持續時間從未在元件中重複定義。它們全部存放在 /src/styles/theme.ts 中，該檔案會匯入一個代表已核准故事板風格的設定物件。

動畫必須匹配 storyboard.json。 每個元件的進入、持續和退出狀態都必須直接對應故事板中描述的時間和效果。動畫不匹配即代表故事板宣告有缺陷，必須在下一個提示中修正。

範例：

export const FeatureCard: React.FC<{
  title: string;
  description: string;
  index: number;
  delay: number;
}> = ({ title, description, index, delay }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const STAGGER_DELAY = 150; // 毫秒

  const entryProgress = spring({
    frame: frame - Math.floor((delay + index * STAGGER_DELAY) / (1000 / fps)),
    fps,
    config: { damping: 15, stiffness: 80 },
  });

  const translateX = interpolate(entryProgress, [0, 1], [40, 0]);
  const opacity = interpolate(entryProgress, [0, 1], [0, 1]);
  const rotate = interpolate(entryProgress, [0, 1], [3, 0]);

  return (
    <div
      style={{
        transform: `translateX(${translateX}px) rotate(${rotate}deg)`,
        opacity,
        // ... additional styles
      }}
    >
      {/* content */}
    </div>
  );
};

關卡：在最終渲染之前，請進行視覺檢查，確保所有動畫和效果直接對應到 storyboard.json。

memex-lab/product-launch-video-skill

product-launch-video-skill 是什麼？

在你喜歡的 AI 中提問

說明文件