用Claude Code与Remotion写代码做视频，中配电脑也能轻松渲染

最近刷到不少用代码做视频的玩法：几条命令下去，画面、字幕、转场自动生成，最后渲染出一段看起来像是用 Pr 剪过的短片。整个过程不需要打开传统剪辑软件，中低配电脑也能跑得动。这里面的核心工具，就是 Claude Code 加 Remotion。

这篇文章会从零开始拆解这套方案。你会理解 Claude Code 到底怎么辅助写视频代码，Remotion 的动画模型是什么，以及如何用它们复刻出类似“卖瓜名场面”那种节奏感很强的视频风格。文章里会给出完整可运行的项目代码、Claude Code 的操作示例、渲染命令，以及中配电脑上常见的坑和优化思路。

如果你之前没接触过代码生成视频，甚至没怎么用过 AI 编程工具，这篇文章也可以作为一份入门教程。有前端基础会更容易上手，但没有也没关系，核心逻辑会逐个讲清楚。

1. 背景与核心概念

1.1 传统视频剪辑的痛点

传统剪辑工具，例如 Premiere Pro、After Effects、达芬奇，功能确实强大，但有几个绕不开的问题。

首先是硬件门槛。多轨道视频、特效叠加、动态字幕、转场插件，这些操作在高分辨率素材下非常吃内存和显卡。很多人的电脑是中等配置，剪辑过程中预览卡顿、渲染时间长，体验很糟糕。

其次是协作和修改成本。视频项目不是代码，没法用 Git 做版本管理。甲方说“标题字号大一点”“字幕往上移两像素”“转场再快 0.1 秒”，你就得在时间轴上反复微调，操作路径长，而且不容易回头对比。

第三个问题是自动化。如果你想批量生成几十个结构相同的视频，传统软件基本只能靠模板，模板的灵活性又有限。

所以现在出现了一个新的方向：写代码做视频。把视频表达抽象成代码逻辑，用编程方式控制每一帧的内容。这样天然具备版本管理能力、批量生产能力，而且中低配电脑只要不是极端复杂的效果，也能顺利渲染。

1.2 Claude Code 是什么

Claude Code 是 Anthropic 推出的命令行 AI 编程工具，官方定位是“agentic coding tool”，也就是代理式编程工具。

你可以在终端里输入自然语言指令，比如“帮我写一个 Remotion 项目，包含片头、对话字幕和转场动画”，Claude Code 会理解你的意图，自动读取项目文件、生成代码、修改代码，甚至执行命令。

相比普通的聊天式 AI，Claude Code 最大的特点是它能直接操作你的项目目录。它知道你项目里有哪些文件，可以自己打开文件阅读，然后进行修改。你不需要复制粘贴代码，只需要在终端里描述需求，然后审查它给出的改动。

它的安装方式通常是 npm 全局安装。如果你在用 VS Code，也可以把 Claude Code 集成到终端里使用，或者安装第三方插件接入其他模型。不过要注意，Claude Code 本身依赖官方账号权限或 API Key，具体订阅策略以官方最新说明为准。

1.3 Remotion 是什么

Remotion 是一个基于 React 的视频生成框架，目前最主流的用法是用 JavaScript/TypeScript 写视频。

它把视频理解为“一组按时间渲染的 React 组件”。你在代码里写Sequence组件表示时间段，写AbsoluteFill表示全屏画面，用 CSS 控制字幕位置、字号、颜色，用spring、interpolate做动画，最后渲染成 MP4。

由于它是代码驱动，视频里所有内容都可以参数化。比如你可以把字幕文案放在数组里，循环生成几十条；你可以把背景色作为变量，通过命令行参数切换；你也可以用 Git 管理视频项目的每一次修改。

Remotion 在 Node.js 环境下运行，底层调用 Chrome 的渲染能力来播放每一帧，然后通过 FFmpeg 编码成视频。所以它对显卡的要求不高，主要吃 CPU 和内存。

1.4 为什么这套组合适合中配电脑

传统剪辑软件在中配电脑上的主要瓶颈是预览和特效渲染。Remotion 的思路是“渲染每一帧”，虽然听起来慢，但它的计算过程很稳定，而且可以设置并发帧数。中配电脑只要不是渲染 4K 超长视频，通常都能胜任。

Claude Code 解决的是“写代码”的负担。你不用记忆所有 Remotion API 细节，也不用自己抠 CSS 参数，只需要描述画面效果，AI 帮你生成。如果画面不对，继续用自然语言调整。

所以这套组合的流程变成：

1. 你构思视频脚本和风格。
2. 在终端里向 Claude Code 描述需求。
3. Claude Code 生成 Remotion 代码。
4. 你运行渲染命令，得到视频成品。
5. 不满意的部分，继续让 Claude Code 改代码。

整个链路不依赖传统剪辑软件的 GPU 加速，也不需要复杂的时间轴操作，核心是代码和 AI 协作。

2. 环境准备与版本说明

2.1 硬件与系统要求

本文示例面向的是中配电脑，也就是常见的 8GB 或 16GB 内存、四核或六核 CPU、没有独立显卡也能接受的场景。

操作系统方面，Windows 10/11、macOS、Linux 都可以。不同系统的差异主要在于终端命令和 Node.js 安装方式。

如果你用的是 Windows，推荐在 PowerShell 或 Windows Terminal 中执行命令。如果你用的是 VS Code，内置终端也可以。

2.2 安装 Node.js

Remotion 和 Claude Code 都依赖 Node.js 环境。

建议安装 Node.js 18 或更高版本。你可以在终端执行以下命令确认版本：

node -v npm -v

如果没安装，去 Node.js 官网下载 LTS 版本安装即可。安装完成后，重新打开终端，确保node命令可以识别。

版本说明：Claude Code 和 Remotion 的更新速度都比较快，本文示例以常见版本为基准，实际使用时以官方最新文档为准。不要死记某个特定版本号，重点是理解配置思路。

2.3 安装 Claude Code

Claude Code 的官方安装方式是通过 npm 全局安装：

npm install -g @anthropic-ai/claude-code

安装完成后验证版本：

claude --version

如果出现“claude 不是内部或外部命令”之类的错误，通常是 npm 全局目录没有加入系统 PATH。可以通过npm config get prefix查看全局安装路径，然后手动加入环境变量。

安装完以后，在终端输入claude，会进入交互模式。首次使用需要完成账号登录或配置 API Key，具体操作按终端里的提示进行即可。

如果你希望访问本地的聊天模型，也可以使用一些社区工具切换模型提供方，例如“cc-switch”这类工具可以管理 Claude Code 的模型接入配置。但本文默认使用官方版本演示。

2.4 初始化 Remotion 项目

创建一个新的项目目录：

mkdir video-demo cd video-demo

初始化 npm 项目：

npm init -y

安装 Remotion 相关依赖：

npm install remotion @remotion/cli react react-dom

Remotion 需要 React 环境，所以react和react-dom是必须的。安装完成后，项目的package.json里会出现这些依赖。

接下来创建基础目录结构，我习惯这样组织：

src/ components/ scenes/ styles/ remotion.config.ts package.json tsconfig.json

其中src/components放通用组件，src/scenes放视频场景，src/styles放全局样式。下面实战案例会按照这个结构写代码。

3. Claude Code 的基本操作

3.1 启动交互终端

在项目目录下执行：

claude

进入交互模式后，你可以直接输入自然语言指令。Claude Code 会显示它的思考过程、读取的文件、执行的命令，最终输出改动结果。

如果不想进入交互模式，也可以直接传一条消息：

claude "帮我看看当前项目的 package.json 内容"

这种一次性调用很适合写脚本时快速获取回答。

3.2 常用指令与概念

Claude Code 的交互中有一些常用指令，比如：

• /help：查看帮助。
• /clear：清空当前对话上下文。
• /status：查看当前会话状态。
• /init：在项目里初始化 Claude Code 的配置文件。

你可以让 Claude Code 执行终端命令，它会在你的授权下运行。也可以让它读取文件、修改文件，但每次修改前最好确认它的改动是否符合预期。

另一个实用技巧是，你可以在对话里明确指定文件路径。例如：

“请修改 src/scenes/BuyMelon.tsx，把字幕颜色改成黄色，字号加大到 64。”

这样 Claude Code 会直接定位到目标文件，而不是猜测。

3.3 第一次让 Claude Code 创建 Remotion 项目

下面演示一个最简单的场景：让 Claude Code 帮我们创建一个空白的 Remotion 项目。

终端输入：

请帮我初始化一个 Remotion 项目，使用 TypeScript，输出 1920x1080 分辨率，帧率 30fps。

Claude Code 会检查当前目录，生成或修改文件。它可能问你，是否允许执行 npm install 命令，选择允许即可。

等待操作完成后，项目里会多出remotion.config.ts和入口组件。如果没有自动生成入口文件，你可以让它继续：

请生成 src/index.ts 和 src/Root.tsx，注册一个空的 Composition，时长 5 秒。

这套“描述目标 → AI 改代码 → 人工检查 → 运行验证”的流程，就是之后所有创作的基础。

4. Remotion 核心概念拆解

4.1 视频即 React 组件

Remotion 的核心模型是：一个视频由若干 React 组件组合渲染而成。最外层是一个Composition，它相当于视频的“轨道”。

Composition接收这些参数：

• id：视频标识。
• component：要渲染的根组件。
• durationInFrames：视频总帧数。
• fps：帧率，比如 30。
• width和height：画面尺寸。

下面是一个最小 Composition 示例：

// 文件路径：src/Root.tsx import {Composition} from 'remotion'; import {MyVideo} from './MyVideo'; export const RemotionRoot: React.FC = () => { return ( <> <Composition id="Main" component={MyVideo} durationInFrames={150} fps={30} width={1920} height={1080} /> </> ); };

MyVideo是你自己写的组件，它负责从第 1 帧渲染到第 150 帧。Remotion 会按时间顺序逐帧调用这个组件，把渲染结果合成视频。

4.2 时间轴：Sequence 与 useCurrentFrame

Sequence是 Remotion 里最重要的时间容器。它表示“从某一帧开始，持续多少帧”的片段。

举个例子，如果视频总长 10 秒（300 帧），第 0 秒到第 2 秒是片头，第 2 秒到第 8 秒是正片，第 8 秒到第 10 秒是片尾，就可以拆成三个Sequence。

import {AbsoluteFill, Sequence} from 'remotion'; import {Intro} from './Intro'; import {MainScene} from './MainScene'; import {Ending} from './Ending'; export const MyVideo: React.FC = () => { return ( <AbsoluteFill> <Sequence from={0} durationInFrames={60}> <Intro /> </Sequence> <Sequence from={60} durationInFrames={180}> <MainScene /> </Sequence> <Sequence from={240} durationInFrames={60}> <Ending /> </Sequence> </AbsoluteFill> ); };

from={60}表示从第 60 帧开始渲染。在这个序列内部，组件拿到的 frame 是从 0 重新计算的，也就是说Sequence内部的第一帧是 0，即使它在全局时间轴的第 60 帧。

useCurrentFrame是获取当前帧号的 Hook：

import {useCurrentFrame} from 'remotion'; export const Intro: React.FC = () => { const frame = useCurrentFrame(); return <div>当前帧：{frame}</div>; };

这个帧号是驱动动画的根源。只要根据 frame 计算不同的 CSS 值，动画就产生了。

4.3 动画：spring 与 interpolate

interpolate用于把一个数值范围映射到另一个数值范围。

例如，让透明度从第 0 帧到第 30 帧从 0 变到 1：

import {useCurrentFrame, interpolate} from 'remotion'; const frame = useCurrentFrame(); const opacity = interpolate(frame, [0, 30], [0, 1]);

这段代码的意思是，inputRange 是 [0, 30]，outputRange 是 [0, 1]。当 frame 为 0 时，opacity 为 0；当 frame 为 30 时，opacity 为 1。默认超出范围后值会保持边界值，如果需要可以设置extrapolateLeft和extrapolateRight。

spring则用于模拟弹性物理效果。它接收一个 frame 参数和一个配置对象，返回 0 到 1 之间的动画进度。

import {useCurrentFrame, spring} from 'remotion'; const frame = useCurrentFrame(); const scale = spring({ frame, fps: 30, config: {damping: 12}, });

然后可以把 scale 应用在元素的transform上：

<div style={{transform: `scale(${scale})`}}>文字</div>

这样元素会从 scale 0 开始，以弹跳效果放大到 1。

4.4 字幕与样式：绝对定位与 CSS

Remotion 延续了很多 Web 布局概念。画面通常是一个AbsoluteFill，也就是占满整个视频画面的容器。你可以在里面用<div>自由摆放元素。

import {AbsoluteFill} from 'remotion'; export const Subtitle: React.FC<{text: string}> = ({text}) => { return ( <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center', }} > <div style={{ fontSize: 80, color: 'white', background: 'rgba(0,0,0,0.6)', padding: '20px 40px', borderRadius: 12, }} > {text} </div> </AbsoluteFill> ); };

这里的justifyContent: 'center'和alignItems: 'center'是 CSS 弹性布局属性，用于让内容居中。理解了这些基础，后面做字幕弹窗、人物对话、转场都不难。

5. 完整实战：复刻“买瓜名场面”风格片段

下面进入本文的核心实战。我会用 Claude Code 的思维来组织这个流程：先描述需求，再给代码结果，最后渲染验证。

先说明一下版权问题：如果你想复刻网络热门影视片段，请使用正版素材或自制素材。本文的重点是“复刻风格”，也就是那种节奏紧凑、字幕强调、转场生硬的鬼畜感，不是让你直接搬运受版权保护的视频内容。

5.1 设计脚本与场景拆分

我们做一个 15 秒的短片，1080p，30fps，共 450 帧。整体风格参考经典“卖瓜名场面”的剪辑节奏：

• 第 0 秒到第 2 秒：黑底白字片头，大字弹出“买瓜吗”。
• 第 2 秒到第 7 秒：画面中央出现一个简笔角色，旁边弹出字幕“你这瓜保熟吗”。
• 第 7 秒到第 10 秒：画面突然放大抖动，字幕变成红色“你搁这跟我玩梗呢”。
• 第 10 秒到第 13 秒：黑屏转场，出现刀光效果音标注“反正我信了”。
• 第 13 秒到第 15 秒：片尾定格，出现“视频结束”四个字。

因为不用真实视频素材，我们用代码画形状、文字和色块来实现画面效果。这样做的好处是素材全是我们自己的，没有版权问题，而且完全展现代码控制力。

5.2 项目结构

video-demo/ src/ components/ BigText.tsx SubtitleBox.tsx Character.tsx scenes/ IntroScene.tsx DialogueScene.tsx ActionScene.tsx EndingScene.tsx Root.tsx index.ts style.css package.json remotion.config.ts tsconfig.json

5.3 编写全局样式与入口

首先创建src/style.css：

* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif; background: #000; }

然后在src/index.ts里注册根组件：

// 文件路径：src/index.ts import {registerRoot} from 'remotion'; import {RemotionRoot} from './Root'; registerRoot(RemotionRoot);

接着写src/Root.tsx，注册一个总时长为 450 帧的 Composition：

// 文件路径：src/Root.tsx import {Composition} from 'remotion'; import {MyVideo} from './MyVideo'; export const RemotionRoot: React.FC = () => { return ( <Composition id="BuyMelonStyle" component={MyVideo} durationInFrames={450} fps={30} width={1920} height={1080} /> ); };

注意，这里直接用React.FC类型，需要保证 tsconfig 支持 JSX。如果没有MyVideo，接下来马上创建。

5.4 实现片头：大字弹出

创建src/scenes/IntroScene.tsx：

// 文件路径：src/scenes/IntroScene.tsx import {AbsoluteFill, useCurrentFrame, spring} from 'remotion'; export const IntroScene: React.FC = () => { const frame = useCurrentFrame(); const scale = spring({ frame, fps: 30, config: {damping: 10, stiffness: 150}, }); const opacity = Math.min(1, frame / 15); return ( <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: '#000', }} > <div style={{ transform: `scale(${scale})`, opacity, fontSize: 160, fontWeight: 900, color: '#FFD700', textShadow: '8px 8px 0 #8B0000', letterSpacing: '10px', }} > 买瓜吗 </div> <div style={{ position: 'absolute', bottom: 120, fontSize: 40, color: '#fff', opacity, }} > 用代码复刻名场面 </div> </AbsoluteFill> ); };

这段代码里，spring让标题从 0 放大到 1，opacity负责淡入。textShadow制造了老式综艺标题的硬阴影效果。

5.5 实现对话字幕与角色

创建src/components/Character.tsx，用简单的色块画一个抽象角色：

// 文件路径：src/components/Character.tsx import React from 'react'; export const Character: React.FC<{ color: string; scale?: number; }> = ({color, scale = 1}) => { return ( <div style={{ width: 300 * scale, height: 300 * scale, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', position: 'relative', }} > <div style={{ width: 180 * scale, height: 60 * scale, backgroundColor: '#FFDAB9', borderRadius: '40% 40% 20% 20%', }} /> <div style={{ width: 220 * scale, height: 140 * scale, backgroundColor: color, borderRadius: 20, marginTop: -10, }} /> </div> ); };

这个角色很简单，上面是脸，下面是身体。实际项目中可以替换成你的素材图片。

创建src/components/SubtitleBox.tsx：

// 文件路径：src/components/SubtitleBox.tsx import React from 'react'; export const SubtitleBox: React.FC<{ text: string; color?: string; backgroundColor?: string; fontSize?: number; }> = ({ text, color = '#fff', backgroundColor = 'rgba(0,0,0,0.75)', fontSize = 64, }) => { return ( <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '16px 36px', backgroundColor, color, fontSize, fontWeight: 800, borderRadius: 16, border: '4px solid #fff', minWidth: 400, textAlign: 'center', }} > {text} </div> ); };

接着创建src/scenes/DialogueScene.tsx：

// 文件路径：src/scenes/DialogueScene.tsx import {AbsoluteFill, Sequence, useCurrentFrame, spring} from 'remotion'; import {Character} from '../components/Character'; import {SubtitleBox} from '../components/SubtitleBox'; const DialogueLine: React.FC<{ text: string; from: number; duration: number; characterColor: string; }> = ({text, from, duration, characterColor}) => { const frame = useCurrentFrame(); const localFrame = frame - from; const scale = spring({ frame: localFrame, fps: 30, config: {damping: 12}, }); const opacity = Math.min(1, localFrame / 8); return ( <Sequence from={from} durationInFrames={duration}> <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center', flexDirection: 'row', gap: 80, }} > <Character color={characterColor} scale={1} /> <div style={{opacity, transform: `scale(${scale})`}}> <SubtitleBox text={text} /> </div> </AbsoluteFill> </Sequence> ); }; export const DialogueScene: React.FC = () => { return ( <AbsoluteFill style={{backgroundColor: '#1a1a2e'}}> <DialogueLine text="你这瓜保熟吗" from={0} duration={90} characterColor="#e94560" /> <DialogueLine text="我开水果店的，能卖你生瓜蛋子？" from={90} duration={60} characterColor="#16213e" /> </AbsoluteFill> ); };

这里的DialogueScene内部包含两个DialogueLine，分别从第 0 帧和第 90 帧开始。每个DialogueLine内部使用localFrame计算动画，避免多个片段相互影响。

5.6 实现放大抖动转场

创建src/scenes/ActionScene.tsx：

// 文件路径：src/scenes/ActionScene.tsx import {AbsoluteFill, useCurrentFrame, interpolate} from 'remotion'; export const ActionScene: React.FC = () => { const frame = useCurrentFrame(); const shakeX = interpolate(frame, [0, 5, 10, 15, 20, 25], [0, -20, 20, -10, 10, 0]); const scale = interpolate(frame, [0, 20], [1, 1.4]); const opacity = Math.min(1, frame / 5); return ( <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: '#2d080a', transform: `translateX(${shakeX}px) scale(${scale})`, }} > <div style={{ fontSize: 120, fontWeight: 900, color: '#ff0040', opacity, textShadow: '10px 10px 0 #000', }} > 你搁这跟我玩梗呢？ </div> <div style={{ position: 'absolute', bottom: 150, fontSize: 40, color: '#fff', opacity, }} > 画面抖动+缩放转场 </div> </AbsoluteFill> ); };

这个场景里没有使用 spring，而是通过interpolate手动控制位移和缩放。shakeX在 0 到 25 帧内产生来回抖动，然后停止，给人一次快速碰撞的冲击感。

5.7 实现片尾定格与特效文字

创建src/scenes/EndingScene.tsx：

// 文件路径：src/scenes/EndingScene.tsx import {AbsoluteFill, useCurrentFrame, spring} from 'remotion'; export const EndingScene: React.FC = () => { const frame = useCurrentFrame(); const fadeIn = Math.min(1, frame / 20); const scale = spring({ frame, fps: 30, config: {damping: 14}, }); return ( <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: '#000', }} > <div style={{ transform: `scale(${scale})`, opacity: fadeIn, fontSize: 180, fontWeight: 900, color: '#fff', border: '8px solid #FFD700', padding: '30px 80px', borderRadius: 24, }} > 视频结束 </div> <div style={{ position: 'absolute', bottom: 120, opacity: fadeIn, fontSize: 40, color: '#aaa', }} > 本文示例场景，素材均为代码生成 </div> </AbsoluteFill> ); };

5.8 组装视频并渲染

创建src/MyVideo.tsx，把四个场景按时间轴拼起来：

// 文件路径：src/MyVideo.tsx import {AbsoluteFill, Sequence} from 'remotion'; import {IntroScene} from './scenes/IntroScene'; import {DialogueScene} from './scenes/DialogueScene'; import {ActionScene} from './scenes/ActionScene'; import {EndingScene} from './scenes/EndingScene'; export const MyVideo: React.FC = () => { return ( <AbsoluteFill> <Sequence from={0} durationInFrames={60}> <IntroScene /> </Sequence> <Sequence from={60} durationInFrames={150}> <DialogueScene /> </Sequence> <Sequence from={210} durationInFrames={90}> <ActionScene /> </Sequence> <Sequence from={300} durationInFrames={150}> <EndingScene /> </Sequence> </AbsoluteFill> ); };

最后，在remotion.config.ts里指定入口：

// 文件路径：remotion.config.ts import {Config} from '@remotion/cli/config'; Config.setEntryPoint('./src/index.ts'); Config.setVideoImageFormat('jpeg'); Config.setOverwriteOutput(true);

然后运行渲染命令：

npx remotion render BuyMelonStyle out/melon-style.mp4

命令中的BuyMelonStyle对应Root.tsx里的id。渲染完成后，播放out/melon-style.mp4就能看到成片。

如果觉得这段风格还不够“名场面”，可以通过调整spring参数让动画更硬朗，调整字幕颜色、字体大小、转场时长来贴近你想要的效果。

6. 利用 Claude Code 加速创作流程

6.1 用自然语言生成代码

现在你已经知道 Remotion 代码是怎么组织的，再来看 Claude Code 如何加速这个过程。

在终端进入项目目录，输入：

claude

然后发送这样的指令：

请参考我现在的 Remotion 项目结构，帮我新增一个 3 秒的“回忆闪回”片段。要求： 1. 画面从模糊到清晰。 2. 字幕在底部出现。 3. 背景色偏黄色，有老照片质感。 4. 总时长 90 帧。

Claude Code 会分析当前项目结构，读取已有代码风格，然后生成新组件，并把它接入Root.tsx或MyVideo.tsx。

6.2 让 AI 做局部修改

很多时候不是从零写代码，而是修改细节。比如：

• “把 DialogueScene 里的字幕边框从白色改成红色。”
• “把 ActionScene 的抖动幅度减小，最大位移 10 像素。”
• “给 EndingScene 增加一个打字机效果，逐字显示‘视频结束’。”

这些修改如果用传统方式，你需要找到对应组件，理解变量含义，手动调整。Claude Code 可以直接读取文件，精准定位并修改。

例如，如果你对 Claude Code 说“把DialogueScene里的字幕颜色改成金色”，它会读取文件后快速完成替换。

6.3 让 AI 排查报错

Remotion 项目报错时，把终端里的错误信息贴给 Claude Code：

运行 npx remotion render 时报错：Cannot find module 'remotion'。项目里已经安装了 remotion，怎么解决？

它会先检查package.json中的依赖，再检查 node_modules 是否存在，给出合理的修复建议，甚至直接执行安装命令。注意，在让 AI 执行命令前，确认它准备执行的命令是你认可的。

6.4 多场景批量生成

Claude Code 还有一个优势，就是处理重复性工作。如果你有 10 句台词要生成 10 段字幕组件，你不用自己复制粘贴 10 次。

可以这样描述：

帮我创建一个字幕数据文件 src/data/dialogues.ts，包含以下内容： 1. 第一句：今天天气不错 2. 第二句：适合写代码做视频 3. 第三句：你觉得呢 每项包含 speaker、text、startFrame、duration，然后修改 DialogueScene，让它遍历这个数据渲染字幕，保持现有风格。

这样数据与组件分离，之后你只需要维护一个 JSON 或 TS 数组，视频内容就全部更新了。

7. 常见问题与排查思路

7.1 Claude Code 安装失败或命令不存在

7.2 Remotion 渲染卡死或内存不足

中配电脑渲染时容易出现内存溢出或页面卡死。常见原因是并发帧数设置太高。

可以在渲染命令里指定并发数：

npx remotion render BuyMelonStyle out/melon-style.mp4 --concurrency=2

--concurrency表示同时渲染的帧数。数值越小，内存占用越低，速度也越慢。对于 8GB 内存的电脑，建议设置为 2 或 3。

如果项目里使用了大量高清图片素材，建议统一压缩到合适的尺寸，不要直接使用 4K 原图。

7.3 中文乱码

Remotion 渲染时使用 Node.js 环境，如果终端或代码文件里出现中文乱码，通常有几个原因。

首先是文件编码。确保你的代码文件保存为 UTF-8 编码。如果你在 Windows 上用记事本编辑过代码，最好统一用 VS Code 调整编码。

其次是字体问题。Remotion 渲染文本时使用本机字体，如果字体不支持中文，就会出现方框或乱码。可以在样式里显式指定中文字体：

font-family: 'Microsoft YaHei', 'PingFang SC', 'Noto Sans CJK SC', sans-serif;

如果服务器或 CI 环境没有这些字体，中文会无法渲染，建议预先通过@remotion/google-fonts或自定义字体文件引入中文字体。

7.4 Claude Code 提示模型版本识别错误

如果你在 Claude Code 里配置了非默认模型，可能遇到类似"GLM-5.2" is not a model this version of Claude Code recognizes的报错。

这种情况通常是因为 Claude Code 版本较旧，不认识某个新的模型名称。解决办法是升级 Claude Code：

npm update -g @anthropic-ai/claude-code

或者检查模型名称是否正确。如果使用第三方模型接入工具，需要确保模型名与 Claude Code 支持的格式一致。

7.5 Token 消耗太快

使用 Claude Code 时，如果对话上下文很长，Token 消耗会很快。以下技巧可以节省用量：

• 让 Claude Code 只读取需要修改的文件，而不是整个项目。
• 一段对话专注一个任务，完成后用/clear清空上下文。
• 需要大规模重构时，先让它描述方案，确认后再执行代码修改，避免反复试错。
• 将常用需求写成文档，让 Claude Code 按照文档执行，减少重复解释。

8. 最佳实践与工程建议

8.1 素材管理规范化

用代码做视频不等于不用管理素材。图片、音频、字体都要放在项目目录里，比如public/或assets/文件夹。

建议命名清晰，例如assets/images/bg-01.jpg、assets/audio/swoosh.mp3。千万不要用素材1.png、最终版.jpg这类混乱命名，否则 AI 也无法帮你高效管理。

8.2 中配电脑的性能优化

渲染前先做预览检查：

npx remotion studio

这个命令会启动一个本地预览页面，你可以按时间轴拖动查看每一帧效果，不用每次渲染完整视频。

正式渲染时，可以考虑降低分辨率先用标清预览：

npx remotion render BuyMelonStyle out/preview.mp4 --scale=0.5

--scale=0.5会渲染 960x540 的视频，速度会快很多。确认效果没问题后，再渲染 1080p 成品。

如果电脑内存只有 8GB，尽量避免在项目里一次性加载大量高清图片。图片可以预压成 WebP 格式，体积更小。

8.3 代码组织与复用

视频片段不要都写在同一个组件里。按照场景拆分文件，每个场景只负责自己的画面。字幕样式、角色组件、背景组件提取为通用模块，方便复用。

推荐结构：

src/ components/ # 通用组件 scenes/ # 场景组件 data/ # 台词、配置、素材索引 hooks/ # 自定义动画 Hook styles/ # 全局样式

这样当一个场景里的动画写坏了，不会影响其他场景。Claude Code 也能更精准地定位问题。

8.4 与 AI 协作的提示词技巧

Claude Code 的效果很大程度上取决于你的描述质量。

一个有效的提示词通常包含：

• 文件路径或组件名称。
• 具体修改目标。
• 期望的视觉效果。
• 约束条件，比如时长、颜色、分辨率。

例如，不要只说“帮我改一下字幕”，而是说：

请修改 src/scenes/DialogueScene.tsx 中的 SubtitleBox 组件，让它从第 20 帧开始淡入，淡入过程 10 帧，同时字幕背景改为半透明黑色，字体加粗。

描述越具体，生成的代码越接近预期。

8.5 安全与授权注意

使用 Claude Code 时，它有权限修改你的项目文件。建议在测试目录或备份项目中验证新需求，不要直接在重要生产项目里让 AI 执行大批量修改。

涉及删除文件、覆盖文件、执行命令时，先审查 AI 的计划再批准。不要让它自动执行带有破坏性的操作。

如果项目里有隐私信息，例如数据库密码、API Key，不要把这类信息写在代码里，也不要让 AI 读取相关配置文件。

9. 总结与学习路线

这篇文章主要讲清楚了三条主线：Claude Code 是什么，Remotion 的动画模型是什么，以及两者如何配合复刻视频剪辑风格。

你已经学会了：

• 安装 Claude Code 和初始化 Remotion 项目。
• 理解 Composition、Sequence、useCurrentFrame、spring、interpolate 等核心概念。
• 编写完整的片头、对话、动作、片尾四个场景。
• 用 Claude Code 自然语言生成代码、修改代码、排查错误。
• 在中配电脑上渲染视频，并做性能和内存优化。

下一步可以继续深入：

• 学习 Remotion 的音频处理，为视频添加背景音乐和音效。
• 研究@remotion/transitions转场库，掌握更丰富的转场效果。
• 探索@remotion/player，把视频播放器嵌入到 Web 项目中。
• 使用 Claude Code 配合自定义 Skill 文档，建立自己团队的视频生成流程。

如果在实操中遇到文章没有覆盖的问题，建议把终端报错信息整理好，贴给 Claude Code 让它帮你定位，同时多查看 Remotion 官方文档。代码做视频的思路一旦掌握，你就能用中配电脑做出不少有质感的短片。