用说话,做出用代码驱动的高质量视频
完成后你将拥有
一个你亲手渲染的 MP4 视频文件(可直接上传的画质)
Claude Pro 及以上订阅必需
这是氛围编程的大脑。最低用 Claude Pro($20/月)就足以开始;如果你每天大量创作,Max 套餐额度更宽裕。免费版可以浅尝,但很快会触及上限。
一台电脑(Windows 或 Mac)必需
配置基本无所谓,能上网的笔记本就够了。
Node.js(LTS 版本)必需
运行代码的引擎。到 nodejs.org 下载标注 “LTS” 的稳定版。安装会在第1步一起完成。
VS Code(Visual Studio Code)必需
免费的代码编辑器。在这里装上 Claude Code 扩展,就能 “和 AI 对话来编程”。注意它与微软的 Visual Studio(另一款更重的 IDE)不同。
Remotion 是 “用代码做视频的工具”。你用 React(一种 Web 技术)画出画面,它把画面每秒拼 30 张导出成视频。听着难,但你并不需要自己写代码。
你只需用中文对 Claude 说 “在黑色背景上用黄色文字做一个标题升起的片头”。Claude 写代码,旁边的 Remotion Studio 实时显示结果。不满意就说 “文字再大些”“换成蓝色”。这就是氛围编程。
小贴士
本页上方的片头视频就是用 Remotion 做的。跟到最后,你也能做出这样的视频。
先装运行代码的引擎 Node.js。打开 nodejs.org,点标注 “LTS” 的大按钮下载安装包,一路 “下一步”。
确认是否装好。打开 VS Code,从菜单 终端 → 新建终端(或 Ctrl + `),逐行输入下面命令并回车。
$node -v$npm -v
v20.18.0 10.8.2
出现这样就成功了
出现两个像 v20.18.0 的版本号就成功了。数字不同也没关系,能出数字就代表 “已安装”。
遇到报错怎么办？
从 code.visualstudio.com 安装 VS Code。点左侧四个方块(扩展)图标,搜索 “Claude Code” 安装。
侧栏会出现 Claude 图标。点击它按 “Sign in”,在打开的浏览器用 Claude 账号登录,即可连上你的 Pro/Max 订阅。从此在 VS Code 里和 Claude 对话编程。
小贴士
Claude Code 可以用中文交流:“为什么报错?”“这里再好看点”,用平时说话的方式即可。
遇到报错怎么办？
为视频项目建一个空文件夹。在终端输入下面命令,会在桌面建 my-video 并进入。
或在资源管理器里手动建好文件夹,再用 VS Code 的 文件 → 打开文件夹 打开它并新建终端。关键是 “以后的命令都在这个文件夹里执行”。
$cd Desktop$mkdir my-video$cd my-video
注意
含大量空格或中文的路径有时会出问题。建议用英文文件夹名(my-video)。
现在安装 Remotion。在终端输入下面这一行并回车,稍后会出现几个问题。
它会询问项目名,并让你选模板。用方向键选 “Hello World (recommended)” 回车,它会自动下载安装所需文件(1〜3 分钟)。
$npx create-video@latest
┌ Welcome to Remotion! │ ◇ What would you like to call your video? │ my-video │ ◇ Choose a template │ ● Hello World (recommended) │ ◇ Installing dependencies... └ Done! Created your project.
出现这样就成功了
最后出现 “Done! Created your project.” 之类即成功。文件夹里会有 src 等目录和多个文件。
遇到报错怎么办？
在已安装的文件夹内输入下面命令。这会启动你整个制作过程都开着的 “预览窗口(Remotion Studio)”。
稍后出现 “Server ready - Local: http://localhost:3000” 这样的行,浏览器会自动打开,或你自己打开该地址。会出现播放示例视频的 Studio。
$npm run dev
> remotion studio Server ready - Local: http://localhost:3000
出现这样就成功了
左边视频列表、中间预览、下方播放时间轴的界面就是 Remotion Studio。你将在此即时查看作品。
小贴士
制作时不要关这个终端,关了预览就停。需要别的命令就再开一个终端。
遇到报错怎么办？
在 VS Code 的 Claude 里用语言描述你想要的视频。别一开始就贪大,一个场景一个场景来。例如:
“在黑色背景中央做一个 5 秒片头:白色大标题 ‘VibeCampus’ 缓缓淡入,下面跟一个黄色副标题。”
当 Claude 改动 src 里的文件时,开着的 Remotion Studio 会自动刷新,你立刻看到结果。不满意就继续 “标题更大”“背景加紫色光晕”“副标题字体更粗”。这个循环就是氛围编程的全部。
小贴士
一次只改一处。把 “变大+换色+加音乐” 一起说,很难看清改了什么。小步提、看效果、再提,这个节奏最快。
遇到报错怎么办？
满意后导出成真正的视频文件(渲染)。再开一个终端(Studio 保持开着)输入下面命令。把 MyVideo 换成 Studio 左侧列表里的视频名。
--crf=12 是画质设置,数字越低画质越高,本频道固定用 12 以获得最高画质。进度到 100% 后,out 文件夹里就有 video.mp4。
$npx remotion render MyVideo out/video.mp4 --codec=h264 --crf=12 --pixel-format=yuv420p
Bundling video... 100% Rendering frames... 100% (900/900) Encoding... 100% + out/video.mp4 (24.1 MB)
出现这样就成功了
最后出现 “+ out/video.mp4” 之类的行和文件大小即完成。双击播放,可直接上传到 YouTube。
小贴士
需要竖屏短视频(1080×1920)的话,先做横版,再问 Claude 如何用 ffmpeg 裁切并在上下填充模糊背景。本频道就是这样做短视频的。
遇到报错怎么办？
恭喜,你没亲手写一行代码就做出并导出了高画质视频。这就是真正的氛围编程。
接下来字幕、背景音乐、音效、转场,甚至数据图表动画,都能用同样方式实现。把视频发到 VibeCampus 的 Studio 或 Launchpad,与其他氛围编程者分享吧。
