Remotion 视频
使用 Remotion 创建 1080x1920 的动画短视频。支持六种视频类型，每个类型都有先研究后动画的工作流程。
为什么用 Remotion
Remotion 渲染的是代码，而不是像素。AI 原生理解代码——更改一个不透明度变量是明确的，而在光栅帧中判断哪些像素构成“标题”则不然。代码还意味着：分辨率无关的输出、可复用的组件、即时预览和基于 Git 的版本控制。
先决条件
此技能需要 Remotion 最佳实践技能。开始前，请检查项目中是否已安装 Remotion 技能。如果未安装，请指示用户运行：
npx skills add remotion-dev/skills
详情请参阅 Remotion Agent Skills 文档。
类型选择
根据用户的输入确定视频类型：
| 用户提供的内容 | 视频类型 | 加载参考文件 |
|---|---|---|
| 要教授或解释的主题 | 教育解说 | education-explainer.md |
| 产品 URL | 产品演示 + 发布 | product-demo.md |
| Google 商家/地图链接 | 评价/社会证明 | testimonial.md |
| 人物出镜视频文件 (9:16) | 头像 + 动画叠加 | avatar-overlays.md |
| CSV 或数据文件 | 数据可视化仪表盘 | data-viz.md |
| 频道/品牌/社交 URL | 底部三分之一叠加 | lower-thirds.md |
仅加载对应的类型参考文件，以及 defaults.md 以获取共享配置（安全区域、字体、动画规则、视觉风格）。
附加参考文件（按需加载）
以下文件并非每个视频都需要，仅在特定情况下加载：
- integrations.md — 当用户需要 Playwright（网页抓取）、Lottie 动画、3D 资源、画外音或 AI 生成图像时加载。某些集成需要 API 密钥——务必先询问用户。
- advanced-patterns.md — 当用户需要时间滑块、所有合成的控制、目录多视频生成、透明渲染、自定义过渡或基于 Git 的保存工作流时加载。
通用工作流
所有类型都遵循相同的两步模式：
步骤 1：研究 / 抓取 / 分析
根据视频类型收集信息（研究主题、抓取网站、抓取评论、转录视频或分析数据）。展示发现结果和提议的场景大纲。在编写代码前等待用户批准。
步骤 2：设计与动画
批准后，将所有场景构建为 Remotion React 组件。遵循 defaults.md 中的动画规则：
- 弹簧入口（
damping: 200），无线性运动 - 相关项之间间隔 8-12 帧
- 使用
TransitionSeries实现场景间 12 帧的淡入淡出过渡 - 使用 SVG
stroke-dashoffset实现图表/流程图的绘制 - 使用
interpolate()+tabular-nums实现计数动画 - 在庆祝/结束时刻使用粒子效果
步骤 3：打磨（可选）
在视频正确播放后，提供添加控制功能的选项：
- 时间滑块 — 查看 advanced-patterns.md 为合成添加实时控制
- 集成 — 查看 integrations.md 了解 Lottie 动画、3D 效果、画外音等
预览
构建完成后，启动 Remotion Studio：
npx remotion studio
设计原则
- 每个场景都需要清晰的视觉隐喻——图表、流程图、图标、逐步动画
- 避免大段文字——密集信息、优美动画、快节奏
- Kurzgesagt 与 Fireship 风格结合：复杂概念视觉化直观表达
- 默认所有图形使用 SVG 组件构建；可通过 integrations.md 使用 Lottie 和 3D
- 尊重安全区域（见 defaults.md）——重要内容勿靠近边缘
致谢
基于 Sabrina Ramonov 的视频提示和 Remotion AI 视频编辑教程 的制作洞察。改编为具有可配置默认值和渐进式披露的 Agent 技能。