做好了一个产品想要制作演示视频或原型动画。传统方式需要学习复杂的视频软件或雇佣专业团队，成本高且周期长。
直到Remotion的出现，一个基于 React 的程序化视频框架，最近都在分享使用Claude Code + Remotion 的制作方法
我就来试试用 OpenCode 这款国内友好的 AI 开发工具，全自动制作。
手把手教你在 OpenCode 中免费接入谷歌的Antigravity的两大模型gemini-3-pro、claude-opus-4.5
手把手教你快速入门OpenCode + GLM-4.7 + Oh-My-Opencode + Skills 安装配置与高效使用指南
手把手教你零基础Mac+OpenCode部署教程，如何用免费模型白嫖顶级 Agent 体验
Remotion Skills 集合了该框架的最佳实践指导，让我能够通过自然语言指令快速生成复杂的动画和数据可视化视频。
Remotion Skills + Claude Code，又一个王炸组合，用代码就能制作视频，视频剪辑师要失业了！
今天分享的是我最近完整走通的工作流程，希望能帮助同样需要快速迭代的团队。
Remotion Skills 的能力范围
在深入操作前，先了解 Remotion Skills 具体能做什么：
- 3D 内容与集成：支持 Three.js 和 React Three Fiber 的 3D 效果开发
- 动画与合成：提供规范的动画曲线、缓动函数和多层合成技巧
- 媒体处理：支持图像、音频、字体等资源的导入与元数据计算
- 导出优化：包含视频编码、分辨率调整和性能优化指导
第一步：在 OpenCode 中安装 Remotion Skills
有两种方式可以选择：
方式一：直接在 OpenCode 中让 AI 安装
在 OpenCode 的终端或对话框中输入：
安装 Remotion skills https://github.com/remotion-dev/skills.gitAI 会自动识别并完成安装流程。
方式二：手动下载后加载
在 GitHub 上下载 Remotion skills 项目
解压到你的工程目录中
在 OpenCode 中执行 /init 命令，让 AI 扫描并理解当前项目结构
尝试 @remotion 来确认 skills 已被识别
如果顺利加载，下一步对话时就能调用 Remotion 的完整能力集。
第二步：通过自然语言创作视频
设定创作需求
召唤 Remotion skills 并输入具体的创作指令。
例如：
@remotion 制作一段 15 秒的 Remotion 动画，主题是 BenBen Logo 演示，参考 Google I/O 发布会的视觉风格。
这类指令应包含三个关键信息：时长、主体内容、参考风格。指令越具体，AI 生成的结果越接近预期。
案例详解：Logo 与数据仪表盘视频
以上述指令为例，Remotion Skills 会分阶段构建视频内容：
阶段一：Logo 组装（0-5 秒）
- 主体设计：极简科技风的 Logo，由 Google 四色（蓝 #4285F4、红 #DB4437、黄 #F4B400、绿 #0F9D58）几何碎片组成
- 入场动画：碎片从屏幕四周飞入，伴随弹性缩放和精准拼合
- 光效处理：拼合完成时，Logo 边缘出现高亮霓虹辉光，带有动态 RGB 偏移
阶段二：数据仪表盘展示（5-15 秒）
- 背景：浅色或极光渐变，光线柔和流动
- 卡片入场：4 个 Material Design 风格的圆角卡片从不同角度"弹"入画面
- 数据动画：
- 数字以滚动效果递增（如老虎机）并缓动停止
- 曲线图用贝塞尔曲线动态绘制
- 柱状图呈波浪状从底部弹起
- 配色统一：使用高饱和度的 Google 配色体系
整体质感要求：
- 动画曲线采用 Cubic-bezier 弹性缓动，营造物理重量感
- 画面通透干净，多彩但不繁杂
- 体现"创新"与"包容"的设计哲学
第三步：迭代与优化
快速反馈循环
如果首次生成的结果不符合预期，不需要推倒重来。
使用否定词反馈：
✗ 不够炫酷 ✓ 再炫酷一些
相比"不够炫酷"，"再炫酷一些"能更清晰地指导 AI 的调整方向。
参考式创作
指定具体的参考案例，AI 能更精准地把握视觉风格：
- 参考苹果发布会的极简科技感
- 参考小米生态发布会的活力感
- 参考抖音创意视频的年轻感
分段生成与叠加
对于复杂视频，可以分阶段生成：
- 先生成前 3 秒看效果
- 确认满意后，生成下一阶段
- 逐段叠加组合，降低单次失败风险
第四步：媒体素材处理
添加背景音乐或图片
可以告诉 AI 你的需求：
我要添加背景音乐 / 在第 3 秒插入产品图片
注意：AI 不会直接为你下载或获取素材，但会创建规范的素材目录结构和导入代码。你需要：
- 手工将音频或图片文件放入指定目录
- 重启项目使变更生效
竖版视频制作
如需制作短视频或竖屏展示，直接告诉 AI：
生成一个 9:16 比例的竖向视频
AI 会自动调整画布尺寸和元素布局。
排版优化细节
从首次生成到最终成片，通常需要多轮微调。
以数据仪表盘为例，常见的优化包括：
| 优化维度 | 初始状态 | 优化后 | 效果 |
|---|---|---|---|
| 卡片布局 | 位置分散，尺寸不一 | 4 个卡片均匀分布（x: 80, 520, 960, 1400），尺寸统一 380×180 | 视觉平衡感增强 |
| 标题定位 | y=80，字号 64px，占用过多空间 | y=60，字号 48px | 层级更清晰，留出更多内容空间 |
| 图表位置 | y=680，超出画面下边界 | y=420，高度调整为 240，宽度扩展至 1760 | 充分利用屏幕空间，避免裁切 |
使用技巧速查表
| 需求 | 操作方式 | 说明 |
|---|---|---|
| 调整视觉风格 | 用否定词反馈，而非笼统评价 | "不够炫酷"不如"再炫酷一些"有效 |
| 快速确认方向 | 分段生成（3-5秒）先看效果 | 降低整体失败成本 |
| 风格迁移 | 指定参考案例（苹果、小米、抖音等） | AI 能自动识别并复用风格特征 |
| 竖版制作 | 直接说"9:16 竖向视频" | AI 自动调整布局，无需手动设置 |
| 媒体集成 | 告诉 AI 需求，手工放入素材 | AI 生成导入代码和目录，素材自备 |
Skills 使用与创作的分界线
在使用 Remotion Skills 的过程中，我意识到一个重要问题：
Skills 的出现确实降低了内容创作的技术门槛，但 能用好 Skills 和能创作 Skills 是两回事。
随着 Skills Creator 工具的普及，很多人误以为开发一个 Skill 也只需一句话的指令，这种认知是危险的。
我的建议是：
- 对普通用户：先系统学习 Skills 的使用方式，在实践中理解其内部逻辑和边界
- 对进阶用户：在充分掌握工具后，才考虑自己创作 Skill，否则容易陷入"能运行"但"不好用"的困境
程序化视频创作的核心竞争力不在于工具本身，而在于对设计原则、数据表现、叙事逻辑的理解。
OpenCode + Remotion Skills 只是加速了从想法到成片的过程。
总结
通过这套工作流程，我能够在 1-2 小时内完成过去需要 1-2 天的视频制作任务。
对于需要快速验证想法、制作产品演示或数据展示的产品经理来说，这套组合具有实用价值。
关键收获：
- 安装和加载 Remotion Skills 的两种方式都可行，选择适合自己的流程即可
- 清晰的创作指令（包含时长、主体、风格参考）直接影响生成质量
- 迭代优化时，用具体的反馈词汇而非模糊评价
- 媒体集成需要 AI 与手工的配合，不是全自动
- Skills 是加速工具，不是替代专业能力的捷径
如果你也在探索如何用 AI 工具提升工作效率，不妨亲手试一次。
有具体问题，欢迎在评论区讨论。