create-onboarding-video

创建引导视频

使用 Remotion 制作一段简短、有冲击力的 iOS 引导视频，展示一个功能的实际效果。成片应像 App Store 预览视频一样，聚焦于证明功能有效的关键时刻——不是教程，不是屏幕录制，也不是营销短片。

制作内容

• **时长：**简短。每个引导画面 3–8 秒，串联起来。整段视频通常不超过约 30 秒。
• 风格：以 UI 为主，绝不展示整个屏幕。每个节拍展示功能中的一个局部操作——点击一个按钮、切换一个开关、重新排列一行、滑出一个工作表、逐渐填满一张图表——并配以流畅的 UI 风格转场（弹簧、滑动、缩放、交叉淡化、遮罩揭示、共享元素切换）。
• “局部”指什么：从提供的静态图中裁剪、遮罩或提取相关组件——卡片、输入框、标签栏，或从空状态变为已填充状态。其余 UI 应省略、模糊处理，或通过带色调的背景暗示。我们展示的是功能能做什么，而不是整个应用的样子。
• **基调：**直截了当。每个节拍传达功能的一项用途。
• **输出：**一个可渲染为 MP4 的 Remotion 项目（也可选提供用于 App Store 预览的竖屏版本）。

工作流程

遵循以下流程。不要跳过素材收集环节——猜测操作流程会制作出千篇一律的视频。

1. 收集素材——索取静态图和意图

针对用户希望展示的每个引导画面，收集以下内容：

1. 静态截图——索取每个画面 2–4 张静态图，以便展示不同的交互状态：
   • 初始状态
   • 交互过程中（按钮按下、输入框聚焦、工作表滑到一半等）
   • 结果状态（数据已加载、操作成功、下一个画面）
   • 值得展示的其他变体（空白与已填充、浅色与深色等）
2. 功能介绍——用一两句话说明此画面为用户提供什么功能，以及它的使用体验好在哪里。这将决定要放大展示哪个细节。
3. 顺序——引导流程中各画面的顺序。
4. **可选信息：**品牌色／强调色、非标准字体、目标宽高比（iOS 默认竖屏 1080×1920）、结束卡片文案／CTA。

用户表述不清时，使用 AskUserQuestion。每个画面的静态图和意图都收集齐全后，再开始渲染。

2. 规划镜头

针对每个画面，找出能够证明功能有效的唯一关键局部——被点击的按钮、逐渐填满的进度环、被滑动的行、自动补全的输入框——以及它如何转场到下一个节拍。**绝不要为整个屏幕制作动画。**编写组件前，先勾勒时间线（焦点元素 → 动作 → 结果 → 下一个焦点元素）。优先考虑：

• 将静态图中的相关组件单独提取／裁剪／遮罩，并放在带色调的背景上
• 展示交互过程本身（点击涟漪、拖动、聚焦、状态变化），而不是只展示静态布局
• 在不同节拍间使用共享元素转场（第 1 个节拍中的按钮变成第 2 个节拍中的标题）
• 在分层元素上添加微妙的视差／纵深效果
• 优先采用基于弹簧的运动，而不是线性缓动

3. 使用 Remotion 构建

编写 Remotion 代码前，务必先调用 remotion-best-practices skill。 调用时，请在提示词中加入以下指导：

构建一段简短的 iOS 应用引导视频。不要渲染整个屏幕——每个节拍都必须展示一个正在运行的功能片段：一个被单独提取、裁剪或遮罩的 UI 组件（按钮、卡片、行、面板、字段、图表等），通过动画演示该功能的作用。将它放在简洁的浅色背景上；其余应用界面元素应省略或仅作暗示。使用美观的类 UI 转场——弹簧动画、遮罩显现、共享元素变形、交叉淡化、视差——在不同节拍间切换。优先使用 spring() 而非线性插值，使用 <Sequence> 串联各个节拍，并让每个节拍保持简短（30fps 下 90–240 帧）。静态图放在 public/ 中，并通过 staticFile() 加载；使用 CSS clip-path / overflow: hidden / 绝对定位裁剪静态图，提取焦点元素。

项目约定：

• 静态源图放在 public/<screen-name>/<state>.png 中。
• 每个引导流程使用一个 <Composition>；其中每个屏幕节拍使用一个 <Sequence>。
• 组件放在 src/scenes/ 中，共享转场放在 src/transitions/ 中。
• 默认帧率为 30fps，画面为 1080×1920 竖屏；将宽度和高度设为 props，以便用户要求时，同一场景也能渲染为横屏。

4. 迭代

渲染预览，展示给用户，并询问哪些节拍需要放慢、加快或重新编排。将首次渲染视为草稿。

操作规则

• 必须提供静态截图。 如果用户没有提供截图，请停下来询问。不要根据描述臆造 UI。
• 展示 UI 的局部，而非完整界面。 如果你发现自己在制作全屏模拟图，请停下来，裁剪到能呈现关键内容的组件。观众应该看到功能的实际运行，而不是应用导览。
• 每个视频只展示一个功能。 如果用户描述了 5 个互不相关的功能，建议拆分成 5 个视频。
• 展示，不要旁白。 不要配旁白，也不要用大段文字叠加来解释功能——让 UI 动效来传达。每个节拍配一条简短字幕即可。
• 字幕在整个节拍期间都要可见。 每个节拍的辅助字幕应在该节拍开始后的约 10–14 帧内淡入，并在整个序列中保持显示。不要拖到节拍中途才显示字幕，也不要在节拍结束前将其淡出——焦点 UI 显示期间，观众应始终能读到这行字幕。让场景级交叉淡化来完成节拍间的字幕切换。
• 字幕从下方上移进入。 字幕从静止位置下方约 60px 处开始，透明度为 0，同时向上滑动并淡入（使用明显的 UI 缓出效果，例如 Easing.bezier(0.16, 1, 0.3, 1)）。字幕绝不能原地出现，也不能从上方落下——向上移动是视觉风格的一部分。
• 字幕始终置于顶部，且位置固定。 将每条字幕锚定在画面顶部的固定位置（例如距顶部约 100px、水平居中），并在每个节拍中沿用该位置。绝不要把字幕放在焦点 UI 下方，也不要让字幕在不同节拍间漂移。预留一致的顶部“字幕带”（约 200–240px），并将焦点区域放在其下方。创建一个 TopCaption 包装组件，并在所有场景中使用——不要在各个场景中内联设置字幕位置。
• 字幕要够大。 对于宽度为 1080 的画布，默认字号约为 54px、字重 700，并设置 maxWidth，让较长的文本自动换行，而不是溢出画面。字幕应是标题大小的醒目提示，而非字幕大小的标签。
• 连续节拍中的相同字幕保持不动。 当两个连续节拍在概念上属于同一时刻的不同部分，且共享完全相同的字幕文本时（例如，一个节拍展示点击日期，接下来一个展示表单打开——两者使用同一标题），字幕在切换时不得重新播放动画。字幕在第一个节拍中向上移动并淡入一次，之后的每个延续节拍都使用 staticEntry（或等效方式：立即显示为完全不透明，处于静止位置，不滑动）。两个字幕在场景交叉淡化期间的合成效果应完全一致，让观众感觉同一条字幕持续显示，没有闪烁。仅当文本完全相同时才这样处理——如果节拍间的字幕有任何变化，就让新字幕正常向上移动并淡入，以便观众感知变化。
• 光标要先于每次点击移动。 如果某个节拍展示了轻点、点击或选择，就必须显示可见光标（Pointer），让它沿路径移动，并在点击涟漪出现之前抵达目标。光标不能瞬移，也不能通过跳切来模拟点击。光标的移动会告诉观众即将发生什么——只有点击涟漪是不够的。纯粹用于说明性展示的节拍（例如用发光环突出功能、为静态状态添加动画、展示结果出现）不需要光标；用发光或动效引导视线即可。逐个节拍判断：交互操作 → 光标先行；说明性展示 → 无需光标。 只有在即将制作或修改包含点击操作的节拍时，才加载光标组件及可直接复制粘贴的用法示例 resources/cursor-component.md。
• 光标在中心淡入，然后沿一条直线移动到目标。 节拍中的首次交互始终按以下方式进行：
  1. 在焦点区域的视觉中心（切片中心／容器中心——即该节拍中观众视线停留的位置）淡入。指针原地显现，不从画面外进入。
  2. 从中心到交互点只沿一条直线移动。方向不限——垂直、水平、对角线都可以，但必须是一条直线。x 和 y 可以同时变化（这是唯一允许对角线的情况）。使用单次减速缓动（例如 Easing.bezier(0.16, 1, 0.3, 1)），让光标移动显得受控，而非被甩出。
• 在同一 UI 上多次点击时，光标保持可见，并从一个目标滑向下一个。 如果单个节拍在同一 UI 上有两次或更多次交互（例如，在同一表单中先点击某个分段，再点击 Create 按钮），不要在两次点击之间重置光标。光标在中心淡入，沿直线滑到第一个目标并点击，然后直接从该目标滑向下一个目标，沿一条连续直线移动并点击，依此类推。只有在最后一次交互之后，光标才淡出。同一 UI 上的多次点击之间，绝不要先淡出、再在中心淡入——这会破坏同一用户连续操作的感觉。相邻两次交互之间的每段移动本身都必须是一条直线（方向不限，对角线规则与进入时相同）。
• 不同 UI／新屏幕：重置。 如果下一次交互发生在不同的 UI 上（新屏幕、不同表单或完全不同的节拍），光标应先淡出，下一次交互再从中心重新淡入。重置可以让观众知道“我们现在来到新的地方”。
• 禁止： 从画面边缘之外进入；单次移动中采用多段路径；曲线；之字形；使用会让轨迹弯折的中间关键帧；在同一 UI 上的多次点击之间让光标淡出再淡入。移动效果应像用户的手指从视线已停留的位置显现，然后依次直线滑向每个操作目标——而不是像手从画面外伸进来，也不是像光标在同一表单上的每次点击之间闪烁消失。
• 遵循应用的设计语言。 使用所提供静态截图中的颜色、圆角和字体；不要重新设计样式。
• 遵循 remotion-best-practices。 它是编写 Remotion 代码的权威依据——每次准备编写或修改合成、场景或转场时，都要调用它。

不确定时

请先询问。花 10 秒提出澄清问题，胜过花 2 分钟生成偏离重点的内容。