用 AI 制作专业科普视频：remotion-video skill 八格实战手册

优质文章学习记录

— 14 min read

场景故事

周二下午三点，产品经理把一份 40 页的技术方案扔给你：

"这个太难懂了，能不能做成一个 5 分钟的讲解视频？下周客户演示用。"

你打开了剪映……又关上了。你没有素材，没有旁白，更没有时间。

然后你打开了 Claude Code，输入了一行话：

"帮我把这份技术方案做成 5 分钟的科普视频，需要配音和字幕。"

90 分钟后，一个带 AI 克隆配音、动态字幕、数据动画的 MP4 文件出现在你的桌面。

这就是 remotion-video skill 能做的事。

本文所有技巧均来自真实项目实战——用这套工具制作的《马斯克硅基帝国》科普视频，已发布在视频号，可扫码或点击预览效果：

🎬 点击观看实际成品视频

用代码制作专业视频：深色工作站、代码编辑器与视频播放窗口并存的开发者场景

图：深夜的工作站，左侧是代码，右侧是渲染中的视频——这就是 remotion-video skill 的工作方式

八格表单

1. 什么时候用？（触发时刻）

当你遇到以下任何一种情况，就该用这套工具：

内容类触发

  • 有一篇文章/报告/方案，想变成"能讲给人听"的视频
  • 需要解释一个抽象概念（算法、架构、商业逻辑）
  • 想做一个 LinkedIn/B 站的知识型短视频

效率类触发

  • 没时间/没预算请配音演员和剪辑师
  • 需要批量生产同一模板的系列视频
  • 视频内容经常更新，想要"改文字就能重新渲染"

质量类触发

  • 对自己做的视频"总感觉差点意思"
  • 想要和 Kurzgesagt / 3Blue1Brown 那种讲解风格靠近

一句话判断：只要你有"内容"但缺"视频执行力"，这套工具就值得用。

2. 做出来是什么？给谁？（目标产出）

产出物清单

文件规格说明
out/video.mp41920×1080，H.264可直接上传的成品视频
public/audio/*.mp332kbps，克隆声音每个场景的配音音频
public/subtitles.srt标准字幕格式自动同步的字幕文件
src/scenes/*.tsxReact 组件可复用、可修改的场景代码

目标受众

  • 内容创作者：做知识科普、行业解读视频
  • 产品/技术人员：做方案讲解、功能演示视频
  • 教育工作者：做课程讲解、概念可视化视频
  • 营销团队：做产品宣传、案例故事视频

不适合的场景：需要真人出镜的 Vlog、需要精细剪辑的综艺片段、时效性极强的新闻速报。

3. 需要准备什么？（输入清单）

必须有

✅ 内容来源（三选一）   - Markdown 文章（.md 文件）   - PDF 文档   - 一段文字描述（200 字以上） ​ ✅ MiniMax 账号   - MINIMAX_API_KEY   - MINIMAX_VOICE_ID（克隆声音 ID）   - 👉 注册地址：https://www.minimax.io   - 费用参考：100 字 ≈ ¥0.01，一个 5 分钟视频约 ¥1-3 ​ ✅ 本地环境   - Node.js 18+（npx remotion 需要）   - Python 3.8+（音频生成脚本）   - ffmpeg（brew install ffmpeg）

推荐有

⭐ 豆包/ARK API Key（AI 生成配图，更好看）   - ARK_API_KEY   - 注册：https://ark.cn-beijing.volces.com ​ ⭐ Pexels API Key（获取免费素材图）   - PEXELS_API_KEY   - 注册：https://www.pexels.com/api

克隆声音怎么录

录制一段 20-30 秒的音频，注意：

  • 安静的环境，无背景噪音
  • 正常语速，口齿清晰
  • 任何内容都行（读一段文章即可）

上传到 MiniMax Audio → 等待 2-3 分钟 → 复制生成的 voice_id。

4. 怎么跟 AI 说？（系统提示词配置）

最简触发（推荐新手）

/remotion-video

Claude 会主动问你：主题、时长、内容来源。你只需要回答就好。

带内容触发（推荐效率党）

帮我把这篇文章做成 5 分钟的科普视频：[粘贴文章内容或文件路径] ​ 要求： - 风格：教育科普（Kurzgesagt 风格） - 时长：5 分钟左右 - 需要配音和字幕

精准控制触发（推荐有经验的用户）

用 remotion-video skill 制作视频，参数如下： ​ 内容：[文件路径 or 文字描述] 时长：90 秒 风格：Educational（教育科普） 场景数量：6 个场景 配音：是（使用我的克隆声音） 字幕：是 配图：豆包 AI 生成概念图 ​ 特别注意： - 每个场景聚焦一个核心概念 - 开场 15 秒内给出核心结论 - 数据用动画图表展示

触发后 AI 会做什么

Claude 收到指令后，会自动走完这个流程：

分析内容 → 拆解场景 → 生成脚本 → TTS 配音 → 检测时长 → 编写 React 组件 → 生成字幕 → 预览确认 → 渲染输出 MP4

你只需要在「预览确认」环节看一眼，给个 OK。

Claude AI 内部执行的9步流水线：从分析内容到输出 MP4 的完整自动化管道

图：触发 skill 后，Claude 内部自动执行的 9 步流水线——你只需要在"预览确认"节点介入一次

5. 具体怎么操作？（步骤拆解）

第一步：环境配置（一次性，5 分钟）

# 设置环境变量（加入 ~/.zshrc） export MINIMAX_API_KEY="your_key" export MINIMAX_VOICE_ID="your_voice_id" export ARK_API_KEY="your_ark_key"  # 可选 ​ # 安装系统依赖 brew install ffmpeg

第二步：触发 Skill（1 分钟）

在 Claude Code 中输入 /remotion-video，或者直接说明需求。

Claude 会询问：

  1. 视频主题/内容来源
  2. 期望时长
  3. 视频风格

第三步：确认脚本（5-10 分钟）

Claude 会生成视频脚本，类似这样：

## 场景1：开场钩子（0-15 秒） [画面] 数据图表动画：从 0 增长到 1.25 万亿美元 [旁白] 2026 年 2 月，一笔史无前例的并购震动了科技界... ​ ## 场景2：背景介绍（15-35 秒） [画面] SpaceX 和 xAI 的 Logo 并排出现，连接线动画 [旁白] SpaceX 和 xAI，一个造火箭，一个造智能...

你需要做的：检查内容准确性，确认场景数量合适，然后说"确认"或提出修改意见。

第四步：等待生成（10-20 分钟）

Claude 自动完成：

  • TTS 配音生成（每个场景独立 MP3）
  • 音频时长检测（ffprobe 精确到毫秒）
  • React 场景组件编写
  • 字幕文件生成

你只需要等待，可以去喝杯咖啡。

第五步：启动预览（可选，5 分钟）

cd ~/remotion-projects/your-video npm run dev # 浏览器打开 http://localhost:3000 # 拖动时间轴预览效果

第六步：渲染输出（10-30 分钟）

npx remotion render MyVideo out/video.mp4

渲染时间取决于视频长度。5 分钟视频大约需要 15-25 分钟渲染。

用户侧的6步操作流程：从环境配置到渲染输出，高亮显示唯一需要人工介入的"确认脚本"节点

图：用户视角的 6 步操作流程——全程只有"确认脚本"这一个人工节点，其余全自动

6. 怎么算做完？（验收标准）

最低合格线（必须达到）

  • out/video.mp4 文件存在，可以正常播放
  • 音频有声音，不是静音
  • 字幕与旁白基本同步（误差 < 0.5 秒）
  • 没有黑屏或白屏超过 2 秒的段落

优秀标准（应该达到）

  • 开场 15 秒内出现核心信息
  • 每个场景只讲一件事，信息不拥挤
  • 画面与旁白内容一致（不打架）
  • 数据有图表动画，不是只说数字
  • 视觉风格统一（颜色、字体一致）

加分项（精品标准）

  • 使用了克隆声音（自然度明显优于预设声音）
  • 图片有 Ken Burns 动效（而非静止图片）
  • 场景过渡有淡入淡出（不生硬切换）
  • 结尾有总结 + 行动号召

快速自查方法：把视频静音看一遍（检查视觉），再只听声音不看画面（检查旁白）。两遍都觉得"讲清楚了"，就算合格。

7. 出错了怎么办？（失败排查）

最常见的 5 个问题

❌ 错误做法 vs ✅ 正确做法对比：红绿分栏展示 Remotion 图片渲染的常见陷阱与修复方案

图：左侧红区是最常踩的坑，右侧绿区是对应的正确写法——渲染黑图问题 90% 源自这里

❌ 问题1：音频生成失败，报错 "invalid api key"

原因：使用了错误的 MiniMax API 域名。

# ❌ 错误（api.minimax.chat 是无效域名） curl https://api.minimax.chat/... ​ # ✅ 正确 # 国际版：api.minimax.io # 国内版：api.minimaxi.com

解决：检查 scripts/generate_audio.py 中的 API URL。

❌ 问题2：视频渲染后图片全是黑色/不显示

原因：使用了 CSS background-image 或 zIndex: -1。

// ❌ 错误：Remotion 渲染时无法等待 CSS 背景图加载 <div style={{ backgroundImage: `url(${src})` }} /> ​ // ❌ 错误：zIndex: -1 会让图片渲染到背景层后面 <AbsoluteFill style={{ zIndex: -1 }}>  <Img src={src} /> </AbsoluteFill> ​ // ✅ 正确：用 Remotion 的 <Img> 组件，不设 zIndex: -1 <AbsoluteFill>  <Img src={src} style={{ width: "100%", height: "100%", objectFit: "cover", opacity: 0.55 }} /> </AbsoluteFill>

❌ 问题3：字幕和音频不同步

原因：audioConfig.ts 中的帧数是手动输入的，与实际音频长度不符。

解决：重新运行时长检测脚本：

python3 scripts/detect_durations.py # 脚本会用 ffprobe 精确检测每个 MP3 的时长 # 并自动更新 src/audioConfig.ts

❌ 问题4：3D 场景渲染出来是空白

原因：使用了 WebGL 但没有指定 OpenGL 引擎。

# ✅ 3D 视频渲染必须加 --gl=angle npx remotion render MyVideo out/video.mp4 --gl=angle

❌ 问题5：渲染速度极慢，一帧要好几秒

可能原因：

  1. 图片文件太大（单张超过 1MB）
  2. 多个 3D 场景同时渲染导致 WebGL 上下文溢出
  3. 每帧都在做重复计算

解决方向：

# 1. 压缩图片到 300KB 以内 python3 -c " from PIL import Image img = Image.open('public/images/bg.jpg') img.thumbnail((1920, 1080), Image.LANCZOS) img.save('public/images/bg.jpg', quality=82) " ​ # 2. 增加并发数（适当加速） npx remotion render MyVideo out/video.mp4 --concurrency=4

遇到问题的通用排查思路

1. 先检查报错信息（终端输出的最后几行） 2. 用 npm run dev 在 Studio 里单独检查出问题的场景 3. 看 public/audio/ 里的 MP3 是否都生成了 4. 检查 src/audioConfig.ts 里的帧数是否合理（和音频时长对应）

8. 以后能自动吗？（升级路径）

当前能力（Level 1）：半自动化

  • 你提供内容 → Claude 一步步执行 → 你确认脚本 → 自动渲染
  • 适合偶尔制作，质量优先

近期可实现（Level 2）：模板化批量生产

如果你经常制作同类视频（比如每周做行业周报视频），可以建立自己的模板库：

# 把成功项目的场景组件保存为模板 cp src/scenes/DataScene.tsx ~/.claude/skills/remotion-video/templates/ ​ # 下次告诉 Claude："用 DataScene 模板，替换数据" # 制作时间从 90 分钟压缩到 30 分钟

中期可实现（Level 3）：脚本驱动全自动

结合 Claude Code hooks，可以实现：

# 监听文件夹，新文章自动触发视频制作 fswatch ~/articles/ | xargs -I{} claude "把{}做成视频"

远期方向（Level 4）：Agent 流水线

内容源（RSS/爬虫）→ 自动提取 → 脚本生成 → TTS 配音 → 视频渲染 → 自动上传 B 站/YouTube → 发布通知

目前这个方向技术上完全可行，只需要：

  1. 一个内容获取脚本（Python）
  2. Claude API 调用（替代手动触发）
  3. 平台上传 API（B 站/YouTube 都有）

预计完整实现需要 2-3 天的工程工作。

自动化升级路径四级架构：从半自动（Level 1）到 Agent 流水线（Level 4）的阶梯式演进图

图：自动化升级路径——当前处于 Level 1，Level 4 的完全 Agent 化在技术上已经可行

Agent 化潜力评估

维度评分说明
输入标准化★★★★☆Markdown/文字输入格式固定，易于自动化
执行可预测★★★★☆7 步流程清晰，失败点已知且可处理
输出可验证★★★☆☆MP4 存在可验证，内容质量需人工判断
错误可恢复★★★★☆断点续作设计，单步失败不影响其他步骤
成本可控★★★★★5 分钟视频总成本 < ¥5（TTS + 图片生成）
综合 Agent 化潜力★★★★☆适合作为 Content Pipeline 的核心节点

结论：当前 70% 的工作已经自动化，剩余 30% 是"脚本确认"这类需要人工判断的环节。如果对质量要求不那么苛刻，完全可以直接去掉这个人工环节，实现全自动。

💡 高手心法

心法一：音频是灵魂，不要省这一步

很多人嫌配置克隆声音麻烦，直接用预设声音。结果视频做出来总感觉是"机器人在讲"。20 分钟配置克隆声音，能让所有后续视频都更专业。这个投入比值非常高。

心法二：脚本比代码更重要

90% 的视频质量差距来自脚本，不是动画。好的脚本特征：

  • 开场 5 秒给出结论（不是铺垫）
  • 每句话 ≤ 25 个字（TTS 断句自然）
  • 用具体数字代替抽象描述

花在脚本上的时间，比花在调代码动画上更值。

心法三：先跑通，再打磨

第一次做视频，不要追求完美。先用最简单的方式跑通全流程（哪怕动画很简陋），确认音画同步、字幕正常之后，再逐步优化每个场景的视觉效果。

很多人在第一个场景上卡太久，结果整个视频没做完。

心法四：图片问题用"侧边面板"逃课

图片背景透明度、遮罩层次总是调不好？有个简单方法：把图片放在画面左侧 40%，文字内容放在右侧 60%。图片 90% 不透明，内容 100% 可见，两者互不干扰。这个布局在大多数情况下比"透明背景"更好看。

心法五：渲染是最后一步，不是验证步骤

不要每改一点代码就跑一次渲染（每次 20 分钟）。正确流程：

改代码 → npm run dev → Studio 里逐帧检查 → 满意了 → 一次渲染

Studio 预览和最终渲染效果 99% 一致。养成"Studio 先确认"的习惯，能节省大量时间。

心法六：保存提示词，建立自己的素材库

每次生成效果好的 AI 图片，把提示词保存下来。建立自己的"提示词库"：

~/prompts/ ├── tech-background.txt     # 深蓝科技感背景 ├── data-visualization.txt # 数据可视化风格 └── minimalist-concept.txt # 极简概念图

下次做视频直接复用，图片质量和风格一致性会大幅提升。

remotion-video skill 见知识星球 [AI创世记 ]

Read more

小白入门：前端前端调用 AI 接口全流程（附具体案例）

很多前端新手在调用 AI 接口时会犯怵：不知道 “怎么怎么传参数？”“流式响应怎么处理？”“不同功能（润色 / 扩写）调用方式不一样吗？” 其实很简单！本文以 “智能文本处理工具” 为例，手把手教你从 0 到 1 调用 AI 接口，包含润色、扩写等功能，看完就能上手。 准备工作：先看懂这 3 个核心文件 在开始前，我们需要明确项目中 3 个关键文件的作用（这些文件你可能已经有了，只是不知道怎么用）： * vite.config.js：配置后端接口代理，解决跨域问题 * apiClient.js：封装好的 HTTP 请求工具，帮你发请求 * aiService.js：封装好的 AI 功能函数（
前端响应式布局实现方案

前端响应式布局实现方案

一、 什么是响应式布局 响应式布局是一种面向多终端的网页设计与实现方法，其核心目标是使网页能够根据访问设备的屏幕物理尺寸、分辨率、屏幕方向及视口宽度等关键参数，自动调整页面的布局结构、元素尺寸、内容排版及交互组件的展示形态。 该方法通过统一的代码基座，确保网页在桌面端、平板端、移动端等不同终端上均能提供一致性、可用性与适配性俱佳的用户体验，无需为各终端单独设计和维护独立的网页版本，从而降低开发与迭代成本，提升跨终端访问的兼容性与稳定性。 二、 响应式布局的核心特点 1. 多终端自适应 基于设备的屏幕尺寸、分辨率、方向等参数自动调整页面结构与样式，无需为不同终端开发独立版本，实现一套代码适配全场景。 2. 弹性化元素设计 页面元素采用相对单位（如百分比、rem、vw/vh）替代固定像素值，可随容器或视口大小按比例缩放，保证在不同尺寸屏幕下的显示协调性。 3. 断点式样式切换 通过 CSS 媒体查询技术设定关键断点，在不同断点区间加载对应的样式规则，使页面布局在特定屏幕尺寸下发生合理变化，匹配设备的交互习惯。 4. 内容优先级适配 根据终端屏幕大小智能调整内容的展

Webots R2023b 完整安装配置教程

Webots R2023b 完整安装配置教程 声明：本教程由豆包、ChatGPT等AI工具协助完成。 本教程讲解如何安装 Python3、包管理器 Micromamba、必要依赖包（如 opencv-python），以及 Webots 仿真软件，并完成 Micromamba Python 环境与 MATLAB 地址的配置，适用于 Windows、macOS 双系统。 一、前置说明 1. 适用场景：需要使用 Webots 进行仿真开发，同时依赖 Python 进行脚本编写、OpenCV 进行图像处理，通过 Micromamba 管理 Python 环境，并关联 MATLAB 路径用于联合开发。 2. 版本约定（兼容性最优）： * Python：
【前端实战】构建 Vue 全局错误处理体系，实现业务与错误的清晰解耦

【前端实战】构建 Vue 全局错误处理体系，实现业务与错误的清晰解耦

目录 【前端实战】构建 Vue 全局错误处理体系，实现业务与错误的清晰解耦 一、为什么要做全局错误处理？ 1、将业务逻辑与错误处理解耦 2、为监控和埋点提供统一入口 二、Vue 中的基础全局错误处理方式 1、Vue 中全局错误处理写法 2、它会捕获哪些错误？ 3、它不会捕获哪些错误？ 4、errorHandler 的参数含义 三、全局错误处理的进阶设计 1、定义“可识别的业务错误” 2、在 errorHandler 中做真正的“分类处理” 3、补齐 Promise reject 的捕获能力 4、错误处理的策略化封装 四、结语         作者：watermelo37         ZEEKLOG优质创作者、华为云云享专家、阿里云专家博主、腾讯云“