remotion

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Stitch to Remotion Walkthrough Videos

从Stitch项目到Remotion导览视频

You are a video production specialist focused on creating engaging walkthrough videos from app designs. You combine Stitch's screen retrieval capabilities with Remotion's programmatic video generation to produce smooth, professional presentations.

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

Overview

概述

This skill enables you to create walkthrough videos that showcase app screens with professional transitions, zoom effects, and contextual text overlays. The workflow retrieves screens from Stitch projects and orchestrates them into a Remotion video composition.

本技能使您能够创建展示应用屏幕的导览视频，带有专业转场、缩放效果和上下文文本叠加层。工作流从Stitch项目中检索屏幕，并将其编排为Remotion视频合成。

Prerequisites

前提条件

Required:

Access to the Stitch MCP Server
Access to the Remotion MCP Server (or Remotion CLI)
Node.js and npm installed
A Stitch project with designed screens

Recommended:

Familiarity with Remotion's video capabilities
Understanding of React components (Remotion uses React)

必需项：

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

推荐项：

熟悉Remotion的视频功能
了解React组件（Remotion基于React构建）

Retrieval and Networking

检索与网络

Step 1: Discover Available MCP Servers

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

Run

list_tools

to identify available MCP servers and their prefixes:

Stitch MCP: Look for
```
stitch:
```
or
```
mcp_stitch:
```
prefix
Remotion MCP: Look for
```
remotion:
```
or
```
mcp_remotion:
```
prefix

运行

list_tools

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

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

Step 2: Retrieve Stitch Project Information

步骤2：检索Stitch项目信息

Project lookup (if Project ID is not provided):
- Call
```
[stitch_prefix]:list_projects
```
  with
```
filter: "view=owned"
```
- Identify target project by title (e.g., "Calculator App")
- Extract Project ID from
```
name
```
  field (e.g.,
```
projects/13534454087919359824
```
  )
Screen retrieval:
- Call
```
[stitch_prefix]:list_screens
```
  with the project ID (numeric only)
- Review screen titles to identify all screens for the walkthrough
- Extract Screen IDs from each screen's
```
name
```
  field
Screen metadata fetch: For each screen:
- Call
```
[stitch_prefix]:get_screen
```
  with
```
projectId
```
  and
```
screenId
```
- Retrieve:
  - ```
  screenshot.downloadUrl
```
  — Visual asset for the video
- ```
htmlCode.downloadUrl
```
    — Optional: for extracting text/content
  - ```
  width
```
  ,
```
  height
```
  — Screen dimensions for proper scaling
- Screen title and description for text overlays
Asset download:
- Use
```
web_fetch
```
  or
```
Bash
```
  with
```
curl
```
  to download screenshots
- Save to a staging directory:
```
assets/screens/{screen-name}.png
```
- Organize assets in order of the intended walkthrough flow

项目查找（如果未提供项目ID）：
- 调用
```
[stitch_prefix]:list_projects
```
  ，参数为
```
filter: "view=owned"
```
- 通过标题识别目标项目（例如“计算器应用”）
- 从
```
name
```
  字段中提取项目ID（例如
```
projects/13534454087919359824
```
  ）
屏幕检索：
- 使用项目ID（仅数字部分）调用
```
[stitch_prefix]:list_screens
```
- 查看屏幕标题以识别导览所需的所有屏幕
- 从每个屏幕的
```
name
```
  字段中提取屏幕ID
屏幕元数据获取：针对每个屏幕：
- 使用
```
projectId
```
  和
```
screenId
```
  调用
```
[stitch_prefix]:get_screen
```
- 检索：
  - ```
  screenshot.downloadUrl
```
  — 视频使用的视觉资源
- ```
htmlCode.downloadUrl
```
    — 可选：用于提取文本/内容
  - ```
  width
```
  ,
```
  height
```
  — 屏幕尺寸，用于正确缩放
- 屏幕标题和描述，用于文本叠加层
资源下载：
- 使用
```
web_fetch
```
  或带
```
curl
```
  的
```
Bash
```
  命令下载截图
- 保存到暂存目录：
```
assets/screens/{screen-name}.png
```
- 按照导览流程的预期顺序整理资源

Step 3: Set Up Remotion Project

步骤3：设置Remotion项目

Check for existing Remotion project:
- Look for
```
remotion.config.ts
```
  or
```
package.json
```
  with Remotion dependencies
- If exists, use the existing project structure
Create new Remotion project (if needed):
bash
```
npm create video@latest -- --blank
```
- Choose TypeScript template
- Set up in a dedicated
```
video/
```
  directory

Install dependencies:

bash

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

检查现有Remotion项目：
- 查找带有Remotion依赖的
```
remotion.config.ts
```
  或
```
package.json
```
- 如果存在，使用现有项目结构
创建新的Remotion项目（如果需要）：
bash
```
npm create video@latest -- --blank
```
- 选择TypeScript模板
- 在专用的
```
video/
```
  目录中设置

安装依赖：

bash

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

Video Composition Strategy

视频合成策略

Architecture

架构

Create a modular Remotion composition with these components:

ScreenSlide.tsx
— Individual screen display component
- Props:
```
imageSrc
```
  ,
```
title
```
  ,
```
description
```
  ,
```
width
```
  ,
```
height
```
- Features: Zoom-in animation, fade transitions
- Duration: Configurable (default 3-5 seconds per screen)
WalkthroughComposition.tsx
— Main video composition
- Sequences multiple
```
ScreenSlide
```
  components
- Handles transitions between screens
- Adds text overlays and annotations
config.ts
— Video configuration
- Frame rate (default: 30 fps)
- Video dimensions (match Stitch screen dimensions or scale appropriately)
- Total duration calculation

创建带有以下组件的模块化Remotion合成：

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

Transition Effects

转场效果

Use Remotion's

@remotion/transitions

for professional effects:

Fade: Smooth cross-fade between screens

tsx

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

Slide: Directional slide transitions

tsx

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

Zoom: Zoom in/out effects for emphasis
- Use
```
spring()
```
  animation for smooth zoom
- Apply to important UI elements

使用Remotion的

@remotion/transitions

实现专业效果：

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

tsx

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

滑动：定向滑动转场

tsx

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

缩放：用于强调的放大/缩小效果
- 使用
```
spring()
```
  动画实现平滑缩放
- 应用于重要的UI元素

Text Overlays

文本叠加层

Add contextual information using Remotion's text rendering:

Screen titles: Display at the top or bottom of each frame
Feature callouts: Highlight specific UI elements with animated pointers
Descriptions: Fade in descriptive text for each screen
Progress indicator: Show current screen position in walkthrough

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

屏幕标题：显示在每一帧的顶部或底部
功能标注：使用动画指针突出显示特定UI元素
描述文本：为每个屏幕淡入描述性文本
进度指示器：显示导览中的当前屏幕位置

Execution Steps

执行步骤

Step 1: Gather Screen Assets

步骤1：收集屏幕资源

Identify target Stitch project
List all screens in the project
Download screenshots for each screen
Organize in order of walkthrough flow
Create a manifest file (
```
screens.json
```
):

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
    }
  ]
}

识别目标Stitch项目
列出项目中的所有屏幕
下载每个屏幕的截图
按照导览流程顺序整理
创建清单文件 (
```
screens.json
```
)：

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
    }
  ]
}

Step 2: Generate Remotion Components

步骤2：生成Remotion组件

Create the video components following Remotion best practices:

Create
ScreenSlide.tsx
:
- Use
```
useCurrentFrame()
```
  and
```
spring()
```
  for animations
- Implement zoom and fade effects
- Add text overlays with proper timing
Create
WalkthroughComposition.tsx
:
- Import screen manifest
- Sequence screens with
```
<Sequence>
```
  components
- Apply transitions between screens
- Calculate proper timing and offsets
Update
remotion.config.ts
:
- Set composition ID
- Configure video dimensions
- Set frame rate and duration

Reference Resources:

Use
```
resources/screen-slide-template.tsx
```
as starting point
Follow
```
resources/composition-checklist.md
```
for completeness
Review examples in
```
examples/walkthrough/
```
directory

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

创建
ScreenSlide.tsx
：
- 使用
```
useCurrentFrame()
```
  和
```
spring()
```
  实现动画
- 实现缩放和淡入淡出效果
- 添加带适时显示的文本叠加层
创建
WalkthroughComposition.tsx
：
- 导入屏幕清单
- 使用
```
<Sequence>
```
  组件按顺序排列屏幕
- 在屏幕之间应用转场
- 计算适当的时间和偏移量
更新
remotion.config.ts
：
- 设置合成ID
- 配置视频尺寸
- 设置帧率和时长

参考资源：

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

Step 3: Preview and Refine

步骤3：预览与优化

Start Remotion Studio:
bash
```
npm run dev
```
- Opens browser-based preview
- Allows real-time editing and refinement
Adjust timing:
- Ensure each screen has appropriate display duration
- Verify transitions are smooth
- Check text overlay timing
Fine-tune animations:
- Adjust spring configurations for zoom effects
- Modify easing functions for transitions
- Ensure text is readable at all times

启动Remotion Studio：
bash
```
npm run dev
```
- 打开基于浏览器的预览
- 支持实时编辑和优化
调整时间：
- 确保每个屏幕有适当的展示时长
- 验证转场是否流畅
- 检查文本叠加层的显示时机
微调动画：
- 调整缩放效果的spring配置
- 修改转场的缓动函数
- 确保文本始终可读

Step 4: Render Video

步骤4：渲染视频

Render using Remotion CLI:

bash

npx remotion render WalkthroughComposition output.mp4

Alternative: Use Remotion MCP (if available):
- Call
```
[remotion_prefix]:render
```
  with composition details
- Specify output format (MP4, WebM, etc.)
Optimization options:
- Set quality level (
```
--quality
```
  )
- Configure codec (
```
--codec h264
```
  or
```
h265
```
  )
- Enable parallel rendering (
```
--concurrency
```
  )

使用Remotion CLI渲染：

bash

npx remotion render WalkthroughComposition output.mp4

替代方案：使用Remotion MCP（如果可用）：
- 使用合成详情调用
```
[remotion_prefix]:render
```
- 指定输出格式（MP4、WebM等）
优化选项：
- 设置质量等级 (
```
--quality
```
  )
- 配置编解码器 (
```
--codec h264
```
  或
```
h265
```
  )
- 启用并行渲染 (
```
--concurrency
```
  )

Advanced Features

高级功能

Interactive Hotspots

交互式热点

Highlight clickable elements or important features:

tsx

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>
  );
};

突出可点击元素或重要功能：

tsx

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>
  );
};

Voiceover Integration

旁白集成

Add narration to the walkthrough:

Generate voiceover script from screen descriptions
Use text-to-speech or record audio
Import audio into Remotion with
```
<Audio>
```
component
Sync screen timing with voiceover pacing

为导览添加旁白：

从屏幕描述生成旁白脚本
使用文本转语音或录制音频
使用
```
<Audio>
```
组件将音频导入Remotion
同步屏幕时长与旁白节奏

Dynamic Text Extraction

动态文本提取

Extract text from Stitch HTML code for automatic annotations:

Download
```
htmlCode.downloadUrl
```
for each screen
Parse HTML to extract key text elements (headings, buttons, labels)
Generate automatic callouts for important UI elements
Add to composition as timed text overlays

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

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

File Structure

文件结构

project/
├── video/                      # Remotion project directory
│   ├── src/
│   │   ├── WalkthroughComposition.tsx
│   │   ├── ScreenSlide.tsx
│   │   ├── components/
│   │   │   ├── Hotspot.tsx
│   │   │   └── TextOverlay.tsx
│   │   └── Root.tsx
│   ├── public/
│   │   └── assets/
│   │       └── screens/        # Downloaded Stitch screenshots
│   │           ├── home.png
│   │           └── history.png
│   ├── remotion.config.ts
│   └── package.json
├── screens.json                # Screen manifest
└── output.mp4                  # Rendered video

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                  # 渲染后的视频

Integration with Remotion Skills

与Remotion Skills集成

Remotion maintains its own Agent Skills that define best practices. Review these for advanced techniques:

Repository: https://github.com/remotion-dev/remotion/tree/main/packages/skills
Installation:
```
npx skills add remotion-dev/skills
```

Key Remotion skills to leverage:

Animation timing and easing
Composition architecture patterns
Performance optimization
Audio synchronization

Remotion维护着自己的Agent Skills，定义了最佳实践。查看这些技能以获取高级技术：

仓库：https://github.com/remotion-dev/remotion/tree/main/packages/skills
安装：
```
npx skills add remotion-dev/skills
```

可利用的关键Remotion技能：

动画时间与缓动
合成架构模式
性能优化
音频同步

Common Patterns

常见模式

Pattern 1: Simple Slide Show

模式1：简单幻灯片

Basic walkthrough with fade transitions:

3-5 seconds per screen
Cross-fade transitions
Bottom text overlay with screen title
Progress bar at top

带有淡入淡出转场的基础导览：

每个屏幕3-5秒
交叉淡入淡出转场
底部显示屏幕标题的文本叠加层
顶部进度条

Pattern 2: Feature Highlight

模式2：功能突出

Focus on specific UI elements:

Zoom into specific regions
Animated circles/arrows pointing to features
Slow-motion emphasis on key interactions
Side-by-side before/after comparisons

聚焦特定UI元素：

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

Pattern 3: User Flow

模式3：用户流程

Show step-by-step user journey:

Sequential screen flow with directional slides
Numbered steps overlay
Highlight user actions (clicks, taps)
Connect screens with animated paths

展示分步用户旅程：

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

Troubleshooting

故障排除

Issue	Solution
Blurry screenshots	Ensure downloaded images are at full resolution; check `screenshot.downloadUrl` quality settings
Misaligned text	Verify screen dimensions match composition size; adjust text positioning based on actual screen size
Choppy animations	Increase frame rate to 60fps; use proper spring configurations with appropriate damping
Remotion build fails	Check Node version compatibility; ensure all dependencies are installed; review Remotion docs
Timing feels off	Adjust duration per screen in manifest; preview in Remotion Studio; test with actual users

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

Best Practices

最佳实践

Maintain aspect ratio: Use actual Stitch screen dimensions or scale proportionally
Consistent timing: Keep screen display duration consistent unless emphasizing specific screens
Readable text: Ensure sufficient contrast; use appropriate font sizes; avoid cluttered overlays
Smooth transitions: Use spring animations for natural motion; avoid jarring cuts
Preview thoroughly: Always preview in Remotion Studio before final render
Optimize assets: Compress images appropriately; use efficient formats (PNG for UI, JPG for photos)

保持宽高比：使用实际Stitch屏幕尺寸或按比例缩放
一致的时长：保持屏幕展示时长一致，除非需要强调特定屏幕
文本可读性：确保足够的对比度；使用合适的字体大小；避免杂乱的叠加层
平滑转场：使用spring动画实现自然运动；避免突兀的切换
彻底预览：在最终渲染前始终在Remotion Studio中预览
优化资源：适当压缩图像；使用高效格式（UI用PNG，照片用JPG）

Example Usage

示例用法

User prompt:

Look up the screens in my Stitch project "Calculator App" and build a remotion video 
that shows a walkthrough of the screens.

Agent workflow:

List Stitch projects → Find "Calculator App" → Extract project ID
List screens in project → Identify all screens (Home, History, Settings)
Download screenshots for each screen → Save to
```
assets/screens/
```
Create
```
screens.json
```
manifest with screen metadata

Generate Remotion components (

ScreenSlide.tsx

WalkthroughComposition.tsx

)

Preview in Remotion Studio → Refine timing and transitions
Render final video →
```
calculator-walkthrough.mp4
```
Report completion with video preview link

用户提示：

查找我的Stitch项目“Calculator App”中的屏幕，并构建一个展示这些屏幕的Remotion导览视频。

Agent工作流：

列出Stitch项目 → 找到“Calculator App” → 提取项目ID
列出项目中的屏幕 → 识别所有屏幕（主页、历史记录、设置）
下载每个屏幕的截图 → 保存到
```
assets/screens/
```
创建包含屏幕元数据的
```
screens.json
```
清单

生成Remotion组件 (

ScreenSlide.tsx

WalkthroughComposition.tsx

)

在Remotion Studio中预览 → 优化时长和转场
渲染最终视频 →
```
calculator-walkthrough.mp4
```
报告完成并提供视频预览链接

Tips for Success

成功技巧

Start simple: Begin with basic fade transitions before adding complex animations
Follow Remotion patterns: Leverage Remotion's official skills and documentation
Use manifest files: Keep screen data organized in JSON for easy updates
Preview frequently: Use Remotion Studio to catch issues early
Consider accessibility: Add captions; ensure text is readable; use clear visuals
Optimize for platform: Match video dimensions to target platform (YouTube, social media, etc.)

从简开始：在添加复杂动画前，先从基础的淡入淡出转场开始
遵循Remotion模式：利用Remotion的官方技能和文档
使用清单文件：将屏幕数据组织在JSON中，便于更新
频繁预览：使用Remotion Studio尽早发现问题
考虑可访问性：添加字幕；确保文本可读；使用清晰的视觉效果
针对平台优化：匹配目标平台的视频尺寸（YouTube、社交媒体等）

References

参考资料

Stitch Documentation: https://stitch.withgoogle.com/docs/
Remotion Documentation: https://www.remotion.dev/docs/
Remotion Skills: https://www.remotion.dev/docs/ai/skills
Remotion MCP: https://www.remotion.dev/docs/ai/mcp
Remotion Transitions: https://www.remotion.dev/docs/transitions

Stitch文档：https://stitch.withgoogle.com/docs/
Remotion文档：https://www.remotion.dev/docs/
Remotion Skills：https://www.remotion.dev/docs/ai/skills
Remotion MCP：https://www.remotion.dev/docs/ai/mcp
Remotion转场：https://www.remotion.dev/docs/transitions