Remotion LabRemotion Lab
AILLM 的 Remotion 系統提示

LLM 的 Remotion 系統提示

提供給大型語言模型的系統提示,教導 LLM Remotion 的機制和規則以生成正確的程式碼

LLM 的 Remotion 系統提示

這是一個可以提供給大型語言模型(LLM)的提示,用於教導它們 Remotion 的機制和規則。之後您就可以提示 LLM 為您生成 Remotion 程式碼。

什麼是系統提示?

系統提示是在對話開始前提供給 AI 助手的指令,用於:

  • 定義 AI 助手的行為和知識範圍
  • 提供特定領域的上下文和規則
  • 確保生成的程式碼符合框架的最佳實踐
  • 減少常見錯誤和誤解

llms.txt 標準

Remotion 的系統提示也託管在 https://www.remotion.dev/llms.txt,符合 llmstxt.org 的慣例。這個格式讓 AI 工具可以自動找到並載入相關的上下文。

如何使用系統提示

在 Claude 中使用

  1. 開啟 Claude.ai 或 Claude API
  2. 在系統提示欄位中貼上 Remotion 的系統提示
  3. 開始提示影片生成請求

在 GPT-4 中使用

  1. 使用 OpenAI API 時,在 system 訊息中加入系統提示
  2. 或在 ChatGPT 中使用自訂 GPT 功能

在 Cursor 中使用

  1. .cursorrules 或 Cursor 的系統提示設定中加入
  2. 或使用 Agent Skills 自動整合

系統提示的內容

Remotion 的系統提示包含以下關鍵資訊:

核心 API

- useCurrentFrame(): 返回當前幀數
- useVideoConfig(): 返回影片設定(fps、寬高等)
- interpolate(): 在數值之間進行插值
- spring(): 建立彈性動畫
- AbsoluteFill: 填滿整個構圖的容器

動畫規則

- 所有動畫必須基於幀數而非時間
- 使用 interpolate() 而非 CSS transitions
- 避免使用 setTimeout 或 setInterval
- 使用 delayRender/continueRender 處理非同步載入

最佳實踐

- 元件必須是純函數,相同幀數輸入產生相同輸出
- 使用 staticFile() 引用公開資源
- 使用 Sequence 元件處理時序
- 遵循 Remotion 的確定性渲染要求

提示技巧

使用系統提示後,您可以更精確地提示影片:

基本動畫

建立一個 3 秒的動畫,文字從左側滑入並淡入顯示

複雜場景

製作一個 10 秒的資訊圖表動畫:
- 0-2秒:標題淡入
- 2-5秒:三個數據點依序彈入
- 5-8秒:圓餅圖繪製動畫
- 8-10秒:整體淡出

資料驅動

建立一個接受 { title: string, items: string[] } 作為 props 的動畫元件,
為每個項目製作依序出現的動畫效果

常見錯誤與避免方式

系統提示可以幫助 LLM 避免以下常見錯誤:

  1. 使用 Math.random() - 應使用確定性的動畫值
  2. 使用 new Date() - 應基於幀數計算時間
  3. 忘記導入 API - 確保所有使用的 API 都有正確導入
  4. 非同步操作 - 必須使用 delayRender/continueRender

與 Agent Skills 的關係

Agent Skills 是系統提示的進階版本,提供:

  • 更結構化的知識表示
  • 自動整合到 AI 工具
  • 針對特定工作流程的最佳化提示

相關資源