Remotion LabRemotion Lab
›AI›提示生成動態圖形 SaaS 起始套件

提示生成動態圖形 SaaS 起始套件

使用 Remotion 官方 Next.js 模板快速建立 AI 驅動的動態圖形 SaaS 產品，支援自然語言描述生成即時動畫

提示生成動態圖形 SaaS 起始套件

Remotion 提供了一個 Next.js 起始模板，用於建立 AI 驅動的動態圖形產品。使用者用自然語言描述動畫，應用程式會即時生成並預覽。

快速開始

npx create-video@latest --template prompt-to-motion-graphics

接著建立 .env 文件：

# OpenAI API 金鑰（必需）
OPENAI_API_KEY=sk-...
 
# 用於 Lambda 渲染的 AWS 憑證（可選）
REMOTION_AWS_ACCESS_KEY_ID=...
REMOTION_AWS_SECRET_ACCESS_KEY=...

啟動開發伺服器：

npm run dev

訪問 http://localhost:3000 開始生成動畫。

核心功能

對話介面與迭代優化

模板提供帶有對話歷史的聊天介面，支援迭代優化：

  • 描述動畫需求
  • 查看即時預覽
  • 提供修改反饋
  • 持續優化直到滿意

即時渲染預覽

  • 程式碼流式傳輸並在瀏覽器中使用即時編譯進行編譯
  • 使用 Remotion Player 即時顯示動畫
  • 無需等待伺服器端渲染

智慧編輯策略

LLM 會根據需求選擇以下策略之一：

  • 針對性編輯：僅修改需要更改的部分（效率更高）
  • 完整替換：當需要大幅重構時重寫整個元件

輸入驗證與清理

  • 輸入驗證：防止終端使用者濫用
  • 輸出清理：清理 LLM 輸出中的不確定性因素
  • 自動修正：編譯錯誤時自動重試

與 Agent Skills 的區別

特性AI SaaS 模板Agent Skills
目標使用者建立 SaaS 產品的開發者為自己製作影片的創作者
運行環境瀏覽器（無需作業系統存取）本機開發環境
渲染方式Remotion Player 即時預覽Remotion Studio
匯出影片需要 Remotion Lambda本機渲染
適合場景B2C SaaS 產品個人影片製作

使用此模板如果您想要建立 SaaS 服務；使用 Agent Skills 如果您想要為自己提示影片。

圖片處理

模板支援兩種不同的圖片使用方式：

附加圖片

將圖片附加到提示時，AI 助手會嘗試在程式碼中重現圖片的樣式：

提示：「根據附加的設計稿，建立動畫版本」
結果：AI 生成類似樣式的動畫元件

提供圖片 URL

在提示中提及圖片 URL 時，AI 助手會將圖片嵌入到動畫中：

提示：「建立一個展示 https://example.com/logo.png 的動畫介紹」
結果：動畫中直接使用該 URL 的圖片

啟用 Lambda 影片匯出

若要讓使用者能夠匯出影片，需要設定 Remotion Lambda：

步驟 1：設定 Remotion Lambda

按照 Lambda 設定指南 進行設定。

步驟 2：在 .env 中新增 AWS 憑證

# 用於 Lambda 渲染的 AWS 憑證
REMOTION_AWS_ACCESS_KEY_ID=your_access_key
REMOTION_AWS_SECRET_ACCESS_KEY=your_secret_key
REMOTION_AWS_REGION=us-east-1

步驟 3：部署

npm run deploy

架構說明

此模板的技術架構：

使用者輸入提示
    ↓
OpenAI API（串流式回應）
    ↓
@babel/standalone（瀏覽器端即時編譯）
    ↓
Remotion Player（即時預覽）
    ↓
（可選）Remotion Lambda（匯出影片）

自訂模板

更換 LLM 提供商

// 將 OpenAI 替換為其他提供商
import Anthropic from '@anthropic-ai/sdk';
 
const client = new Anthropic();
const stream = await client.messages.stream({
  model: 'claude-opus-4-6',
  // ...
});

自訂動畫模板

在 src/templates/ 目錄中添加預設動畫模板，供使用者快速開始。

品牌化

修改 src/styles/ 中的主題配置，以符合您的品牌形象。

相關資源