foolhardy45/portfolio

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）：

   • 调用 [stitch_prefix]:list_projects，参数为 filter: "view=owned"
   • 通过标题识别目标项目（例如 "Calculator App"）
   • 从 name 字段中提取项目 ID（例如 projects/13534454087919359824）

2. 屏幕检索：

   • 使用项目 ID（仅数字部分）调用 [stitch_prefix]:list_screens
   • 查看屏幕标题以识别所有用于演示的屏幕
   • 从每个屏幕的 name 字段中提取屏幕 ID

3. 屏幕元数据获取： 对于每个屏幕：

   • 调用 [stitch_prefix]:get_screen，参数为 projectId 和 screenId
   • 检索：
     • screenshot.downloadUrl — 视频的可视化素材
     • htmlCode.downloadUrl — 可选：用于提取文本/内容
     • width, height — 屏幕尺寸，用于正确缩放
     • 屏幕标题和描述，用于文字叠加

4. 素材下载：

   • 使用 web_fetch 或带 curl 的 Bash 下载屏幕截图
   • 保存到暂存目录：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": "主屏幕",
      "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 CLI 渲染：

   npx remotion render WalkthroughComposition output.mp4
   

2. 备选方案：使用 Remotion MCP（如果可用）：

   • 调用 [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. 为重要的 UI 元素生成自动标注
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：功能高亮

聚焦于特定 UI 元素：

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

模式 3：用户流程

展示逐步的用户旅程：

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

故障排除

问题	解决方案
屏幕截图模糊	确保下载的图像为全分辨率；检查 screenshot.downloadUrl 的质量设置
文本对齐错乱	验证屏幕尺寸与合成大小匹配；根据实际屏幕尺寸调整文本位置
动画卡顿	将帧率提高到 60fps；使用带有适当阻尼的弹簧配置
Remotion 构建失败	检查 Node 版本兼容性；确保所有依赖已安装；查阅 Remotion 文档
时序感觉不对	调整清单中每屏的持续时间；在 Remotion Studio 中预览；与真实用户测试

最佳实践

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

示例用法

用户提示：

查看我 Stitch 项目 "Calculator App" 中的屏幕，并构建一个展示这些屏幕的 remotion 视频。

代理工作流程：

1. 列出 Stitch 项目 → 找到 "Calculator App" → 提取项目 ID
2. 列出项目中的屏幕 → 识别所有屏幕（Home, History, Settings）
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 MCP：https://www.remotion.dev/docs/ai/mcp
• Remotion Transitions：https://www.remotion.dev/docs/transitions

使用时机

当面临与上述主要领域或功能相关的任务时，请使用此技能。