計(jì)稿變成產(chǎn)品演示視頻的完整指南)
stitch-skills Remotion視頻生成把設(shè)計(jì)稿變成產(chǎn)品演示視頻的完整指南【免費(fèi)下載鏈接】stitch-skillsA library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/st/stitch-skills還在為產(chǎn)品演示視頻的剪輯費(fèi)時(shí)費(fèi)力stitch-skills 開源項(xiàng)目中的Remotion 技能可以一句話指令自動(dòng)把 Stitch 平臺(tái)上的設(shè)計(jì)稿轉(zhuǎn)成帶轉(zhuǎn)場(chǎng)、縮放和字幕疊加的專業(yè)產(chǎn)品演示視頻。它遵循 Agent Skills 開放標(biāo)準(zhǔn)兼容 Claude Code、Cursor、Gemini CLI 等主流編碼智能體讓你無(wú)需手動(dòng)剪輯也能快速產(chǎn)出高質(zhì)量的 Walkthrough 演示視頻。為什么選擇 Remotion 技能生成演示視頻傳統(tǒng)做法是截圖 → 導(dǎo)入剪輯軟件 → 逐幀調(diào)整轉(zhuǎn)場(chǎng)和文字耗時(shí)且效果不一致。而 stitch-build 插件 里的 remotion 技能把整條流水線自動(dòng)化了環(huán)節(jié)傳統(tǒng)方式Remotion 技能素材獲取手動(dòng)截圖自動(dòng)從 Stitch 項(xiàng)目拉取每個(gè)屏幕截圖轉(zhuǎn)場(chǎng)動(dòng)畫手動(dòng)添加淡入淡出、滑動(dòng)、縮放等程序化生成文字疊加逐幀調(diào)整根據(jù)屏幕標(biāo)題自動(dòng)生成字幕渲染輸出手動(dòng)導(dǎo)出一條命令渲染 MP4核心原理智能體讀取 Stitch 項(xiàng)目中每個(gè)屏幕的截圖和元數(shù)據(jù)生成一個(gè)screens.json清單文件再據(jù)此編寫 Remotion 的 React 視頻組件最終渲染成視頻文件。整個(gè)流程的詳細(xì)說(shuō)明見 remotion 技能說(shuō)明文檔?？焖偕鲜忠绘I安裝 remotion 技能1. 確認(rèn)前置條件已配置并運(yùn)行 Stitch MCP 服務(wù)器已安裝 Node.js 和 npm你的 Stitch 項(xiàng)目里已有設(shè)計(jì)好的屏幕可選Remotion MCP 服務(wù)器或 Remotion CLI2. 安裝技能如果你只想要這一個(gè)視頻技能單獨(dú)安裝即可npx skills add google-labs-code/stitch-skills --skill remotion --global提示如果需要完整體驗(yàn)設(shè)計(jì)到視頻的全流程可以克隆整個(gè)倉(cāng)庫(kù)git clone https://gitcode.com/GitHub_Trending/st/stitch-skills再通過(guò)npx plugins add安裝完整插件套件方法參見 項(xiàng)目總覽 README。3. 一句話生成視頻在支持該技能的編碼智能體中直接用自然語(yǔ)言下指令查看我 Stitch 項(xiàng)目 Calculator App 里的所有屏幕做一個(gè) Walkthrough 演示視頻。智能體會(huì)自動(dòng)完成查找項(xiàng)目 → 列出所有屏幕 → 下載截圖 → 生成視頻組件 → 預(yù)覽 → 渲染出最終的 MP4 文件。視頻是怎么做出來(lái)的4 步工作流拆解 remotion 技能SKILL.md定義了標(biāo)準(zhǔn)工作流第一步發(fā)現(xiàn)服務(wù)器— 自動(dòng)識(shí)別環(huán)境中的 Stitch 和 Remotion 兩個(gè) MCP 服務(wù)確定調(diào)用前綴。第二步拉取屏幕資產(chǎn)— 列出項(xiàng)目中的全部屏幕逐個(gè)下載高清截圖保存為assets/screens/下的文件并按演示順序整理成screens.json清單記錄每屏的標(biāo)題、描述、尺寸和展示時(shí)長(zhǎng)默認(rèn)每屏 3~5 秒。第三步生成視頻組件— 兩個(gè)核心模塊構(gòu)成視頻的骨架ScreenSlide.tsx單個(gè)屏幕的展示組件內(nèi)置彈簧式縮放動(dòng)畫和淡入效果參考模板見 screen-slide-template.tsxWalkthroughComposition.tsx主合成組件用Sequence串聯(lián)所有屏幕并配置轉(zhuǎn)場(chǎng)完整示例見 WalkthroughComposition.tsx第四步預(yù)覽與渲染— 先啟動(dòng) Remotion Studio 在瀏覽器里實(shí)時(shí)預(yù)覽、調(diào)整節(jié)奏確認(rèn)無(wú)誤后一條命令渲染成片npx remotion render WalkthroughComposition output.mp4三種視頻模式選對(duì)風(fēng)格更出彩 ?技能內(nèi)置了三種常見演示模式適配不同場(chǎng)景模式一簡(jiǎn)單幻燈片最穩(wěn)妥的選擇——每屏停留 3~5 秒 交叉淡入轉(zhuǎn)場(chǎng) 底部標(biāo)題字幕 頂部進(jìn)度條適合快速概覽整個(gè)應(yīng)用。模式二功能亮點(diǎn)聚焦對(duì)關(guān)鍵區(qū)域做局部放大用動(dòng)態(tài)圓圈和箭頭指向重要功能突出核心賣點(diǎn)的特寫鏡頭適合發(fā)布會(huì)或營(yíng)銷素材。模式三用戶流程演示按真實(shí)用戶旅程逐步推進(jìn)帶編號(hào)步驟提示和方向性滑動(dòng)轉(zhuǎn)場(chǎng)把點(diǎn)擊、跳轉(zhuǎn)等交互串聯(lián)起來(lái)適合新手引導(dǎo)視頻。進(jìn)階玩法與質(zhì)量清單可選增強(qiáng)功能交互熱點(diǎn)在可點(diǎn)擊元素上疊加脈沖光圈標(biāo)注旁白配音根據(jù)屏幕描述生成解說(shuō)詞與畫面節(jié)奏同步動(dòng)態(tài)文案提取解析屏幕 HTML自動(dòng)為標(biāo)題、按鈕生成解說(shuō)字幕成片前自查清單官方為每個(gè)視頻項(xiàng)目準(zhǔn)備了一份檢查清單composition-checklist.md涵蓋組件結(jié)構(gòu)、動(dòng)畫參數(shù)、文字可讀性、時(shí)間軸節(jié)奏等維度。常見問(wèn)題速查問(wèn)題解決思路截圖模糊確認(rèn)下載的是全分辨率截圖文字錯(cuò)位核對(duì)屏幕尺寸與合成尺寸一致動(dòng)畫卡頓提高幀率至 60fps調(diào)整彈簧阻尼參數(shù)寫在最后stitch-skills 的 remotion 技能把設(shè)計(jì)稿 → 演示視頻這條鏈路壓縮成了一次對(duì)話。它遵循 Agent Skills 開放標(biāo)準(zhǔn)目錄結(jié)構(gòu)清晰SKILL.md是智能體的任務(wù)說(shuō)明書examples/存放參考實(shí)現(xiàn)resources/是模板與清單也方便你照著模式為自己團(tuán)隊(duì)寫類似技能。如果你的項(xiàng)目里有 Stitch 設(shè)計(jì)稿不妨現(xiàn)在就用一句話試試——從指令到成片可能只需要幾分鐘?！久赓M(fèi)下載鏈接】stitch-skillsA library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/st/stitch-skills創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 stitch-skills Remotion視頻生成：把設(shè)計(jì)稿變成產(chǎn)品演示視頻的完整指南
stitch-skills Remotion視頻生成把設(shè)計(jì)稿變成產(chǎn)品演示視頻的完整指南【免費(fèi)下載鏈接】stitch-skillsA library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/st/stitch-skills還在為產(chǎn)品演示視頻的剪輯費(fèi)時(shí)費(fèi)力stitch-skills 開源項(xiàng)目中的Remotion 技能可以一句話指令自動(dòng)把 Stitch 平臺(tái)上的設(shè)計(jì)稿轉(zhuǎn)成帶轉(zhuǎn)場(chǎng)、縮放和字幕疊加的專業(yè)產(chǎn)品演示視頻。它遵循 Agent Skills 開放標(biāo)準(zhǔn)兼容 Claude Code、Cursor、Gemini CLI 等主流編碼智能體讓你無(wú)需手動(dòng)剪輯也能快速產(chǎn)出高質(zhì)量的 Walkthrough 演示視頻。為什么選擇 Remotion 技能生成演示視頻傳統(tǒng)做法是截圖 → 導(dǎo)入剪輯軟件 → 逐幀調(diào)整轉(zhuǎn)場(chǎng)和文字耗時(shí)且效果不一致。而 stitch-build 插件 里的 remotion 技能把整條流水線自動(dòng)化了環(huán)節(jié)傳統(tǒng)方式Remotion 技能素材獲取手動(dòng)截圖自動(dòng)從 Stitch 項(xiàng)目拉取每個(gè)屏幕截圖轉(zhuǎn)場(chǎng)動(dòng)畫手動(dòng)添加淡入淡出、滑動(dòng)、縮放等程序化生成文字疊加逐幀調(diào)整根據(jù)屏幕標(biāo)題自動(dòng)生成字幕渲染輸出手動(dòng)導(dǎo)出一條命令渲染 MP4核心原理智能體讀取 Stitch 項(xiàng)目中每個(gè)屏幕的截圖和元數(shù)據(jù)生成一個(gè)screens.json清單文件再據(jù)此編寫 Remotion 的 React 視頻組件最終渲染成視頻文件。整個(gè)流程的詳細(xì)說(shuō)明見 remotion 技能說(shuō)明文檔?？焖偕鲜忠绘I安裝 remotion 技能1. 確認(rèn)前置條件已配置并運(yùn)行 Stitch MCP 服務(wù)器已安裝 Node.js 和 npm你的 Stitch 項(xiàng)目里已有設(shè)計(jì)好的屏幕可選Remotion MCP 服務(wù)器或 Remotion CLI2. 安裝技能如果你只想要這一個(gè)視頻技能單獨(dú)安裝即可npx skills add google-labs-code/stitch-skills --skill remotion --global提示如果需要完整體驗(yàn)設(shè)計(jì)到視頻的全流程可以克隆整個(gè)倉(cāng)庫(kù)git clone https://gitcode.com/GitHub_Trending/st/stitch-skills再通過(guò)npx plugins add安裝完整插件套件方法參見 項(xiàng)目總覽 README。3. 一句話生成視頻在支持該技能的編碼智能體中直接用自然語(yǔ)言下指令查看我 Stitch 項(xiàng)目 Calculator App 里的所有屏幕做一個(gè) Walkthrough 演示視頻。智能體會(huì)自動(dòng)完成查找項(xiàng)目 → 列出所有屏幕 → 下載截圖 → 生成視頻組件 → 預(yù)覽 → 渲染出最終的 MP4 文件。視頻是怎么做出來(lái)的4 步工作流拆解 remotion 技能SKILL.md定義了標(biāo)準(zhǔn)工作流第一步發(fā)現(xiàn)服務(wù)器— 自動(dòng)識(shí)別環(huán)境中的 Stitch 和 Remotion 兩個(gè) MCP 服務(wù)確定調(diào)用前綴。第二步拉取屏幕資產(chǎn)— 列出項(xiàng)目中的全部屏幕逐個(gè)下載高清截圖保存為assets/screens/下的文件并按演示順序整理成screens.json清單記錄每屏的標(biāo)題、描述、尺寸和展示時(shí)長(zhǎng)默認(rèn)每屏 3~5 秒。第三步生成視頻組件— 兩個(gè)核心模塊構(gòu)成視頻的骨架ScreenSlide.tsx單個(gè)屏幕的展示組件內(nèi)置彈簧式縮放動(dòng)畫和淡入效果參考模板見 screen-slide-template.tsxWalkthroughComposition.tsx主合成組件用Sequence串聯(lián)所有屏幕并配置轉(zhuǎn)場(chǎng)完整示例見 WalkthroughComposition.tsx第四步預(yù)覽與渲染— 先啟動(dòng) Remotion Studio 在瀏覽器里實(shí)時(shí)預(yù)覽、調(diào)整節(jié)奏確認(rèn)無(wú)誤后一條命令渲染成片npx remotion render WalkthroughComposition output.mp4三種視頻模式選對(duì)風(fēng)格更出彩 ?技能內(nèi)置了三種常見演示模式適配不同場(chǎng)景模式一簡(jiǎn)單幻燈片最穩(wěn)妥的選擇——每屏停留 3~5 秒 交叉淡入轉(zhuǎn)場(chǎng) 底部標(biāo)題字幕 頂部進(jìn)度條適合快速概覽整個(gè)應(yīng)用。模式二功能亮點(diǎn)聚焦對(duì)關(guān)鍵區(qū)域做局部放大用動(dòng)態(tài)圓圈和箭頭指向重要功能突出核心賣點(diǎn)的特寫鏡頭適合發(fā)布會(huì)或營(yíng)銷素材。模式三用戶流程演示按真實(shí)用戶旅程逐步推進(jìn)帶編號(hào)步驟提示和方向性滑動(dòng)轉(zhuǎn)場(chǎng)把點(diǎn)擊、跳轉(zhuǎn)等交互串聯(lián)起來(lái)適合新手引導(dǎo)視頻。進(jìn)階玩法與質(zhì)量清單可選增強(qiáng)功能交互熱點(diǎn)在可點(diǎn)擊元素上疊加脈沖光圈標(biāo)注旁白配音根據(jù)屏幕描述生成解說(shuō)詞與畫面節(jié)奏同步動(dòng)態(tài)文案提取解析屏幕 HTML自動(dòng)為標(biāo)題、按鈕生成解說(shuō)字幕成片前自查清單官方為每個(gè)視頻項(xiàng)目準(zhǔn)備了一份檢查清單composition-checklist.md涵蓋組件結(jié)構(gòu)、動(dòng)畫參數(shù)、文字可讀性、時(shí)間軸節(jié)奏等維度。常見問(wèn)題速查問(wèn)題解決思路截圖模糊確認(rèn)下載的是全分辨率截圖文字錯(cuò)位核對(duì)屏幕尺寸與合成尺寸一致動(dòng)畫卡頓提高幀率至 60fps調(diào)整彈簧阻尼參數(shù)寫在最后stitch-skills 的 remotion 技能把設(shè)計(jì)稿 → 演示視頻這條鏈路壓縮成了一次對(duì)話。它遵循 Agent Skills 開放標(biāo)準(zhǔn)目錄結(jié)構(gòu)清晰SKILL.md是智能體的任務(wù)說(shuō)明書examples/存放參考實(shí)現(xiàn)resources/是模板與清單也方便你照著模式為自己團(tuán)隊(duì)寫類似技能。如果你的項(xiàng)目里有 Stitch 設(shè)計(jì)稿不妨現(xiàn)在就用一句話試試——從指令到成片可能只需要幾分鐘?！久赓M(fèi)下載鏈接】stitch-skillsA library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/st/stitch-skills創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考