randall-liao/cloud-resume-v2

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 專案資訊

1. 專案查詢（若未提供專案 ID）：

   • 呼叫 [stitch_prefix]:list_projects 並帶入 filter: "view=owned"
   • 透過標題（例如「Calculator App」）識別目標專案
   • 從 name 欄位擷取專案 ID（例如 projects/13534454087919359824）

2. 畫面擷取：

   • 使用專案 ID（僅數字）呼叫 [stitch_prefix]:list_screens
   • 檢閱畫面標題以識別導覽所需的所有畫面
   • 從每個畫面的 name 欄位擷取畫面 ID

3. 畫面中繼資料擷取： 針對每個畫面：

   • 使用 projectId 與 screenId 呼叫 [stitch_prefix]:get_screen
   • 擷取：
     • screenshot.downloadUrl — 影片的視覺資產
     • htmlCode.downloadUrl — 選擇性：用於擷取文字/內容
     • width, height — 畫面尺寸，用於正確縮放
     • 畫面標題與描述，用於文字疊加

4. 資產下載：

   • 使用 web_fetch 或帶有 curl 的 Bash 來下載截圖
   • 儲存至暫存目錄：assets/screens/{screen-name}.png
   • 依預期的導覽流程順序整理資產

步驟 3：設定 Remotion 專案

1. 檢查現有 Remotion 專案：

   • 尋找 remotion.config.ts 或包含 Remotion 相依性的 package.json
   • 若存在，使用現有的專案結構

2. 建立新的 Remotion 專案（若需要）：

   npm create video@latest -- --blank
   

   • 選擇 TypeScript 範本
   • 在專用的 video/ 目錄中設定

3. 安裝相依性：

   cd video
   npm install @remotion/transitions @remotion/animated-emoji
   

影片組合策略

架構

建立一個模組化的 Remotion 組合，包含以下元件：

1. ScreenSlide.tsx — 個別畫面顯示元件

   • Props：imageSrc, title, description, width, height
   • 功能：縮放動畫、淡入淡出轉場
   • 持續時間：可設定（預設每畫面 3-5 秒）

2. WalkthroughComposition.tsx — 主要影片組合

   • 序列化多個 ScreenSlide 元件
   • 處理畫面之間的轉場
   • 加入文字疊加與註解

3. config.ts — 影片設定

   • 影格率（預設：30 fps）
   • 影片尺寸（比對 Stitch 畫面尺寸或適當縮放）
   • 總持續時間計算

轉場效果

使用 Remotion 的 @remotion/transitions 實現專業效果：

• 淡入淡出：畫面之間的平滑交叉淡出

  import {fade} from '@remotion/transitions/fade';
  

• 滑動：方向性滑動轉場

  import {slide} from '@remotion/transitions/slide';
  

• 縮放：用於強調的縮入/縮出效果

  • 使用 spring() 動畫實現平滑縮放
  • 應用於重要的 UI 元素

文字疊加

使用 Remotion 的文字渲染功能加入情境資訊：

1. 畫面標題：在每個影格的上方或底部顯示
2. 功能標註：使用動畫指示器突顯特定 UI 元素
3. 描述：為每個畫面淡入描述性文字
4. 進度指示器：顯示目前畫面在導覽中的位置

執行步驟

步驟 1：收集畫面資產

1. 識別目標 Stitch 專案
2. 列出專案中的所有畫面
3. 下載每個畫面的截圖
4. 依導覽流程順序整理
5. 建立清單檔（screens.json）：

{
  "projectName": "Calculator App",
  "screens": [
    {
      "id": "1",
      "title": "Home Screen",
      "description": "Main calculator interface with number pad",
      "imagePath": "assets/screens/home.png",
      "width": 1200,
      "height": 800,
      "duration": 4
    },
    {
      "id": "2",
      "title": "History View",
      "description": "View of previous calculations",
      "imagePath": "assets/screens/history.png",
      "width": 1200,
      "height": 800,
      "duration": 3
    }
  ]
}

步驟 2：產生 Remotion 元件

依照 Remotion 最佳實務建立影片元件：

1. 建立 ScreenSlide.tsx：

   • 使用 useCurrentFrame() 與 spring() 實現動畫
   • 實作縮放與淡入淡出效果
   • 加入具有適當時間設定的文字疊加

2. 建立 WalkthroughComposition.tsx：

   • 匯入畫面清單
   • 使用 <Sequence> 元件序列化畫面
   • 在畫面之間套用轉場
   • 計算適當的時間與偏移量

3. 更新 remotion.config.ts：

   • 設定組合 ID
   • 設定影片尺寸
   • 設定影格率與持續時間

參考資源：

• 使用 resources/screen-slide-template.tsx 作為起點
• 遵循 resources/composition-checklist.md 以確保完整性
• 檢閱 examples/ 目錄中的範例

步驟 3：預覽與調整

1. 啟動 Remotion Studio：

   npm run dev
   

   • 開啟瀏覽器預覽
   • 允許即時編輯與調整

2. 調整時間：

   • 確保每個畫面有適當的顯示持續時間
   • 確認轉場流暢
   • 檢查文字疊加的時間點

3. 細調動畫：

   • 調整縮放效果的彈簧設定
   • 修改轉場的緩動函數
   • 確保文字在任何時候都可讀

步驟 4：渲染影片

1. 使用 Remotion CLI 渲染：

   npx remotion render WalkthroughComposition output.mp4
   

2. 替代方案：使用 Remotion MCP（若可用）：

   • 使用組合詳細資訊呼叫 [remotion_prefix]:render
   • 指定輸出格式（MP4、WebM 等）

3. 最佳化選項：

   • 設定品質等級（--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>
  );
};

旁白整合

為導覽加入旁白：

1. 從畫面描述產生旁白腳本
2. 使用文字轉語音或錄製音訊
3. 使用 <Audio> 元件將音訊匯入 Remotion
4. 將畫面時間與旁白節奏同步

動態文字擷取

從 Stitch HTML 程式碼擷取文字以自動產生註解：

1. 下載每個畫面的 htmlCode.downloadUrl
2. 解析 HTML 以擷取關鍵文字元素（標題、按鈕、標籤）
3. 為重要的 UI 元素產生自動標註
4. 作為定時文字疊加加入組合

檔案結構

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 中預覽；與實際使用者測試

最佳實務

1. 維持長寬比：使用實際的 Stitch 畫面尺寸或按比例縮放
2. 時間一致：除非強調特定畫面，否則保持畫面顯示時間一致
3. 文字可讀：確保足夠的對比度；使用適當的字型大小；避免雜亂的疊加
4. 流暢轉場：使用彈簧動畫產生自然動作；避免突兀的剪接
5. 徹底預覽：在最終渲染前隨時在 Remotion Studio 中預覽
6. 最佳化資產：適當壓縮圖片；使用高效的格式（UI 使用 PNG，照片使用 JPG）

範例用法

使用者提示：

Look up the screens in my Stitch project "Calculator App" and build a remotion video 
that shows a walkthrough of the screens.

代理工作流程：

1. 列出 Stitch 專案 → 找到「Calculator App」→ 擷取專案 ID
2. 列出專案中的畫面 → 識別所有畫面（Home、History、Settings）
3. 為每個畫面下載截圖 → 儲存至 assets/screens/
4. 建立包含畫面中繼資料的 screens.json 清單
5. 產生 Remotion 元件（ScreenSlide.tsx、WalkthroughComposition.tsx）
6. 在 Remotion Studio 中預覽 → 調整時間與轉場
7. 渲染最終影片 → calculator-walkthrough.mp4
8. 報告完成，並附上影片預覽連結

成功秘訣

• 從簡單開始：先從基本淡入淡出轉場開始，再加入複雜動畫
• 遵循 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