这个为 iOS App 创建用户 Onboarding Video 的 Skill 很有启发
TL;DR · AI 摘要
为 iOS/Android App 设计高质量 Onboarding Video 的开源 Skill 提供了一套可复用的工程规范，通过聚焦功能局部 UI、强制四步工作流和严格动效规则，显著提升用户首次使用体验。
核心要点
- 每个引导镜头仅展示一个功能点，时长控制在 3–8 秒，总视频不超过 30 秒。
- 光标必须沿直线移动并带缓动曲线（cubic-bezier(0.16,1,0.3,1)），禁止折线或闪烁。
- 字幕固定在画面顶部 100px 处，淡入动画统一从下方 60px 上滑，跨镜头保持连续性。
结构提纲
按章节快速跳转。
App 安装后几十秒内决定用户是否留存，传统录屏或效果图易造成认知断层。
静态图与完整屏幕录屏无法建立用户对功能的理解，缺乏交互感和注意力引导。
基于 Remotion 构建，强制四步流程并定义组件级裁剪、动效与字幕规范。
每个镜头聚焦一个焦点元素（按钮/切换器/列表项），不展示整屏，增强可信度。
光标必须直线移动且有明确入场逻辑；字幕位置固定、动画统一，避免 AI 油腻感。
思维导图
用一张图看清主题之间的关系。
查看大纲文本（无障碍 / 无 JS 友好）
- iOS/Android App Onboarding 视频设计规范
- 核心目标
- 缩短用户理解时间
- 技术实现
- Remotion + 开源 Skill
- public/<screen>/<state>.png 文件结构
- 四步工作流
- Intake（素材采集）
- Plan（分镜设计）
- Build（代码生成）
- Iterate（用户反馈迭代）
- 动效硬性规则
- 光标路径唯一合法方式
- 字幕锚定与动画统一
金句 / Highlights
值得收藏与分享的关键句。
一个镜头讲一件事，不旁白、不大段文案，靠视觉动效传递信息。
光标必须从焦点区域中心淡入，再直线滑向目标点，不允许折线或中间关键帧。
字幕始终锚定在画面顶部约 100px 处，且跨镜头文字一致时保持同一动画状态。
对 iOS/Android App 来说，用户安装后打开时，是完全陌生的状态，怎么让用户快速 get 到这是什么、有什么用、怎么用，短短几十秒时间可能会决定用户是否直接走掉，也可能让用户快速完成第一个 aha moment。 https://t.co/xRdqGQCjcz" / X
这个为 iOS App 创建用户 Onboarding Video 的 Skill 很有启发 对 iOS/Android App 来说，用户安装后打开时，是完全陌生的状态，怎么让用户快速 get 到这是什么、有什么用、怎么用，短短几十秒时间可能会决定用户是否直接走掉，也可能让用户快速完成第一个 aha moment。 之前运营团队们的做法，或者是多张效果图，或者是录屏演示，前者会让用户很迷惑效果图和 App 之间的 Gap，后者参与感太低，容易丢失注意力。
开源的「Create Onboarding Video」Skill，可以让 Agent 使用
来生产 iOS App 的引导/预览视频，我们可以基于它扩展到其他平台和不同的视频类型。 开源地址： github.com/bidah/skill-seSkill 的定位："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；本文档只管创意和约束，不管语法。