--- title: '用 Remotion + Claude Code 提示词生成宣传视频(含 VPS 部署)' video_id: y-pxNV0IyTY url: https://youtu.be/y-pxNV0IyTY title_en: "Remotion + Claude Code Is AMAZING For Creating Videos (+ VPS, Skills)" channel: ByteGrad published: 2026-01-27 duration: "25:09" topics: [建站与技术栈, 商业模式与变现] noted: 2026-07-05 value: A views: '2.2万' --- [![封面](https://i.ytimg.com/vi/y-pxNV0IyTY/maxresdefault.jpg)](https://youtu.be/y-pxNV0IyTY) > ByteGrad · 25:09 · 发布 2026-01-27 · 2.2万次观看(截至抓取) · [观看原视频](https://youtu.be/y-pxNV0IyTY) ## 主旨 演示如何用 Claude Code 驱动 Remotion(以 React 代码描述视频的框架),通过提示词生成、迭代、渲染出 MP4 宣传视频,并把整套流程搬到 VPS 上运行。 ## 核心论点 1. **Remotion 把视频变成 React 代码**,因此 AI agent 能像改前端代码一样"写"视频,不必进传统剪辑软件。([[#1-remotion视频即-react-代码-0059|→ 详解1]]) 2. **给一个网页链接就能生成初版 promo 视频**——agent 抓取页面的文案、配色、图片自动拼成多场景。([[#2-供一个链接就生成初版-promo-视频-0033|→ 详解2]]) 3. **Remotion 的 Claude Code Skill 本质是一包按需加载的上下文**:主文件描述有哪些子文件,agent 只在提示词相关时才把对应片段拉进 context。([[#3-claude-code-skill--按需加载的动态上下文-0646|→ 详解3]]) 4. **视频由 React 组件构成,可直接复用现有 app 的组件**,让 demo 呈现真实的产品界面与品牌。([[#4-复用现有-app-的-react-组件-0057|→ 详解4]]) 5. **打磨靠继续 prompt + hot reload**,而非手动拖时间轴;改大小、配色、加 3D、加代码块场景都是一句话。([[#5-迭代-prompt--hot-reload-打磨-1040|→ 详解5]]) 6. **满意后渲染成 MP4 即可上传分发**;还能用 MCP 接 TTS 服务给视频配音、加字幕。([[#6-渲染成-mp4--用-mcp-接-tts-配音-1519|→ 详解6]]) 7. **把这套流程放 VPS 上有实际收益**:释放本机资源、当渲染农场并行出片、方便他人访问。([[#7-为什么把流程放到-vps-上-0317|→ 详解7]]) 8. **选带 Claude Code 模板的 VPS 可省去环境搭建**,开箱即可 SSH 进去跑 agent。([[#8-用带-claude-code-模板的-vps-部署-1706|→ 详解8]]) ## 知识点详解 ### 1. Remotion:视频即 React 代码 [00:59](https://youtu.be/y-pxNV0IyTY?t=59) Remotion 是一个用 React 组件来描述视频画面的框架:一个 `div`、一段背景样式、一段文字,渲染出来就是视频里的一帧。整段视频"只是 markup、只是 code"。 正因为视频是代码,AI 编码 agent 才能像编辑前端项目一样生成和修改视频,不需要人进传统剪辑软件逐帧操作。博主提到 Remotion 存在多年但一直偏复杂,是这波 AI coding agent 让它"爆发"——门槛被拉平。 创建 Remotion app 后你会拿到一个 studio 编辑 UI,可预览、可导出;但实际编辑主要靠对 agent 提示词,studio 只用来回看。 ### 2. 供一个链接就生成初版 promo 视频 [00:33](https://youtu.be/y-pxNV0IyTY?t=33) 最省事的起点是把一个网页 URL 丢给 agent(演示里用的是他自家课程页),让它"用 Remotion 做一个短 promo 视频"。agent 会 fetch 该页,抓取文案、配色,拼成带多个场景的初版。 一个"场景(scene)"就是视频的一段。演示里 13 秒生成了 5 个动画场景,自动切成 hero / 项目展示 / 卖点 / call to action 的合理结构,开箱自带动画。 网站上现成的文案通常是精心打磨过的,直接拿来做视频素材质量不差。图片/logo 有时需手动补充(把图片放进 `public/` 目录,agent 即可在视频里引用)。 ### 3. Claude Code Skill = 按需加载的动态上下文 [06:46](https://youtu.be/y-pxNV0IyTY?t=406) 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](https://youtu.be/y-pxNV0IyTY?t=57) 如果你已有一个 React app(比如 Next.js),可以把 Remotion app 放进同一 workspace 的相邻文件夹,让视频"看得见"你的实际组件。 这样做的好处:agent 能直接复用你 app 里现成的 React 组件,视频就能呈现产品的真实界面,再加动画、套用现有品牌配色,做出既真实又炫的 demo——特别适合给某个新功能做 promo。 演示中还展示了把喜欢的按钮渐变"贯穿整段视频"当强调色,以及加入讲师头像场景(把图片存到 public 后引用)——都印证了"视频就是可编辑的代码/资产"。 ### 5. 迭代 prompt + hot reload 打磨 [10:40](https://youtu.be/y-pxNV0IyTY?t=640) 初版几乎肯定不完美(字太小、配色不对)。打磨方式不是拖时间轴,而是继续对 agent 提示:"所有场景都显著放大""用这个绿色当强调色""给图片加 3D 效果""加一个展示代码块的场景"。 agent 改的是底层 React/CSS 代码,studio 支持 hot reload——它还在改,预览里文字已经变大了。因为一切都是 Tailwind class,把 `white` 改成 `orange-500` 文字就变色,可见即可改。 Remotion 还擅长渲染代码片段 UI、终端 UI、假浏览器视图,并能做打字机动画(逐字敲出代码)。博主坦言仍需约半小时手动微调才够用,但比从零剪辑快太多。 ### 6. 渲染成 MP4 + 用 MCP 接 TTS 配音 [15:19](https://youtu.be/y-pxNV0IyTY?t=919) 满意后要"render"成真正的 MP4 文件,才能上传到社媒或托管平台、进而嵌到网站。短视频渲染很快;视频大或素材多时会明显耗时耗资源。 进阶:给视频加音频。可把 TTS 服务(如 11 Labs)作为 [[MCP]] server 接到 agent——先让它生成脚本文本,再把文本交给音频服务生成语音,最后由 Claude Code 把音轨加进视频。字幕/caption 也可如法炮制。 ### 7. 为什么把流程放到 VPS 上 [03:17](https://youtu.be/y-pxNV0IyTY?t=197) 本地跑有不少缺点,改到 VPS 上有几层收益:释放本机资源(合上笔记本不影响渲染);VPS 的 CPU/RAM 可能比本机强,workflow 更顺、出片更快。 更关键的是把 VPS 当"渲染农场(render farm)":尤其当渲染是你 app 的一部分、用户在批量生成视频时,可在 VPS 上并行渲染。此外别人要访问时,连 VPS 远比连你私人电脑容易。 ### 8. 用带 Claude Code 模板的 VPS 部署 [17:06](https://youtu.be/y-pxNV0IyTY?t=1026) 演示用 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](https://youtu.be/y-pxNV0IyTY?t=59) 2. Remotion 的 Claude Code Skill 具体起什么作用,机制是什么? **答案**:它是一包按需加载的上下文——主 md 文件描述有哪些子文件,agent 只在提示词相关(如"3D")时才把对应片段拉进 context,保持上下文干净。见详解3。[06:46](https://youtu.be/y-pxNV0IyTY?t=406) 3. 把视频生成流程放到 VPS 上,相比本地有哪些收益? **答案**:释放本机资源(合上笔记本不影响渲染)、可能有更强 CPU/RAM 让出片更快、可当渲染农场并行出片、也方便他人访问。见详解7。[03:17](https://youtu.be/y-pxNV0IyTY?t=197) 4. 想给生成的视频加语音配音,该怎么做? **答案**:把 TTS 服务(如 11 Labs)接为 MCP server,先让 agent 生成脚本文本、再交音频服务合成语音,最后由 Claude Code 把音轨加进视频。见详解6。[15:19](https://youtu.be/y-pxNV0IyTY?t=919) 5. 初版视频不满意时正确的打磨方式是什么? **答案**:继续对 agent 提示(放大、改强调色、加 3D、加代码块场景),它改底层 React/CSS,studio 靠 hot reload 即时预览,而非手动拖时间轴。见详解5。[10:40](https://youtu.be/y-pxNV0IyTY?t=640) > [!quote] 💬 热门评论 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