用途:把 Stitch 项目里的应用界面截图编排成一段带专业转场、缩放和说明文字的走查视频(walkthrough video),用于功能演示和用户流程展示。
主要能力:
- 通过 Stitch MCP 检索项目与屏幕:使用 [stitch 前缀]:list_projects、list_screens、get_screen 获取截图 downloadUrl、htmlCode、宽高、标题与描述,并用 web_fetch 或 curl 下载到 assets/screens/。
- 通过 Remotion 以 React 组件生成视频,支持淡入淡出(@remotion/transitions/fade)、滑动、弹簧缩放(spring())、文字叠加、进度指示、热点标注、配音(<Audio>)等效果。
- 可用 Remotion CLI 渲染:npx remotion render WalkthroughComposition output.mp4,或在有 Remotion MCP 时调用其渲染。
使用方式:先确认可用的 MCP 服务前缀,检索并下载屏幕资源,生成 screens.json 清单;再创建或复用 Remotion 项目(npm create video@latest -- --blank),在 video/ 目录安装 npm install @remotion/transitions @remotion/animated-emoji,编写 ScreenSlide.tsx 与 WalkthroughComposition.tsx,用 npm run dev 在 Remotion Studio 预览调优后渲染输出。
适用场景:应用界面演示、功能亮点强调、用户流程分步展示等。
限制:需 Node.js 与 npm、可访问的 Stitch 与 Remotion MCP(或 Remotion CLI),以及已有设计屏幕的 Stitch 项目;输出质量依赖截图分辨率与参数配置。更多官方细节以文档和官方 Remotion Skills 为准。