🎬 ContentFlow

AI 驱动的技术教程视频生成引擎

基于 Remotion 的专业视频组件库 + AI 自动化管道，输入一个技术主题，自动生成脚本 → 配音 → 视觉组件 → 渲染输出 FilmStorm 级别的高质量视频。

🚀 快速开始

一键安装（交互式）

git clone https://github.com/clear2x/ContentFlow.git
cd ContentFlow
bash scripts/setup.sh

安装脚本会交互式引导你完成：

选择你的 AI Agent — Claude Code / Codex / 其他
选择安装范围 — 全局（~/.claude/skills/）或当前项目（.claude/skills/）
自动安装 — Node.js 依赖、Python TTS 后端、语音模型、FFmpeg 检查

安装完成后，你的 Agent 自动获得视频生成技能。

三种使用方式

安装后，直接告诉你的 Agent：

场景一：给定主题

请帮我生成一个关于 "Rust vs Go 性能对比" 的技术教程视频

Agent 自动调研主题 → 生成脚本 → 画 ASCII 分镜草稿 → 调用 ContentFlow 技能生成视频。

场景二：给定网页链接

请帮我生成一个关于 "https://example.com/rust-guide" 的技术教程视频

Agent 读取网页内容 → 结合调研 → 生成脚本 → 生成视频。

场景三：给定文件

请帮我根据 ./report.pdf 生成一个技术教程视频

Agent 读取文件内容（支持 .pdf/.docx/.txt/.md）→ 生成脚本 → 生成视频。

预览组件

npm run dev

打开 http://localhost:3000，在 Remotion Studio 中浏览所有组件 Demo。

🧩 组件一览

ContentFlow 提供 40+ 专业视频组件，覆盖标题、图表、代码、架构、流程等所有常见场景。

📝 标题与文本

组件	用途	亮点
HeroTitle	开场标题	揭示动画 + 光晕扫描 + 浮动粒子
SectionTitle	章节标题	章节编号 + 进度条
ParagraphText	正文段落	多行文本 + 关键词高亮
TypewriterText	打字机效果	逐字揭示
CommentBubble	对话气泡	头像 + 气泡动画
SubtitleOverlay	字幕覆盖	逐词同步 / 卡拉OK模式
CalloutBox	提示框	提示/警告/注意事项，彩色左边框
BadgeRow	标签行	交错弹出动画的标签/芯片组
HighlightQuote	高亮引用	强调引言 + 来源标注
DividerSlide	分隔页	章节间分隔动画

📊 数据与图表

组件	用途	亮点
BarChart	柱状图	生长动画 + 数值标签
LineChart	折线图	渐进式路径绘制
PieChart	饼图	弹簧展开 + 百分比标签
DonutChart	环形图	中心标签 + 比例展示
GaugeChart	仪表盘	弧形进度 + 发光效果
DataTable	数据表格	斑马纹 + 行入场动画
MetricCard	数据指标	数字滚动计数
MetricRow	指标行	多指标横向对比
IconStat	图标统计	图标 + 数值 + 玻璃态卡片
ProgressBar	进度条	填充动画 + 光泽效果
ScoreCard	评分卡	多维度评分 + 进度条 + 总分
DataHighlight	数据标注	强调数据点
CausalGraph	因果关系图	节点连线 + 动画边
KnowledgeWeb	知识图谱	中心辐射布局
EvolutionTree	演进树	版本时间线

🃏 卡片与布局

组件	用途	亮点
FeatureGrid	特性网格	Icon + 标题 + 描述卡片
FeatureCard	特性卡片	独立卡片组件
ComparisonCards	对比卡片	左右对比 + 高亮
AnimatedList	动画列表	交错入场 + 勾选动画
ProductIntro	产品介绍	全屏产品展示
TabView	标签页切换	多视角对比
AccordionList	手风琴列表	FAQ 展开/折叠
ImageCaption	图片说明	图片 + 标题 + 副标题

🔧 流程与架构

组件	用途	亮点
ProcessFlow	流程图	步骤状态 + 进度条
CodeTerminal	代码终端	macOS 风格 + 逐行打字 + 语法高亮
CodeDiff	代码差异	前后对比 + 红绿标记
LayeredStack	分层架构	技术栈/协议层级展示
TreeDiagram	树形图	文件树/依赖树
KeyValueList	键值对列表	配置项/环境变量
NetworkTopology	网络拓扑	系统架构/基础设施图
SteppedTimeline	步骤时间线	教程步骤/历史事件
CountdownTimer	倒计时	环形进度 + 大字数值

🎨 视觉特效

组件	用途	亮点
Transitions	场景转场	Fade / Slide / LightSweep / ZoomBlur / CurtainReveal
ThreeScene	3D 场景	Three.js via @remotion/three
MotionBlurWrapper	运动模糊	CameraMotionBlur 特效
LightLeakOverlay	光泄漏	电影级光效
LottieAnimation	Lottie 动画	JSON 动画播放
AnimeDecorOverlay	动漫装饰	浮动星光 + 散景光斑

🖼️ 图标库（50+）

基于 Heroicons（MIT）和 Lucide（ISC），商用免费。

import { Zap, Lock, Computer } from './components/new/Icons';

<Zap size={24} color="#007AFF" strokeWidth={2} />

🛠️ AI 视频生成管道

ContentFlow 的核心是一个 9 阶段顺序管道，每个阶段产出经过 Zod 校验的 JSON 产物：

1. Research        — Agent 调研主题，生成内容文档
2. Script          — 生成播客双主持人脚本（小文 + 路老师）
3. TTS             — 合成配音（VoxCPM2 / Edge TTS / Kokoro）
4. Transcribe      — Whisper.cpp 逐词转录
5. Storyboard      — ⚠️ Agent 画 ASCII 草图，自审调整
6. Scenes+Timeline — 选择组件 + 构建帧时间线
7. Audio Mix       — 音频标准化 + BGM 混音
8. Render          — Remotion 渲染输出 MP4
9. Review          — FFmpeg 提帧 + Ollama 视觉审核

管道产物

每个阶段产出带 Zod 校验的 JSON 文件：

阶段	产物	格式
调研	`01-research/research.md`	Markdown 内容文档
脚本生成	`02-script/script.json`	`{ title, topic, segments: [...], speakers }`
TTS 合成	`03-tts/segment-*.wav` + `timing.json`	WAV + JSON
Whisper 转录	`04-transcribe/words/segment-*-words.json`	逐词时间戳
分镜草稿	`05-storyboard/storyboard.json`	ASCII 帧草稿 + 审核结果
组件+时间线	`06-scenes/scenes.json` + `timeline.json`	场景列表 + 帧分配
音频混合	`07-mix/mixed.json`	混音配置
渲染	`08-render/video.mp4`	MP4 / WebM / GIF
质量审核	`09-review/review.json`	逐帧评分 + 问题列表

断点续传

管道自动检测已有产物，跳过已完成阶段。使用 --force 强制重跑所有阶段。

🎨 风格系统

4 套精心设计的视觉预设：

预设	风格	背景	主色	适用场景
`apple-tech`	Apple 极简	`#000000` 纯黑	`#007AFF` 蓝	科技产品、技术教程
`fast-code`	开发者风格	`#0D1117` GitHub 黑	`#39D353` 绿	编程教程、代码演示
`data-viz`	数据可视化	`#FAFAFA` 浅灰	`#FF6B00` 橙	数据分析、报告展示
`anime-cozy`	动漫温馨	`#FFF8F0` 奶油白	`#FF8BA7` 樱花粉	轻松科普、入门教程

# 通过 --style 参数选择
npx tsx src/cli/index.ts generate --topic "..." --style anime-cozy

所有组件通过 useStyleTokens() Hook 动态读取风格令牌，无需硬编码颜色。

🤖 AI Agent 技能包

ContentFlow 打包为通用技能，任何 AI Agent（Claude Code、Codex、OpenClaw 等）都能使用。

一键安装

bash scripts/setup.sh

技能列表

技能	命令	说明
完整管道	`npx tsx src/cli/index.ts generate --topic "xxx"`	Topic → 视频
TTS 合成	`npx tsx src/cli/index.ts tts --text "你好"`	文本 → 语音
音频转录	`npx tsx src/cli/index.ts transcribe --input audio.wav`	WAV → 逐词时间戳
音频混合	`npx tsx src/cli/index.ts mix --project ./dir`	混音 + BGM
场景生成	`npx tsx src/cli/index.ts scenes --script script.json`	脚本 → 场景列表
时间线	`npx tsx src/cli/index.ts timeline --scenes scenes.json`	场景 → 帧时间线
视频渲染	`npx tsx src/cli/index.ts render --project ./dir`	时间线 → MP4
分镜草稿	—（Agent 自行完成）	ASCII 帧草稿 + 自审（必经步骤）

Agent 使用模式

Agent 用自己的大模型做调研、脚本生成和 ASCII 分镜草稿，然后调用 ContentFlow 技能处理渲染：

Agent (Claude/Codex/OpenClaw)
  ├── 大模型调研 topic        ← Agent 自己做
  ├── 生成 script.json        ← Agent 自己做
  ├── 画 ASCII 分镜草稿       ← Agent 自己做（参照 contentflow-storyboard.md）
  └── 调用 ContentFlow 技能  ← Agent 调用 CLI
        ├── tts               文本 → 语音
        ├── transcribe        语音 → 时间戳
        ├── scenes            脚本 → 视觉组件
        ├── timeline          组件 → 帧分配
        └── render            帧分配 → MP4 视频

所有技能说明在 skills/ 目录下，Agent 读取即可理解如何使用。

📐 开发指南

常用命令

npm run dev          # 🖥️ 启动 Remotion Studio 预览
npm run build        # 📦 打包用于生产渲染
npm run lint         # 🔍 ESLint + TypeScript 类型检查
npm run test         # 🧋试行全部测试
npm run test:watch   # 👀 测试监听模式
npm run upgrade      # ⬆️ 升级 Remotion 全家桶

创建新组件

// src/components/new/MyComponent.tsx
import { useCurrentFrame, interpolate, AbsoluteFill } from 'remotion';
import { useStyleTokens } from '../../compositions/StyleContext';

export const MyComponent: React.FC = () => {
  const frame = useCurrentFrame();
  const { colors, fonts, sizes } = useStyleTokens();

  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill style={{ backgroundColor: colors.background }}>
      <div style={{ opacity, color: colors.text, fontSize: sizes.h1 }}>
        Hello ContentFlow!
      </div>
    </AbsoluteFill>
  );
};

动画准则

✅ 推荐	❌ 禁止
`useCurrentFrame()`	CSS `@keyframes`
`spring()`	Tailwind `animate-*`
`interpolate()`	Framer Motion
Remotion easing 函数	`setTimeout` / `setInterval`

Remotion 逐帧渲染模式下，CSS 动画会导致闪烁。始终使用 Remotion 的帧驱动 API。

🧪 测试

npm run test                              # 运行全部测试
npx vitest run src/pipeline/__tests__/    # 只运行管道测试
npx vitest run --coverage                 # 生成覆盖率报告

测试覆盖管道各阶段、组件 Schema、风格注册表、渲染预设等。详见测试文档。

🛣️ 路线图

🤝 贡献

欢迎贡献！请阅读贡献指南。

# 1. Fork 并克隆
git clone https://github.com/your-username/ContentFlow.git

# 2. 创建特性分支
git checkout -b feat/my-awesome-feature

# 3. 开发并测试
npm run lint && npm run test

# 4. 提交 PR

📄 许可证

致谢

Remotion — React 视频渲染引擎
Recharts — React 图表库
Heroicons — SVG 图标（MIT）
Lucide — SVG 图标（ISC）
Ollama — 本地 LLM 运行时
Whisper.cpp — 语音转录
VoxCPM — 本地 TTS + Voice Design

如果觉得有用，请给个 ⭐ Star！

Name		Name	Last commit message	Last commit date
.planning		.planning
docs		docs
public		public
scripts		scripts
skills		skills
src		src
workflows		workflows
.gitignore		.gitignore
.prettierrc		.prettierrc
CLAUDE.md		CLAUDE.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
README_EN.md		README_EN.md
eslint.config.mjs		eslint.config.mjs
package-lock.json		package-lock.json
package.json		package.json
remotion.config.ts		remotion.config.ts
tsconfig.json		tsconfig.json
vitest.config.ts		vitest.config.ts

Navigation Menu

Repository files navigation

🎬 ContentFlow

🚀 快速开始

一键安装（交互式）

三种使用方式

预览组件

🧩 组件一览

📝 标题与文本

📊 数据与图表

🃏 卡片与布局

🔧 流程与架构

🎨 视觉特效

🖼️ 图标库（50+）

🛠️ AI 视频生成管道

管道产物

断点续传

🎨 风格系统

🤖 AI Agent 技能包

一键安装

技能列表

Agent 使用模式

📐 开发指南

常用命令

创建新组件

动画准则

🧪 测试

🛣️ 路线图

🤝 贡献

📄 许可证

致谢

About

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

🎬 ContentFlow

🚀 快速开始

一键安装（交互式）

三种使用方式

预览组件

🧩 组件一览

📝 标题与文本

📊 数据与图表

🃏 卡片与布局

🔧 流程与架构

🎨 视觉特效

🖼️ 图标库（50+）

🛠️ AI 视频生成管道

管道产物

断点续传

🎨 风格系统

🤖 AI Agent 技能包

一键安装

技能列表

Agent 使用模式

📐 开发指南

常用命令

创建新组件

动画准则

🧪 测试

🛣️ 路线图

🤝 贡献

📄 许可证

致谢

About

Resources

Contributing

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages