图文一键转短视频 -- AI 驱动的内容卡片视频生成器
VPresent 可以将任意文本或 URL 自动转化为带 AI 口语化旁白的内容卡片短视频，输出 9:16 竖屏格式，直接发布到抖音、小红书或 TikTok。整个流程从内容提取、卡片设计、语音合成到视频渲染全部自动完成，一条命令即可生成成品视频。
- 文本/URL 输入 -- 粘贴一段文字或一个链接，自动提取内容并拆解为 5-15 张叙事卡片
- AI 口语化旁白 -- 不是照读文字，而是生成自然的中文口语解说，像朋友在讲故事
- FlowTTS 语音合成 -- 基于腾讯 FlowTTS，高质量中文语音，WAV 24000Hz 输出
- Remotion 视频渲染 -- React 驱动的视频合成，1080x1920 竖屏，H.264 编码，30fps
- 5 套设计方案 -- 内置 5 种视觉风格，从电影质感到霓虹毛玻璃，一键切换
- Claude Code Skill 集成 -- 使用
/present-to-video命令或自然语言触发，端到端自动化
VPresent 内置 5 套精心设计的视觉方案，每套都有独特的配色、排版和动效风格：
| 方案 | 文件名 | 风格描述 | 主色调 |
|---|---|---|---|
| Cinematic Noir | scheme1-cinematic-noir |
电影质感 -- 深黑背景、暖金色主色，灵感来自胶片黑色电影与高端片头设计，排版为核心表现力 | 金/黑 |
| Neon Glassmorphism | scheme2-neon-glass |
霓虹毛玻璃 -- 磨砂玻璃质感卡片，霓虹光晕边缘，赛博朋克氛围，适合科技类内容 | 霓虹多色 |
| Editorial Luxury | scheme3-editorial-luxury |
社论极简 -- 高端杂志排版风格，大量留白，极致字体层次对比，优雅克制 | 黑白金 |
| Gradient Aurora | scheme4-gradient-aurora |
极光渐变 -- 流动的极光色彩背景，柔和渐变，现代感十足，适合生活方式类内容 | 渐变色系 |
| Bold Brutalist | scheme5-bold-brutalist |
瑞士粗野主义 -- 粗体大字、强对比色块、网格结构，视觉冲击力强，适合观点输出 | 高对比 |
Cinematic Noir -- 电影质感
Neon Glassmorphism -- 霓虹毛玻璃
Editorial Luxury -- 社论极简
Gradient Aurora -- 极光渐变
Bold Brutalist -- 瑞士粗野主义
- Node.js 18+
- Python 3.8+
- FFmpeg（Remotion 渲染依赖）
- 腾讯云凭证（FlowTTS 语音合成，配置在
.env文件中）
# 克隆项目
git clone <repo-url> VPresent
cd VPresent
# 安装 Remotion 项目依赖
cd remotion-video
npm install
# 配置腾讯云凭证（FlowTTS）
cp .env.example .env
# 编辑 .env 填入你的 TENCENT_SECRET_ID 和 TENCENT_SECRET_KEY通过 Claude Code Skill（推荐）：
/present-to-video https://example.com/article
/present-to-video 这里是一段关于AI产品经理的文字内容...
也支持自然语言触发：
- "帮我把这篇文章做成短视频"
- "把这段文字转成卡片视频"
手动运行：
cd remotion-video
# 启动预览（浏览器中实时查看）
npm run dev
# 渲染最终视频
npm run render输出文件：out/video.mp4
VPresent 采用三阶段流水线，从原始内容到成品视频全自动完成：
VPresent Pipeline
============================================================
[文本 / URL]
|
v
+-----------------------------+
| 阶段一：内容提取 & 卡片生成 |
| |
| - URL 抓取或纯文本输入 |
| - AI 分析内容结构 |
| - 拆解为 5-15 张叙事卡片 |
| - 生成口语化解说词 |
| - 输出 cards.json |
+-----------------------------+
|
v
+-----------------------------+
| 阶段二：TTS 语音合成 |
| |
| - 逐卡片调用 FlowTTS |
| - WAV 24000Hz 输出 |
| - 生成 manifest.json |
+-----------------------------+
|
v
+-----------------------------+
| 阶段三：Remotion 视频合成 |
| |
| - React 组件渲染卡片 |
| - 音频按帧同步 |
| - 入场/退场动画 |
| - H.264 编码输出 |
+-----------------------------+
|
v
[out/video.mp4] 9:16 竖屏成品
VPresent/
├── CLAUDE.md # 项目总览
├── .claude/
│ └── skills/
│ └── present-to-video/ # Claude Code Skill
│ ├── SKILL.md # Skill 定义与执行流程
│ ├── references/
│ │ ├── flowtts-guide.md # FlowTTS 集成文档
│ │ └── card-design-spec.md # 卡片视觉设计规范
│ ├── scripts/
│ │ └── generate_tts.py # TTS 批量生成脚本
│ └── evals/
│ └── evals.json # 测试用例
├── remotion-video/ # Remotion 视频项目
│ ├── src/
│ │ ├── index.ts # registerRoot 入口
│ │ ├── Root.tsx # 单方案入口
│ │ ├── RootAll.tsx # 全部 5 套方案入口
│ │ ├── VideoPresentation.tsx # 默认视频合成组件
│ │ ├── schemes/ # 5 套设计方案（自包含组件）
│ │ │ ├── scheme1-cinematic-noir.tsx
│ │ │ ├── scheme2-neon-glass.tsx
│ │ │ ├── scheme3-editorial-luxury.tsx
│ │ │ ├── scheme4-gradient-aurora.tsx
│ │ │ └── scheme5-bold-brutalist.tsx
│ │ └── data/cards.json # 卡片数据
│ ├── public/audio/ # TTS 音频文件
│ └── remotion.config.ts
├── docs/previews/ # 设计方案预览图
└── out/ # 输出视频
每个视频由 5 种卡片类型组合而成，首张必须为 title，末张必须为 ending：
| 类型 | 名称 | 用途 | 布局 |
|---|---|---|---|
title |
标题卡 | 开场引入 -- 系列标识、大标题、核心要点、标签 | 固定布局 |
content |
内容卡 | 信息承载 -- 支持 list / grid-2x2 / grid-1x2 三种子布局 | 可选布局 |
comparison |
对比卡 | 左右两栏对照，适合优劣对比、新旧比较 | 双栏布局 |
quote |
金句卡 | 突出关键洞察或名言，大字居中展示 | 居中布局 |
ending |
结尾卡 | CTA 引导 -- 点赞、收藏、关注，附来源链接 | 固定布局 |
卡片数量参考： 短文（<500字）5-7 张 / 中文（500-1500字）8-12 张 / 长文（>1500字）10-15 张
在项目根目录创建 .env 文件：
TENCENT_SECRET_ID=your_secret_id
TENCENT_SECRET_KEY=your_secret_keyFlowTTS 参数默认值：语速 1.0 / 音量 1.0 / 语言 zh / 输出格式 WAV 24000Hz
在 remotion-video/src/ 中修改视频合成组件的引用，切换到不同的 scheme 文件即可：
// 例如切换到霓虹毛玻璃风格
import { VideoPresentation } from "./schemes/scheme2-neon-glass";5 个方案文件位于 remotion-video/src/schemes/ 目录下，每个文件都是完整的、自包含的视频合成组件。
| 技术 | 用途 |
|---|---|
| Remotion | React 驱动的视频合成框架 |
| React 18 | 卡片 UI 组件渲染 |
| TypeScript | 类型安全的组件开发 |
| FlowTTS | 腾讯云中文语音合成 |
| FFmpeg | 底层视频编码 |
| Claude Code | AI 驱动的端到端流水线编排 |
MIT