[{"data":1,"prerenderedAt":20},["ShallowReactive",2],{"$fmFmPsPtdYTsPOkrOfMUaedZprL5KpXEdpp5MQAMgj4M":3},{"id":4,"documentId":5,"title":6,"summary":7,"content":8,"author":9,"category":10,"tags":11,"icon":12,"views":13,"isTop":14,"isNew":14,"publishDate":15,"createdAt":16,"updatedAt":17,"publishedAt":18,"slug":19},185,"hpkp171rtmv228vr4uw5zcqg","Remotion + AI：免费开源的视频生成神器，告别月费订阅","本文介绍如何用 Claude Skills 写代码，配合 Remotion 开源框架本地免费渲染视频，替代按月订阅的AI视频工具。","\u003Cp>\u003Cblockquote>\u003C/p>\u003Cp>\u003Cp>这些都是我用一句话生成的视频，渲染不需要额外的云服务费，最关键的是\u003Cstrong>本地免费渲染\u003C/strong>，成本可控！\u003C/p>\u003C/p>\u003Cp>\u003C/blockquote>\u003C/p>\u003Cp>\u003Cp>\u003Cimg src=\"https://www.aigongsheng.com/uploads/2026_01_30_21_21_59_61b385a322.png\" alt=\"\">\u003C/p>\u003C/p>\u003Cp>\u003Chr>\u003C/p>\u003Cp>\u003Ch2>前言：为什么选择这个组合？\u003C/h2>\u003C/p>\u003Cp>\u003Cp>市面上很多AI视频工具都要按月订阅，而 \u003Cstrong>Remotion 是开源免费的\u003C/strong>，而且可以保存为标准的 MP4 格式，直接发布到任何平台。\u003C/p>\u003C/p>\u003Cp>\u003Cp>之前试过很多AI视频工具，直到发现了这个组合：\u003C/p>\u003C/p>\u003Cp>\u003Cp>\u003Cstrong>Claude Skills + Remotion\u003C/strong>\u003C/p>\u003C/p>\u003Cp>\u003Cul>\u003C/p>\u003Cp>\u003Cli>\u003Cstrong>Claude Skills\u003C/strong>：AI代码助手，帮你写代码\u003C/li>\u003C/p>\u003Cp>\u003Cli>\u003Cstrong>Remotion\u003C/strong>：用 React 写视频的框架\u003C/li>\u003C/p>\u003Cp>\u003C/ul>\u003C/p>\u003Cp>\u003Cp>你只需要用代码描述视频，剩下的事交给程序。AI辅助写代码 + 本地免费渲染，这就是整套流程！\u003C/p>\u003C/p>\u003Cp>\u003Ch2>\u003Cimg src=\"https://www.aigongsheng.com/uploads/frame_012_dee8af909c.jpg\" alt=\"\">\u003C/h2>\u003C/p>\u003Cp>\u003Ch2>什么是 Remotion？\u003C/h2>\u003C/p>\u003Cp>\u003Cp>Remotion 是一个用 React 编写视频的开源框架。简单来说：\u003C/p>\u003C/p>\u003Cp>\u003Cul>\u003C/p>\u003Cp>\u003Cli>你用代码描述视频内容\u003C/li>\u003C/p>\u003Cp>\u003Cli>框架自动渲染成 MP4 视频\u003C/li>\u003C/p>\u003Cp>\u003Cli>完全免费，本地运行\u003C/li>\u003C/p>\u003Cp>\u003Cli>支持所有网页动画效果\u003C/li>\u003C/p>\u003Cp>\u003C/ul>\u003C/p>\u003Cp>\u003Cp>\u003Cimg src=\"https://www.aigongsheng.com/uploads/frame_015_03a1cde34a.jpg\" alt=\"\">\u003C/p>\u003C/p>\u003Cp>\u003Chr>\u003C/p>\u003Cp>\u003Ch2>第一步：安装 Remotion\u003C/h2>\u003C/p>\u003Cp>\u003Cp>我们先用 Remotion 的脚手架起一个新项目：\u003C/p>\u003C/p>\u003Cp>\u003Cpre>\u003Ccode class=\"language-bash\">npx create-video@latest\u003C/p>\u003Cp>\u003C/code>\u003C/pre>\u003C/p>\u003Cp>\u003Cp>运行后会问你几个问题：\u003C/p>\u003C/p>\u003Cp>\u003Col>\u003C/p>\u003Cp>\u003Cli>\u003Cstrong>选择模板\u003C/strong>：推荐选 “Hello World” 模板\u003C/li>\u003C/p>\u003Cp>\u003Cli>\u003Cstrong>是否安装样式插件\u003C/strong>：选 Yes\u003C/li>\u003C/p>\u003Cp>\u003Cli>\u003Cstrong>是否安装 Remotion Skills\u003C/strong>：\u003Cstrong>选 Yes\u003C/strong>（这是关键！）\u003C/li>\u003C/p>\u003Cp>\u003C/ol>\u003C/p>\u003Cp>\u003Cp>\u003Cimg src=\"https://www.aigongsheng.com/uploads/2026_01_30_21_10_04_dd42e37f13.png\" alt=\"\">\u003C/p>\u003C/p>\u003Cp>\u003Cp>Remotion Skills 是官方提供的 AI 助手插件，装完后你会看到一系列 \u003Ccode>.md\u003C/code> 文件，这些其实是官方最佳实践清单，包括：\u003C/p>\u003C/p>\u003Cp>\u003Cul>\u003C/p>\u003Cp>\u003Cli>结构怎么组织\u003C/li>\u003C/p>\u003Cp>\u003Cli>动画怎么写\u003C/li>\u003C/p>\u003Cp>\u003Cli>哪些坑要避开\u003C/li>\u003C/p>\u003Cp>\u003C/ul>\u003C/p>\u003Cp>\u003Cp>相当于给 AI 配了一本 Remotion 规范手册！\u003C/p>\u003C/p>\u003Cp>\u003Cp>\u003Cimg src=\"https://www.aigongsheng.com/uploads/frame_026_8124b001d9.jpg\" alt=\"\">\u003C/p>\u003C/p>\u003Cp>\u003Ch2>\u003Cimg src=\"https://www.aigongsheng.com/uploads/frame_029_ea8937e415.jpg\" alt=\"\">\u003C/h2>\u003C/p>\u003Cp>\u003Ch2>第二步：启动开发环境\u003C/h2>\u003C/p>\u003Cp>\u003Cp>装完依赖后，运行：\u003C/p>\u003C/p>\u003Cp>\u003Cpre>\u003Ccode class=\"language-bash\">npm run dev\u003C/p>\u003Cp>\u003C/code>\u003C/pre>\u003C/p>\u003Cp>\u003Cp>启动后会自动打开 Remotion Studio 页面，界面分为几个区域：\u003C/p>\u003C/p>\u003Cp>\u003Cul>\u003C/p>\u003Cp>\u003Cli>\u003Cstrong>左侧\u003C/strong>：Compositions 组件列表\u003C/li>\u003C/p>\u003Cp>\u003Cli>\u003Cstrong>中间\u003C/strong>：实时预览区域\u003C/li>\u003C/p>\u003Cp>\u003Cli>\u003Cstrong>底部\u003C/strong>：时间轴\u003C/li>\u003C/p>\u003Cp>\u003Cli>\u003Cstrong>右下角\u003C/strong>：一键导出按钮\u003C/li>\u003C/p>\u003Cp>\u003C/ul>\u003C/p>\u003Cp>\u003Cp>\u003Cimg src=\"https://www.aigongsheng.com/uploads/frame_039_5712836af2.jpg\" alt=\"\">\u003C/p>\u003Cp>左边列出的每个项目（HelloWorld、OnlyLogo等）都是一个 React 组件，这就是 Remotion 的核心思想——\u003Cstrong>用代码写视频\u003C/strong>。\u003C/p>\u003C/p>\u003Cp>\u003Chr>\u003C/p>\u003Cp>\u003Ch2>第三步：用 AI 生成视频组件\u003C/h2>\u003C/p>\u003Cp>\u003Cp>接下来打开 Claude Code 工具，输入这段提示词：\u003C/p>\u003C/p>\u003Cp>\u003Cpre>\u003Ccode>  做一个新年倒计时视频，300帧（10秒）：\u003C/p>\u003Cp>  - 倒计时数字从 10 开始倒数\u003C/p>\u003Cp>  - 每个数字有缩放弹跳效果\u003C/p>\u003Cp>  - 背景是五彩纸屑飘落动画\u003C/p>\u003Cp>  - 到 0 时，显示"2026 新年快乐！"大字，烟花效果\u003C/p>\u003Cp>\u003C/code>\u003C/pre>\u003C/p>\u003Cp>\u003Cp>你会发现 AI 正在快速生成代码，整个过程大部分时间在写代码，少量消耗 Token。\u003C/p>\u003C/p>\u003Cp>\u003Cp>\u003Cimg src=\"https://www.aigongsheng.com/uploads/frame_052_38d79e8f55.jpg\" alt=\"\">\u003C/p>\u003C/p>\u003Cp>\u003Chr>\u003C/p>\u003Cp>\u003Ch2>第四步：查看效果并调整\u003C/h2>\u003C/p>\u003Cp>\u003Cp>生成完成后，回到 Remotion Studio，左侧会新增一个组件 \u003Ccode>NewYearCountdown\u003C/code>，点击后可以看到视频动画已经开始了！\u003C/p>\u003C/p>\u003Cp>\u003Cp>这是一个倒计时的新年快乐界面，数字从10倒数到1，周围有彩色粒子飞舞效果,最后显示‘新年快乐’。\u003C/p>\u003C/p>\u003Cp>\u003Cp>\u003Cimg src=\"https://www.aigongsheng.com/uploads/frame_060_ad42ec25a2.jpg\" alt=\"\">\u003C/p>\u003Cp>\u003Cimg src=\"https://www.aigongsheng.com/uploads/2026_01_30_21_19_32_ea5627c499.png\" alt=\"\">\u003C/p>\u003Cp>右侧的 Props 面板可以实时调整参数：\u003C/p>\u003C/p>\u003Cp>\u003Cul>\u003C/p>\u003Cp>\u003Cli>\u003Ccode>primaryColor\u003C/code>：主色调（控制数字颜色）\u003C/li>\u003C/p>\u003Cp>\u003Cli>\u003Ccode>secondaryColor\u003C/code>：辅色调（控制粒子颜色）\u003C/li>\u003C/p>\u003Cp>\u003Cli>\u003Ccode>bgColor\u003C/code>：背景颜色\u003C/li>\u003C/p>\u003Cp>\u003C/ul>\u003C/p>\u003Cp>\u003Cp>修改颜色值后，预览会实时更新，非常方便！\u003C/p>\u003C/p>\u003Cp>\u003Chr>\u003C/p>\u003Cp>\u003Ch2>第五步：导出视频\u003C/h2>\u003C/p>\u003Cp>\u003Cp>效果满意后，点击右下角的 \u003Cstrong>Render\u003C/strong> 按钮，可以一键导出 MP4 格式的视频。\u003C/p>\u003C/p>\u003Cp>\u003Cp>\u003Cimg src=\"https://www.aigongsheng.com/uploads/frame_064_0984cdcbc0.jpg\" alt=\"\">\u003C/p>\u003Cp>\u003Cimg src=\"https://www.aigongsheng.com/uploads/frame_067_cc4dd200ba.jpg\" alt=\"\">\u003C/p>\u003C/p>\u003Cp>\u003Cp>整个生成视频的过程，其实只是一段提示词就完成了。\u003C/p>\u003C/p>\u003Cp>\u003Chr>\u003C/p>\u003Cp>\u003Ch2>总结\u003C/h2>\u003C/p>\u003Cp>\u003Cp>\u003Cstrong>Remotion + Claude Skills 的核心优势：\u003C/strong>\u003C/p>\u003C/p>\u003Cp>\u003Ctable>\u003C/p>\u003Cp>\u003Cthead>\u003C/p>\u003Cp>\u003Ctr>\u003C/p>\u003Cp>\u003Cth>优势\u003C/th>\u003C/p>\u003Cp>\u003Cth>说明\u003C/th>\u003C/p>\u003Cp>\u003C/tr>\u003C/p>\u003Cp>\u003C/thead>\u003C/p>\u003Cp>\u003Ctbody>\u003C/p>\u003Cp>\u003Ctr>\u003C/p>\u003Cp>\u003Ctd>🆓 \u003Cstrong>免费开源\u003C/strong>\u003C/td>\u003C/p>\u003Cp>\u003Ctd>无需月费订阅，代码完全可控\u003C/td>\u003C/p>\u003Cp>\u003C/tr>\u003C/p>\u003Cp>\u003Ctr>\u003C/p>\u003Cp>\u003Ctd>💻 \u003Cstrong>代码生成视频\u003C/strong>\u003C/td>\u003C/p>\u003Cp>\u003Ctd>所有网页动画都能实现\u003C/td>\u003C/p>\u003Cp>\u003C/tr>\u003C/p>\u003Cp>\u003Ctr>\u003C/p>\u003Cp>\u003Ctd>🎬 \u003Cstrong>本地渲染\u003C/strong>\u003C/td>\u003C/p>\u003Cp>\u003Ctd>零成本，无限次导出\u003C/td>\u003C/p>\u003Cp>\u003C/tr>\u003C/p>\u003Cp>\u003Ctr>\u003C/p>\u003Cp>\u003Ctd>🤖 \u003Cstrong>AI 辅助\u003C/strong>\u003C/td>\u003C/p>\u003Cp>\u003Ctd>用自然语言描述，AI 帮你写代码\u003C/td>\u003C/p>\u003Cp>\u003C/tr>\u003C/p>\u003Cp>\u003Ctr>\u003C/p>\u003Cp>\u003Ctd>📤 \u003Cstrong>标准格式\u003C/strong>\u003C/td>\u003C/p>\u003Cp>\u003Ctd>导出 MP4，发布到任何平台\u003C/td>\u003C/p>\u003Cp>\u003C/tr>\u003C/p>\u003Cp>\u003C/tbody>\u003C/p>\u003Cp>\u003C/table>\u003C/p>\u003Cp>\u003Chr>\u003C/p>\u003Cp>\u003Ch2>你可以做什么？\u003C/h2>\u003C/p>\u003Cp>\u003Cp>几乎所有网页可以生成的动画，这里都可以实现：\u003C/p>\u003C/p>\u003Cp>\u003Cul>\u003C/p>\u003Cp>\u003Cli>🎊 节日贺卡与倒计时\u003C/li>\u003C/p>\u003Cp>\u003Cli>📊 数据可视化动画\u003C/li>\u003C/p>\u003Cp>\u003Cli>🎬 产品演示视频\u003C/li>\u003C/p>\u003Cp>\u003Cli>📱 社交媒体短视频\u003C/li>\u003C/p>\u003Cp>\u003Cli>🎨 创意动画作品\u003C/li>\u003C/p>\u003Cp>\u003C/ul>\u003C/p>\u003Cp>\u003Chr>\u003C/p>\u003Cp>\u003Cp>感兴趣的话，你也去试试吧！\u003C/p>\u003C/p>\u003Cp>\u003Cp>这里是 \u003Cstrong>AI共生阁\u003C/strong>，我们下期见~\u003C/p>\u003C/p>\u003Cp>\u003Chr>\u003C/p>\u003Cp>\u003Cp>\u003Cstrong>相关资源：\u003C/strong>\u003C/p>\u003C/p>\u003Cp>\u003Cul>\u003C/p>\u003Cp>\u003Cli>Remotion 官网：\u003Ca href=\"https://www.remotion.dev\">https://www.remotion.dev\u003C/a>\u003C/li>\u003C/p>\u003Cp>\u003Cli>Claude Code：\u003Ca href=\"https://claude.ai/code\">https://claude.ai/code\u003C/a>\u003C/li>\u003C/p>\u003Cp>\u003Cli>Remotion Skills 文档：项目安装后自动生成\u003C/li>\u003C/p>\u003Cp>\u003C/ul>\u003C/p>\u003Cp>\u003Cp>\u003Cstrong>关注我，获取更多 AI 效率工具分享！\u003C/strong> 🚀\u003C/p>\u003C/p>\u003Cp>\u003Ch2>常见问题\u003C/h2>\u003Ch3>Q: Remotion 生成视频要花钱吗？\u003C/h3>\u003Cp>A: 不需要，Remotion 是开源框架，渲染在本地进行，不需要额外的云服务费，导出次数没有限制。\u003C/p>\u003Ch3>Q: 用 Remotion 做视频需要自己写代码吗？\u003C/h3>\u003Cp>A: 需要一定的代码基础，但文中用 Claude Skills 辅助——用自然语言描述视频效果（比如\"新年倒计时，300帧，数字缩放弹跳\"），AI 会直接生成对应的 React 组件代码。\u003C/p>\u003C/p>","Up Spark","AI编程",[],"📝",0,false,"2026-01-30","2026-01-30T14:22:25.215Z","2026-07-04T08:06:32.554Z","2026-07-04T08:06:32.571Z","remotion-ai-video",1783157887508]