Stitch 到 Remotion 导览视频生成
你是一位专注于从应用设计创建引人入胜导览视频的视频制作专家。你将 Stitch 的屏幕检索能力与 Remotion 的程序化视频生成相结合，制作出流畅、专业的演示内容。
概述
该技能使你能够创建导览视频，以专业过渡、缩放效果和上下文文字叠加来展示应用屏幕。工作流程从 Stitch 项目中检索屏幕，并将其编排成 Remotion 视频合成。
前提条件
必需：
- 访问 Stitch MCP 服务器
- 访问 Remotion MCP 服务器（或 Remotion CLI）
- 已安装 Node.js 和 npm
- 具有已设计屏幕的 Stitch 项目
推荐：
- 熟悉 Remotion 的视频能力
- 理解 React 组件（Remotion 使用 React）
检索与网络连接
第一步：发现可用的 MCP 服务器
运行 list_tools 来识别可用的 MCP 服务器及其前缀：
- Stitch MCP：查找
stitch:或mcp_stitch:前缀 - Remotion MCP：查找
remotion:或mcp_remotion:前缀
第二步：检索 Stitch 项目信息
-
项目查找（如果未提供项目 ID）：
- 调用
[stitch_prefix]:list_projects，参数为filter: "view=owned" - 按标题识别目标项目（例如“Calculator App”）
- 从
name字段提取项目 ID（例如projects/13534454087919359824）
- 调用
-
屏幕检索：
- 使用项目 ID（仅数字）调用
[stitch_prefix]:list_screens - 查看屏幕标题以识别导览所需的所有屏幕
- 从每个屏幕的
name字段中提取屏幕 ID
- 使用项目 ID（仅数字）调用
-
屏幕元数据获取： 对于每个屏幕：
- 使用
projectId和screenId调用[stitch_prefix]:get_screen - 检索：
screenshot.downloadUrl— 视频的可视资源htmlCode.downloadUrl— 可选：用于提取文本/内容width，height— 屏幕尺寸，用于正确缩放- 屏幕标题和描述，用于文字叠加
- 使用
-
资源下载：
- 使用
web_fetch或包含curl的Bash下载截图 - 保存到暂存目录：
assets/screens/{screen-name}.png - 按预期的导览流程顺序组织资源
- 使用
第三步：设置 Remotion 项目
-
检查现有 Remotion 项目：
- 查找
remotion.config.ts或包含 Remotion 依赖的package.json - 如果存在，使用现有项目结构
- 查找
-
创建新的 Remotion 项目（如果需要）：
npm create video@latest -- --blank- 选择 TypeScript 模板
- 在专用的
video/目录中设置
-
安装依赖：
cd video npm install @remotion/transitions @remotion/animated-emoji
视频合成策略
架构
创建一个模块化的 Remotion 合成，包含以下组件：
-
ScreenSlide.tsx— 单个屏幕显示组件- 属性：
imageSrc，title，description，width，height - 功能：缩放动画、淡入淡出过渡
- 时长：可配置（默认每个屏幕 3-5 秒）
- 属性：
-
WalkthroughComposition.tsx— 主视频合成- 排列多个
ScreenSlide组件 - 处理屏幕间的过渡
- 添加文字叠加和注释
- 排列多个
-
config.ts— 视频配置- 帧率（默认：30 fps）
- 视频尺寸（匹配 Stitch 屏幕尺寸或适当缩放）
- 总时长计算
过渡效果
使用 Remotion 的 @remotion/transitions 实现专业效果：
-
淡入淡出：屏幕之间的平滑交叉淡入淡出
import {fade} from '@remotion/transitions/fade'; -
滑动：定向滑动过渡
import {slide} from '@remotion/transitions/slide'; -
缩放：用于强调的缩放效果
- 使用
spring()动画实现平滑缩放 - 应用于重要的 UI 元素
- 使用
文字叠加
使用 Remotion 的文本渲染添加上下文信息：
- 屏幕标题：在每个帧的顶部或底部显示
- 功能标注：用动画指针突出显示特定 UI 元素
- 描述：为每个屏幕淡入淡出描述文本
- 进度指示器：显示导览中的当前屏幕位置
执行步骤
第一步：收集屏幕资源
- 识别目标 Stitch 项目
- 列出项目中的所有屏幕
- 下载每个屏幕的截图
- 按导览流程顺序组织
- 创建清单文件（
screens.json）：
{
"projectName": "Calculator App",
"screens": [
{
"id": "1",
"title": "Home Screen",
"description": "Main calculator interface with number pad",
"imagePath": "assets/screens/home.png",
"width": 1200,
"height": 800,
"duration": 4
},
{
"id": "2",
"title": "History View",
"description": "View of previous calculations",
"imagePath": "assets/screens/history.png",
"width": 1200,
"height": 800,
"duration": 3
}
]
}
第二步：生成 Remotion 组件
按照 Remotion 最佳实践创建视频组件：
-
创建
ScreenSlide.tsx：- 使用
useCurrentFrame()和spring()实现动画 - 实现缩放和淡入淡出效果
- 添加带有正确时机的文字叠加
- 使用
-
创建
WalkthroughComposition.tsx：- 导入屏幕清单
- 使用
<Sequence>组件排列屏幕 - 在屏幕之间应用过渡
- 计算正确的时机和偏移量
-
更新
remotion.config.ts：- 设置合成 ID
- 配置视频尺寸
- 设置帧率和时长
参考资源：
- 使用
resources/screen-slide-template.tsx作为起点 - 按照
resources/composition-checklist.md确保完整性 - 查看
examples/walkthrough/目录中的示例
第三步：预览和优化
-
启动 Remotion Studio：
npm run dev- 打开基于浏览器的预览
- 支持实时编辑和优化
-
调整时机：
- 确保每个屏幕有适当的显示时长
- 验证过渡是否平滑
- 检查文字叠加时机
-
微调动画：
- 调整缩放效果的弹簧配置
- 修改过渡的缓动函数
- 确保文本始终可读
第四步：渲染视频
-
使用 Remotion CLI 渲染：
npx remotion render WalkthroughComposition output.mp4 -
替代方案：使用 Remotion MCP（如果可用）：
- 使用合成详情调用
[remotion_prefix]:render - 指定输出格式（MP4，WebM 等）
- 使用合成详情调用
-
优化选项：
- 设置质量级别（
--quality） - 配置编解码器（
--codec h264或h265） - 启用并行渲染（
--concurrency）
- 设置质量级别（
高级功能
交互式热区
突出显示可点击元素或重要功能：
import {interpolate, useCurrentFrame} from 'remotion';
const Hotspot = ({x, y, label}) => {
const frame = useCurrentFrame();
const scale = spring({
frame,
fps: 30,
config: {damping: 10, stiffness: 100}
});
return (
<div style={{
position: 'absolute',
left: x,
top: y,
transform: `scale(${scale})`
}}>
<div className="pulse-ring" />
<span>{label}</span>
</div>
);
};
画外音集成
为导览添加旁白：
- 根据屏幕描述生成画外音脚本
- 使用文本转语音或录制音频
- 使用
<Audio>组件将音频导入 Remotion - 将屏幕时机与旁白节奏同步
动态文本提取
从 Stitch HTML 代码中提取文本以实现自动注释：
- 下载每个屏幕的
htmlCode.downloadUrl - 解析 HTML 以提取关键文本元素（标题、按钮、标签）
- 为重要 UI 元素生成自动标注
- 作为定时文字叠加添加到合成中
文件结构
project/
├── video/ # Remotion 项目目录
│ ├── src/
│ │ ├── WalkthroughComposition.tsx
│ │ ├── ScreenSlide.tsx
│ │ ├── components/
│ │ │ ├── Hotspot.tsx
│ │ │ └── TextOverlay.tsx
│ │ └── Root.tsx
│ ├── public/
│ │ └── assets/
│ │ └── screens/ # 下载的 Stitch 截图
│ │ ├── home.png
│ │ └── history.png
│ ├── remotion.config.ts
│ └── package.json
├── screens.json # 屏幕清单
└── output.mp4 # 渲染的视频
与 Remotion 技能的集成
Remotion 维护了自己的代理技能，定义了最佳实践。查看这些技能以获取高级技术：
- 仓库：https://github.com/remotion-dev/remotion/tree/main/packages/skills
- 安装：
npx skills add remotion-dev/skills
要利用的关键 Remotion 技能：
- 动画时机和缓动
- 合成架构模式
- 性能优化
- 音频同步
常见模式
模式 1：简单的幻灯片秀
带淡入淡出过渡的基本导览：
- 每个屏幕 3-5 秒
- 交叉淡入淡出过渡
- 底部文字叠加显示屏幕标题
- 顶部进度条
模式 2：功能突出显示
聚焦特定 UI 元素：
- 缩放到特定区域
- 动画圆圈/箭头指向功能
- 慢动作强调关键交互
- 并排对比 before/after
模式 3：用户流程
显示逐步用户旅程：
- 带定向滑动的顺序屏幕流程
- 数字步骤叠加
- 突出显示用户操作（点击、触摸）
- 用动画路径连接屏幕
故障排除
| 问题 | 解决方案 |
|---|---|
| 截图模糊 | 确保下载的图像为全分辨率；检查 screenshot.downloadUrl 质量设置 |
| 文本对齐错误 | 验证屏幕尺寸与合成大小匹配；根据实际屏幕尺寸调整文本位置 |
| 动画卡顿 | 将帧率提高到 60fps；使用带有适当阻尼的弹簧配置 |
| Remotion 构建失败 | 检查 Node 版本兼容性；确保所有依赖已安装；查看 Remotion 文档 |
| 时机感觉不对 | 在清单中调整每个屏幕的时长；在 Remotion Studio 中预览；与真实用户测试 |
最佳实践
- 保持宽高比：使用实际 Stitch 屏幕尺寸或按比例缩放
- 一致的时机：除非要强调特定屏幕，否则保持屏幕显示时长一致
- 可读的文本：确保足够的对比度；使用合适的字体大小；避免杂乱的叠加
- 平滑的过渡：使用弹簧动画实现自然运动；避免生硬的切换
- 彻底预览：始终在 Remotion Studio 中预览后再最终渲染
- 优化资源：适当压缩图像；使用高效格式（UI 用 PNG，照片用 JPG）
示例用法
用户提示：
查找我 Stitch 项目 "Calculator App" 中的屏幕，并构建一个显示屏幕导览的 Remotion 视频。
代理工作流程：
- 列出 Stitch 项目 → 找到 "Calculator App" → 提取项目 ID
- 列出项目中的屏幕 → 识别所有屏幕（Home，History，Settings）
- 下载每个屏幕的截图 → 保存到
assets/screens/ - 创建包含屏幕元数据的
screens.json清单 - 生成 Remotion 组件（
ScreenSlide.tsx，WalkthroughComposition.tsx） - 在 Remotion Studio 中预览 → 优化时机和过渡
- 渲染最终视频 →
calculator-walkthrough.mp4 - 报告完成，附带视频预览链接
成功提示
- 从简单开始：先使用基本淡入淡出过渡，再添加复杂动画
- 遵循 Remotion 模式：利用 Remotion 的官方技能和文档
- 使用清单文件：将屏幕数据组织在 JSON 中，便于更新
- 频繁预览：使用 Remotion Studio 尽早发现问题
- 考虑可访问性：添加字幕；确保文本可读；使用清晰的视觉效果
- 优化平台：使视频尺寸匹配目标平台（YouTube、社交媒体等）
参考
- Stitch 文档：https://stitch.withgoogle.com/docs/
- Remotion 文档：https://www.remotion.dev/docs/
- Remotion 技能：https://www.remotion.dev/docs/ai/skills
- Remotion MCP：https://www.remotion.dev/docs/ai/mcp
- Remotion 过渡：https://www.remotion.dev/docs/transitions
何时使用
当处理与其上述主要领域或功能相关的任务时，使用此技能。
限制
- 仅当任务明确匹配上述范围时使用此技能。
- 不要将输出视为特定环境验证、测试或专家审查的替代品。
- 如果缺少必需的输入、权限、安全边界或成功标准，请停下来并请求澄清。