一款开源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;本文档只管创意和约束,不管语法。
http://x.com/i/article/2053059568121282560在 X 查看被引用的帖子
来源:meng shao · x.com