← 藍鴨 AI 實例庫

🎞️ 一句話做解說影片

你不用會寫程式。複製一段文字，貼給 AI 助手，它就會幫你做出下面這支 15 秒的影片。

1先看成品

這支影片就是照下面那段文字做出來的。每次做出來的畫面細節會有點不一樣，但段落、時間和顏色會一樣。

2照著做（第一次用也沒問題）

  1. 先準備。你需要一台 Mac 或 Windows 電腦。先到 nodejs.org 下載 Node.js（讓電腦能跑影片程式的免費工具），選 LTS 版，一路按「下一步」裝好。
  2. 打開 AI 助手。下面三個選一個就好，它們都是「會自己動手操作電腦的 AI」，英文叫 AI agent（AI 代理人）：
    • Claude Code（Anthropic 公司出的）
    • Codex（OpenAI 公司出的）
    • Antigravity（Google 出的，指令叫 agy）
    打開「終端機」（Mac 在「應用程式 → 工具程式」裡；Windows 叫 PowerShell）。先輸入 mkdir my-video 按 Enter，再輸入 cd my-video 按 Enter，這樣就開好一個空資料夾。接著輸入 claude、codex 或 agy，按 Enter。
  3. 貼上文字。按下面的「複製」按鈕，回到 AI 助手的視窗，貼上（Mac 按 ⌘V，Windows 按 Ctrl+V），再按 Enter。
  4. 等它做。畫面會一直跑字，這是正常的。它會依序下載工具、寫程式、檢查錯誤、輸出影片。大約要 5 到 15 分鐘，第一次會比較久。
  5. 它問你問題時。如果它問「可以執行這個指令嗎？」，看一下指令是不是 npx 開頭（提示詞裡寫的那幾行）。是的話就選「允許」。其他看不懂的問題，回它「照提示詞做就好」。
  6. 用 Codex 的人看這裡。Codex 有一層保護叫「沙盒」（sandbox，限制 AI 能碰的範圍），它會擋住做影片要用的瀏覽器。這時 Codex 應該停下來，問你能不能在沙盒外執行兩行指令：npx remotion render … 和 npx remotion still …。只核准這兩行，其他要求不用放行。
  7. 找到影片。做完後，打開剛才的 my-video 資料夾，再進 my-explainer → out。裡面的 explainer.mp4 是影片，poster.png 是封面圖，點兩下就能看。
  8. 換成你的主題。把文字裡的主題和第 4 段的四段字換掉，再貼一次就好。
請幫我用 Remotion 做一支 15 秒的中文解說影片，主題是「什麼是 AI agent」。請一步一步照做，不要問我問題，做完再回報。

【1. 建專案】
在目前資料夾執行：
npx create-video@latest --yes --blank --no-tailwind my-explainer
cd my-explainer
npm install

【2. 裝 Remotion 官方技能】
在 my-explainer 裡執行：
npx skills add remotion-dev/skills --yes
裝好後先讀 remotion-best-practices 這個技能，照它的規則寫程式。

【3. 字型】
只用 Noto Sans TC（Google 開源字型，OFL 授權，可商用）：
npx remotion add @remotion/google-fonts
在程式裡從 "@remotion/google-fonts/NotoSansTC" 載入，只載 400 和 900 兩種粗細。

【4. 影片規格】
- 1920×1080、30fps、共 450 格（15 秒），composition id 叫 Explainer。
- 深藍底（#0B1E3F），文字白色，重點色用鴨黃（#FFC93C）。
- 動畫只能用 useCurrentFrame() 搭配 interpolate() 或 spring()，不要用 CSS 動畫或 transition。
- 分成四個場景（用 <Sequence> 排時間）：
  第 1 段（0–3 秒）：大標「什麼是 AI agent？」彈出，下方小字「15 秒看懂」淡入。
  第 2 段（3–7 秒）：左右兩張卡依序滑入。左卡「聊天機器人」＋「你問，它答」；右卡「AI agent」＋「你交代，它去做」，右卡用鴨黃邊框。
  第 3 段（7–12 秒）：三個圓圈從左到右依序亮起，中間有箭頭：「看：讀資料」→「想：排步驟」→「做：用工具」。最後一個亮起後，底下出現一行「做完再看結果，不對就再來一輪」。
  第 4 段（12–15 秒）：結尾大字「你給目標，它跑流程」，下方小字「藍鴨 Launchdock Lab」，最後半秒整個畫面淡出。
- 每段進場都要有動畫，字不能超出畫面。

【5. 輸出】
先執行 npx tsc --noEmit 確認沒有錯誤，再輸出影片：
npx remotion render Explainer out/explainer.mp4 --crf 28
再輸出一張封面圖：
npx remotion still Explainer out/poster.png --frame 340
如果輸出時瀏覽器打不開（例如 Codex 的沙盒擋住 Chrome），請停下來請我允許在沙盒外執行這兩行，不要改用其他方法做影片。

【6. 回報】
告訴我 out/explainer.mp4 和 out/poster.png 的位置與檔案大小。

3進階：存成技能，下次一句話就好

技能（skill）是一份給 AI 看的說明書。存起來以後，AI 會記得怎麼做，你不用再貼一長段文字。

  1. 按下面的下載，或按「複製」把內容存成一個叫 SKILL.md 的檔案。
  2. 開一個叫 explainer-video 的資料夾，把 SKILL.md 放進去。
  3. 把這個資料夾放到 AI 助手的技能資料夾：
    • Claude Code：~/.claude/skills/
    • Codex：~/.agents/skills/
    • Antigravity：~/.gemini/antigravity/skills/
    （~ 代表你的使用者資料夾。開頭有點的資料夾預設是隱藏的，Mac 在 Finder 按 ⌘⇧. 就看得到。）
  4. 之後打開 AI 助手，只要說：「做一支解說影片，主題是〇〇」。用 Codex 的話，一樣只核准那兩行輸出影片的指令。
---
name: explainer-video
description: 用 Remotion 把一段主題或文字做成 15 秒、1920×1080 的中文解說影片（MP4）和一張封面圖。使用者說「做一支解說影片」「把這段做成影片」「做 15 秒片頭」時使用。
---

# 一句話做解說影片

把使用者給的主題（或一段文字）做成 15 秒的中文解說影片。

## 先問清楚（缺的才問，最多一題）
- 主題或要講的內容。只給主題就自己寫成 3–4 句重點。
- 沒說的就用預設：1920×1080、30fps、15 秒、深藍底 #0B1E3F、白字、重點色 #FFC93C。

## 步驟
1. 還沒有 Remotion 專案就建一個（已有就跳過）：
   ```bash
   npx create-video@latest --yes --blank --no-tailwind explainer
   cd explainer && npm install
   npx skills add remotion-dev/skills --yes
   npx remotion add @remotion/google-fonts
   ```
2. 讀 remotion-best-practices 技能，照它的規則寫程式。
3. 把內容拆成 4 個場景，每段 3–5 秒，加起來 450 格：
   - 開場：大標題彈出，一行副標淡入。
   - 重點一：對比或定義（例如兩張卡片左右滑入）。
   - 重點二：流程或步驟（例如圓圈依序亮起，中間有箭頭）。
   - 結尾：一句收尾的話，最後半秒淡出。
4. 寫法規定：
   - 字型只用 `@remotion/google-fonts/NotoSansTC`（OFL 授權），只載用到的粗細。
   - 動畫只能用 `useCurrentFrame()` 配 `interpolate()` / `spring()`，不要用 CSS 動畫。
   - 用 `<Sequence>` 排時間，composition id 叫 `Explainer`。
   - 每行字不超過 16 個中文字，字級至少 52px，不能超出畫面。
5. 檢查並輸出：
   ```bash
   npx tsc --noEmit
   npx remotion render Explainer out/explainer.mp4 --crf 28
   npx remotion still Explainer out/poster.png --frame 340
   ```
6. 自己看一下封面圖，確認字沒有被切掉、沒有缺字（出現方框代表字型沒載到）。

## 回報
告訴使用者 `out/explainer.mp4`、`out/poster.png` 的路徑和大小，並說明可以用 `npx remotion studio` 打開預覽、直接改字。

## 授權提醒
Remotion 對個人、3 人以下的公司、非營利組織免費（可商用）；超過 3 人的營利公司要買 Company License（https://www.remotion.pro/license）。

授權說明