菜单
CodeMotion - AI驱动的科普视频与演示创作工作流。 使用场景： - 创建科普动画视频（数学/物理/AI/数据可视化） - 生成技术教程讲解视频 - 制作演示文稿（PPT转网页/从零创建） - 为B站/抖音/YouTube制作视频内容 - 添加AI配音和字幕同步 触发词： - "做一个视频"、"创建科普视频"、"Remotion" - "创建演示文稿"、"PPT转网页"、"做slides" - "/codemotion"
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
HTML 演示文稿生成 Skill。基于 frontend-slides 扩展。 触发词： - "演示文稿"、"PPT" - "幻灯片"、"slides" - "做 PPT"、"转网页" - "/presentation" 使用场景： - PPT 转网页 - 从零创建演示文稿 - 技术分享演示 - 教学课件
完整的科普动画视频生成 Skill。整合 script-to-scene + tts-universal + remotion-pro。 触发词： - "科普视频"、"科普动画" - "制作视频"、"创建动画" - "3Blue1Brown 风格" - "/science-animation" 使用场景： - 数学/物理概念讲解 - AI/机器学习可视化 - 数据结构与算法动画 - 技术教程视频
根据场景配置生成 Remotion React 组件代码。 触发词： - "生成 Remotion 代码" - "生成场景组件" - "创建视频代码" 使用场景： - 科普动画视频生成 - 技术教程视频制作 - 数据可视化视频
将自然语言脚本拆分为结构化场景配置。 触发词： - "拆分场景"、"场景配置" - "分镜"、"场景规划" - "脚本转场景" 使用场景： - 科普视频脚本拆解 - 教程视频分镜 - 长文本自动分段
统一 TTS 适配层，支持 6+ TTS 服务商（MiniMax、ElevenLabs、火山引擎、Edge TTS、阿里 Qwen3、腾讯混元）。 提供统一接口，自动处理时间戳格式转换。 触发词： - "TTS"、"文字转语音"、"语音合成" - "MiniMax TTS"、"Edge TTS"、"火山引擎" - 选择 TTS 服务商时 使用场景： - 科普视频配音 - 教程讲解配音 - 多语言语音生成
同一内容自动适配不同平台比例。 触发词： - "多平台适配" - "不同比例" - "抖音/B站适配" - "viewport" 使用场景： - 抖音视频 (9:16) - B站/YouTube 视频 (16:9) - Instagram (1:1) - 小红书 (4:5)
| name | codemotion |
| description | CodeMotion - AI驱动的科普视频与演示创作工作流。 使用场景： - 创建科普动画视频（数学/物理/AI/数据可视化） - 生成技术教程讲解视频 - 制作演示文稿（PPT转网页/从零创建） - 为B站/抖音/YouTube制作视频内容 - 添加AI配音和字幕同步 触发词： - "做一个视频"、"创建科普视频"、"Remotion" - "创建演示文稿"、"PPT转网页"、"做slides" - "/codemotion" |
AI驱动的科普视频与演示创作工作流。
| 能力 | 说明 |
|---|---|
| Remotion 视频 | React代码驱动，精准控制 |
| TTS 音画同步 | 6+服务商，毫秒级同步 |
| 多平台适配 | 9:16/16:9/1:1/4:5 |
| HTML 演示 | 零依赖单文件 |
codemotion/
├── skills/
│ ├── SKILL.md # ⭐ 主入口
│ │
│ ├── core/ # 核心引擎
│ │ ├── tts-universal/ # ⭐ TTS 适配层（6个服务商）
│ │ ├── script-to-scene/ # ⭐ 场景拆解
│ │ ├── remotion-pro/ # ⭐ Remotion 代码生成
│ │ └── viewport-master/ # ⭐ 多比例适配
│ │
│ ├── content/ # 内容类型
│ │ ├── science-animation/ # ⭐ 科普动画视频
│ │ └── presentation/ # ⭐ HTML 演示文稿
│ │
│ └── output/ # 输出分发
│ ├── multi-platform/ # ⭐ 多平台发布
│ └── web-deploy/ # ⭐ 网页部署
│
└── shared/ # 共享资源
├── components/ # ⭐ 可复用组件库
│ ├── TTSPlayer.tsx # 逐字字幕播放器
│ ├── animations/ # 动画组件
│ │ ├── StepByStep.tsx
│ │ ├── ValueFlyIn.tsx
│ │ ├── SlidingWindow.tsx
│ │ ├── CameraMotion.tsx
│ │ └── StaggeredReveal.tsx
│ ├── ui/ # UI 组件
│ │ ├── Title.tsx
│ │ ├── FocusBox.tsx
│ │ ├── ProgressBar.tsx
│ │ └── ProgressDots.tsx
│ └── 3d/ # 3D 组件
│ ├── NeuralNetwork3D.tsx
│ └── PixelGrid.tsx
│
└── presets/ # 预设配置
├── 3b1b-colors.ts # 3Blue1Brown 配色
└── viewport-rules.ts # 多平台视口规则
用户输入想法后，CodeMotion 判断：
科普视频 → science-animation skill
演示文稿 → presentation skill
数据可视化 → science-animation (data-viz mode)
根据内容类型，收集必要信息：
科普视频模式：
演示文稿模式：
科普视频：
→ 场景拆解 (script-to-scene)
→ TTS 音频生成 (tts-universal)
→ Remotion 代码生成 (remotion-pro)
→ 预览 (npm run dev)
→ 渲染视频 (remotion render)
→ 多平台适配 (viewport-master)
→ 发布 (multi-platform)
演示文稿：
→ 风格选择
→ HTML 生成
→ 浏览器预览
→ 可选：部署/导出PDF
| Skill | 路径 | 职责 |
|---|---|---|
tts-universal | skills/core/tts-universal/ | TTS 服务商统一接口 |
script-to-scene | skills/core/script-to-scene/ | 脚本拆解为场景配置 |
remotion-pro | skills/core/remotion-pro/ | Remotion 代码生成 |
viewport-master | skills/core/viewport-master/ | 多比例适配 |
science-animation | skills/content/science-animation/ | 科普动画视频 |
presentation | skills/content/presentation/ | HTML 演示文稿 |
multi-platform | skills/output/multi-platform/ | 多平台分发 |
web-deploy | skills/output/web-deploy/ | 网页部署 |
| ID | 服务商 | 特色 | 免费额度 |
|---|---|---|---|
edge | Edge TTS | 免费，零配置 | 无限 |
minimax | MiniMax | 音色克隆 | 按量付费 |
volcengine | 火山引擎 | 公式朗读 | 有免费 |
elevenlabs | ElevenLabs | 英文 | $0.10/千字 |
aliyun | 阿里 Qwen3 | 高额度 | 50万字/月 |
tencent | 腾讯混元 | 企业级 | 按量付费 |
用于科普视频的视觉标准：
背景：#000000 (纯黑)
正值：#58C4DD (蓝)
负值：#FF6B6B (红)
高亮：#FFFF00 (黄)
结果：#83C167 (绿)
文字：#FFFFFF (白)
字体：JetBrains Mono
动画原则：
/codemotion
"我想做一个关于卷积神经网络的科普视频，5分钟左右"
/codemotion
"做一个关于 AI 发展的演示文稿"
所有 Skills 位于 skills/ 目录下，可被 Claude Code 自动加载。
共享组件位于 shared/components/，可直接在 Remotion 项目中引用：
import { TTSPlayer, Title, NeuralNetwork3D } from "codemotion/shared/components";
import { COLORS_3B1B } from "codemotion/shared/presets";