手把手教你用 OpenCode +Remotion Skills 制作AI视频全流程，从零到视频制作实践
如果你已经 Remotion 入门，你已经能用代码生成基础视频了。
但实际操作中可能会遇到这些问题：
- 想做个文字动画，要翻文档查 spring、interpolate 用法
- 改个参数要反复重启预览，效率极低
- 担心用了过时 API，导致代码跑不起来
这一期，我们用 Claude Code 来做 Vibe Video：让 AI 直接调用最新 Remotion 文档，帮你写好可运行的组件、调好动画细节。
你只需要说清"想要什么效果"，剩下的交给代码自动完成。
首先，我们使用 Context7 让 Claude Code 提前熟悉 Remotion 文档。
苏米注：Context7 是 Upstash 团队开发的开源 MCP 服务，核心是给 AI 代码助手提供实时、版本精准的官方文档与代码示例，解决 AI 写代码时的幻觉、API 过时、版本不匹配的问题。
一句话总结：Context7 = AI 编程助手的"实时文档搜索引擎"：
- 基于 MCP（Model Context Protocol）协议
- 自动从 GitHub、NPM 等源头拉取最新、对应版本的文档与代码片段
- 把精准上下文注入 AI 提示词，让 AI 生成可直接运行、无幻觉的代码
在 Claude 中配置 Context7
配置分为桌面版和 CLI 命令行两种环境，这里以 Claude Desktop 为例。
第一步：获取 Context7 API Key
- 打开浏览器访问 context7.com
- 注册/登录账号
- 创建 API Key 并保存好（后续配置要用）
第二步：写入配置文件
打开 Claude 配置文件夹，在终端输入：
open ~/Library/Application\ Support/Claude/找到 claude_desktop_config.json 文件，用文本编辑器打开。
复制以下配置并粘贴进去：
{
"mcpServers": {
"context7": {
"command": "npx",
"args": ["-y", "@upstash/context7-mcp"],
"env": {
"CONTEXT7_API_KEY": "你的 API Key"
}
}
}
}
关键步骤：将 你的 API Key 替换成你在 context7.com 获取的实际 API Key。
苏米注：保存文件后，一定要完全重启 Claude Desktop，否则配置不会生效。
第三步：使用 Smithery 一键安装（可选）
如果觉得手动配置麻烦，可以用 Smithery 一键安装：
npx -y @smithery/cli install @upstash/context7-mcp --client claude
运行后同样需要完全关闭并重启 Claude Desktop。
第四步：测试配置是否成功
打开 Claude，在对话框中输入：
帮我用 Remotion 写一个文字渐入动画视频 use context7
如果显示"好的，已从 Context7 获取 Remotion 最新文档..."，说明配置成功。
Vibe Video 完整流程
1. 保存代码文件
点击 Claude 右侧代码区的 Copy 按钮，复制全部代码。
在你的 Remotion 项目 src/ 文件夹下，新建文件 Textanimation.tsx。
将复制的代码粘贴进来并保存。
2. 修复 React 类型引入（如果报错）
在文件最顶部添加 React 引入：
import React, { FC } from "react";
import {
AbsoluteFill,
interpolate,
spring,
useCurrentFrame,
useVideoConfig,
Composition,
} from "remotion";
3. 运行并预览视频
在终端运行：
npm start打开浏览器访问预览地址，查看动画效果。
完整思路总结
整个 Vibe Video 流程可以总结为：
- 配置 Context7：让 Claude 能访问最新 Remotion 文档
- 描述需求：用自然语言告诉 Claude 想要的视频效果
- 复制代码：将 Claude 生成的代码保存到项目
- 运行预览：在 Remotion 中查看并调整效果
实践经验
苏米注：这个工作流的核心是"让专业的人做专业的事"——Claude 负责写代码，你负责描述创意。Context7 确保 Claude 用的是最新 API，避免版本不匹配的问题。
踩坑记录：配置完 Context7 后如果 Claude 还是说"无法访问文档"，检查两点：
- 配置文件 JSON 格式是否正确（可以用 JSON 验证工具检查）
- 是否完全重启了 Claude Desktop（不是关闭窗口，是完全退出）
延伸思考
Vibe Video 的意义在于降低了视频创作的技术门槛。你不需要记住 Remotion 的所有 API，只需要专注于创意本身。这种"自然语言→代码→视频"的工作流，可能会成为未来视频创作的标准模式。
最佳实践：建议把常用的动画效果（文字渐入、转场、缩放等）都让 Claude 生成一遍，保存成组件库。下次需要时直接调用或微调，效率会更高。
