產生導覽影片
用 Remotion 將 Stitch 專案螢幕製作成帶動態轉場的專業導覽影片。
remotion 技能會把你 Stitch 專案中的螢幕變成精緻的導覽影片——包含交叉淡入淡出轉場、彈簧動畫縮放效果與文字覆疊。適用於示範、利害關係人審查或文件說明。
事前準備
- 一個至少有 2 張已設計螢幕的 Stitch 專案
- 已安裝 Node.js 與 npm
- 可存取 Stitch MCP 伺服器
取回螢幕
PROMPT
List all screens in Stitch project projects/123456 and download their screenshots.
技能會透過 MCP 取得螢幕中繼資料、將全解析度截圖下載到 assets/screens/，並建立包含標題、尺寸與每張螢幕時長的 screens.json 清單。
設定並產生
如果沒有現成的 Remotion 專案，技能會建立一個。接著設定你的轉場：
淡入淡出（預設）
螢幕之間平滑的交叉淡入淡出。最適合沉穩、專業的簡報。
PROMPT
Use fade transitions between all screens with 15 frames overlap.
滑動
具方向性的滑動，適合有先後順序的使用者流程：
PROMPT
Use slide transitions from left to right to show the user journey.
縮放
以彈簧動畫縮放效果突顯特定功能：
PROMPT
Add a zoom-in effect on the hero section of the home screen before transitioning to the features page.
混合搭配——大部分螢幕使用淡入淡出，再以一次縮放突顯關鍵時刻。
加入文字覆疊
螢幕標題
PROMPT
Add the screen title as a bottom overlay on each slide, fading in after 0.5 seconds.
功能標註
PROMPT
Add a pulsing circle highlighting the search bar on the navigation screen.
進度指示
PROMPT
Add a thin progress bar at the top showing the current position in the walkthrough.
算繪影片
先在瀏覽器版的 Remotion Studio 中預覽：
PROMPT
Start the Remotion Studio to preview the walkthrough video.
然後算繪成檔案：
PROMPT
Render the walkthrough video as walkthrough.mp4 with H.264 codec.
品質選項
| 旗標 | 效果 |
|---|---|
--quality 100 | 最高品質（檔案較大） |
--codec h264 | 最佳相容性 |
--codec h265 | 更好的壓縮率，相容性較差 |
--concurrency 4 | 平行算繪以加快速度 |
調整節奏
- 太快？ 增加
screens.json中每張螢幕的時長（預設為 3–5 秒） - 太慢？ 縮短時長或加入更多動態轉場
- 節奏不均？ 為複雜螢幕設定較長時長，簡單的則較短
PROMPT
Set the dashboard screen duration to 6 seconds and the login screen to 3 seconds.
疑難排解
| 問題 | 解決方式 |
|---|---|
| 截圖模糊 | 為下載 URL 附加 =w{width} 以取得全解析度 |
| 動畫卡頓 | 將影格率提高到 60fps |
| 文字覆疊位置偏移 | 讓合成尺寸與螢幕尺寸一致 |
| Remotion 建置失敗 | 檢查 Node 版本相容性；執行 npm install |
原文: https://stitch.withgoogle.com/docs/skills/walkthrough-videos/
本頁翻譯自 Google Stitch 官方文件，原文版權歸 Google LLC 所有。本站為獨立第三方翻譯，與 Google 無關聯。