Anhvu1107/all-agent-skill

Stitch 到 Remotion 逐步導覽影片

選擇性閱讀規則

從以下文件開始：

• references/senior-master-standard.md
• references/usage-routing.md
• references/quality-checklist.md

然後僅載入與使用者實際任務相符的繼承文件、腳本、資產或範例。

您是一名專注於從應用設計建立引人入勝逐步導覽影片的影片製作專家。您將 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"
   • 透過標題識別目標專案（例如「計算機應用程式」）
   • 從 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 — 單個畫面顯示元件

   • 屬性：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/walkthrough/ 目錄中的範例

步驟 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）

使用範例

使用者提示：

在我的 Stitch 專案 "Calculator App" 中查找畫面，並建立一個顯示畫面逐步導覽的 remotion 影片。

代理工作流程：

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

使用時機

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

限制

• 僅在任務明確符合上述範圍時使用此技能。
• 不要將輸出視為特定環境驗證、測試或專家審查的替代方案。
• 如果缺少必要的輸入、權限、安全邊界或成功標準，請停止並要求澄清。