把 Stitch 设计稿自动转 Remotion 演示视频 #

解决静态展示效率低的痛点：将 Stitch 项目中的界面设计自动转化为带有平滑过渡、缩放特效和文字说明的动态演示视频，直观展示应用流程和核心功能。

为什么需要这个技能 #

单纯查看静态截图无法完整传达用户体验和交互逻辑。通过 Stitch 获取高分辨率截图，再结合 Remotion 的编程化视频能力，可以低成本生成包含专业转场、聚焦缩放和上下文文字的专业演示视频。

适用场景 #

• 向非技术背景的客户或投资人演示 APP 核心流程时。
• 录制产品更新日志，快速生成带有新界面高亮的介绍短片。
• 制作无需真人出镜的操作教程或功能说明视频。
• 将设计稿快速转化为可用于社交媒体传播的动态素材。

核心工作流 #

1. 接入 Stitch 与 Remotion 能力：确认已配置 Stitch 和 Remotion MCP 服务器。调用 stitch:list_projects 查找目标项目 ID。
2. 获取画面素材：调用 stitch:list_screens 获取屏幕列表，再通过 stitch:get_screen 提取 screenshot.downloadUrl。使用 web_fetch 或 Bash curl 下载图片并保存至本地 assets/screens 目录。
3. 构建 Remotion 项目：运行 npm create video@latest 初始化或复用现有工程。安装 @remotion/transitions 等依赖。
4. 编写组件代码：
   • 创建 ScreenSlide.tsx 处理单帧显示、缩放动画 (spring()) 和淡入淡出。
   • 创建 WalkthroughComposition.tsx 串联所有画面，控制总时长。
5. 渲染输出：在 remotion.config.ts 中配置分辨率和帧率。运行 npx remotion render 生成 MP4 文件。

# 下载截图示例
curl -o "assets/screens/home.png" "https://example.com/screenshots/home.png"

# 渲染视频
npx remotion render WalkthroughComposition output.mp4

下载和安装 #

下载 remotion 中文版 Skill ZIP

你可能还需要 #

暂无推荐