YT 学习笔记

用 Remotion + Claude Code 提示词生成宣传视频(含 VPS 部署)

17分钟阅读下载 MD

封面

ByteGrad · 25:09 · 发布 2026-01-27 · 2.2万次观看(截至抓取) · 观看原视频

主旨

演示如何用 Claude Code 驱动 Remotion(以 React 代码描述视频的框架),通过提示词生成、迭代、渲染出 MP4 宣传视频,并把整套流程搬到 VPS 上运行。

核心论点

  1. Remotion 把视频变成 React 代码,因此 AI agent 能像改前端代码一样”写”视频,不必进传统剪辑软件。(→ 详解1)
  2. 给一个网页链接就能生成初版 promo 视频——agent 抓取页面的文案、配色、图片自动拼成多场景。(→ 详解2)
  3. Remotion 的 Claude Code Skill 本质是一包按需加载的上下文:主文件描述有哪些子文件,agent 只在提示词相关时才把对应片段拉进 context。(→ 详解3)
  4. 视频由 React 组件构成,可直接复用现有 app 的组件,让 demo 呈现真实的产品界面与品牌。(→ 详解4)
  5. 打磨靠继续 prompt + hot reload,而非手动拖时间轴;改大小、配色、加 3D、加代码块场景都是一句话。(→ 详解5)
  6. 满意后渲染成 MP4 即可上传分发;还能用 MCP 接 TTS 服务给视频配音、加字幕。(→ 详解6)
  7. 把这套流程放 VPS 上有实际收益:释放本机资源、当渲染农场并行出片、方便他人访问。(→ 详解7)
  8. 选带 Claude Code 模板的 VPS 可省去环境搭建,开箱即可 SSH 进去跑 agent。(→ 详解8)

知识点详解

1. Remotion:视频即 React 代码 00:59

Remotion 是一个用 React 组件来描述视频画面的框架:一个 div、一段背景样式、一段文字,渲染出来就是视频里的一帧。整段视频”只是 markup、只是 code”。

正因为视频是代码,AI 编码 agent 才能像编辑前端项目一样生成和修改视频,不需要人进传统剪辑软件逐帧操作。博主提到 Remotion 存在多年但一直偏复杂,是这波 AI coding agent 让它”爆发”——门槛被拉平。

创建 Remotion app 后你会拿到一个 studio 编辑 UI,可预览、可导出;但实际编辑主要靠对 agent 提示词,studio 只用来回看。

2. 供一个链接就生成初版 promo 视频 00:33

最省事的起点是把一个网页 URL 丢给 agent(演示里用的是他自家课程页),让它”用 Remotion 做一个短 promo 视频”。agent 会 fetch 该页,抓取文案、配色,拼成带多个场景的初版。

一个”场景(scene)“就是视频的一段。演示里 13 秒生成了 5 个动画场景,自动切成 hero / 项目展示 / 卖点 / call to action 的合理结构,开箱自带动画。

网站上现成的文案通常是精心打磨过的,直接拿来做视频素材质量不差。图片/logo 有时需手动补充(把图片放进 public/ 目录,agent 即可在视频里引用)。

3. Claude Code Skill = 按需加载的动态上下文 06:46

Remotion 近期”出圈”的直接原因是发布了 Claude Code skill。一个 skill 本质”就是一堆 context”:一个 SKILL.md 主文件,里面描述还有哪些子文件(比如专门讲怎么做 3D 效果的文件)。

当你提示词里出现”3D 效果”,Claude Code 看到 skill 里有相关条目,就动态把那份子文件拉进 context;不相关的内容不加载。这就是 skill 的核心价值——按需把相关信息喂进上下文,保持 context 干净。

安装方式:Remotion 文档给了一条命令,把 skill 作为文件加进当前项目(也可全局安装供多项目复用)。装好后在终端 /skills 可看到该 skill;IDE 扩展里即使不显示该命令,agent 仍能访问。这套机制正是 渐进式披露 与 静态上下文与动态上下文 的具体落地。

4. 复用现有 app 的 React 组件 00:57

如果你已有一个 React app(比如 Next.js),可以把 Remotion app 放进同一 workspace 的相邻文件夹,让视频”看得见”你的实际组件。

这样做的好处:agent 能直接复用你 app 里现成的 React 组件,视频就能呈现产品的真实界面,再加动画、套用现有品牌配色,做出既真实又炫的 demo——特别适合给某个新功能做 promo。

演示中还展示了把喜欢的按钮渐变”贯穿整段视频”当强调色,以及加入讲师头像场景(把图片存到 public 后引用)——都印证了”视频就是可编辑的代码/资产”。

5. 迭代 prompt + hot reload 打磨 10:40

初版几乎肯定不完美(字太小、配色不对)。打磨方式不是拖时间轴,而是继续对 agent 提示:“所有场景都显著放大""用这个绿色当强调色""给图片加 3D 效果""加一个展示代码块的场景”。

agent 改的是底层 React/CSS 代码,studio 支持 hot reload——它还在改,预览里文字已经变大了。因为一切都是 Tailwind class,把 white 改成 orange-500 文字就变色,可见即可改。

Remotion 还擅长渲染代码片段 UI、终端 UI、假浏览器视图,并能做打字机动画(逐字敲出代码)。博主坦言仍需约半小时手动微调才够用,但比从零剪辑快太多。

6. 渲染成 MP4 + 用 MCP 接 TTS 配音 15:19

满意后要”render”成真正的 MP4 文件,才能上传到社媒或托管平台、进而嵌到网站。短视频渲染很快;视频大或素材多时会明显耗时耗资源。

进阶:给视频加音频。可把 TTS 服务(如 11 Labs)作为 MCP server 接到 agent——先让它生成脚本文本,再把文本交给音频服务生成语音,最后由 Claude Code 把音轨加进视频。字幕/caption 也可如法炮制。

7. 为什么把流程放到 VPS 上 03:17

本地跑有不少缺点,改到 VPS 上有几层收益:释放本机资源(合上笔记本不影响渲染);VPS 的 CPU/RAM 可能比本机强,workflow 更顺、出片更快。

更关键的是把 VPS 当”渲染农场(render farm)“:尤其当渲染是你 app 的一部分、用户在批量生成视频时,可在 VPS 上并行渲染。此外别人要访问时,连 VPS 远比连你私人电脑容易。

8. 用带 Claude Code 模板的 VPS 部署 17:06

演示用 Hostinger(本视频赞助方),因其提供开箱即用的 Claude Code VPS 模板,免去手动装 Claude Code。付费后在 onboarding 选该模板、设密码即可。

进服务器有两种方式:用本机终端 ssh(用建 VPS 时设的密码),或用面板自带的浏览器终端。首次跑 claude 需用订阅账号登录授权。建议先建一个项目目录再在其中启动,别在 home 目录跑。

在 VPS 里重复本地流程:创建 Remotion app(选 blank 模板 + Tailwind + agent skills,一次装好 skill)、npm install、让 agent 生成视频。studio 跑在 localhost:3000,但因在 VPS 上,要用 VPS-IP:3000 访问(可能提示无 HTTPS)——好处是链接可直接分享给他人预览。

可执行步骤

  • 用 Remotion 文档给的命令创建一个 Remotion app(blank 模板 + Tailwind + agent skills),npm install 后 npm run dev 打开 studio。
  • 把一个现成落地页/课程页 URL 交给 agent,让它”用 Remotion 做一个短 promo 视频”,看初版结构。
  • 需要品牌真实感时,把 Remotion app 放进已有 React 项目相邻目录,提示 agent 复用现有组件。
  • 通过连续 prompt(放大、改色、加 3D、加代码块场景)迭代,靠 studio hot reload 即时预览。
  • 满意后 render 成 MP4;需配音则把 TTS 服务接为 MCP server 让 agent 生成并加音轨。
  • 需要渲染农场/共享/释放本机时,用带 Claude Code 模板的 VPS,ssh 进去按同样流程跑,用 IP:3000 预览。

关联

  • 印证:渐进式披露 —— Remotion 的 skill 用 SKILL.md 主文件描述子文件、agent 按需展开对应片段,正是”先读索引、再按需打开全文”的检索范式在 skill 上的落地。
  • 印证:静态上下文与动态上下文 —— skill “只在提示词相关时才拉进 context、保持 context 干净”是动态上下文按需加载的具体案例,与该概念的权衡一致。

术语

  • Remotion(用 React 组件描述、可渲染成 MP4 的编程式视频框架)
  • Scene(场景;视频里的一个片段,对应一段 React 代码)
  • Skill(Claude Code 的按需加载上下文包:主 md 文件 + 引用子文件)
  • Render(渲染;把 Remotion 项目打包成 MP4 文件)
  • Render farm(渲染农场;集中/并行执行渲染任务的远程机器)
  • VPS(虚拟专用服务器)
  • MCP server(接入 agent 的外部能力服务,如 TTS)
  • Hot reload(改代码后预览即时更新)

金句

“It’s just markup. It’s just code.” → 一句话点破 Remotion 让 AI 能做视频的根因:视频被降维成前端代码,agent 的编辑能力自然迁移过来。

立场与利益

  • 赞助:Hostinger 赞助本视频,博主给出全大写优惠码 BYTEGRAD 和 description 里的 affiliate 链接;“带 Claude Code 模板、开箱即用”的卖点服务于该合作,选型建议需打折看。
  • 自家产品:演示素材用的是博主自售的 React/Next.js 课程页(bytegrad.com),既是 demo 也是隐性引流。
  • 通用 vs 强绑定:“视频=React 代码、skill=按需上下文、可迭代 prompt、渲染 MP4”是与厂商无关的通用事实;“用哪家 VPS”则与赞助强绑定,可换任意 VPS/本地替代。

价值定位

  • 适合谁:已在用 Claude Code、想低成本快速产出 promo/demo/功能演示视频的 solo builder、indie hacker、课程/SaaS 作者。
  • 解决什么:想给独立站/课程/新功能做营销短视频,但不想学剪辑软件——这里给了”提示词生成 + 迭代 + 渲染 MP4”的端到端路径,以及把渲染搬到 VPS 当农场的产品化思路。
  • 认知 vs 实操:偏认知/可能性展示(演示均为通用 prompt、结果需再半小时手工微调),不是精细教程;VPS 部署段落实操性较强。
  • 对做独立站的价值:promo/demo 视频是获客素材;“VPS render farm 为用户并行渲染”点出了把这套能力产品化(视频生成 SaaS)的方向。

自检问题

  1. 为什么 AI agent 能”生成”Remotion 视频而不需要剪辑软件? 答案:因为 Remotion 用 React 组件描述视频,“视频就是 markup、就是 code”,agent 的前端编辑能力可直接迁移来改视频。见详解1。00:59
  2. Remotion 的 Claude Code Skill 具体起什么作用,机制是什么? 答案:它是一包按需加载的上下文——主 md 文件描述有哪些子文件,agent 只在提示词相关(如”3D”)时才把对应片段拉进 context,保持上下文干净。见详解3。06:46
  3. 把视频生成流程放到 VPS 上,相比本地有哪些收益? 答案:释放本机资源(合上笔记本不影响渲染)、可能有更强 CPU/RAM 让出片更快、可当渲染农场并行出片、也方便他人访问。见详解7。03:17
  4. 想给生成的视频加语音配音,该怎么做? 答案:把 TTS 服务(如 11 Labs)接为 MCP server,先让 agent 生成脚本文本、再交音频服务合成语音,最后由 Claude Code 把音轨加进视频。见详解6。15:19
  5. 初版视频不满意时正确的打磨方式是什么? 答案:继续对 agent 提示(放大、改强调色、加 3D、加代码块场景),它改底层 React/CSS,studio 靠 hot reload 即时预览,而非手动拖时间轴。见详解5。10:40

💬 热门评论 top-5 主 + 0 回(抓取 2026-07-07)

[2] @glassarmor925:我想知道在 Remotion 之上能构建什么。 👍 1 [3] @dreamsachiever212:你说得对，我在信息流里看到几个关于这个的视频，我决定看你的。一个创作者的标题是“我解雇了我所有的视频编辑”……哈哈，这确实在某些方面节省了时间，但我不会为了玩这个浪费我的 tokens，我宁愿花钱请视频编辑。这个工具还需要改进。 👍 2 [4] @Ancientskatha:是要求 Claude Pro 还是免费版？ ——其他 1 条:感谢/夸赞([5]@JoãoTomaz-f2f);1 条 spam 已略

英文原文[1] @ByteGrad(UP):Really cool to see Remotion break through. Thanks to Hostinger for sponsoring! Run Remotion + Claude Code on VPS here (use code BYTEGRAD): https://hostinger.com/bytegrad (sponsored by Hostinger & ByteGrad gets commission) 👍 1
[2] @glassarmor925:I wonder what could be built on top of remotion. 👍 1
[3] @dreamsachiever212:You're right, i have seen few videos in my feed about this and I decided to watch yours, one creator 's clickbait "I fired all my video editors"... lol this certainly saves some time in some capacity BUT i would not burn my tokens to play with this, I'd rather pay for video editor. They still need to do better with this tool. 👍 2
[4] @Ancientskatha:is requirement of claude pro or free
[5] @JoãoTomaz-f2f:spendid tank you 👍 1

关系图谱

反向链接