Vibe Video=Claude Code+Context7，靠自然語言Vibe生成Remotion視頻代碼，快速落地創意！
整理版優先睇
用Claude Code加Context7，靠自然語言生成Remotion影片代碼，快速落地創意！
呢篇文章係一個技術分享，作者係一個經常玩Remotion嘅開發者，佢發現就算學識咗React基礎，整影片動畫依然好麻煩：要成日查文檔、改參數、怕用錯API。佢想解決嘅問題係點樣降低Remotion嘅使用門檻，令開發者可以更快將創意變做影片。
作者嘅方法係用Context7呢個免費MCP服務，佢可以幫Claude Code即時讀取最新Remotion文檔，咁樣AI寫嘅代碼就唔會亂作API，直接可以運行。然後佢詳細示範咗成個流程：先喺Claude Desktop配置好Context7，再用自然語言描述想要嘅影片效果，等Claude生成完整組件代碼，最後保存、預覽、渲染。佢仲提供咗幾個具體例子同萬能提示詞模板。
整體結論係：用呢套Vibe Video方法，你只需要講清「想要咩效果」，AI就會幫你搞掂代碼同動畫細節，真正做到「識React就識整影片」嘅終極形態。呢個方法特別適合技術分享、標題開場呢啲場景。
- Context7係一個免費MCP服務，可以畀Claude Code即時讀取最新Remotion文檔，避免API過時或亂作。
- 配置Context7好簡單：攞API Key、改claude_desktop_config.json、重啟Claude就得。
- Vibe Video流程：用自然語言描述效果 → Claude生成代碼 → 保存到Remotion項目 → 預覽調整 → 渲染導出。
- 呢個方法大幅降低影片製作門檻，唔使記大量API，專注創意就得。
- 萬能提示詞模板可以重用，只要改時長、主題、風格，就快速產出唔同影片。
Context7 官網
攞免費API Key同查看更多文檔
Remotion Vibe Video 提示詞模板
請使用Context7 MCP查閲Remotion最新文檔，生成一個 [時長] 秒的 [主題] 視頻：核心需求：[一句話描述核心效果] 視覺風格：[配色/質感/氛圍] 動畫要求：[關鍵動畫效果] 分辨率：1920×1080，fps=30 代碼要求：完整可運行，包含Composition註冊。
Context7：幫AI裝上即時文檔引擎
作者發現用Remotion整影片嘅痛點：成日要翻文檔查spring、interpolate用法，改個參數要好耐先見到效果，最怕用錯過時API搞到代碼跑唔起。佢介紹咗一個叫Context7嘅開源MCP服務，由Upstash團隊開發，核心功能係畀AI代碼助手提供實時、版本精準嘅官方文檔同代碼示例。
- 基於MCP（Model Context Protocol）協議，自動從GitHub、NPM等源頭拉取最新文檔
- 將精準上下文注入AI提示詞，令生成嘅代碼可直接運行、唔會有幻覺
- 特別適合Remotion呢類API成日更新嘅工具，唔使驚用錯寫法
五分鐘配置Context7，即刻上手
- 1 去 context7.com 註冊，攞到 CONTEXT7_API_KEY
- 2 打開 ~/Library/Application Support/Claude/claude_desktop_config.json，貼入MCP配置，將API Key填返入去
- 3 完全重啟Claude Desktop，確保新配置生效
- 4 如果想一鍵安裝，可以用 npx -y @smithery/cli install @upstash/context7-mcp --client claude，之後都係要重啟
- 5 測試：叫Claude「幫我用Remotion寫一個文字漸入動畫視頻use context7」，睇嚇會唔會自動調用文檔
作者提醒：記住保存文件之後一定要完全熄咗Claude再開過，唔係會讀唔到新配置。佢自己用桌面版Claude做示範，如果你用CLI命令行，都可以用類似方法配置。
Vibe Video完整流程：從描述到影片
呢個部分作者詳細拆解咗點樣用Claude Code生成Remotion組件，然後整合到項目入面。佢用一個文字漸入動畫做例子，行勻成個流程。
- 1 喺Claude對話入面輸入自然語言描述，例如「幫我用Remotion寫一個文字漸入動畫視頻use context7」，然後Copy生成嘅代碼
- 2 喺Remotion項目src/下新建Textanimation.tsx，貼入代碼；如果報React類型錯誤，就手動補返 import React, { FC } from 'react'
- 3 新建RemotionRoot.tsx，將動畫組件註冊成Composition
- 4 修改 remotion.config.ts 嘅入口文件指向新嘅Root
- 5 啟動npm run dev，用瀏覽器睇效果；唔滿意可以返Claude再改
- 6 滿意之後用 npx remotion render 導出MP4
作者強調，呢個流程最正嘅係你可以不斷用自然語言微調，直到效果滿意為止，完全唔使手動改代碼。
總結思路：用提示詞模板快速量產
作者最後俾咗幾個具體例子同一個萬能模板，你只要改幾個關鍵詞，就可以生成唔同主題嘅影片。以下係佢分享嘅兩個常見場景：
- 科技感數據可視化短片：用柱狀圖增長、折線圖波動、數字計數器，配深藍/青/白配色
- 逐字彈跳標題動畫：每個字母從下方彈入，帶旋轉同彈性回彈，適合開場
作者用第一個例子展示咗成個過程：佢描述咗一個60秒嘅AI效率提升短片，Claude就生成咗一個叫AIEfficiencyVideo嘅組件，運行npm run dev之後直接喺瀏覽器播到。佢話呢個方法最啱技術分享、產品介紹呢類需要快速出片嘅場景。
先放今期嘅影片作品：
上一期我哋搞掂咗Remotion入門：唔想學剪輯？識React就可以做影片：Remotion從入門到搞掂嘅保姆級教學，你已經可以靠代碼生成基本影片㗎喇。
但你一定都發現咗：
想做個文字動畫，就要翻文件查spring、interpolate嘅用法；
改個參數要不停重啟預覽，效率極低；
怕用咗過時API，搞到代碼行唔到
......
今期，我哋就用Claude Code嚟做Vibe Video：等AI直接調用最新Remotion文件，幫你寫好可以運行嘅組件、調好動畫細節，你只需要講清楚「想要咩效果」，跟住嘅就交俾代碼自動完成，而呢個先係「識React就可以做影片」嘅終極形態。
首先，我哋用Context7等Claude Code預先熟習Remotion文件。
點樣喺Claude入面配置Context7？
我哋今次揀Claude配置Context7（分為桌面版同CLI命令行兩種環境，我已經有桌面版㗎喇，所以我直接用桌面版嘅環境嚟示範）：
第一步：準備階段
獲取Context7 API Key（免費）
打開瀏覽器去：https://context7.com；
註冊/登入，獲取你嘅CONTEXT7_API_KEY；
創建並保存好呢個Key，之後配置要用㗎。
圖1：登入Context7並創建API Key
第二步：點樣將你嘅API Key寫入配置文件
（關鍵步驟）
打開Claude配置Folder，喺終端輸入以下命令：
並揾到如下圖2所示嘅呢個文件：claude_desktop_config.json
圖2：claude_desktop_config.json
雙擊打開（用文本編輯/VS Code都得），你會見到類似內容，複製貼上我下面圖3所示呢段：
圖3：用文本編輯/VS Code打開claude_desktop_config.json
複製貼上呢段入去
然後將呢段入面嘅「你喺context7.com攞到嘅API Key”換成你喺第一步攞到嘅API Key（如下圖4所示）：
圖4：將「你喺context7.com攞到嘅API Key」換成你自己嘅API Key
*切記：保存文件之後，一定要完全重啟Claude。
第三步：喺Claude Desktop配置Context7
可以揀Smithery一按安裝（最簡單），打開終端，直接輸入以下命令：
*但要記住運行之後要將Claude Desktop完全關閉再重啟Claude Desktop。
第四步：點樣用Context7（測試係咪成功）
打開Claude之後喺對話框輸入以下呢段文字：
如下圖5所示，會顯示「好的，已從Context7獲取Remotion最新文檔...」（代表已經成功，Claude會自動調用最新官方文檔，從而寫出可以直接運行、唔會報錯、唔作API嘅影片代碼）：
圖5：喺claude嘅對話框輸入上述呢段話測試係咪配置成功
Vibe Video嘅完整流程
呢part我會詳細拆解，第四部分我會總結成整體思路同舉例說明。
保存代碼文件
撳一撳右邊代碼區嘅Copy掣，複製曬全部代碼（如下圖6所示）；
喺你嘅Remotion項目src/ Folder底下，開一個新文件Textanimation.tsx（如下圖7所示）；
將copy嘅代碼複製貼上入嚟並保存（如下圖8所示）。
圖6：copy複製全部代碼
圖7：喺你嘅Remotion項目src/ Folder底下，開新文件Textanimation.tsx
圖8：將copy嘅代碼複製貼上入嚟並保存
修復React類型引入（如果報錯）
喺文件最頂添加React引入（解決React.FC揾唔到嘅問題），如上圖8紅色方框圈出部分。
創建根影片組件（RemotionRoot.tsx）
喺src/底下開新RemotionRoot.tsx（如下圖9所示），用嚟承載動畫：
圖9：喺 src/ 底下開新 RemotionRoot.tsx
完整咁輸入我以下圖10所顯示嘅呢段代碼：
圖10：完整咁將代碼複製入嚟
修復remotion.config.ts入口
打開項目根目錄嘅remotion.config.ts，將入口指向你啱啱創建嘅RemotionRoot：
圖11
啟動預覽睇效果
喺終端執行以下命令，如下圖所示：
圖12：啟動預覽睇效果
導出MP4（可選）
如果要生成最終影片，喺終端執行以下命令：
跟提示揀輸出路徑；
等渲染完成，得到可以直接播放嘅MP4文件。
總結 - 我嘅整體思路同例子
第一步：先用自然語言描述你想要嘅影片效果
舉例1：我想做一個科技感數據可視化短片（適合技術分享），以下係提示詞：
舉例2：我想做一個基礎逐字彈跳畫面（適合開場/標題），以下係提示詞：
*進階萬能模板（提示詞）：
譬如呢度我揀展示例1嚟創建：
圖13：先用自然語言描述想要嘅影片效果
第二步：等Claude生成Remotion組件代碼
圖14：文件名叫：remotion-ai-video
第三步：喺終端輸入命令，如下圖15所示
3.1 重新入返項目，喺終端輸入以下命令：
3.2 安裝依賴，喺終端輸入以下命令：
3.3 啟動依賴，喺終端輸入以下命令：
圖15：喺終端分別輸入命令
第四步：唔滿意就不斷調整，滿意就渲染導出
跑完你會見到：http://localhost:3000/AIEfficiencyVideo
瀏覽器會自動打開，影片直接播放，如下圖16所示：
影片呈現：
先放本期的視頻作品：
上一期我們搞定了Remotion入門：不想學剪輯？會React就能做視頻：Remotion從入門到跑通的保姆級教程，你已經能靠代碼生成基礎視頻了。
但你一定也發現了：
想做個文字動畫，要翻文檔查spring、interpolate用法；
改個參數要反覆重啓預覽，效率極低；
怕用了過時API，導致代碼跑不起來
......
這一期，我們就用Claude Code來做Vibe Video：讓AI直接調用最新Remotion文檔，幫你寫好可運行的組件、調好動畫細節，你只需要說清”想要什麼效果”，剩下的交給代碼自動完成，而這才是“會React就能做視頻”的終極形態。
首先，我們使用Context7讓Claude Code提前熟悉Remotion文檔。
如何在Claude中配置Context7?
我們這次選取Claude配置Context7（分為桌面版和CLI命令行兩種環境，我已經有桌面版的，所以我就直接用桌面版的環境進行演示）：
第一步：準備階段
獲取Context7 API Key（免費）
打開瀏覽器訪問：https://context7.com；
註冊/登錄，獲取你的CONTEXT7_API_KEY；
創建並保存好這個Key，後面配置要用。
圖1：登錄Context7並創建API Key
第二步：如何把你的API Key 寫入配置文件
（關鍵步驟）
打開Claude配置文件夾，在終端輸入以下命令：
並找到如下圖2所示的這個文件：claude_desktop_config.json
圖2：claude_desktop_config.json
雙擊打開（用文本編輯/VS Code都行），你會看到類似內容，複製粘貼我下面圖3所示這段：
圖3：用文本編輯/VS Code打開claude_desktop_config.json
複製粘貼這段進去
然後把這段中的“你在context7.com拿到的API Key”替換成你在第一步中拿到的API Key（如下圖4所示）：
圖4：把”你在context7.com拿到的API Key”替換成你自己的API Key
*切記：保存文件後，一定完全重啓Claude。
第三步：在Claude Desktop配置Context7
可以選擇Smithery一鍵安裝（最簡單），打開終端，直接輸入以下命令：
*但記住運行後需要把Claude Desktop完全關掉再重啓Claude Desktop。
第四步：如何使用Context7（測試是否成功）
打開Claude後在對話框中輸入以下這段文字：
如下圖5所示，會顯示“好的，已從Context7獲取Remotion最新文檔...”（代表已經成功，Claude會自動調用最新官方文檔，從而寫出可直接運行、不報錯、不編造API的視頻代碼）：
圖5：在claude的對話框中輸入上述這段話測試是否配置成功
Vibe Video的完整流程
這一part我會講詳細拆解，第四部分我會總結成整體思路和舉例說明。
保存代碼文件
點擊點擊右側代碼區的Copy按鈕，複製全部代碼（如下圖6所示）；
在你的Remotion項目src/ 文件夾下，新建文件Textanimation.tsx（如下圖7所示）；
把copy的代碼複製粘貼進來並保存（如下圖8所示）。
圖6：copy複製全部代碼
圖7：在你的Remotion項目src/ 文件夾下，新建文件Textanimation.tsx
圖8：把copy的代碼複製粘貼進來並保存
修復React類型引入（如果報錯）
在文件最頂部添加React引入（解 React.FC找不到的問題），如上圖8紅色方框圈出部分。
創建根視頻組件（RemotionRoot.tsx）
在src/下新建RemotionRoot.tsx（如下圖9所示），用來承載動畫：
圖9：在 src/ 下新建 RemotionRoot.tsx
完整的輸入我以下圖10所顯示的這段代碼：
圖10：完整的把代碼複製進來
修復remotion.config.ts人口
打開項目根目錄的remotion.config.ts，將入口指向你剛創建的RemotionRoot：
圖11
啓動預覽看效果
在終端運行以下命令，如下圖所示：
圖12：啓動預覽看效果
導出MP4（可選）
如果要生成最終視頻，在終端中運行以下命令：
按提示選擇輸出路徑；
等待渲染完成，得到可直接播放的MP4文件。
總結-我的整體思路和示例
第一步：先用自然語言描述你想要的視頻效果
舉例1：我想做一個科技感數據可視化短片（適合技術分享），以下為提示詞：
舉例2：我想做一個基礎逐字彈跳畫面（適合開場/標題），以下為提示詞：
*進階萬能模版（提示詞）：
比如這裏我選展示例1來創建：
圖13：先用自然語言描述想要的視頻效果
第二步：讓Claude生成Remotion組件代碼
圖14：文件名：remotion-ai-video
第三步：在終端輸入命令，如下圖15所示
3.1 重新進入項目，在終端輸入以下命令：
3.2 安裝依賴，在終端輸入以下命令：
3.3 啓動依賴，在終端輸入以下命令：
圖15：終端分別輸入命令
第四步：不滿意就繼續調整，滿意就渲染導出
跑完你會看到：http://localhost:3000/AIEfficiencyVideo
瀏覽器會自動打開，視頻直接播放，如下圖16所示：
視頻呈現：