How I Vibe Code Technical Videos With Claude Code and Remotion

章节 1：痛点与方案：用 Claude Code 与 Remotion 重塑视频创作

📝 本节摘要：

本节中，讲者首先指出了传统视频编辑中“时间轴拖动”、“剪辑停顿”等繁琐流程的痛点。随后，他介绍了核心解决方案：结合 Claude Code（AI 编程助手）与 Remotion（React 视频渲染库）。讲者强调，这一组合不仅能发挥 React 生态系统的优势，还能利用 MCP（模型上下文协议）服务器实现自动化工作流，将视频制作转变为“可编程”的工程体验，特别适合制作技术类教程。

[原文] [John Hartquist]: in this video I'm going to show you how I create and edit videos with natural language using Claude Code and Remotion

[译文] [John Hartquist]: 在本视频中，我将展示如何使用 Claude Code 和 Remotion，通过自然语言来创建和编辑视频。

[原文] [John Hartquist]: if you've ever tried creating videos even simple ones you know the pain scrubbing through timeline footage slicing out the awkward pauses gathering all the assets sequencing them in the right place exporting it's tedious timeconuming and it breaks your flow

[译文] [John Hartquist]: 如果你曾尝试制作视频，哪怕是简单的视频，你也会懂那种痛苦：在时间轴素材中来回拖动（scrubbing），剪掉尴尬的停顿，收集所有素材，将它们按顺序放在正确的位置，最后导出。这不仅枯燥耗时，还会打断你的心流。

[原文] [John Hartquist]: as a software engineer I use Cloud Code every day to help me understand code bases track down bugs and vibe code i mean architect new features

[译文] [John Hartquist]: 作为一名软件工程师，我每天都使用 Claude Code（原文为Cloud Code，口误）来帮助我理解代码库、追踪 Bug，以及“凭感觉写代码（vibe code）”——我是说，架构新功能。

[原文] [John Hartquist]: i also use it to automate workflows and quickly spin up prototypes it can be a very powerful tool

[译文] [John Hartquist]: 我也用它来自动化工作流并快速启动原型，它可以成为一个非常强大的工具。

[原文] [John Hartquist]: recently I've been experimenting with Remotion which is a React library for rendering videos programmatically frame by frame

[译文] [John Hartquist]: 最近，我一直在尝试 Remotion，这是一个 React 库，用于以编程方式逐帧渲染视频。

[原文] [John Hartquist]: here's the thing cloud Code is really good at writing React code react is one of the most popular web frameworks today and Claude excels at creating visuals with it

[译文] [John Hartquist]: 关键在于：Claude Code 非常擅长编写 React 代码。React 是当今最流行的 Web 框架之一，而 Claude 擅长利用它来创建视觉效果。

[原文] [John Hartquist]: when you combine Cloud Code with Remotion you can automate the tedious parts of video editing in a similar way to how it's used for general programming

[译文] [John Hartquist]: 当你将 Claude Code 与 Remotion 结合使用时，你可以自动化视频编辑中那些枯燥的部分，就像它在通用编程中的应用一样。

[原文] [John Hartquist]: i'm mainly interested in creating technical videos tutorials demos that sort of thing

[译文] [John Hartquist]: 我主要感兴趣的是制作技术视频、教程、演示之类的内容。

[原文] [John Hartquist]: with Remotion you get all the benefits of the web ecosystem code snippets with syntax highlighting diagrams smooth animations anything you can build with React

[译文] [John Hartquist]: 使用 Remotion，你可以获得 Web 生态系统的所有好处：带有语法高亮的代码片段、图表、流畅的动画，以及任何你能用 React 构建的东西。

[原文] [John Hartquist]: with Cloud Code you also get the full power of MCP servers

[译文] [John Hartquist]: 使用 Claude Code，你还能获得 MCP（模型上下文协议）服务器的全部能力。

[原文] [John Hartquist]: i can tell Claude to use the Playwright MCP to open a browser navigate to a documentation page and take a screenshot then that goes straight into my video

[译文] [John Hartquist]: 我可以告诉 Claude 使用 Playwright MCP 打开浏览器，导航到文档页面并截图，然后该截图直接进入我的视频中。

[原文] [John Hartquist]: with the replicate MCP I can use a library of models to generate audio images B-roll footage or even talking head videos using tools such as Nano Banana VO3 11 Labs etc all without leaving the command line

[译文] [John Hartquist]: 通过 Replicate MCP，我可以使用模型库来生成音频、图像、B-roll（空镜）素材，甚至使用 Nano、Banana、VO3、11 Labs 等工具生成“口播（talking head）”视频，所有这些都无需离开命令行。

[原文] [John Hartquist]: and because it's all code- based I can create reusable templates and tweak them just by telling Claude what I want everything is stored in Git and I can continue using the tools that I already love

[译文] [John Hartquist]: 而且因为这一切都是基于代码的，我可以创建可复用的模板，并只需告诉 Claude 我想要什么即可进行微调。所有内容都存储在 Git 中，我可以继续使用我已经喜欢的工具。

[原文] [John Hartquist]: i've put together a Claude and Remotion starter template that you can use to

[译文] [John Hartquist]: 我整理了一个 Claude 和 Remotion 的入门模板，你可以用来……

收到，根据之前的架构规划，以下是第 2 章的完整双语精读文档。

这一章节涵盖了从环境部署到视频基础骨架搭建的全过程，展示了如何通过简单的自然语言指令，在 Remotion 环境中快速构建出结构化的视频大纲。