# 这个为 iOS App 创建用户 Onboarding Video 的 Skill 很有启发

- 来源：meng shao (@shao__meng)
- 发布时间：2026-05-11 09:04
- AIHOT 分数：67
- AIHOT 链接：https://aihot.virxact.com/items/cmp0j39cs0q7esllh9mtpug4m
- 原文链接：https://x.com/shao__meng/status/2053642304611852542

## AI 摘要

一款开源Skill“Create Onboarding Video”利用AI（通过Remotion）为iOS App生成高质量的用户引导视频。它强制遵循一套“反AI油腻感”的硬性规则，以制作出具有“App Store预览”级质感的片段。核心规则包括：视频需聚焦于证明功能在工作的特定UI组件，而非展示完整屏幕；字幕需有固定的位置、大小和入场动画；光标交互必须真实自然，禁止瞬移。该Skill定义了从素材采集、分镜规划到编码实现的四步工作流，强调“展示而非叙述”，旨在快速引导用户达成“aha moment”。

## 正文

这个为 iOS App 创建用户 Onboarding Video 的 Skill 很有启发

对 iOS/Android App 来说，用户安装后打开时，是完全陌生的状态，怎么让用户快速 get 到这是什么、有什么用、怎么用，短短几十秒时间可能会决定用户是否直接走掉，也可能让用户快速完成第一个 aha moment。

之前运营团队们的做法，或者是多张效果图，或者是录屏演示，前者会让用户很迷惑效果图和 App 之间的 Gap，后者参与感太低，容易丢失注意力。

@bidah 开源的「Create Onboarding Video」Skill，可以让 Agent 使用 @Remotion 来生产 iOS App 的引导/预览视频，我们可以基于它扩展到其他平台和不同的视频类型。
开源地址：
https://github.com/bidah/skill-set/blob/main/skills/create-onboarding-video/SKILL.md

Skill 的定位："App Store 预览"级的特写片段
· 时长：每个引导画面 3-8 秒，整片很少超过 30 秒
· 风格：永远不展示完整屏幕。每个镜头只放大功能里"证明它在工作"的那一小块 UI--一个被点击的按钮、一个翻转的 toggle、一个被滑动重排的列表行、一张正在填充的图表
· 手法：把这块组件从截图里裁/抠出来，扔到一个有色背景上，用 spring、遮罩揭示、共享元素过渡（shared-element morph）、视差等"原生 UI 感"的动效串起来
· 基调：一个镜头讲一件事，不旁白、不大段文案

它强制的工作流：先访谈，再分镜，再写代码
Skill 定义了一个四步循环，并明确写了"不要跳过 intake，否则只会产出泛泛的视频"：
1. Intake（素材采集）--每个画面要 2-4 张静态截图，分别覆盖：静止态、交互中态、结果态、变体态；外加一两句话说明"这个功能为用户做了什么"和"顺序"。如果用户说得含糊，就用 AskUserQuestion 反问。
2. Plan the shots（分镜）--为每个画面挑出"那一块能证明功能成立的组件"，先在脑子/草稿里推演 focal element → motion → result → 下一个 focal element，再写代码。
3. Build with Remotion--这一步强制委派给另一个 skill remotion-best-practices，并附带一段 prompt 模板，约束它："永远不要渲染整屏；用 <Sequence> 串接 beats；每个 beat 90-240 帧 @ 30fps；截图放 public/ 用 staticFile（） + CSS clip-path 抠出焦点元素。"
4. Iterate--把第一版当草稿给用户看，问哪里要快/慢/重排。
文件结构也定死：public/<screen>/<state>.png，src/scenes/，src/transitions/，1080×1920 portrait 默认。

值得复制的部分：一套"反 AI 油腻感"的硬性规则

1. 字幕（Caption）规则
· 位置固定：始终锚在画面顶部约 100px 处，水平居中。禁止放在焦点 UI 下方、禁止逐镜头漂移。要预留 200-240px 的"caption band"，焦点 UI 排在它下面。
· 大小：1080 宽画布下默认 54px / 700 weight，是头条级标题，不是字幕条。
· 入场：从静止位置下方 60px、opacity 0，向上滑入并淡入--上行运动是视觉身份的一部分。禁止原地出现或从上方落下。
· 可读时长：在每个 beat 的前 10-14 帧内淡入完成，并贯穿整个 beat 留在屏幕上。不要中途才出现，也不要提前淡出，靠 beat 间的场景过渡来切换。
· 同字幕跨 beat 不重做动画：当连续两个 beat 的字幕文字完全一致（例如"点击日期"和"表单打开"共享同一标题），第二个 beat 用 staticEntry（瞬时满透明 + 静止位）渲染，让观众感觉是"同一个字幕跨过了剪辑点"。文字哪怕变一个字，就让新字幕正常 rise-and-fade。
· 实现上要求建一个 TopCaption 包装组件，全局复用，不允许各 scene 内联定位。

2. 光标（Pointer）规则
这是本文档最有作者印记的地方，详细到工程规范级别：
· 交互镜头必须有光标领跑：凡是 tap / click / select 的 beat，必须显示一个 Pointer，沿路径移动到目标之后再触发点击波纹。不允许瞬移、不允许"只有 ripple 没有指针"。
· 纯展示镜头不要光标：用 glow / 运动引导视线即可。规则是"interactive → cursor leads；illustrative → no cursor"。
· 指针入场方式唯一合法的姿势：
· 在焦点区域的视觉中心处淡入（不是从画外飞入）。
· 然后一条直线滑到目标点。方向自由，对角线允许（这是文档里唯一允许同时改 x 和 y 的地方），但必须是单段直线，单一减速缓动 cubic-bezier（0.16， 1， 0.3， 1）。
· 同一 UI 上的多次点击：指针只在第一次淡入一次，点完一个目标后直接直线滑向下一个目标，全部点完才淡出。禁止在同屏两次点击之间淡出再淡入--那会让人觉得是两个不同用户在操作。
· 切换到不同 UI / 新屏幕：才允许指针淡出，下一次重新在中心淡入，作为"换场"信号。
· 明确禁止：从画面边缘进入、多段折线、曲线、Z 字形、中间关键帧、同 UI 多次点击之间闪烁。

3. 其他操作守则
· 没有截图就停--不允许凭文字描述编 UI。
· 一个视频只讲一个功能--用户列了 5 个功能，提议拆成 5 条视频。
· Show， don't narrate--无旁白、无大段文字解释。
· 沿用 App 自带的颜色/圆角/字体，不要重新设计。
· 写 Remotion 代码前一律调用 remotion-best-practices 这个上游 skill；本文档只管创意和约束，不管语法。

### 引用推文

> ROFI：http://x.com/i/article/2053059568121282560