Remotion + Claude Code Is AMAZING For Creating Videos (+ VPS, Skills)

章节 1：概念引入：Claude Code 与 Remotion 的自动化视频生成

📝 本节摘要：

本章介绍了如何利用 Claude Code 和 Remotion 实现全自动视频生成。作者演示了仅需提供一个网页链接（如课程页面），AI 即可提取文本、颜色和素材生成推广视频。核心原理解析了 Remotion 如何将 React 组件转化为视频，以及 Claude Code 如何利用 "Skills"（技能上下文文件） 来增强对特定库（如 3D 特效）的编码能力。此外，简要提及了本地运行与云端 VPS 运行的区别。

[原文] [Speaker A]: let's talk about clot code and remotion the video that you see here has been completely generated with clot code and remotion i did not have to edit anything myself manually i could just prompt my way and got a pretty nice looking uh video here in literally a few minutes so I just supplied the link to my course page because let's say I want to create a promo video for a course that I sell and I was able to add images to the video as well it was able to retrieve all the text from the from that page and uh colors as well so it's really nice that you can just supply a link and based on that it can generate a video

[译文] [Speaker A]: 让我们来谈谈 Claude Code 和 Remotion，你在这里看到的视频完全是利用 Claude Code 和 Remotion 生成的，我不需要手动编辑任何东西，只需通过提示词（Prompt）引导，几分钟内就得到了一个相当不错的视频。 所以我只是提供了我的课程页面的链接，因为假设我想为我销售的课程制作一个推广视频，而且我还能向视频中添加图片。 它能够从那个页面提取所有的文本以及颜色，所以这真的很好，你只需提供一个链接，它就能据此生成一个视频。

[原文] [Speaker A]: now there are some other use cases as well like let's say you have an app and you want to create a uh like a promo that shows off a new feature that you have perhaps or you want to create a video for your homepage that shows the app you can just prompt your way there and actually the nice thing is that you can just uh use your existing app components so if you have an app and you have React components you may be able to use those in the video itself because with Remotion the video consists of React components it's just markup it's just code so you can have a div right and a div with a certain background styling that will be rendered here it will be part of the video,

[译文] [Speaker A]: 现在还有一些其他的用例，比如假设你有一个应用程序，你想制作一个推广视频来展示你也许刚推出的新功能，或者你想为主页制作一个展示该应用程序的视频，你都可以通过提示词来实现。 实际上最好的一点是，你可以直接使用你现有的应用程序组件。 所以如果你有一个应用程序，并且你有 React 组件，你也许能够在视频本身中使用它们，因为在 Remotion 中，视频就是由 React 组件组成的，它只是标记语言（markup），只是代码。 所以你可以有一个 div，对吧，一个带有特定背景样式的 div，它会被渲染在这里，它将成为视频的一部分。

[原文] [Speaker A]: so if you already have a component it should be able to use that so your videos can show a really realistic view of your app and then it can animate it and make it look fancy and such and use your existing branding and such now quick uh note here on Remotion what you will get with remote if you create a remotion app is actually this editor UI as well so you have the actual video but also a remote app in which uh you can edit the video and preview it and edit it now for editing typically you'll mostly be using uh cloud code or your AI agents cuz technically it should work with other AI agents as well and you'll mostly be prompting your way there so here we're just using it to preview the video and also we can render it out so ultimately it has to be packaged up into an actual MP4 file so we can actually upload it to social media or a hosting platform so we can then display it on our website let's say right,

[译文] [Speaker A]: 所以如果你已经有了一个组件，它应该能够使用该组件，这样你的视频就能展示出你应用程序非常真实的视图，然后它可以对其进行动画处理，让它看起来很炫酷之类的，并使用你现有的品牌形象等。 现在关于 Remotion 快速补充一点，如果你创建一个 Remotion 应用，你会得到其实还有这个编辑器 UI（用户界面），所以你既拥有实际的视频，也有一个 Remotion 应用，你可以在其中编辑视频、预览并进行修改。 现在对于编辑工作，通常你主要会使用 Claude Code 或者你的 AI 智能体（Agents），因为从技术上讲它应该也适用于其他 AI 智能体，你主要会通过提示词来完成操作。 所以在这里我们只是用它来预览视频，而且我们还可以将其渲染出来，最终它必须被打包成一个实际的 MP4 文件，这样我们才能将其上传到社交媒体或托管平台，以便我们随后可以在我们的网站上展示它，比如说，对吧。

[原文] [Speaker A]: so with Remotion we can create real MP4 videos with React and you can use like CSS animations and transitions to create animations so really awesome project actually i've used them a few years ago in a startup idea I had and at the time it was a bit tricky to use them because it's a little bit complex to use them sometimes so really nice that they are blowing up now because of these AI coding agents they have simplified it a lot you don't need to code yourself anymore you can just prompt the video that you want

[译文] [Speaker A]: 所以利用 Remotion，我们可以用 React 创建真正的 MP4 视频，你可以使用像 CSS 动画和过渡效果来制作动画，这真的是一个很棒的项目。 实际上我几年前在一个创业点子中使用过它们，当时使用起来有点棘手，因为有时用起来有点复杂。 所以很高兴看到它们现在因为这些 AI 编程智能体（AI coding agents）而爆发式增长，它们简化了很多流程，你不再需要自己写代码了，你只需通过提示词描述你想要的视频即可。

[原文] [Speaker A]: now this blew up recently because they have released a so-called clot code skill right so a skill for clot code is basically just it's just a bunch of context essentially so if you are prompting for a 3D effect in your video clot code can use that skill to look up the relevant information about that so it will look at this skill.md file but then this file itself can then reference other files as well so there is another file in as part of that skill that specifically describes how to do 3D things in reotion cl code can do that better so really nice to have seen them blown blown up they've been in the game for quite a few years uh works really well with these uh coding agents,

[译文] [Speaker A]: 最近这之所以火起来，是因为他们发布了一个所谓的 Claude Code Skill（技能），对吧。 对于 Claude Code 来说，一个 Skill 基本上就是一堆上下文（context）。 所以如果你在提示词中要求视频中有 3D 效果，Claude Code 可以使用那个 Skill 来查找相关的资料信息。 它会查看这个 skill.md 文件，但这个文件本身也可以引用其他文件，所以在那个 Skill 中还有另一个文件专门描述如何在 Remotion 中制作 3D 效果，这样 Claude Code 就能做得更好。, 真的很高兴看到他们火起来，他们在这个领域已经好几年了，这与这些编程智能体配合得非常好。

[原文] [Speaker A]: i guess technically it should also work with other coding agents but we'll take a look at cloud code in this video so we can do it locally on our own computer but there are actually also some benefits of doing it in a cloud on a VPS let's say you can then connect with it perhaps through your phone or use a VPS as like a render farm where you're actually rendering out the videos because the rendering can be uh time or resource intensive um and you can actually run clot code on a VPS as well so we'll see how we can combine that on a VPS a bit later in the video as well let's talk about how we can get this running on our own computers first and some of the things that we can do with that,

[译文] [Speaker A]: 我想从技术上讲，它应该也适用于其他编程智能体，但在这个视频中我们将主要关注 Claude Code。 我们可以通过自己的电脑在本地运行，但实际上在云端 VPS 上运行也有一些好处。 比如说，你可以通过手机连接它，或者将 VPS 用作渲染农场（render farm），在那里实际渲染视频，因为渲染过程可能会消耗大量的时间或资源。 而且你实际上也可以在 VPS 上运行 Claude Code，所以我们在视频稍后部分也会看看如何在 VPS 上结合使用它们。 让我们先谈谈如何在自己的电脑上运行它，以及我们可以用它做些什么。,

这是为您整理的第 2 章内容。