Remotion 專案設定是做什麼的？

您將建立一個全新的 Remotion 專案，並將其與工作流程整合，讓後續只需「提示 Claude」即可完成所有操作。這是一次性的環境設定作業，每個專案只需執行一次；之後 remotion-compose 和 remotion-render 將直接進入創作循環。

請積極觸發此技能。如果使用者提到任何關於「用 Claude 製作影片」的內容——例如「設定 Remotion」「建立 Remotion 專案」「我想用 Claude 製作產品影片」「開始一個影片專案」——請執行此技能。

步驟 1 - 驗證工具鏈

Remotion 使用無頭 Chromium 進行渲染，因此在建立專案前請先檢查 Node：

node --version   # 需要 >= 16；建議使用現行的 LTS 版本

如果 Node 版本低於 16，請停止並告知使用者升級（使用 nvm：nvm install --lts && nvm use --lts）。同時確認 npx 可用（隨 npm 5.2+ 提供）。

步驟 2 - 建立專案脚手架

npx create-video@latest

此命令為互動式。建議選擇空白 (Hello World) 模板——這是產品影片最乾淨的基礎。CLI 會詢問專案目錄名稱和套件管理器；讓使用者自行選擇，然後 cd 進入新資料夾並安裝依賴：

cd <project-name>
npm install

步驟 3 - 安裝 Remotion 代理技能

讓 Claude Code 在此儲存庫中擁有 Remotion 本身的技能上下文：

npx remotion skills add remotion

這會將 Remotion 的代理技能檔案放入專案中。如果已安裝的 Remotion 版本不支援此命令，請引導使用者升級 @remotion/cli 並繼續——此步驟為便利功能，並非強制依賴。

步驟 4 - 建立資料夾慣例

標準化目錄結構，以便後續技能總是知道檔案位置：

src/
  Root.tsx              # 註冊每個 <Composition>（入口註冊表）
  index.ts              # registerRoot(RemotionRoot)
  compositions/         # 每個影片一個 .tsx 檔案——remotion-compose 會寫入此處
public/
  assets/               # 圖片、標誌、音訊——透過 staticFile() 引用

如果模板未建立這些資料夾，請手動建立：

mkdir -p src/compositions public/assets

src/Root.tsx 是註冊表。每個影片都是一個在此註冊的 <Composition>：

// src/Root.tsx
import { Composition } from "remotion";
import { HelloWorld } from "./compositions/HelloWorld";

export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="HelloWorld"
      component={HelloWorld}
      durationInFrames={90}
      fps={30}
      width={1920}
      height={1080}
    />
  );
};

// src/index.ts
import { registerRoot } from "remotion";
import { RemotionRoot } from "./Root";
registerRoot(RemotionRoot);

建議的合理預設值：30 fps 和 1920x1080（橫向產品影片；直向社交媒體為 1080x1920），以及較短的持續時間——90 幀在 30 fps 下為 3 秒，大多數產品展示影片落在 15 到 60 秒之間（450-1800 幀）。

步驟 5 - 載入 Google Fonts

Remotion 對 Google Fonts 有原生支援，確保文字渲染結果一致。安裝並載入一次：

npm install @remotion/google-fonts

// 在組合檔案頂部載入
import { loadFont } from "@remotion/google-fonts/Inter";
const { fontFamily } = loadFont();
// 使用：<div style={{ fontFamily }}>...</div>

loadFont() 會阻塞渲染直到字型準備就緒，因此螢幕文字不會閃現未樣式化的後備字型。選擇符合品牌的字型——將 Inter 替換為 Poppins、Roboto 等。

步驟 6 - 煙霧測試組合

撰寫一個簡單的組合來證明環境可以端到端渲染：

// src/compositions/HelloWorld.tsx
import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";
import { loadFont } from "@remotion/google-fonts/Inter";

const { fontFamily } = loadFont();

export const HelloWorld: React.FC = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: "clamp",
  });
  return (
    <AbsoluteFill style={{ backgroundColor: "#0B0B0F", justifyContent: "center", alignItems: "center" }}>
      <h1 style={{ fontFamily, color: "white", fontSize: 90, opacity }}>
        成功了。
      </h1>
    </AbsoluteFill>
  );
};

確保此組合已在 src/Root.tsx 中註冊（步驟 4），然後進行渲染：

npx remotion render src/index.ts HelloWorld out/smoke-test.mp4

首次渲染會下載無頭 Chromium（約數百 MB——正常連線下預計一次性等待幾分鐘）；之後這個 90 幀的煙霧測試應可在 1 分鐘內完成渲染。如果 out/smoke-test.mp4 播放了淡入的標題，則環境設定正確。如果渲染失敗，幾乎總是以下問題：(a) Chromium 下載/權限問題，(b) 組合未在 Root.tsx 中註冊，或 (c) 步驟 1 中的 Node 版本問題。

步驟 7 - 啟動 Remotion Studio 進行預覽

若要進行互動式預覽（拖曳時間軸、編輯時熱重載）：

npx remotion studio

這會在 http://localhost:3000 提供 Studio 服務。create-video 模板也將 npm run dev 指向相同功能。在疊代過程中讓 Studio 保持執行——對組合檔案的編輯會立即熱重載。

交付成果

使用者將獲得一個可運作的 Remotion 專案：包含已建立的脚手架儲存庫，具有 src/compositions/ + public/assets/ 目錄結構、已安裝的 Remotion 代理技能、已整合的 Google Fonts、已註冊的煙霧測試組合、可播放的已渲染 out/smoke-test.mp4 檔案，以及正在執行的 Remotion Studio 預覽環境。在煙霧測試 MP4 檔案存在並可播放之前，都不算「設定完成」。

禁止事項

請勿跳過 Node 檢查就直接建立專案——低於 16 的 Node 版本會在 Chromium 渲染深處引發令人困惑的錯誤，而非在安裝時提示。
請勿在未渲染煙霧測試的情況下宣告設定完成；一個能編譯但從未產出 MP4 的專案無法證明 Chromium 管線正常。
請勿將組合或素材放在任意位置——後續技能（remotion-compose、remotion-render）依賴 src/compositions/ 和 public/assets/ 的存在。
請勿使用相對路徑或 URL 引用素材——請使用 public/ 目錄的 staticFile()，否則渲染在本地能執行，在其他環境會失敗。
請勿為螢幕文字使用系統字型或 CSS 匯入的字型——沒有 loadFont() 的阻塞，文字在渲染機器上可能會顯示為後備字型。
請勿為產品影片選擇功能繁重的模板；空白模板避免了使用者之後需要刪除示範程式碼的麻煩。

品質標準

node --version 為 >= 16，並且在建立專案前已檢查。
out/smoke-test.mp4 存在且可播放淡入的標題。
資料夾慣例完全按照指定方式存在，且煙霧測試組合已在 src/Root.tsx 中註冊。
文字透過 @remotion/google-fonts 的 loadFont() 渲染，而非系統後備字型。
Remotion Studio 可在 localhost:3000 啟動，並在編輯時熱重載。

交接

一旦煙霧測試渲染完成且 Studio 啟動，告知使用者專案已準備就緒，並進行交接：「設定完成。請描述您想要的影片——持續時間、場景、品牌顏色——我將撰寫組合（remotion-compose），然後進行渲染和疊代（remotion-render）。」

Remotion 專案設定