用途:从 Stitch 应用设计生成走查(walkthrough)视频,把 Stitch 屏幕截图组合成带转场、缩放和文字叠加的程序化视频演示。仅在用户明确提到“Stitch”且需要走查视频或 Remotion 时使用。
主要能力:通过 Stitch MCP(或 stitch-mcp-list-projects、stitch-mcp-list-screens、stitch-mcp-get-screen)获取项目与屏幕信息,读取 screenshot.downloadUrl、htmlCode.downloadUrl、宽高、标题、描述;下载截图到 assets/screens/{screen-name}.png 并按顺序建立 screens.json 清单;用 Remotion 构建 ScreenSlide.tsx(单屏缩放/淡入、可配置时长,如 3–5 秒)与 WalkthroughComposition.tsx(多屏序列、fade/slide 转场、文字叠加);可生成画外音与基于 HTML 的动态文字标注。
前提条件:Stitch MCP Server、Remotion MCP 或 Remotion CLI、Node.js 与 npm,以及含设计屏幕的 Stitch 项目。
使用方式:先执行 list_tools 发现前缀,用 [stitch_prefix]:list_projects(view=owned)与 list_screens 定位屏幕,再对每屏调用 get_screen 并下载资源、生成 screens.json。随后用 npm create video@latest -- --blank 建立视频工程并安装 @remotion/transitions,构建组件,npm run dev 预览,最后用 npx remotion render WalkthroughComposition output.mp4 渲染。若存在 DESIGN.md,可用屏幕标题与描述作为叠加文字。
常见模式:简单幻灯片(每屏 3–5 秒、交叉淡化、底部标题、顶部进度条)、功能高亮(区域缩放、动态圆圈箭头、慢动作、前后对比)、用户流程(顺序滑动、编号步骤、点击高亮、路径连线)。
限制与排错:截图模糊需使用全分辨率 URL;文字错位需匹配构图尺寸与屏幕尺寸;动画卡顿可提高 fps 并调整 spring damping;构建失败检查 Node/Remotion 版本与依赖。价格、收费与其他未提及细节暂未提供。