present-to-video

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 个阶段顺序执行。

阶段一：内容提取 & 卡片生成

1. 判断输入类型

   • URL → 用 WebFetch 抓取网页内容，提取正文、标题、作者
   • 纯文本 → 直接使用

2. 分析内容，生成卡片 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。

3. 视觉设计规范

   • 画布：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

4. 卡片数据结构

   {
     "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 语音合成

1. 为每张卡片生成口语化解说词

   这不是照读卡片文字！要像一个懂行的朋友在自然地讲解：

   • 使用口语化中文，不要书面语
   • 卡片之间加过渡："接下来看..."、"这里有个有意思的点..."
   • 展开缩写和术语
   • 每张卡片解说 10-30 秒
   • 标题卡前 3 秒要有 hook
   • 结尾卡简短有力的 CTA

2. 调用 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 视频合成

1. 创建 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
   

2. 合成逻辑

   • 每张卡片时长 = 音频时长 + 1s padding
   • 卡片间 0.3s 交叉淡入淡出
   • FPS: 30 / 分辨率: 1080×1920

3. 动画规范

   • 入场(0.5s)：淡入 + 上滑 20px
   • 内容交错：子元素依次出现，间隔 0.15s
   • 高亮动画：关键词色彩扫过
   • 退场(0.3s)：淡出

4. 音频同步 — 使用 Remotion <Audio> 组件按帧偏移放置

5. 渲染

   npx remotion render VideoPresentation out/video.mp4 --codec h264 --image-format jpeg --quality 80
   

输出

最终产物：out/video.mp4，9:16 竖屏，可直接上传短视频平台。

完成后告知用户输出路径、视频时长、卡片数量。如需调整可修改 cards.json 重新渲染。