present-to-video

// 将文本或URL转成短视频。生成带AI旁白的内容卡片视频，适合发布到抖音/小红书/TikTok。当用户提到'卡片视频'、'短视频生成'、'图文转视频'、'content to video'、'present to video'、'做成视频'、'转视频'时使用此skill。

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 重新渲染。

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 重新渲染。