生成演示视频
用 Remotion 将 Stitch 项目屏幕制作成带动态转场的专业演示视频。
remotion 技能能把你的 Stitch 项目屏幕变成精美的演示视频——包含交叉淡化转场、弹簧动画缩放效果和文字叠加层。适合用于演示、利益相关方评审或文档。
前置条件
- 一个至少包含 2 个已设计屏幕的 Stitch 项目
- 已安装 Node.js 和 npm
- 可以访问 Stitch MCP 服务器
获取屏幕
PROMPT
List all screens in Stitch project projects/123456 and download their screenshots.
该技能通过 MCP 获取屏幕元数据，把全分辨率截图下载到 assets/screens/，并创建一个 screens.json 清单，记录标题、尺寸和每个屏幕的时长。
设置并生成
如果还没有 Remotion 项目，该技能会创建一个。然后配置你的转场效果：
淡化（默认）
屏幕之间平滑交叉淡化。最适合沉稳、专业的演示。
PROMPT
Use fade transitions between all screens with 15 frames overlap.
滑动
用于连续用户流程的定向滑动：
PROMPT
Use slide transitions from left to right to show the user journey.
缩放
通过弹簧动画缩放效果突出特定功能：
PROMPT
Add a zoom-in effect on the hero section of the home screen before transitioning to the features page.
可以混合搭配——大多数屏幕使用淡化，再用一次缩放来突出关键瞬间。
添加文字叠加层
屏幕标题
PROMPT
Add the screen title as a bottom overlay on each slide, fading in after 0.5 seconds.
功能标注
PROMPT
Add a pulsing circle highlighting the search bar on the navigation screen.
进度指示器
PROMPT
Add a thin progress bar at the top showing the current position in the walkthrough.
渲染视频
先在基于浏览器的 Remotion Studio 中预览：
PROMPT
Start the Remotion Studio to preview the walkthrough video.
然后渲染为文件：
PROMPT
Render the walkthrough video as walkthrough.mp4 with H.264 codec.
质量选项
| 参数 | 效果 |
|---|---|
--quality 100 | 最高质量（文件更大） |
--codec h264 | 兼容性最佳 |
--codec h265 | 压缩率更高，兼容性较差 |
--concurrency 4 | 并行渲染以提升速度 |
调整节奏
- 太快？ 增加
screens.json中每个屏幕的时长（默认是 3–5 秒） - 太慢？ 缩短时长，或加入更多动态转场
- 节奏不均？ 为复杂屏幕设置更长的时长，简单屏幕则更短
PROMPT
Set the dashboard screen duration to 6 seconds and the login screen to 3 seconds.
故障排查
| 问题 | 解决方法 |
|---|---|
| 截图模糊 | 在下载 URL 后追加 =w{width} 以获得全分辨率 |
| 动画卡顿 | 将帧率提高到 60fps |
| 文字叠加层错位 | 让合成尺寸与屏幕尺寸保持一致 |
| Remotion 构建失败 | 检查 Node 版本兼容性；运行 npm install |
原文: https://stitch.withgoogle.com/docs/skills/walkthrough-videos/
本页翻译自 Google Stitch 官方文档，原文版权归 Google LLC 所有。本站为独立第三方翻译，与 Google 无关联。