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 中使用
- 開啟 Claude.ai 或 Claude API
- 在系統提示欄位中貼上 Remotion 的系統提示
- 開始提示影片生成請求
在 GPT-4 中使用
- 使用 OpenAI API 時,在
system訊息中加入系統提示 - 或在 ChatGPT 中使用自訂 GPT 功能
在 Cursor 中使用
- 在
.cursorrules或 Cursor 的系統提示設定中加入 - 或使用 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 避免以下常見錯誤:
- 使用 Math.random() - 應使用確定性的動畫值
- 使用 new Date() - 應基於幀數計算時間
- 忘記導入 API - 確保所有使用的 API 都有正確導入
- 非同步操作 - 必須使用 delayRender/continueRender
與 Agent Skills 的關係
Agent Skills 是系統提示的進階版本,提供:
- 更結構化的知識表示
- 自動整合到 AI 工具
- 針對特定工作流程的最佳化提示