用 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

前端国际化实现：别再只支持中文了

前端国际化实现：别再只支持中文了

前端国际化实现：别再只支持中文了 毒舌时刻 这代码写得跟网红滤镜似的——仅供参考。 各位前端同行，咱们今天聊聊前端国际化。别告诉我你的应用只支持中文，那感觉就像只卖一种口味的冰淇淋——单调又无趣。 为什么你需要国际化 最近看到一个项目，所有文本都硬编码在代码里，要支持英文时傻眼了，我差点当场去世。我就想问：你是在开发应用还是在开发中文专用软件？ 反面教材 // 反面教材：硬编码文本 function LoginForm() { return ( <form> <h1>登录</h1> <input placeholder="请输入邮箱" /> <input placeholder="请输入密码" type="password"

这才是 AI 编程的正确打开方式，VSCode + Claude Code 让写代码快到飞起！

点击上方卡片关注我 设置星标 学习更多项目 随着 AI 辅助编程工具的兴起，开发体验正被彻底改变，Claude 作为一款强大的大语言模型，不仅能够理解上下文，还能给出贴合需求的代码和优化建议。 把 Claude 无缝接入到 VSCode 这样主流的编辑器中，就等于为开发过程装上了“智能外挂”。本篇文章将带你快速完成 VSCode 与 Claude Code 的配置，让你的开发效率实现质的飞跃。 准备工作 1、安装VSCode 在开始配置之前，需要先把基本的环境准备好。首先要安装好 VSCode（最新版），建议提前更新到最新版本，以避免兼容性问题。 VSCode下载地址：https://code.visualstudio.com/，点击链接下载安装即可。 2、Claude Code账号 准备好一个Claude code的账号，并获取对应的 API Key，这是

基于OpenClaw的AI数字员工协同团队架构设计

随着大型语言模型从被动的文本生成器向具备自主规划与执行能力的智能代理演进，企业级人工智能的应用范式正在发生根本性转变。在这一演进过程中，OpenClaw（前身为Clawdbot及Moltbot）作为一种开源的、本地优先的个人AI智能体网关基础设施，凭借其对持续内存、多通道接入以及沙盒化工具执行的原生支持，迅速成为构建“始终在线”数字劳动力的核心框架 1。然而，将单体个人助理扩展为能够处理复杂业务逻辑、支持跨组织协同并严格保障数据隔离的多智能体（Multi-Agent）团队，绝非简单的API拼接。 系统架构必须超越传统的提示词工程，上升到哲学与系统工程学的高度。具体而言，数字员工的构建必须锚定于本体论（界定智能体所在数字环境的客观边界）与认识论（确立智能体获取与验证知识的实证机制），并通过第一性原理彻底解构复杂任务 4。本研究深入剖析了OpenClaw底层运行机制，提出了一套完整的设计蓝图，详细论述如何通过重构六大核心上下文文件、部署三层协同调用模型，以及实施联邦路由与内存逻辑分区，来打造一个高度安全、逻辑严密且支持跨组织知识共享与数据隔离的数字员工协同网络。 一、 认知架构的哲学