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

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 技能把整条流水线自动化了环节传统方式Remotion 技能素材获取手动截图自动从 Stitch 项目拉取每个屏幕截图转场动画手动添加淡入淡出、滑动、缩放等程序化生成文字叠加逐帧调整根据屏幕标题自动生成字幕渲染输出手动导出一条命令渲染 MP4核心原理智能体读取 Stitch 项目中每个屏幕的截图和元数据生成一个screens.json清单文件再据此编写 Remotion 的 React 视频组件最终渲染成视频文件。整个流程的详细说明见 remotion 技能说明文档。快速上手一键安装 remotion 技能1. 确认前置条件已配置并运行 Stitch MCP 服务器已安装 Node.js 和 npm你的 Stitch 项目里已有设计好的屏幕可选Remotion MCP 服务器或 Remotion CLI2. 安装技能如果你只想要这一个视频技能单独安装即可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.tsxWalkthroughComposition.tsx主合成组件用Sequence串联所有屏幕并配置转场完整示例见 WalkthroughComposition.tsx第四步预览与渲染— 先启动 Remotion Studio 在浏览器里实时预览、调整节奏确认无误后一条命令渲染成片npx remotion render WalkthroughComposition output.mp4三种视频模式选对风格更出彩 ✨技能内置了三种常见演示模式适配不同场景模式一简单幻灯片最稳妥的选择——每屏停留 3~5 秒 交叉淡入转场 底部标题字幕 顶部进度条适合快速概览整个应用。模式二功能亮点聚焦对关键区域做局部放大用动态圆圈和箭头指向重要功能突出核心卖点的特写镜头适合发布会或营销素材。模式三用户流程演示按真实用户旅程逐步推进带编号步骤提示和方向性滑动转场把点击、跳转等交互串联起来适合新手引导视频。进阶玩法与质量清单可选增强功能交互热点在可点击元素上叠加脉冲光圈标注旁白配音根据屏幕描述生成解说词与画面节奏同步动态文案提取解析屏幕 HTML自动为标题、按钮生成解说字幕成片前自查清单官方为每个视频项目准备了一份检查清单composition-checklist.md涵盖组件结构、动画参数、文字可读性、时间轴节奏等维度。常见问题速查问题解决思路截图模糊确认下载的是全分辨率截图文字错位核对屏幕尺寸与合成尺寸一致动画卡顿提高帧率至 60fps调整弹簧阻尼参数写在最后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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考