remotion

remotion 技能概览

remotion 的用途

remotion 技能可以帮助你把 Stitch 的屏幕数据转成一段精致的演示讲解视频，并通过 Remotion 来完成。它更适合想要一个可安装、可重复的 Remotion 视频编辑 工作流的用户，而不是只靠一句提示词生成一个粗糙剪辑方案。

适合谁使用

如果你已经有一个包含屏幕的 Stitch 项目，并且需要一段能解释 UI 流程、功能顺序或产品导览的视频，就可以使用这个 remotion 技能。它适用于产品演示、上手引导视频、设计评审，以及内部发布视频——这些场景都很看重屏幕顺序、节奏和字幕。

它为什么不一样

它的核心价值在于把 Stitch 检索和 Remotion 合成连接起来。它不是让你手动导出截图再拼接转场，而是先接收结构化的屏幕输入，再生成带有转场、缩放和文字叠加的时间线。也正因为如此，当你在意一致性、可重新渲染以及代码化编辑时，remotion 会特别有用。

如何使用 remotion 技能

安装 remotion 并查看工作流

使用 npx skills add google-labs-code/stitch-skills --skill remotion 安装 remotion 技能。然后先阅读 SKILL.md，再看 README.md、examples/screens.json、examples/WalkthroughComposition.tsx、resources/composition-checklist.md 和 resources/screen-slide-template.tsx。这些文件会说明预期的输入结构、渲染流程，以及可复用的组件模式。

给 remotion 提供正确输入

一条高质量的 remotion 使用请求，应该包含 Stitch 项目名称或 ID、视频目标、目标受众、已知的话屏幕顺序，以及是否需要旁白或叠加文案。例如：“为 Stitch 项目 Calculator App 制作一段 45 秒的 remotion 演示视频，按 home、history、settings 三个屏幕展开，使用简短标题、淡入淡出转场，以及产品演示语气。”这远比“帮我用这些屏幕做个视频”更有帮助。

按照实用的构建流程推进

这个 repo 里的 remotion 指南围绕检索、清单生成、composition 和渲染展开。先定位 Stitch 项目并下载屏幕，再把它们整理成类似 screens.json 的清单，补上时长和转场类型，然后把清单接入 Remotion composition。如果你要把它改造成自己的项目，可以查看 scripts/download-stitch-asset.sh 了解资源处理方式，并参考 resources/composition-checklist.md 里的质量检查项，避免路径失效或节奏不均。

渲染前要检查什么

确认图片路径能正确解析、屏幕尺寸已记录、总时长与预期节奏一致。Remotion 的输出质量高度依赖输入结构：短屏幕需要更短停留，信息密集的屏幕需要更慢节奏，字幕也要具体到足以解释每一步发生了什么。如果某个屏幕视觉元素很多，优先用更克制的转场，让叠加文案来负责说明。

remotion 技能常见问题

remotion 只适用于 Stitch 项目吗？

这个 remotion 技能主要面向 Stitch 到 Remotion 的工作流，因此 Stitch 是预设的屏幕来源。如果你手头只有静态图片、没有 Stitch 项目，直接使用普通 Remotion 提示词可能更简单；除非你本来就想采用同样的清单与 composition 模式。

安装 remotion 后会得到什么？

remotion 安装后，你得到的是一套引导结构化视频管线的技能，而不是现成的成品编辑器。你仍然需要源屏幕、可运行的 Remotion 环境，以及足够的信息来决定时长、转场和叠加文案。它最有价值的地方，在于你计划反复复用这套工作流。

remotion 适合初学者吗？

适合，只要你能给出清晰输入，并接受基于文件的工作方式。你不需要一开始就掌握 Remotion 的每一个 API 细节，但你要准备好查看示例 composition，并调整时长、路径和字幕。初学者通常从示例 screens.json 模式入手，会更快成功。

什么时候不该用这个技能？

如果你只需要一张静态 mockup、一个不依赖源结构的快速社交短片，或者一个完全自动化、对时间线没有控制权的剪辑，那就不建议用 remotion。这个技能最强的场景，是你重视可重复的 Remotion 使用方式，并希望对屏幕讲解视频进行代码化编辑。

如何改进 remotion 技能

提供更明确的屏幕意图

提升质量最大的方式，是把每个屏幕的意图说得更清楚。不要只告诉技能屏幕标题，还要说明这个屏幕要传达什么。例如，“Home Screen：展示主计算器和基础运算符”就比“Home Screen”有用得多。更清晰的意图会直接带来更好的 remotion 叠加文案和节奏安排。

用真正的时长决策来写清单

不要把每个屏幕都当成一样重要，而是根据复杂度和重点分配时长。功能信息很多的屏幕可能需要 5–6 秒，简单的确认页可能只要 2–3 秒。这是最快提升 remotion 输出质量的方法，因为节奏对理解的影响通常比视觉花样更大。

持续调整转场和叠加文案

常见问题包括过度使用缩放、所有叠加文案都说得太泛，以及转场抢了产品本身的注意力。如果第一次渲染显得很乱，就把转场变简单、缩短文案，并删除任何已经被屏幕内容充分表达的叠加信息。然后每次只改一个变量再重新渲染，这样你才能看清到底是哪项调整带来了改善。

复用仓库中的示例

如果第一次输出已经接近目标，但还不够精致，就对照 examples/WalkthroughComposition.tsx 和 resources/screen-slide-template.tsx 来看。这些文件展示了预期的 remotion 风格：以屏幕为中心的 composition、克制的动画，以及结构化元数据。沿着这个模式去改，通常比从头重写工作流更快。