remotion

remotion 技能概覽

remotion 的用途

remotion 技能可將 Stitch 的螢幕資料轉成精緻的導覽影片，並以 Remotion 來完成。它最適合想要可安裝、可重複執行的 Remotion for Video Editing 工作流程的使用者，而不是只靠一次性提示詞產出粗略剪輯大綱。

適合誰使用

如果你已經有一個包含畫面截圖的 Stitch 專案，並且需要一支能說明 UI 流程、功能順序或產品導覽的影片，就適合使用這個 remotion 技能。它很適合產品示範、上手教學短片、設計審查，以及內部發佈影片；這些情境都很在意畫面順序、節奏與字幕。

remotion 的差異在哪裡

它最大的價值，在於把 Stitch 的擷取結果和 Remotion 的組合流程串起來。你不必手動匯出截圖、再自己拼接轉場；這個技能會預期你提供結構化的螢幕輸入，接著建立包含轉場、縮放與文字覆蓋層的時間軸。當你重視一致性、可重新渲染，以及以程式碼方式進行剪輯時，remotion 就特別有用。

如何使用 remotion 技能

安裝 remotion 並先看工作流程

使用 npx skills add google-labs-code/stitch-skills --skill remotion 安裝 remotion 技能。接著先閱讀 SKILL.md，再看 README.md、examples/screens.json、examples/WalkthroughComposition.tsx、resources/composition-checklist.md 和 resources/screen-slide-template.tsx。這些檔案會說明預期的輸入格式、渲染流程，以及可重用的元件模式。

給 remotion 正確的輸入

一個好的 remotion 使用需求，應該包含 Stitch 專案名稱或 ID、影片目標、目標受眾、如果已知的螢幕順序，以及任何旁白或覆蓋文字需求。例如：「為 Stitch 專案 Calculator App 製作一支 45 秒的 remotion 導覽影片，使用首頁、歷史紀錄與設定畫面，搭配簡短標題、淡入淡出轉場，以及產品示範語氣。」這遠比「把我的畫面做成影片」有用得多。

遵循實際可行的建置流程

這個 repo 裡的 remotion 指南，是以擷取、建立 manifest、組合與渲染為核心設計的。先找出 Stitch 專案並下載畫面，接著把它們整理成帶有持續時間與轉場類型的 screens.json 風格 manifest，再把這個 manifest 接到 Remotion composition。若你要把這套流程套用到自己的專案，請查看 scripts/download-stitch-asset.sh 了解資產處理方式，並參考 resources/composition-checklist.md 的品質檢查點，避免路徑失效或節奏不均。

渲染前要檢查什麼

先確認圖片路徑能正確解析、螢幕尺寸有被記錄下來，而且總時長符合你預期的節奏。Remotion 的輸出品質很依賴輸入結構：簡短的畫面應該停留更短，資訊密集的畫面要放慢節奏，而字幕也要具體到能說明每一步到底改變了什麼。如果某個畫面視覺上很忙，就改用較平穩的轉場，讓覆蓋文字去解釋內容。

remotion 技能 FAQ

remotion 只適用於 Stitch 專案嗎？

這個 remotion 技能的核心就是 Stitch 到 Remotion 的工作流程，所以 Stitch 是預期的畫面來源。如果你只有靜態圖片，沒有 Stitch 專案，那麼一般的 Remotion 提示詞可能會更簡單；除非你想採用同樣的 manifest 與 composition 模式。

remotion 安裝後會得到什麼？

remotion 安裝後會提供一套引導式的結構化影片流程，而不是一個已經做好的剪輯器。你仍然需要原始畫面、可運作的 Remotion 環境，以及足夠細的資訊來決定時長、轉場和覆蓋文字。當你打算重複使用這個流程時，安裝的價值最高。

remotion 適合新手嗎？

適合，只要你能提供清楚的輸入，並接受以檔案為中心的工作流程。你不需要一開始就懂每個 Remotion API 細節，但你要願意檢視範例 composition，並調整時間、路徑與字幕。新手通常從範例 screens.json 模式開始，成功速度會更快。

什麼情況不該用這個技能？

如果你只需要單張靜態 mockup、沒有來源結構的快速社群短片，或是完全自動化、但你無法控制時間軸的剪輯，就不建議用 remotion。這個技能最強的地方，是你重視可重複的 Remotion 用法，並希望對螢幕導覽做出以程式碼為基礎的編輯。

如何改進 remotion 技能

提供更明確的螢幕意圖

最大的品質提升，通常來自更清楚的畫面層級意圖。不要只告訴技能畫面標題，也要說明每個畫面應該傳達什麼。例如：「Home Screen：顯示主計算機與基本運算符號」就比「Home Screen」更有用。意圖越清楚，remotion 產出的覆蓋文字與節奏就越好。

用帶有實際節奏判斷的 manifest

不要把每個畫面都當成一樣重要，應該依複雜度與重點來分配持續時間。功能密集的畫面可能需要 5–6 秒，簡單的確認畫面可能只要 2–3 秒。這是改善 remotion 輸出的最快方式，因為時間安排對理解度的影響通常比視覺花樣更大。

持續微調轉場與覆蓋文字

常見失敗模式包括過度使用縮放、所有文字覆蓋都寫得太泛、以及轉場喧賓奪主。若第一次渲染看起來太忙，就把轉場選項簡化、縮短文案，並移除任何只是重述畫面內容的覆蓋層。接著每次只改一個地方再重新渲染，這樣才看得出是哪個調整真正改善了結果。

重用儲存庫範例

如果你的第一版結果已經接近成品，但還不夠精緻，可以對照 examples/WalkthroughComposition.tsx 和 resources/screen-slide-template.tsx。這些檔案展示了預期的 remotion 風格：以畫面為主的 composition、細緻的動畫，以及結構化的中繼資料。沿用這個模式，通常比從頭重寫整套流程更快。