🚀 Step 1：创建 Remotion 项目
首先创建一个新的 Remotion 项目：
# 使用 npm
npx create-video@latest
# 或使用 bun（速度更快）
bunx create-video@latest
创建向导会提示你选择配置：
- 项目名称：例如
my-video-project - 模板：推荐选择
blank或Hello World - TypeScript：建议选择
Yes - 安装依赖：选择
Yes
完成后进入项目目录：
cd my-video-project
验证项目创建成功：
npm run dev
如果这个地方报错
my-first-remotion@1.0.0
dev > remotion studio sh:
remotion: command not found
解决方案：
执行npm install ,然后再启动npm run dev
这会启动 Remotion Studio，在浏览器中打开 http://localhost:3000 可以看到预览界面。
🔧 Step 2：安装 Remotion Agent Skills
这是最关键的一步——让 Claude 学会 Remotion。
在项目目录中执行以下命令：
npx skills add remotion-dev/skills
安装成功后会看到 Added skill: remotion 的提示。
验证安装是否成功：
ls .claude/skills/remotion/
应该能看到 SKILL.md 文件。
安装后的项目结构：
my-video-project/
├── .claude/
│ └── skills/
│ └── remotion/
│ └── SKILL.md # 技能说明书，教 Claude 如何使用 Remotion
├── src/
│ ├── Root.tsx
│ ├── index.ts
│ └── ...
├── public/
├── remotion.config.ts
└── package.json
🎬 Step 3：启动 Claude Code 并生成视频
3.1 启动 Claude Code
确保终端位于项目目录中，然后运行：
claude
3.2 用自然语言描述你的视频
现在，你可以直接用中文或英文描述你想创建的视频。Claude 会自动加载 Remotion Skill 并生成代码。
示例提示词（可以复制使用）：
创建一个 5 秒的开场视频，主题是技术博客。
要求：
- 分辨率：1920x1080
- 背景：深色渐变 (#0f0c29 到 #24243e)
- 标题文字："TechFlow"，字体白色，动画效果为淡入+缩放弹跳
- 副标题："代码创造未来"，在标题出现后 1 秒淡入
- 使用 Inter 字体
Claude 会生成：
src/Root.tsx：定义视频合成配置（时长、帧率、分辨率）src/YourComponent.tsx：实际的视频组件，包含动画逻辑
3.3 实时预览
如果 Remotion Studio 还在运行，刷新浏览器即可看到生成的视频效果。如果没有运行，重新启动：
npm run dev
在 Studio 中，你可以：
🔄 Step 4：迭代优化
这是 Skills 模式真正的威力所在——你不需要手动改代码，只需继续对话。
优化示例：
标题动画太快了，把淡入时间延长到 2 秒
副标题字体改成 32px，颜色改成浅灰色
在背景中添加 20 个微小的粒子，缓慢向上漂浮，透明度 0.2
Claude 会理解你的意图，修改相应的代码。保存后刷新 Studio 即可看到变化。
你可以持续迭代，直到满意为止。
📤 Step 5：渲染视频
视频制作完成后，渲染输出为 MP4。
5.1 查看可用的合成名称
在 Remotion Studio 中可以看到合成名称，或者查看 src/Root.tsx 中 Composition 组件的 id 属性。
5.2 执行渲染命令
npx remotion render <合成名称> out/video.mp4
例如：
npx remotion render techflow-intro out/video.mp4
渲染完成后，out/video.mp4 就是你的成品视频.
