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"
- 根據標題識別目標專案（例如「計算機應用程式」）
- 從 name 欄位中提取專案 ID（例如 projects/13534454087919359824）
畫面擷取：
- 使用專案 ID（僅數字）呼叫 [stitch_prefix]:list_screens
- 檢視畫面標題以識別導覽影片中所有需要的畫面
- 從每個畫面的 name 欄位中提取畫面 ID
畫面中繼資料擷取：針對每個畫面：
- 使用 projectId 和 screenId 呼叫 [stitch_prefix]:get_screen
- 擷取：
  - screenshot.downloadUrl — 影片的視覺素材
  - htmlCode.downloadUrl — 可選：用於擷取文字/內容
  - width, height — 畫面尺寸以進行適當縮放
  - 畫面標題與描述，用於文字覆蓋
素材下載：
- 使用 web_fetch 或搭配 curl 的 Bash 下載畫面截圖
- 儲存至暫存目錄：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 秒）
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": "計算機應用程式",
  "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
```
- 開啟瀏覽器為基礎的預覽
- 允許即時編輯與調整
調整時間點：
- 確保每個畫面有適當的顯示持續時間
- 確認轉場流暢
- 檢查文字覆蓋的時間點
微調動畫：
- 調整縮放效果的 Spring 設定
- 修改轉場的緩動函數
- 確保文字隨時清晰可讀

步驟 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；使用具有適當阻尼的 Spring 設定
Remotion 建置失敗	檢查 Node 版本相容性；確保所有相依套件已安裝；參閱 Remotion 文件
時間點感覺不對	在清單中調整每個畫面的持續時間；在 Remotion Studio 中預覽；與實際使用者測試

最佳實務

維持長寬比：使用實際的 Stitch 畫面尺寸或按比例縮放
一致的時間點：除非要強調特定畫面，否則保持畫面顯示持續時間一致
可讀的文字：確保足夠的對比度；使用適當的字型大小；避免雜亂的覆蓋
流暢的轉場：使用 Spring 動畫實現自然動作；避免突兀的切換
徹底預覽：在最終渲染前務必在 Remotion Studio 中預覽
最佳化素材：適當壓縮圖片；使用高效格式（UI 用 PNG，照片用 JPG）

使用範例

使用者提示：

請查閱我的 Stitch 專案「計算機應用程式」中的畫面，並建立一個展示這些畫面的 Remotion 導覽影片。

代理工作流程：

列出 Stitch 專案 → 找到「計算機應用程式」→ 提取專案 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

使用時機

當處理與上述主要領域或功能相關的任務時，請使用此技能。

在你喜歡的 AI 中提問

說明文件