如何用 Claude Code 从零搭建基于 Remotion (React/TypeScript) 的视频自动化剪辑项目？
用 Claude Code + Remotion (React/TypeScript) 搭建自动化剪辑系统，核心是将视频剪辑转化为编写 React 组件，再由 Claude Code 在终端中负责“写组件 - 配置时间轴 - 执行 CLI 渲染 - 处理报错”的完整闭环。项目整体架构Plaintextmy-video-project/
├── public/ # 静态素材 (原始视频、音频、BGM)
│ ├── input.mp4
│ └── transcript.json # 带时间戳的字幕/文案数据
├── src/
│ ├── components/ # 可复用的 Remotion 动效组件
│ │ ├── Subtitle.tsx # 动态字幕组件
│ │ └── HighlightCard.tsx# 重点提示卡片
│ ├── Composition.tsx # 主视频组装逻辑
│ └── Root.tsx # Remotion 注册入口与参数定义
└── package.json
从零搭建步骤1.初始化 Remotion TypeScript 项目：耗时约 2 分钟。在终端中创建一个标准的 Remotion 项目，并安装基础的媒体处理扩展包：Bash# 1. 创建 Remotion 官方 React/TS 模板
npx create-video@latest my-video-project --template=blank
cd my-video-project
2. 安装 Remotion 辅助库（用于计算音视频时长、字幕对齐等）
npm install @remotion/media-utils @remotion/shapes
2.准备素材与转写数据管线：提取带时间戳的文案数据。将原始口播视频放入 public/input.mp4，并使用 Whisper 提取带毫秒级时间戳的 JSON 文件，保存至 public/transcript.json。JSON/ public/transcript.json 数据结构 /
[
{ "text": "欢迎来到这个自动化剪辑教程", "start": 0.5, "end": 2.1 },
{ "text": "今天我们用 React 剪视频", "start": 2.3, "end": 4.0 }
]
3.编写 Remotion React 组件框架：定义视频组件与参数接口。在 src/ 中编写基础的花字、字幕与画中画组件，并利用 Remotion 的 useCurrentFrame 和 interpolate 做动画效果：TypeScript// src/components/Subtitle.tsx
import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";
export const Subtitle = ({ text }: { text: string }) => {
const frame = useCurrentFrame();
// 实现简单的淡入弹跳效果
const opacity = interpolate(frame, [0, 5], [0, 1], { extrapolateRight: "clamp" });
const scale = interpolate(frame, [0, 5], [0.8, 1], { extrapolateRight: "clamp" });
return (
{text}
);
};
并在 src/Root.tsx 中注册 Composition：TypeScript// src/Root.tsx
import { Composition } from "remotion";
import { MainVideo } from "./Composition";
export const RemotionRoot = () => {
return (
);
};
4.启动 Claude Code 进行剪辑编排与渲染：终端全自动指挥。在项目根目录下直接运行 claude 启动终端 Agent，直接用自然语言向它下达指令：Bashclaude
在对话框中给 Claude Code 输入 Prompt："请读取 public/transcript.json。修改 src/Composition.tsx，将 public/input.mp4 作为背景主视频。利用