企业官网建设流程全解析

stitch-skills Remotion视频生成：把设计稿变成产品演示视频的完整指南

【免费下载链接】stitch-skillsA library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.项目地址: https://gitcode.com/GitHub_Trending/st/stitch-skills

还在为产品演示视频的剪辑费时费力？stitch-skills 开源项目中的Remotion 技能，可以一句话指令自动把 Stitch 平台上的设计稿，转成带转场、缩放和字幕叠加的专业产品演示视频。它遵循 Agent Skills 开放标准，兼容 Claude Code、Cursor、Gemini CLI 等主流编码智能体，让你无需手动剪辑，也能快速产出高质量的 Walkthrough 演示视频。

为什么选择 Remotion 技能生成演示视频？🎬

传统做法是：截图 → 导入剪辑软件 → 逐帧调整转场和文字，耗时且效果不一致。而 stitch-build 插件 里的 remotion 技能把整条流水线自动化了：

核心原理：智能体读取 Stitch 项目中每个屏幕的截图和元数据，生成一个screens.json清单文件，再据此编写 Remotion 的 React 视频组件，最终渲染成视频文件。整个流程的详细说明见 remotion 技能说明文档。

快速上手：一键安装 remotion 技能

1. 确认前置条件

• 已配置并运行 Stitch MCP 服务器
• 已安装 Node.js 和 npm
• 你的 Stitch 项目里已有设计好的屏幕
• （可选）Remotion MCP 服务器或 Remotion CLI

2. 安装技能

如果你只想要这一个视频技能，单独安装即可：

npx skills add google-labs-code/stitch-skills --skill remotion --global

提示：如果需要完整体验设计到视频的全流程，可以克隆整个仓库git clone https://gitcode.com/GitHub_Trending/st/stitch-skills，再通过npx plugins add安装完整插件套件，方法参见 项目总览 README。

3. 一句话生成视频

在支持该技能的编码智能体中，直接用自然语言下指令：

"查看我 Stitch 项目 'Calculator App' 里的所有屏幕，做一个 Walkthrough 演示视频。"

智能体会自动完成：查找项目 → 列出所有屏幕 → 下载截图 → 生成视频组件 → 预览 → 渲染出最终的 MP4 文件。

视频是怎么做出来的：4 步工作流拆解 🔍

remotion 技能（SKILL.md）定义了标准工作流：

第一步：发现服务器— 自动识别环境中的 Stitch 和 Remotion 两个 MCP 服务，确定调用前缀。

第二步：拉取屏幕资产— 列出项目中的全部屏幕，逐个下载高清截图，保存为assets/screens/下的文件，并按演示顺序整理成screens.json清单，记录每屏的标题、描述、尺寸和展示时长（默认每屏 3~5 秒）。

第三步：生成视频组件— 两个核心模块构成视频的"骨架"：

• ScreenSlide.tsx：单个屏幕的展示组件，内置弹簧式缩放动画和淡入效果，参考模板见 screen-slide-template.tsx
• WalkthroughComposition.tsx：主合成组件，用<Sequence>串联所有屏幕并配置转场，完整示例见 WalkthroughComposition.tsx

第四步：预览与渲染— 先启动 Remotion Studio 在浏览器里实时预览、调整节奏，确认无误后一条命令渲染成片：

npx remotion render WalkthroughComposition output.mp4

三种视频模式：选对风格更出彩 ✨

技能内置了三种常见演示模式，适配不同场景：

模式一：简单幻灯片

最稳妥的选择——每屏停留 3~5 秒 + 交叉淡入转场 + 底部标题字幕 + 顶部进度条，适合快速概览整个应用。

模式二：功能亮点聚焦

对关键区域做局部放大，用动态圆圈和箭头指向重要功能，突出核心卖点的特写镜头，适合发布会或营销素材。

模式三：用户流程演示

按真实用户旅程逐步推进，带编号步骤提示和方向性滑动转场，把点击、跳转等交互串联起来，适合新手引导视频。

进阶玩法与质量清单

可选增强功能

• 交互热点：在可点击元素上叠加脉冲光圈标注
• 旁白配音：根据屏幕描述生成解说词，与画面节奏同步
• 动态文案提取：解析屏幕 HTML，自动为标题、按钮生成解说字幕

成片前自查清单

官方为每个视频项目准备了一份检查清单（composition-checklist.md），涵盖组件结构、动画参数、文字可读性、时间轴节奏等维度。常见问题速查：

写在最后

stitch-skills 的 remotion 技能把"设计稿 → 演示视频"这条链路压缩成了一次对话。它遵循 Agent Skills 开放标准，目录结构清晰（SKILL.md是智能体的任务说明书，examples/存放参考实现，resources/是模板与清单），也方便你照着模式为自己团队写类似技能。如果你的项目里有 Stitch 设计稿，不妨现在就用一句话试试——从指令到成片，可能只需要几分钟。

【免费下载链接】stitch-skillsA library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.项目地址: https://gitcode.com/GitHub_Trending/st/stitch-skills