# video-gen

**Repository Path**: yang-junwang/video-gen

## Basic Information

- **Project Name**: video-gen
- **Description**: 一键生成视频
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-12
- **Last Updated**: 2026-03-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🎬 智能视频生成系统（面向 Cursor / Claude 工作流）

基于 **配置驱动** 架构的智能视频生成系统，支持多种视频类型（每日网站、小红书笔记等），采用 **两阶段工作流**（文案生成 → 视频渲染），并把“调用大模型（Cursor/Claude/OpenAI/Anthropic）”作为一等公民能力：可替换模型、可插拔技能、可复用模板。

## 🚀 快速开始

### 方式一：一体化模式（简单快捷）

```bash
# 从 URL 直接生成每日网站视频
npm run daily:render -- --url "https://gamma.app"

# 渲染现有配置文件
npm run render:config -- --config templates/daily-site-template.json
```

### 方式二：两阶段模式（灵活可控）

```bash
# 阶段一：生成配置文件
npm run generate:config -- --url "https://gamma.app" --type "DailySiteVideo"

# 阶段二：从配置渲染视频
npm run render:video -- --config output/configs/2026-03-12/config.json
```

## 📁 项目结构

```
video-gen/
├── output/                              # 输出目录（按日期分区）
│   ├── 2026-03-12/daily-site/          # 每日网站视频（每个视频一个目录）
│   ├── 2026-03-12/xhs-video/           # 小红书笔记视频（每个视频一个目录）
│   └── configs/2026-03-12/             # 生成的配置
├── templates/                           # 配置模板
│   ├── daily-site-template.json        # 每日网站模板
│   └── xhs-note-template.json          # 小红书笔记模板
├── src/
│   ├── core/                           # 核心业务逻辑
│   │   ├── orchestrator.ts             # 技能编排器
│   │   ├── pipeline/                   # 流水线能力（skills/pipelines）
│   │   ├── services/                   # 外部服务集成（TTS 等）
│   │   └── videoConfig.ts              # 配置工具
│   ├── features/                       # 业务特性（按功能自包含）
│   │   ├── daily-site/                 # 每日网站视频（Apple Keynote 风）
│   │   │   └── compositions/
│   │   ├── xhs-video/                  # 小红书笔记视频（卡片/移动端友好）
│   │   │   ├── compositions/
│   │   │   └── utils/
│   │   └── motivational-video/         # 示例：励志文案视频
│   │       └── compositions/
│   └── ui/                             # 通用 UI 组件
├── scripts/                             # 工具脚本
└── docs/                               # 项目文档
```

## 🎯 视频类型

### DailySiteVideo（每日网站）
- **用途**：每天推荐一个效率工具网站
- **时长**：45秒
- **风格**：Apple Keynote 发布会风格
- **模板**：7个场景（开场 → 痛点 → 方案 → 深度 → 演示 → 背书 → 行动号召）

### XhsNoteVideo（小红书笔记）
- **用途**：分享攻略和干货内容
- **时长**：30-60秒
- **风格**：移动端友好，卡片式布局
- **模板**：封面 + 多个内容页

## 🛠 核心功能

### 1. 配置驱动架构
```json
{
  "compositionId": "DailySiteVideo",
  "seriesTitle": "每日网站",
  "episodeTitle": "Gamma - AI PPT 生成神器",
  "siteName": "Gamma",
  "siteUrl": "https://gamma.app",
  "coreValue": "一键生成专业PPT，告别排版烦恼",
  "audio": {
    "bgm": {
      "src": "audio/bgm.mp3",
      "volume": 0.1
    },
    "voiceover": {
      "src": "audio/tts/gamma-intro.mp3",
      "volume": 1.0
    }
  },
  "theme": {
    "colors": { ... },
    "fonts": { ... },
    "animations": { ... }
  }
}
```

### 2. 技能系统（Skills）
- **ScriptGeneratorSkill**：文案生成和配置创建
- **VideoRendererSkill**：视频渲染
- **TextToSpeechSkill**：语音合成
- **BrowserUseSkill**：网页内容抓取
- **HumanizerSkill**：文案润色
- **MemorySkill**：缓存管理

### 3. 主题系统
- Apple 色彩动画风格
- 支持自定义字体、颜色、动画
- 禁止紫色系配色
- 现代化设计语言

## 📝 使用示例

### 从 URL 生成每日网站视频
```bash
npm run daily:render -- --url "https://gamma.app"
```

### 手动创建配置文件
```bash
# 生成模板
npm run template:daily

# 编辑生成的模板文件
def templates/daily-site-template.json

# 从配置渲染视频
npm run render:config -- --config templates/daily-site-template.json
```

### 两阶段模式
```bash
# 阶段一：生成配置和文案
npm run generate:config -- --url "https://gamma.app" --type "DailySiteVideo"

# 阶段二：渲染视频
npm run render:video -- --config output/configs/2026-03-12/gamma.json
```

## 🎨 视觉规范

### Apple Keynote 风格
- **色彩**：极致的黑、极致的白、微妙的模糊
- **动效**：Spring 动画，阻尼系数 20-22
- **字体**：SF Pro / PingFang SC

### 强制使用动效组件
| 组件 | 用途 |
|------|------|
| `SlideIn` | 卡片/列表入场 |
| `FadeIn` | 插图/配图入场 |
| `ScalePop` | 重点/数字强调 |
| `Shake` | 错误/强调动画 |
| `Highlight` | 关键词高亮 |
| `ArrowMove` | 逻辑/指引动画 |
| `MaskReveal` | 转场效果 |
| `Typewriter` | 字幕/旁白动画 |

## 🔧 开发命令

```bash
# 开发预览
npm run dev

# 视频渲染
npm run render                              # 渲染 MotivationalVideo（输出到 output/YYYY-MM-DD/motivational-video/video.mp4）
npm run render:xhs                           # 渲染 XhsNoteVideo（走管道脚本）
npm run xhs:render                           # 运行小红书生成脚本
npm run daily:render                         # 运行每日网站生成脚本

# 配置管理
npm run template:daily                       # 生成每日网站模板
npm run template:xhs                         # 生成小红书笔记模板
npm run render:config                        # 从配置渲染视频

# 两阶段模式
npm run generate:config                      # 阶段一：生成配置
npm run render:video                         # 阶段二：渲染视频

# 技能执行
npm run run:skill                           # 运行任意技能
```

## 📚 文档资源

- [技能文档](.cursor/skills/douyin-daily-site-studio/SKILL.md) - 详细技能说明和示例
- [配置指南](docs/video-config-guide.md) - 配置文件格式和最佳实践
- [项目结构](docs/project-structure.md) - 项目规范和迁移指南
- [大模型工作流](docs/llm-workflow.md) - Cursor/Claude 协作方式与产物约束

## 🔄 工作流

### 一体化模式（向后兼容）
```
URL/内容 → BrowserUse → Humanizer → TTS → Remotion → 视频
                      ↘ Summarize ↗
```

### 两阶段模式（推荐）
```
阶段一：文案生成
URL/内容 → ScriptGenerator → 配置JSON + TTS音频

阶段二：视频渲染
配置JSON → VideoRenderer → 渲染视频
```

## 🏗 技术栈

- **Remotion** - 基于 React 的视频渲染引擎
- **TypeScript** - 类型安全的开发体验
- **Zod** - Schema 验证
- **React** - UI 组件
- **Node.js** - 后端处理

## 📋 TODO

- [x] 配置驱动架构
- [x] 两阶段工作流
- [x] 技能系统
- [x] Apple 风格主题
- [x] 向后兼容
- [ ] 批量生成优化
- [ ] 云端渲染支持
- [ ] 更多视频模板

---

**提示**：建议先查看 [配置指南](docs/video-config-guide.md) 了解详细的配置参数，然后从复制模板开始创建您的第一个视频！