83.3K+下载
跳转到使用指南
remotion作者 Google Labs

Remotion Skill.

Claude Code 和 Codex skill，用于动效和视频：从 Stitch 项目生成演示视频，包含 Remotion 转场和缩放效果。

  • Motion & Video
  • Video
下载 OpenDesign查看使用指南
google-labs-code/stitch-skills · plugins/stitch-build/skills/remotion/SKILL.mdSKILL.md
--- name: remotion description: Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays --- ## Prerequisites ## Retrieval and Networking ## Video Composition Strategy ## Execution Steps ## Advanced Features ## File Structure
从上游文件读取的前言和章节标题（2026-09-14）· 完整内容 12,764 字符

01 功能说明

remotion Skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物，均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

将现有的 Stitch 项目转换成演示视频。Agent 会列出 Stitch 项目和界面，将每个界面的 screenshot.downloadUrl 下载到 assets/screens/ 中，将宽度、高度、标题和描述记录在 screens.json 清单里，然后使用 ScreenSlide.tsx 和 WalkthroughComposition.tsx 构建一个 Remotion 合成，采用淡入淡出、滑动和由 spring 驱动的缩放过渡以及文字叠加效果。

它面向那些已经在 Stitch 中设计好界面、并熟悉 Node.js 和 React 的设计师和开发者，因为 Remotion 渲染的是 React 组件。帧率默认为 30 fps，每个界面时长默认为 3-5 秒，最终结果会先在 Remotion Studio 中预览，之后再渲染为 MP4。

它产出什么

  • 一个 screens.json 清单，保存项目名称、界面 id、标题、描述、图片路径、尺寸以及每个界面的时长
  • 为演示视频生成的 Remotion 组件文件
  • 更新后的 Remotion 项目配置
查看示例提示词 ↗

工作方式

  1. 01
    定位 MCP Servers

    运行 list_tools 并确定 Stitch 和 Remotion 服务器的前缀，以便后续调用能够正确寻址。

  2. 02
    从 Stitch 拉取界面

    找到项目，列出其所有界面，然后获取每个界面的元数据，以取得截图 URL、尺寸和描述。

  3. 03
    暂存截图

    使用 web_fetch 或 curl，按照演示视频应有的流程顺序，将每张截图下载到暂存目录中。

  4. 04
    搭建 Remotion 项目骨架

    如果已存在 Remotion 项目则复用，否则在 video/ 目录中创建一个空的 TypeScript 项目。

  5. 05
    构建合成

    编写用于单个界面动效的 ScreenSlide.tsx、用于排序和过渡的 WalkthroughComposition.tsx，以及用于 fps 和尺寸的 config.ts。

  6. 06
    先预览，再渲染

    在 Remotion Studio 中反复调整时间和 spring 数值，然后通过 CLI 或 Remotion 的渲染工具渲染出最终文件。

02 找到适合场景

何时使用 remotion Skill

在 Claude Code 或 Codex 中使用 remotion skill 处理此类动效与视频工作。适用范围和限制取自 skill 自己的文件。

适合场景

  • 您已经有一个包含设计好界面的 Stitch 项目可供演示
  • 您希望用带动画的指针和热点圆环标注出特定的 UI 元素
  • 你要构建的是一个分步用户历程视频，而不是普通的幻灯片
  • 你已经熟悉 Remotion 的视频能力，希望其惯用方式得到尊重

了解边界

  • 你没有访问 Stitch MCP Server 的权限，而这是一个硬性前提条件
  • 团队里没有人懂 React，而 Remotion 是通过组合 React 组件来实现的
  • 无法以全分辨率拉取截图，该文件将其列为输出模糊的原因

需要提供的信息

  • Stitch 项目标识可以是已知的项目 ID，也可以是标题——在未提供 ID 时，Agent 可据此查找。
  • 视频中应包含哪些屏幕系统会审阅项目的屏幕列表，在下载前确定演示所需的所有屏幕。
  • 屏幕尺寸需要每个屏幕的宽度和高度，以便合成时正确缩放截图。
  • 标题和描述屏幕的标题和描述会成为叠加在每一帧上的上下文文字。
  • 预期的演示顺序素材会按观众应当看到的顺序组织，而不是 Stitch 返回的顺序。

03 Skill 内部

remotion Skill 为 Claude Code 和 Codex 设定的规则

SKILL.md 为 Agent 设定的 8 条具体指令、默认值与限制——文件中真正改变结果的部分。

  1. 屏幕默认停留 3-5 秒

    每个屏幕会保持一段可配置的时长，规定的默认值为每屏 3-5 秒。

  2. 以 30 fps 合成

    config.ts 设定帧率，默认值为 30 fps。

  3. 运动卡顿时切换到 60fps

    如果动画看起来不流畅，应提高帧率至 60fps 并调整弹簧阻尼，而不是改动设计本身。

  4. 用 Spring() 实现缩放

    缩放效果应由施加在被强调的重要 UI 元素上的弹簧动画驱动。

  5. 保持原生宽高比

    使用 Stitch 屏幕的真实尺寸，或按比例缩放，绝不要拉伸布局。

  6. 以清单文件驱动构建

    屏幕数据存放在清单文件中，因此可以在不改动组件代码的情况下更新顺序、标题和时长。

  7. 保持时间节奏稳定

    除非需要特别强调某个屏幕，整个演示过程中屏幕显示时长应保持一致。

  8. 从淡入淡出开始

    先使用基础的淡入淡出转场，确认简单剪辑效果可行后，再叠加复杂动画。

04 投入使用

在 Claude Code 或 Codex 中安装 remotion

一条 npx skills add 命令，然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 remotion 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行；安装程序会询问要把它添加到哪个 Agent。

Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill remotion

针对 plugins/stitch-build/skills/remotion/SKILL.md 的通用 skills CLI 形式；仓库可能会记录自己的路径。

给 Skill 一个首次动效和视频任务

使用你自己的内容和约束调整此提示，然后在 Claude Code 或 Codex 中运行它。

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

来源：SKILL.md 示例（原文照录）。

检查首次结果

SKILL.md 本身如何描述正确的结果：

  • 在提交渲染前，先在 Remotion Studio 中预览合成效果
  • 按照内置的完成检查清单逐项核对
  • 检查每个屏幕中的文字叠层是否出现在正确的时间点
  • 确认屏幕尺寸与合成尺寸相匹配，并根据实际屏幕大小重新定位文字
  • 确保叠加文字在整个过程中保持可读，而不只是在第一帧
  • 如果动效显得卡顿，尝试用修改后的弹簧阻尼测试 60fps 方案

在 OpenDesign 中，remotion 已内置：Plugins → Skills，在顶部栏中选择它即可。

下载 OpenDesign阅读快速入门

05 开源、可追溯

来源、许可与验证

本页面事实的来源，以及最后检查时间。

Author
Google Labs
Repository
github.com/google-labs-code/stitch-skills 分支 main
Skill 文件
plugins/stitch-build/skills/remotion/SKILL.md 验证时记录的内容校验和；提交 0337446
License
Apache-2.0 来自 LICENSE。
仓库星标数
8,304 GitHub 快照拍摄于 2026-09-14，针对整个 google-labs-code/stitch-skills 仓库，该仓库在此目录中包含 12 个 skill。不是 remotion 的评分或使用计数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可证文本和星标数。已捆绑在 OpenDesign 主版本中（检查于 2026-08-28）；此页面尚未记录实际运行。

SKILL.md 内部

  1. 概述Stitch 加 Remotion 演示工作流总体产出的内容
  2. 前提条件所需的 MCP 服务器、Node.js、npm，以及一个带有屏幕的 Stitch 项目
  3. 获取与网络发现 MCP 前缀、查找项目与屏幕、下载资源
  4. 视频合成策略ScreenSlide、WalkthroughComposition 及配置的架构，以及转场和叠加层
  5. 执行步骤收集资源、创建清单、生成组件、预览、渲染
  6. 高级功能交互式热点、旁白集成，以及从 Stitch HTML 自动提取文字
  7. 文件结构视频项目及清单的预期目录布局
  8. 与 Remotion Skills 的集成安装 Remotion 自身的 Agent skill，以获取动画与性能方面的指导
  9. 常见模式三种方案：简单幻灯片展示、功能亮点展示与用户流程
  10. 问题排查针对截图模糊、文字错位、动画卡顿、构建失败、时序问题的修复方法
  11. 最佳实践宽高比、统一时长、可读文字、流畅转场、预览、资源优化
  12. 成功要点从简单开始、复用 Remotion 模式、使用清单、常做预览、无障碍性、平台尺寸适配
Skill 自身的描述
"使用 Remotion 从 Stitch 项目生成演示视频，包含流畅的过渡、缩放和文字叠加"

来自 SKILL.md 的 Front-matter 描述。完整文件约 12,764 个字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 remotion Skill 的常见问题

以下回答来自 2026-09-14 读取到的 SKILL.md，而非某次实际运行的记录。

在运行之前需要安装什么？

需要访问 Stitch MCP Server，以及 Remotion MCP Server 或 Remotion CLI 二者之一，还需要 Node.js 和 npm，以及一个已经设计好界面的 Stitch 项目。熟悉 Remotion 和 React 组件会有帮助，但并非必需。

我必须使用 Remotion MCP server 吗，还是 CLI 就够了？

CLI 就足够。在 Remotion Studio 中预览后，你可以用 npx remotion render WalkthroughComposition output.mp4 进行渲染，或者在该 server 可用的情况下，调用带有合成详情的 Remotion render 工具。

每个界面在屏幕上停留多长时间？

默认每个界面停留三到五秒，该时长以每个界面的形式存储在 manifest 中，因此你可以单独调整各个界面的时长。时长在 manifest 中设置，并在 Remotion Studio 中预览。

Remotion

在真实的 Motion 和 Video 任务中运行 remotion。

remotion skill 已内置于 OpenDesign 中。下载应用，在 Plugins → Skills 中选择该 skill，粘贴上述提示词，并在查看结果之前阅读计划。

下载 OpenDesign浏览所有 skills
终端
npx skills add https://github.com/google-labs-code/stitch-skills --skill remotion