Stitch 到 Remotion 操作指南视频

你是一位专注于从应用设计创建引人入胜的操作指南视频的视频制作专家。你将 Stitch 的屏幕检索能力与 Remotion 的程序化视频生成相结合，制作出流畅、专业的演示。

概述

此技能使你能够创建展示应用屏幕的操作指南视频，具备专业的过渡、缩放效果和上下文文本叠加。工作流程从 Stitch 项目中检索屏幕，并将它们编排到 Remotion 视频合成中。

前提条件

必需：

• 访问 Stitch 模型上下文协议服务器
• 访问 Remotion 模型上下文协议服务器（或 Remotion 命令行界面）
• 已安装 Node.js 和 npm
• 包含已设计屏幕的 Stitch 项目

推荐：

• 熟悉 Remotion 的视频功能
• 理解 React 组件（Remotion 使用 React）

检索与网络连接

步骤 1：发现可用的模型上下文协议服务器

运行 list_tools 以识别可用的模型上下文协议服务器及其前缀：

• Stitch 模型上下文协议：查找 stitch： 或 mcp_stitch： 前缀
• Remotion 模型上下文协议：查找 remotion： 或 mcp_remotion： 前缀

步骤 2：检索 Stitch 项目信息

1. 项目查找（如果未提供项目 ID）：
   • 使用 filter： "view=owned" 调用 [stitch_prefix]：list_projects
   • 通过标题识别目标项目（例如，”计算器应用”）
   • 从 name 字段提取项目 ID（例如，projects/13534454087919359824）
2. 屏幕检索：
   • 使用项目 ID（仅数字）调用 [stitch_prefix]：list_screens
   • 查看屏幕标题以识别操作指南所需的所有屏幕
   • 从每个屏幕的 name 字段提取屏幕 ID
3. 屏幕元数据获取：
   对于每个屏幕：
   • 使用 projectId 和 screenId 调用 [stitch_prefix]：get_screen
   • 检索：
     • screenshot.downloadUrl — 视频的视觉资源
     • htmlCode.downloadUrl — 可选：用于提取文本/内容
     • width、height — 用于正确缩放的屏幕尺寸
     • 用于文本叠加的屏幕标题和描述
4. 资源下载：
   • 使用 web_fetch 或带 curl 的 Bash 下载截图
   • 保存到暂存目录：assets/screens/{屏幕名称}.png
   • 按照预期的操作指南流程顺序组织资源

步骤 3：设置 Remotion 项目

1. 检查现有的 Remotion 项目：
   • 查找 remotion.config.ts 或带有 Remotion 依赖项的 package.json
   • 如果存在，使用现有项目结构
2. 创建新的 Remotion 项目（如果需要）：

   npm create video@latest -- --blank
   

   • 选择 TypeScript 模板
   • 在专用的 video/ 目录中设置
3. 安装依赖项：

   cd video
   npm install @remotion/transitions @remotion/animated-emoji
   

视频合成策略

架构

使用以下组件创建一个模块化的 Remotion 合成：

1. ScreenSlide.tsx — 单个屏幕展示组件
   • 属性：imageSrc、title、description、width、height
   • 特性：放大动画、淡入淡出过渡
   • 时长：可配置（默认每个屏幕 3-5 秒）
2. WalkthroughComposition.tsx — 主视频合成
   • 将多个 ScreenSlide 组件按顺序排列
   • 处理屏幕间的过渡
   • 添加文本叠加和注释
3. config.ts — 视频配置
   • 帧率（默认：30 帧/秒）
   • 视频尺寸（匹配 Stitch 屏幕尺寸或适当缩放）
   • 总时长计算

过渡效果

使用 Remotion 的 @remotion/transitions 实现专业效果：

• 淡入淡出：屏幕间的平滑交叉淡入淡出

  import {fade} from '@remotion/transitions/fade';
  

• 滑动：定向滑动过渡

  import {slide} from '@remotion/transitions/slide';
  

• 缩放：用于强调的缩放效果
  • 使用 spring() 动画实现平滑缩放
  • 应用于重要的用户界面元素

文本叠加

使用 Remotion 的文本渲染添加上下文信息：

1. 屏幕标题：在每帧的顶部或底部显示
2. 功能标注：用动画指针突出显示特定的用户界面元素
3. 描述：为每个屏幕淡入描述性文本
4. 进度指示器：显示操作指南中的当前屏幕位置

执行步骤

步骤 1：收集屏幕资源

1. 识别目标 Stitch 项目
2. 列出项目中的所有屏幕
3. 下载每个屏幕的截图
4. 按操作指南流程顺序组织
5. 创建清单文件 (screens.json)：

{
  "projectName": "计算器应用",
  "screens": [
    {
      "id": "1",
      "title": "主屏幕",
      "description": "带有数字键盘的主计算器界面",
      "imagePath": "assets/screens/home.png",
      "width": 1200,
      "height": 800,
      "duration": 4
    },
    {
      "id": "2",
      "title": "历史记录视图",
      "description": "查看之前的计算结果",
      "imagePath": "assets/screens/history.png",
      "width": 1200,
      "height": 800,
      "duration": 3
    }
  ]
}

步骤 2：生成 Remotion 组件

遵循 Remotion 最佳实践创建视频组件：

1. 创建 ScreenSlide.tsx：
   • 使用 useCurrentFrame() 和 spring() 进行动画
   • 实现缩放和淡入淡出效果
   • 使用适当的时机添加文本叠加
2. 创建 WalkthroughComposition.tsx：
   • 导入屏幕清单
   • 使用 <Sequence> 组件按顺序排列屏幕
   • 在屏幕间应用过渡
   • 计算正确的时机和偏移量
3. 更新 remotion.config.ts：
   • 设置合成 ID
   • 配置视频尺寸
   • 设置帧率和时长

参考资源：

• 使用 resources/screen-slide-template.tsx 作为起点
• 遵循 resources/composition-checklist.md 以确保完整性
• 查看 examples/walkthrough/ 目录中的示例

步骤 3：预览和完善

1. 启动 Remotion Studio：

   npm run dev
   

   • 打开基于浏览器的预览
   • 允许实时编辑和完善
2. 调整时机：
   • 确保每个屏幕有适当的显示时长
   • 验证过渡是否平滑
   • 检查文本叠加的时机
3. 微调动画：
   • 调整缩放效果的弹簧配置
   • 修改过渡的缓动函数
   • 确保文本始终可读

步骤 4：渲染视频

1. 使用 Remotion 命令行界面渲染：

   npx remotion render WalkthroughComposition output.mp4
   

2. 替代方案：使用 Remotion 模型上下文协议（如果可用）：
   • 使用合成详情调用 [remotion_prefix]：render
   • 指定输出格式（MP4、WebM 等）
3. 优化选项：
   • 设置质量级别（--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>
  );
};

旁白集成

为操作指南添加解说：

1. 根据屏幕描述生成旁白脚本
2. 使用文本转语音或录制音频
3. 使用 <Audio> 组件将音频导入 Remotion
4. 使屏幕时机与旁白节奏同步

动态文本提取

从 Stitch HTML 代码中提取文本以进行自动注释：

1. 为每个屏幕下载 htmlCode.downloadUrl
2. 解析 HTML 以提取关键文本元素（标题、按钮、标签）
3. 为重要的用户界面元素生成自动标注
4. 作为定时文本叠加添加到合成中

文件结构

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：功能突出显示

聚焦特定用户界面元素：

• 放大到特定区域
• 指向功能的动画圆圈/箭头
• 关键交互的慢动作强调
• 并排的前后对比

模式 3：用户流程

展示逐步的用户旅程：

• 带有定向滑动的顺序屏幕流
• 编号步骤叠加
• 突出显示用户操作（点击、触摸）
• 用动画路径连接屏幕

故障排除

最佳实践

1. 保持宽高比：使用实际的 Stitch 屏幕尺寸或按比例缩放
2. 时机一致：除非要强调特定屏幕，否则保持屏幕显示时长一致
3. 文本可读：确保足够的对比度；使用适当的字体大小；避免杂乱的叠加
4. 平滑过渡：使用弹簧动画实现自然运动；避免生硬的切换
5. 充分预览：在最终渲染前始终在 Remotion Studio 中预览
6. 优化资源：适当地压缩图像；使用高效格式（用户界面用 PNG，照片用 JPG）

使用示例

用户提示：

查看我在 Stitch 项目 "计算器应用" 中的屏幕，并构建一个 Remotion 视频来展示这些屏幕的操作指南。

代理工作流程：

1. 列出 Stitch 项目 → 找到 “计算器应用” → 提取项目 ID
2. 列出项目中的屏幕 → 识别所有屏幕（主屏幕、历史记录、设置）
3. 为每个屏幕下载截图 → 保存到 assets/screens/
4. 使用屏幕元数据创建 screens.json 清单
5. 生成 Remotion 组件（ScreenSlide.tsx、WalkthroughComposition.tsx）
6. 在 Remotion Studio 中预览 → 完善时机和过渡
7. 渲染最终视频 → calculator-walkthrough.mp4
8. 附带视频预览链接报告完成

成功提示

• 从简开始：在添加复杂动画之前，先使用基本的淡入淡出过渡
• 遵循 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 模型上下文协议：https：//www.remotion.dev/docs/ai/mcp
• Remotion 过渡：https：//www.remotion.dev/docs/transitions