stitch-remotion

用途

该技能面向视频制作场景，用于把 Stitch 应用设计稿转化为走查视频（walkthrough video）。它把 Stitch MCP 的屏幕获取能力与 Remotion 的程序化视频能力结合起来，生成带转场、缩放和文字叠加的演示视频。

使用约束：仅当用户明确提到“Stitch”并且提到走查视频或 Remotion 时才使用本技能。

主要能力

• 通过 Stitch MCP 获取项目与屏幕：使用 list_projects（可过滤 view=owned）、list_screens（需 projectId）、get_screen 获取屏幕元数据，包括 screenshot.downloadUrl、htmlCode.downloadUrl、width、height、title、description。
• 下载屏幕截图并保存到 assets/screens/{screen-name}.png，按走查顺序排列。
• 生成 screens.json 清单，包含 projectName 以及 screens 数组（id、title、description、imagePath、width、height、duration）。
• 使用 Remotion 构建视频组件：ScreenSlide.tsx（单屏，含 imageSrc、title、description、width、height，支持缩放/淡入淡出，时长可配置，例如 3–5 秒）；WalkthroughComposition.tsx（ScreenSlide 序列，使用 @remotion/transitions 实现淡入淡出/滑动转场，并叠加文字）。
• 配置帧率（例如 30 fps）、尺寸（匹配 Stitch 或缩放）和总时长。
• 使用 Remotion 的 spring() 实现缩放，使用 @remotion/transitions（fade、slide）实现屏幕间转场。

常见模式

• 简单幻灯片：每屏 3–5 秒，交叉淡入淡出，底部文字叠加（屏幕标题），顶部进度条。
• 功能高亮：放大到特定区域；动画圆圈/箭头；关键交互慢动作；前后对比。
• 用户流程：顺序屏幕配合方向性滑动；编号步骤叠加；高亮操作（点击、轻触）；用动画路径连接屏幕。

可选能力

• 旁白：根据屏幕描述生成脚本；使用 TTS 或录制音频；使屏幕时间与旁白同步。
• 动态文字：下载每个屏幕的 htmlCode.downloadUrl；解析 HTML 中的标题/按钮/标签；在合成中生成定时标注。

使用方式

前置条件：

• Stitch MCP Server（https://stitch.withgoogle.com/docs/mcp/guide/）
• Remotion MCP 或 Remotion CLI；Node.js 和 npm
• 一个包含已设计屏幕的 Stitch 项目

执行步骤：

1. 收集素材：列出 Stitch 项目 → 列出屏幕 → 对每个屏幕调用 get_screen → 下载截图 → 构建 screens.json。
2. Remotion 设置：使用现有 Remotion 项目，或在 video/ 目录下运行 npm create video@latest -- --blank；安装 @remotion/transitions 等。
3. 构建组件：ScreenSlide.tsx（使用 useCurrentFrame、spring、缩放/淡入淡出）；WalkthroughComposition.tsx（Sequence、清单）；更新 remotion.config.ts。
4. 预览：在 video/ 中运行 npm run dev；调整时间和转场。
5. 渲染：运行 npx remotion render WalkthroughComposition output.mp4（或使用可用的 Remotion MCP）。

检索与网络：

• 发现前缀：对 Stitch 和 Remotion MCP 前缀运行 list_tools。
• 项目/屏幕查找：使用 [stitch_prefix]:list_projects（过滤 view=owned），然后用 projectId 调用 [stitch_prefix]:list_screens；识别走查所需屏幕。
• 屏幕元数据：对每个屏幕调用 [stitch_prefix]:get_screen；获取 screenshot.downloadUrl、htmlCode.downloadUrl、width、height、title、description。
• 素材下载：下载截图（例如通过 web_fetch 或 Bash curl）；保存到 assets/screens/{screen-name}.png，按走查顺序排列。
• 清单：创建 screens.json，包含 projectName、screens 数组（id、title、description、imagePath、width、height、duration）。

与仓库集成：

• Stitch 屏幕：使用 stitch-mcp-list-projects、stitch-mcp-list-screens、stitch-mcp-get-screen 解析 projectId/screenId 并获取下载 URL。
• 设计一致性：如果存在 DESIGN.md（来自 stitch-design-md），使用屏幕标题/描述作为叠加文字。

文件结构： project/ ├── video/ │ ├── src/ │ │ ├── WalkthroughComposition.tsx │ │ ├── ScreenSlide.tsx │ │ └── Root.tsx │ ├── public/assets/screens/ # Stitch screenshots │ ├── remotion.config.ts │ └── package.json ├── screens.json # Screen manifest └── output.mp4

适用场景

• 需要把 Stitch 设计稿快速转化为演示视频。
• 制作应用走查、功能高亮或用户流程演示视频。
• 需要程序化、可复用的视频合成流程（转场、缩放、文字叠加）。

限制与故障排查

• 仅当用户明确提到“Stitch”以及走查视频或 Remotion 时才使用。
• 截图模糊：使用全分辨率截图 URL。
• 文字错位：使合成尺寸匹配屏幕尺寸。
• 动画卡顿：提高 fps；调整 spring 阻尼。
• 构建失败：检查 Node/Remotion 版本；安装依赖。

参考

• Remotion docs
• Remotion transitions
• Remotion Skills — animation、composition patterns、performance；使用 npx skills add remotion-dev/skills 安装。
• Remotion MCP — 程序化渲染和预览。
• Stitch MCP
• 示例：完整模板见 google-labs-code/stitch-skills。

关键词：Stitch、Remotion、走查视频、转场。