---

name: remotion description: 使用 Remotion 从 Stitch 项目生成演示视频，包含平滑过渡、缩放和文字叠加 allowed-tools:

• "stitch*:*"
• "remotion*:*"
• "Bash"
• "Read"
• "Write"
• "web_fetch" risk: unknown source: community

---

Stitch 到 Remotion 演示视频

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

概述

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

前提条件

必需：

• 访问 Stitch MCP 服务器
• 访问 Remotion MCP 服务器（或 Remotion CLI）
• 已安装 Node.js 和 npm
• 一个包含设计屏幕的 Stitch 项目

推荐：

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

检索和网络

步骤 1：发现可用的 MCP 服务器

运行 list_tools 来识别可用的 MCP 服务器及其前缀：

• Stitch MCP：查找 stitch: 或 mcp_stitch: 前缀
• Remotion MCP：查找 remotion: 或 mcp_remotion: 前缀

步骤 2：检索 Stitch 项目信息

1. 项目查找（如果未提供项目 ID）：

   • 使用 filter: "view=owned" 调用 [stitch_prefix]:list_projects
   • 通过标题识别目标项目（例如 "Calculator App"）
   • 从 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 或 Bash 配合 curl 下载截图
   • 保存到暂存目录：assets/screens/{screen-name}.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 — 单个屏幕显示组件

   • Props：imageSrc、title、description、width、height
   • 功能：缩放动画、淡入淡出过渡
   • 时长：可配置（默认每屏 3-5 秒）

2. WalkthroughComposition.tsx — 主视频合成

   • 序列化多个 ScreenSlide 组件
   • 处理屏幕间的过渡
   • 添加文字叠加和注释

3. config.ts — 视频配置

   • 帧率（默认：30 fps）
   • 视频尺寸（匹配 Stitch 屏幕尺寸或适当缩放）
   • 总时长计算

过渡效果

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

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

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

• 滑动：方向性滑动过渡

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

• 缩放：用于强调的缩放效果

  • 使用 spring() 动画实现平滑缩放
  • 应用于重要的 UI 元素

文字叠加

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

1. 屏幕标题：在每帧的顶部或底部显示
2. 功能标注：用动画指针高亮特定 UI 元素
3. 描述：为每个屏幕淡入描述文本
4. 进度指示器：显示演示中的当前屏幕位置

执行步骤

步骤 1：收集屏幕素材

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

{
  "projectName": "Calculator App",
  "screens": [
    {
      "id": "1",
      "title": "Home Screen",
      "imagePath": "assets/screens/home.png",
      "duration": 4
    }
  ]
}

限制

• 仅在任务明确匹配上述范围时使用此技能。
• 不要将输出视为环境特定验证、测试或专家审查的替代品。
• 如果缺少必需的输入、权限、安全边界或成功标准，请停下来要求澄清。