| name | present-to-video |
| description | 将文本或URL转成短视频。生成带AI旁白的内容卡片视频,适合发布到抖音/小红书/TikTok。当用户提到'卡片视频'、'短视频生成'、'图文转视频'、'content to video'、'present to video'、'做成视频'、'转视频'时使用此skill。 |
| argument-hint | [文本内容或URL] |
| allowed-tools | Read, Write, Edit, Bash, Glob, Grep, WebFetch, Agent |
Present to Video — 图文转短视频
将任意文本或 URL 转化为精美的短视频,带口语化 AI 旁白,可直接发布到抖音/小红书/TikTok。
执行流程
按以下 3 个阶段顺序执行。
阶段一:内容提取 & 卡片生成
-
判断输入类型
- URL → 用 WebFetch 抓取网页内容,提取正文、标题、作者
- 纯文本 → 直接使用
-
分析内容,生成卡片 JSON
将内容拆解为 5-15 张卡片,每张推进一个叙事节点。
| 卡片类型 | 用途 |
|---|
title | 开场卡 — 系列标识 + 大标题 + 核心要点 |
content | 内容卡 — 支持 list / grid-2x2 / grid-1x2 布局 |
comparison | 对比卡 — 左右两栏对照 |
quote | 金句卡 — 突出关键洞察 |
ending | 结尾卡 — CTA 关注/点赞/收藏 |
数量参考:短文(<500字) 5-7张 / 中文(500-1500字) 8-12张 / 长文(>1500字) 10-15张。首张必须是 title,末张必须是 ending。
-
视觉设计规范
- 画布:1080 × 1920px(9:16 竖屏)
- 背景:
#0a0a0a → #111111 深色渐变
- 主文字:
#ffffff 白色
- 高亮色轮换:
#f5c842(金) #4ade80(绿) #a78bfa(紫) #f97316(橙) #22d3ee(青)
- 标题:48-64px 粗体 / 正文:28-36px / 内边距:60px水平 80px顶部
- 关键词高亮:彩色文字 + 20%透明度背景药丸
- 底部引言:居中,
#888 灰色
- 页码指示器:右下角,如 "3/8"
- 详细规范见 card-design-spec.md
-
卡片数据结构
{
"meta": {
"series_name": "系列名",
"series_tag": "精读系列 EP01",
"source_url": "https://...",
"author": "作者",
"author_title": "职称"
},
"cards": [
{
"type": "title",
"headline": "大标题",
"bullets": [{"icon": "⚠️", "text": "要点文字", "highlight": "高亮关键词"}],
"footer_quote": "底部引言",
"tags": ["#标签1", "#标签2"],
"narration": "口语化解说词..."
}
]
}
阶段二:TTS 语音合成
-
为每张卡片生成口语化解说词
这不是照读卡片文字!要像一个懂行的朋友在自然地讲解:
- 使用口语化中文,不要书面语
- 卡片之间加过渡:"接下来看..."、"这里有个有意思的点..."
- 展开缩写和术语
- 每张卡片解说 10-30 秒
- 标题卡前 3 秒要有 hook
- 结尾卡简短有力的 CTA
-
调用 FlowTTS 合成语音
使用腾讯 FlowTTS:https://github.com/Tencent-RTC/FlowTTS
- 凭证已配置在项目
.env 文件中
- 使用非流式 API,输出 WAV 24000Hz
- 每张卡片单独音频:
audio/card_01.wav...
- 生成 manifest.json 记录路径和时长
- 语速 1.0 / 音量 1.0 / 语言 zh
- 批量脚本:generate_tts.py
- 详细参考:flowtts-guide.md
阶段三:Remotion 视频合成
-
创建 Remotion 项目
remotion-video/
├── src/
│ ├── Root.tsx
│ ├── VideoPresentation.tsx
│ ├── components/
│ │ ├── TitleCard.tsx
│ │ ├── ContentCard.tsx
│ │ ├── ComparisonCard.tsx
│ │ ├── QuoteCard.tsx
│ │ ├── EndingCard.tsx
│ │ └── shared/ (Background, HighlightText, PageIndicator, SeriesTag)
│ ├── data/cards.json
│ └── styles/theme.ts
├── public/audio/
└── remotion.config.ts
-
合成逻辑
- 每张卡片时长 = 音频时长 + 1s padding
- 卡片间 0.3s 交叉淡入淡出
- FPS: 30 / 分辨率: 1080×1920
-
动画规范
- 入场(0.5s):淡入 + 上滑 20px
- 内容交错:子元素依次出现,间隔 0.15s
- 高亮动画:关键词色彩扫过
- 退场(0.3s):淡出
-
音频同步 — 使用 Remotion <Audio> 组件按帧偏移放置
-
渲染
npx remotion render VideoPresentation out/video.mp4 --codec h264 --image-format jpeg --quality 80
输出
最终产物:out/video.mp4,9:16 竖屏,可直接上传短视频平台。
完成后告知用户输出路径、视频时长、卡片数量。如需调整可修改 cards.json 重新渲染。