章节 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 环境中快速构建出结构化的视频大纲。

章节 2：环境搭建与基础架构

📝 本节摘要：

这一部分进入实操演示。讲者展示了如何从 GitHub 下载模板并启动开发环境（Dev Server）。他在 Remotion Studio 中预览项目，并构建了视频的基础骨架：创建一个包含三个步骤（图表、代码、AI）的“Step Component”（步骤组件），为后续的内容填充搭建好逻辑结构。

[原文] [John Hartquist]: make your own videos the link is in the description

[译文] [John Hartquist]: ……制作你自己的视频，链接在描述中。

[原文] [John Hartquist]: after downloading the code from GitHub and installing the dependencies we can run Cloud straight away run the dev server in the background this pulls up the Remotion Studio where you can preview while editing the video

[译文] [John Hartquist]: 从 GitHub 下载代码并安装依赖项后，我们可以直接运行 Claude。在后台运行开发服务器（dev server），这会启动 Remotion Studio，让你可以在编辑视频时进行预览。

[原文] [John Hartquist]: there's a few examples included for reference so we can see this one has a title segment and then a content segment and then there's also some pre-built components with some previews for example title slide with a fade in content slide

[译文] [John Hartquist]: 里面包含了一些供参考的示例，我们可以看到这个示例有一个标题片段，然后是一个内容片段，还有一些带有预览的预构建组件，例如带有淡入效果的标题幻灯片、内容幻灯片。

[原文] [John Hartquist]: let's add a title slide that says how to explain things to programmers

[译文] [John Hartquist]: 让我们添加一个标题幻灯片，内容写着“如何向程序员解释事情”。

[原文] [John Hartquist]: let's create a new step component on each step we'll have the text in the top left say step one and then some supporting text

[译文] [John Hartquist]: 让我们创建一个新的步骤组件（step component）。在每个步骤中，我们将左上角显示文本“第一步（step one）”，然后是一些辅助文本。

[原文] [John Hartquist]: we'll have three steps step one add some diagrams step two show some code step three sprinkle in some AI

[译文] [John Hartquist]: 我们将设立三个步骤：第一步，添加一些图表；第二步，展示一些代码；第三步，撒入一些 AI 元素。

收到。根据之前的架构规划，这里是第 3 章的详细双语内容。

本章节展示了 Claude Code 最强大的功能之一：通过 MCP（模型上下文协议）调用外部 API 来生成富媒体内容，并利用自然语言指令对视频进行全局视觉风格的调整（如字体、配色和背景）。

章节 3：内容生成与视觉风格：利用 MCP 扩展能力

📝 本节摘要：

本节重点展示了 Claude 如何调用外部 API（如 Replicate）生成富媒体内容。讲者依次添加了 Mermaid 流程图、代码片段动画，并生成了一段“高级 AI”视频素材。随后，他通过自然语言指令调整了全局视觉风格，包括修改字体为等宽字体、应用 Gruvbox 配色方案，并生成了具有技术感的背景图片。

[原文] [John Hartquist]: for step one let's add a fancy mermaid diagram

[译文] [John Hartquist]: 对于第一步，让我们添加一个精美的 Mermaid 图表。

[原文] [John Hartquist]: for step two let's add a code snippet from this repository and have it animate over time

[译文] [John Hartquist]: 对于第二步，让我们从这个代码库中添加一个代码片段，并让它随时间产生动画效果。

[原文] [John Hartquist]: for step three let's generate a video generate a 6second clip of the most advanced AI imaginable

[译文] [John Hartquist]: 对于第三步，让我们生成一个视频。生成一个 6 秒钟的片段，展示能想象到的最先进的 AI。

[原文] [John Hartquist]: for this step Claude is going to use our generate video command which calls the replicate API and we'll generate a video using VO3.1 fast by default

[译文] [John Hartquist]: 在这一步，Claude 将使用我们的生成视频命令，该命令调用 Replicate API，我们将默认使用 VO3.1 Fast 模型生成视频。

[原文] [John Hartquist]: we can look in our assets folder here once the video is ready it'll show up and we can preview it okay let's preview that video cool and back to our composition it looks a little small let's make the video a little bit bigger

[译文] [John Hartquist]: 我们可以查看这里的 assets（资产）文件夹。视频准备好后会出现在这里，我们可以预览它。好的，预览一下那个视频。酷。回到我们的合成（composition）中，它看起来有点小，让我们把视频放大一点。

[原文] [John Hartquist]: let's add one more slide to the end that just says "Thanks for watching

[译文] [John Hartquist]: 让我们在最后再添加一张幻灯片，上面只写“谢谢观看”。

[原文] [John Hartquist]: let's update the font to be monospace and update the color scheme to be groove box make sure the text is centered on the first title slide maybe make the font slightly smaller

[译文] [John Hartquist]: 让我们把字体更新为等宽字体（monospace），并将配色方案更新为 Gruvbox 风格。确保标题幻灯片上的文本居中，也许把字体稍微调小一点。

[原文] [John Hartquist]: let's generate a better background image it should still follow the groove box color scheme and look technical but clean and modern and use it for the background for all of the slides

[译文] [John Hartquist]: 让我们生成一张更好的背景图片。它应该依然遵循 Gruvbox 配色方案，看起来有技术感但又干净现代，并将其用作所有幻灯片的背景。

[原文] [John Hartquist]: again Claude is using the replicate API to generate images using the new Nano Banana Pro and it'll place them images in the assets folder that we can preview over here

[译文] [John Hartquist]: Claude 再次使用 Replicate API 来生成图像，这次使用的是新的 Nano Banana Pro 模型。它会将图像放置在 assets 文件夹中，我们可以去那边预览。

[原文] [John Hartquist]: let's actually darken the background image it's a little too bright for my taste

[译文] [John Hartquist]: 实际上让我们把背景图片调暗一点，对我来说它有点太亮了。

收到。根据之前的架构规划，这里是第 4 章的详细双语内容。

本章节聚焦于视频制作中的音频工程环节。讲者展示了如何利用 AI 编写脚本、生成配音，并利用技术手段解决视频制作中最棘手的“音画同步”问题。

章节 4：音频工程：脚本、配音与自动对齐

📝 本节摘要：

视觉内容完成后，讲者转向音频制作。他首先让 Claude 根据幻灯片内容撰写了一份带有幽默感的解说脚本，然后利用 ElevenLabs 生成高质量的 AI 语音（Voiceover）。为了实现音画同步，他使用 /transcribe 命令调用 Deepgram API 生成单词级的时间戳（Word-level timestamps），并以此自动调整转场时长，确保画面动画与语音解说完美卡点，最后点击渲染即可完成制作。

[原文] [John Hartquist]: now let's create a voice over for the video first let's come up with a draft script

[译文] [John Hartquist]: 现在让我们为视频制作旁白。首先，我们来草拟一份脚本。

[原文] [John Hartquist]: each slide should say step one then the text like add some diagrams and then make some kind of comment relative to the slide let's try to make it a little funnier

[译文] [John Hartquist]: 每张幻灯片应该先说“第一步”，然后是文本内容，比如“添加一些图表”，接着针对该幻灯片做一些评论。让我们试着让它更有趣一点。

[原文] [John Hartquist]: that looks great now let's generate the voice over using 11 Labs so now we can preview those audio files in our assets folder see what it sounds like

[译文] [John Hartquist]: 看起来不错。现在让我们使用 11 Labs 生成旁白。现在我们可以在 assets 文件夹中预览这些音频文件，听听效果如何。

[原文] [John Hartquist]: how to explain things to programmers spoiler it's not with words okay and it's already added the audio to our slides

[译文] [John Hartquist]: （预览音频内容）“如何向程序员解释事情，剧透一下：不是用语言。” 好的，它已经把音频添加到我们的幻灯片中了。

[原文] [John Hartquist]: however we need to update the durations and timings for everything to line up nicely

[译文] [John Hartquist]: 然而，我们需要更新持续时间和时间点，以便所有内容能完美对齐。

[原文] [John Hartquist]: run the /transcribe command on each clip to generate word level timestamps

[译文] [John Hartquist]: 对每个片段运行 /transcribe（转录）命令，以生成单词级的时间戳。

[原文] [John Hartquist]: next update the transition durations for each animation so that the different text fades in at the correct time

[译文] [John Hartquist]: 接下来，更新每个动画的过渡时长，以便不同的文本在正确的时间淡入。

[原文] [John Hartquist]: this command uses the deepgram API to generate word level timestamps then once you're done you just click render and

[译文] [John Hartquist]: 这个命令使用 Deepgram API 来生成单词级的时间戳。一旦完成，你只需点击渲染，然后……

收到。根据之前的架构规划，这里是第 5 章（也是最后一章）的详细双语内容。

本章节展示了经过前面所有步骤（代码构建、视觉调整、音频生成、自动对齐）后渲染出的完整视频成果，并由讲者总结了这套“代码化视频创作”工作流的核心价值——即通过消除繁琐的技术摩擦，让创作者回归内容本身。

章节 5：成果展示与核心理念

📝 本节摘要：

在最后一节，讲者展示了渲染完成的完整视频，内容幽默且技术感十足。在结尾部分，他总结了这一工作流的核心价值：不是为了单纯生成 AI 内容，而是为了消除创作过程中的摩擦（Friction），让创作者能专注于内容表达本身。

[原文] [John Hartquist]: here's the final video in all its glory

[译文] [John Hartquist]: 这就是最终视频的完整呈现。

[原文] [John Hartquist]: how to explain things to programmers spoiler it's not with words

[译文] [John Hartquist]: （视频内容）“如何向程序员解释事情，剧透一下：不是用语言。”

[原文] [John Hartquist]: step one add some diagrams programmers are visual creatures we can't read documentation but we'll stare at a flowchart for hours

[译文] [John Hartquist]: （视频内容）“第一步，添加一些图表。程序员是视觉动物，我们看不进文档，但我们会盯着流程图看上几个小时。”

[原文] [John Hartquist]: step two show some code forget paragraphs just throw in a code snippet and watch their eyes light up like it's Christmas morning

[译文] [John Hartquist]: （视频内容）“第二步，展示一些代码。忘掉段落大意吧，直接扔一段代码片段，看着他们的眼睛像圣诞节早晨一样亮起来。”

[原文] [John Hartquist]: step three sprinkle in some AI because nothing says I'm a serious professional like generating a video of a glowing robot brain

[译文] [John Hartquist]: （视频内容）“第三步，撒入一些 AI 元素。因为没有什么比生成一个发光的机器人大脑视频更能说明‘我是个严肃的专业人士’了。”

[原文] [John Hartquist]: thanks for watching now go explain something to a programmer good luck

[译文] [John Hartquist]: （视频内容）“谢谢观看。现在去向程序员解释点什么吧，祝你好运。”

[原文] [John Hartquist]: so that's the workflow i'm curious what kind of videos would you make with something like this

[译文] [John Hartquist]: 这就是整个工作流。我很好奇，你会用这样的东西制作什么样的视频？

[原文] [John Hartquist]: if you'd like a deeper tutorial let me know in the comments for me this isn't about AI generated content it's about removing friction so you can focus on what you actually want to say

[译文] [John Hartquist]: 如果你想要更深入的教程，请在评论中告诉我。对我来说，这不仅关乎 AI 生成内容，更关乎消除摩擦，让你能专注于你真正想表达的内容。