Stitch 到 Remotion 導覽影片
您是專注於從應用程式設計稿製作引人入勝導覽影片的影片製作專家。您結合 Stitch 的畫面擷取能力與 Remotion 的程式化影片生成功能，製作出流暢且專業的簡報。
概述
此技能可讓您建立導覽影片，以專業轉場、縮放效果與情境文字覆蓋，展示應用程式的畫面。工作流程會從 Stitch 專案中擷取畫面，並將它們編排成 Remotion 影片合成。
先決條件
必要條件：
- 能夠存取 Stitch MCP 伺服器
- 能夠存取 Remotion MCP 伺服器（或 Remotion CLI）
- 已安裝 Node.js 與 npm
- 具備已設計好畫面的 Stitch 專案
建議條件：
- 熟悉 Remotion 的影片功能
- 了解 React 元件（Remotion 使用 React）
擷取與網路設定
步驟 1：探索可用的 MCP 伺服器
執行 list_tools 以識別可用的 MCP 伺服器及其前綴：
- Stitch MCP：尋找
stitch:或mcp_stitch:前綴 - Remotion MCP：尋找
remotion:或mcp_remotion:前綴
步驟 2：擷取 Stitch 專案資訊
-
專案查詢（若未提供專案 ID）：
- 呼叫
[stitch_prefix]:list_projects，參數為filter: "view=owned" - 依標題識別目標專案（例如 "Calculator App"）
- 從
name欄位擷取專案 ID（例如projects/13534454087919359824）
- 呼叫
-
畫面擷取：
- 使用專案 ID（僅數字）呼叫
[stitch_prefix]:list_screens - 檢視畫面標題以識別導覽所需的所有畫面
- 從每個畫面的
name欄位擷取畫面 ID
- 使用專案 ID（僅數字）呼叫
-
畫面元資料擷取： 針對每個畫面：
- 使用
projectId與screenId呼叫[stitch_prefix]:get_screen - 擷取：
screenshot.downloadUrl— 影片的視覺素材htmlCode.downloadUrl— 選用：用於擷取文字/內容width、height— 畫面尺寸，用於正確縮放- 畫面標題與描述，用於文字覆蓋
- 使用
-
素材下載：
- 使用
web_fetch或Bash搭配curl下載畫面截圖 - 儲存至暫存目錄：
assets/screens/{screen-name}.png - 依照預期導覽流程的順序整理素材
- 使用
步驟 3：設定 Remotion 專案
-
檢查現有的 Remotion 專案：
- 尋找
remotion.config.ts或含有 Remotion 相依性的package.json - 若存在，使用現有的專案結構
- 尋找
-
建立新的 Remotion 專案（若需要）：
npm create video@latest -- --blank- 選擇 TypeScript 範本
- 在專用
video/目錄中設定
-
安裝相依套件：
cd video npm install @remotion/transitions @remotion/animated-emoji
影片合成策略
架構
建立包含下列元件的模組化 Remotion 合成：
-
ScreenSlide.tsx— 個別畫面顯示元件- Props：
imageSrc、title、description、width、height - 功能：縮放動畫、淡入淡出轉場
- 持續時間：可設定（預設每個畫面 3-5 秒）
- Props：
-
WalkthroughComposition.tsx— 主要影片合成- 序列化多個
ScreenSlide元件 - 處理畫面間的轉場
- 加入文字覆蓋與註解
- 序列化多個
-
config.ts— 影片設定- 影格率（預設：30 fps）
- 影片尺寸（符合 Stitch 畫面尺寸或適當縮放）
- 總持續時間計算
轉場效果
使用 Remotion 的 @remotion/transitions 達到專業效果：
-
淡入淡出：畫面間的平滑交叉淡出
import {fade} from '@remotion/transitions/fade'; -
滑動：方向性滑動轉場
import {slide} from '@remotion/transitions/slide'; -
縮放：用於強調的縮放效果
- 使用
spring()動畫達到平滑縮放 - 套用於重要的 UI 元素
- 使用
文字覆蓋
使用 Remotion 的文字渲染功能加入情境資訊：
- 畫面標題：顯示在每個影格的頂部或底部
- 功能標註：使用動畫指標強調特定 UI 元素
- 描述：為每個畫面淡入描述文字
- 進度指示器：顯示目前在導覽中的位置
執行步驟
步驟 1：收集畫面素材
- 識別目標 Stitch 專案
- 列出專案中的所有畫面
- 下載每個畫面的截圖
- 依照導覽流程的順序整理
- 建立清單檔案（
screens.json）：
{
"projectName": "Calculator App",
"screens": [
{
"id": "1",
"title": "主畫面",
"description": "附數字鍵盤的主要計算機介面",
"imagePath": "assets/screens/home.png",
"width": 1200,
"height": 800,
"duration": 4
},
{
"id": "2",
"title": "歷史記錄檢視",
"description": "檢視先前的計算結果",
"imagePath": "assets/screens/history.png",
"width": 1200,
"height": 800,
"duration": 3
}
]
}
步驟 2：產生 Remotion 元件
依照 Remotion 最佳實務建立影片元件：
-
建立
ScreenSlide.tsx：- 使用
useCurrentFrame()與spring()進行動畫 - 實作縮放與淡入淡出效果
- 加入具有適當時間點的文字覆蓋
- 使用
-
建立
WalkthroughComposition.tsx：- 匯入畫面清單
- 使用
<Sequence>元件序列化畫面 - 在畫面間套用轉場
- 計算適當的時間點與偏移量
-
更新
remotion.config.ts：- 設定合成 ID
- 設定影片尺寸
- 設定影格率與持續時間
參考資源：
- 使用
resources/screen-slide-template.tsx作為起點 - 遵循
resources/composition-checklist.md以確保完整性 - 檢視
examples/walkthrough/目錄中的範例
步驟 3：預覽並調整
-
啟動 Remotion Studio：
npm run dev- 開啟瀏覽器預覽
- 允許即時編輯與調整
-
調整時間點：
- 確保每個畫面有適當的顯示持續時間
- 驗證轉場是否流暢
- 檢查文字覆蓋的時間點
-
微調動畫：
- 調整縮放效果的彈簧設定
- 修改轉場的緩動函數
- 確保文字隨時可讀
步驟 4：渲染影片
-
使用 Remotion CLI 渲染：
npx remotion render WalkthroughComposition output.mp4 -
替代方案：使用 Remotion MCP（若可用）：
- 使用合成詳細資訊呼叫
[remotion_prefix]:render - 指定輸出格式（MP4、WebM 等）
- 使用合成詳細資訊呼叫
-
最佳化選項：
- 設定品質等級（
--quality） - 設定編解碼器（
--codec h264或h265） - 啟用平行渲染（
--concurrency）
- 設定品質等級（
進階功能
互動式熱點
強調可點擊的元素或重要功能：
import {interpolate, useCurrentFrame} from 'remotion';
const Hotspot = ({x, y, label}) => {
const frame = useCurrentFrame();
const scale = spring({
frame,
fps: 30,
config: {damping: 10, stiffness: 100}
});
return (
<div style={{
position: 'absolute',
left: x,
top: y,
transform: `scale(${scale})`
}}>
<div className="pulse-ring" />
<span>{label}</span>
</div>
);
};
旁白整合
為導覽加入旁白：
- 從畫面描述產生旁白腳本
- 使用文字轉語音或錄製音訊
- 使用
<Audio>元件將音訊匯入 Remotion - 同步畫面時間點與旁白節奏
動態文字擷取
從 Stitch HTML 程式碼擷取文字以進行自動註解：
- 為每個畫面下載
htmlCode.downloadUrl - 解析 HTML 以擷取關鍵文字元素（標題、按鈕、標籤）
- 為重要的 UI 元素產生自動標註
- 作為時間控制的文字覆蓋加入合成中
檔案結構
project/
├── video/ # Remotion 專案目錄
│ ├── src/
│ │ ├── WalkthroughComposition.tsx
│ │ ├── ScreenSlide.tsx
│ │ ├── components/
│ │ │ ├── Hotspot.tsx
│ │ │ └── TextOverlay.tsx
│ │ └── Root.tsx
│ ├── public/
│ │ └── assets/
│ │ └── screens/ # 已下載的 Stitch 截圖
│ │ ├── home.png
│ │ └── history.png
│ ├── remotion.config.ts
│ └── package.json
├── screens.json # 畫面清單
└── output.mp4 # 已渲染的影片
與 Remotion 技能整合
Remotion 維護其自身的代理技能，定義了最佳實務。請參閱這些技能以了解進階技術：
- 儲存庫：https://github.com/remotion-dev/remotion/tree/main/packages/skills
- 安裝：
npx skills add remotion-dev/skills
應利用的關鍵 Remotion 技能：
- 動畫時間點與緩動
- 合成架構模式
- 效能最佳化
- 音訊同步
常見模式
模式 1：簡單幻燈片
具有淡入淡出轉場的基本導覽：
- 每個畫面 3-5 秒
- 交叉淡出轉場
- 底部文字覆蓋顯示畫面標題
- 頂部進度列
模式 2：功能強調
聚焦於特定 UI 元素：
- 縮放至特定區域
- 指向功能的動畫圓圈/箭頭
- 關鍵互動的慢動作強調
- 並排的之前/之後比較
模式 3：使用者流程
顯示逐步的使用者旅程：
- 具有方向性滑動的順序畫面流程
- 編號步驟覆蓋
- 強調使用者動作（點擊、觸控）
- 使用動畫路徑連接畫面
故障排除
| 問題 | 解決方案 |
|---|---|
| 畫面模糊 | 確保下載的影像為完整解析度；檢查 screenshot.downloadUrl 的品質設定 |
| 文字對齊錯誤 | 驗證畫面尺寸與合成大小相符；根據實際畫面尺寸調整文字位置 |
| 動畫不流暢 | 將影格率提高至 60fps；使用具有適當阻尼的彈簧設定 |
| Remotion 建置失敗 | 檢查 Node 版本相容性；確保已安裝所有相依套件；檢閱 Remotion 文件 |
| 時間點感覺不對 | 在清單中調整每個畫面的持續時間；在 Remotion Studio 中預覽；以實際使用者測試 |
最佳實務
- 維持長寬比：使用實際的 Stitch 畫面尺寸或按比例縮放
- 一致的時間點：除非要強調特定畫面，否則保持畫面顯示持續時間一致
- 文字可讀性：確保足夠的對比度；使用適當的字型大小；避免雜亂的覆蓋
- 流暢轉場：使用彈簧動畫以達到自然的動作；避免突兀的剪輯
- 徹底預覽：在最終渲染前，務必在 Remotion Studio 中預覽
- 最佳化素材：適當地壓縮影像；使用高效的格式（UI 用 PNG，照片用 JPG）
使用範例
使用者提示：
查看我 Stitch 專案 "Calculator App" 中的畫面，並建立一個顯示這些畫面導覽的 Remotion 影片。
代理工作流程：
- 列出 Stitch 專案 → 找到 "Calculator App" → 擷取專案 ID
- 列出專案中的畫面 → 識別所有畫面（主畫面、歷史記錄、設定）
- 為每個畫面下載截圖 → 儲存至
assets/screens/ - 建立包含畫面元資料的
screens.json清單 - 產生 Remotion 元件（
ScreenSlide.tsx、WalkthroughComposition.tsx） - 在 Remotion Studio 中預覽 → 調整時間點與轉場
- 渲染最終影片 →
calculator-walkthrough.mp4 - 回報完成並附上影片預覽連結
成功秘訣
- 從簡單開始：先從基本的淡入淡出轉場開始，再加入複雜的動畫
- 遵循 Remotion 模式：運用 Remotion 的官方技能與文件
- 使用清單檔案：將畫面資料以 JSON 格式整理，便於更新
- 頻繁預覽：使用 Remotion Studio 及早發現問題
- 考慮無障礙性：加入字幕；確保文字可讀；使用清晰的視覺效果
- 針對平台最佳化：將影片尺寸調整為目標平台（YouTube、社交媒體等）的規格
參考資料
- Stitch 文件：https://stitch.withgoogle.com/docs/
- Remotion 文件：https://www.remotion.dev/docs/
- Remotion 技能：https://www.remotion.dev/docs/ai/skills
- Remotion MCP：https://www.remotion.dev/docs/ai/mcp
- Remotion 轉場：https://www.remotion.dev/docs/transitions
使用時機
當處理與其主要領域或上述功能相關的任務時，請使用此技能。
限制
- 僅在工作任務明確符合上述範圍時使用此技能。
- 請勿將輸出視為環境特定驗證、測試或專家審查的替代品。
- 若缺少必要的輸入、權限、安全邊界或成功標準，請停止並要求澄清。