onboarding-video-generator
用Remotion生成网页应用功能演示短视频，专为营销页面双栏布局设计。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：onboarding-video-generator。 它的用途是：用Remotion生成网页应用功能演示短视频，专为营销页面双栏布局设计。 完整的 Skill 内容见：https://321skill.com/skills/onboarding-video-generator/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“为我们的新仪表盘‘数据导出’功能创建一个 onboarding 视频。” 它会引导你上传该功能不同状态的截图（如初始空状态、点击导出按钮、格式选择下拉框、成功提示），并询问展示重点。随后，它将生成一个Remotion项目，渲染出聚焦于导出按钮和成功提示动画的短视频，尺寸完美适配你官网功能介绍页的侧边栏。
介绍
这个Skill解决了网页应用在营销页面（如官网功能展示区）上，缺乏吸引人且精准的功能演示短视频的痛点。传统的全屏录屏或教程视频在嵌入网页侧边栏时，往往尺寸过大、重点不清，导致用户体验不佳。
它通过Remotion框架，允许用户提供功能界面的多张静态截图（如初始状态、交互中、完成状态），然后自动生成一个聚焦于UI局部组件（如一个按钮、一个弹窗、一个图表）的动画短片。视频会应用精致的UI式转场动画（如弹性、滑动、缩放），突出功能的操作瞬间，而非展示整个页面。
它非常适合产品经理、市场运营人员、独立开发者或前端工程师，他们需要快速为新产品功能、版本更新或营销落地页制作专业、轻量且易于循环播放的演示素材。
与通用的视频制作工具或全屏录屏Skill不同，它的核心定位是“为网页嵌入而生”，默认输出4:3或1:1的柱状尺寸视频，完美适配双栏布局的右侧栏位，并强调通过裁剪和动画来放大功能的微观交互，这是其区别于同类工具的关键。
核心特点
核心区别在于其“为嵌入而设计”的预设：默认输出柱状尺寸（如1280×960）而非宽屏，并强制要求裁剪UI局部组件进行动画，确保在营销页面侧栏中清晰可读、重点突出。而同类视频生成工具通常默认生成全屏宽屏视频，不适合直接嵌入网页布局。
注意事项
不适合制作需要展示完整页面流程、长时间操作或包含复杂旁白解说的教程类长视频。
常见问题
需要提供什么材料来生成视频？
需要提供每个功能视图的2-4张截图（如静止、交互中、结果状态），以及关于功能作用和展示顺序的简要说明。
生成的视频能直接用在官网吗？
可以，它默认输出MP4和WebM格式，专为网页<video>标签嵌入设计，尺寸适配桌面双栏及移动端单栏布局。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/onboarding-video-generator/raw/index.md 读取 onboarding-video-generator 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/onboarding-video-generator/raw/index.md（查看排版版本）