SuperAPI AI Directory
Partner中文AI newsFavorites
Skillstutor-general

tutor-general

General & other

View repository

Updated 10-16 09:54

About this skill

Tutor General - General Knowledge Teaching Video

⚠️ Important Notice: This skill is inspired by tutor-math-geometry, using Motion Canvas instead of Manim, adapting to a broader range of knowledge point explanations.

Differences from tutor-math-geometry

Dimension tutor-math-geometry tutor-general
Topic Mathematical geometry Any knowledge point
Rendering engine Manim Motion Canvas (TypeScript)
Code style Python TypeScript
Animation type Mathematical formulas/graphics Flowcharts/diagrams/animations

Core Workflow

WORKFLOW = [
    // 步骤1: 内容分析
    {
        "step": 1,
        "name": "analyze_content",
        "input": "主题/文本/URL",
        "output": "content_analysis.md",
        "tasks": ["提炼核心概念", "确定讲解结构", "规划可视化方式"]
    },

    // 步骤2: 分镜脚本
    {
        "step": 2,
        "name": "storyboard",
        "input": "content_analysis.md",
        "output": "{日期}_{主题}_分镜.md",
        "tasks": ["定义幕结构", "设计画面/字幕/读白", "规划动画类型"]
    },

    // 步骤3: TTS生成
    {
        "step": 3,
        "name": "generate_tts",
        "input": "分镜脚本",
        "output": "audio/audio_{三位幕号}_{幕名}.wav + audio_info.json",
        "command": "python scripts/generate_tts.py audio_list.csv ./audio --voice xiaoxiao"
    },

    // 步骤4: 验证更新
    {
        "step": 4,
        "name": "validate_audio",
        "input": "分镜.md + audio/",
        "output": "更新后的分镜.md(填充时长) + audio_info.json",
        "command": "python scripts/validate_audio.py 分镜.md ./audio",
        "check": ["音频存在性", "时长>0", "数量匹配"]
    },

    // 步骤5: Motion Canvas 脚手架
    {
        "step": 5,
        "name": "scaffold",
        "input": "分镜.md + audio_info.json",
        "output": "src/scene.ts (伪代码框架)",
        "template": "templates/scene_scaffold.ts",
        "must_include": [
            "createScene() - 场景创建",
            "COLORS - 颜色定义",
            "SCENES[] - 幕信息数组(从audio_info.json加载时长)",
            "Motion Canvas API 调用"
        ]
    },

    // 步骤6: 生成代码
    {
        "step": 6,
        "name": "implement",
        "input": "脚手架 + 分镜.md + audio_info.json",
        "output": "完整的 Motion Canvas 代码",
        "rules": [
            "根据分镜实现每幕动画",
            "使用 @motion-canvas/2d 库",
            "画面时长 >= 音频时长",
            "TypeScript 类型正确"
        ]
    },

    // 步骤7: 检查与渲染
    {
        "step": 7,
        "name": "check_and_render",
        "input": "Motion Canvas 项目",
        "output": "视频文件",
        "command": "npm run export",
        "check": ["TypeScript 编译", "动画同步", "导出成功"]
    }
]

Step 1: Content Analysis

Goal: Understand the topic, extract core concepts, and plan the visualization approach.

Output format

## 内容分析

### 主题
{主题名称}

### 核心概念（3-5个）
1. 概念1：...
2. 概念2：...
3. 概念3：...

### 讲解结构
- 引入：...
- 展开：...
- 总结：...

### 可视化方案
- 概念1 → 流程图
- 概念2 → 示意图
- 概念3 → 动画演示

Step 2: Storyboard Script

Goal: Define the video structure, reserving audio file names at the end (duration left empty).

File naming

{日期}_{主题}_分镜.md

Storyboard script structure

# 分镜脚本 - {主题名称}

## 分镜设计

### 第1幕：{幕名}
**画面**: ...
**字幕**: ...（简洁，≤20字）
**读白**: ...（详细，口语化）
**动画类型**: 淡入/移动/缩放/高亮
**时长**: {音频时长}

---

### 第2幕：{幕名}
...

## 音频生成清单

| 幕号 | 文件名 | 读白文本 | 时长 | 说话人 | 情感 |
|------|--------|----------|------|--------|------|
| 1 | audio_001_{幕名}.wav | "读白文本" | | xiaoxiao | 热情 |
| 2 | audio_002_{幕名}.wav | "读白文本" | | xiaoxiao | 平和 |

Motion Canvas Animation Types

  • fade-in - Fade in
  • fade-out - Fade out
  • move - Move
  • scale - Scale
  • rotate - Rotate
  • highlight - Highlight
  • draw - Draw (for flowcharts)

Step 3: TTS Generation

Command：

python scripts/generate_tts.py audio_list.csv ./audio --voice xiaoxiao

Output：

  • audio/audio_001_{幕名}.wav
  • audio_info.json

Step 4: Verification Update

Command：

python scripts/validate_audio.py 分镜.md ./audio

Check items：

  • Audio files exist
  • Duration > 0
  • Count matches

Step 5: Motion Canvas Scaffolding

Template：templates/scene_scaffold.ts

Must include：

// 颜色定义
const COLORS = {
  background: '#0f172a',
  primary: '#4ecca3',
  secondary: '#e94560',
  highlight: '#ffc107',
  text: '#ffffff',
};

// 幕信息（从 audio_info.json 加载）
const SCENES = [
  { id: 1, name: '开场', duration: 5.0 },
  { id: 2, name: '概念', duration: 10.0 },
  // ...
];

// 场景创建
export function createScene() {
  // ...
}

Step 6: Motion Canvas Code Implementation

Core API

import { 
  Scene, 
  Circle, 
  Rect, 
  Line, 
  Text, 
  VGroup, 
  layout,
  fadeIn,
  any,
  all,
  waitFor
} from '@motion-canvas/2d';

// 创建圆形
const circle = new Circle({ radius: 50, fill: '#4ecca3' });

// 创建文字
const text = new Text({ 
  text: 'Hello', 
  fontSize: 32, 
  fill: 'white' 
});

// 动画序列
circle.fill('red', 1);

// 等待音频
yield* waitFor(audioDuration);

Common animation patterns

// 淡入
new Rect().opacity(0).fadeIn(1);

// 移动
new Circle().position([100, 0]).move([200, 0], 1);

// 高亮
new Circle().stroke('#ffff00', 0.5).back(0.5);

// 流程图
new Layout({ direction: 'row', spacing: 50 })
  .add(new Rect())
  .add(new Arrow())
  .add(new Rect());

Step 7: Rendering

Development mode (real-time preview)

npm run serve

Export video

npm run export

Motion Canvas Advantages

  • ✅ Real-time preview, fast debugging
  • ✅ TypeScript type safety
  • ✅ Interactive preview
  • ✅ Suitable for flowcharts/diagrams

Comparison with Manim

Dimension Manim Motion Canvas
Language Python TypeScript
Real-time preview Requires rendering Instant preview
Suitable for Mathematical graphics Flows/presentations
Output Video Video/interactive

Dependencies

  • Node.js 16+
  • npm
  • @motion-canvas/core
  • @motion-canvas/2d
  • @motion-canvas/ui
  • edge-tts (for TTS)
  • ffmpeg (for video export)

Installation

npm install

Usage Example

# 1. 复制模板
cp -r templates/* ./my-project/

# 2. 生成分镜脚本
# 编辑 {主题}_分镜.md

# 3. 生成 TTS
python scripts/generate_tts.py audio_list.csv ./audio

# 4. 验证音频
python scripts/validate_audio.py 分镜.md ./audio

# 5. 实现动画
# 编辑 src/scene.ts

# 6. 开发预览
npm run serve

# 7. 导出
npm run export

Directory Structure

tutor-general/
├── SKILL.md              # 本文件
├── README.md             # 说明文档
├── scripts/
│   ├── generate_tts.py       # TTS生成脚本
│   ├── validate_audio.py      # 音频验证脚本
│   └── audio_list.example.csv # 示例
├── templates/
│   ├── scene_scaffold.ts     # 脚手架模板
│   └── package.json         # 项目模板
├── references/
│   └── storyboard_sample.md # 分镜示例
└── assets/
    └── (静态资源)

Notes

  1. Animation synchronization: Screen duration must be >= the corresponding audio duration
  2. TypeScript: Ensure types are correct; Motion Canvas requires compilation
  3. Real-time preview: During development use npm run serve to view effects in real time
  4. Export time: Video export takes a long time; please be patient