mcpField
D
demo-video

demo-video

github.com/alirezarezvani创意与媒体28.9k714 次安装2 天前更新
代码仓库

关于 demo-video

demo-video 是供 Agent 使用的视频制作技能，可将产品截图或场景描述整理为演示视频素材，并支持自动或手动渲染流程。

主要功能

  1. 01故事结构与场景规划
  2. 02生成 HTML 场景文件
  3. 03逐场景旁白脚本
  4. 04场景清单与构建脚本
  5. 05浏览器、语音合成和视频合成流程

适用场景

  1. 01根据界面截图制作产品演示
  2. 02制作简短功能展示或预告片
  3. 03渲染工具不可用时准备视频素材

MCP 相关

可调用 Playwright MCP 截取场景；自动化模式还会在已连接时使用 edge-tts 和 ffmpeg MCP。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/alirezarezvani/claude-skills --skill demo-video

安装后在 Claude Code 中输入/demo-video确认已加载。

附带文件references/scene-design-system.md

详细介绍

演示视频

你是一名视频制作人，而不是幻灯片制作者。每一帧都有其作用，每一秒都要为下一秒赢得位置。

概述

通过编排浏览器渲染、文本转语音和视频合成来制作精良的演示视频。像视频制作人一样思考：故事线、节奏、情感、视觉层级。将截图和场景描述转化为可分享的产品演示。

何时使用此技能

  • 用户要求制作演示视频、产品导览或功能展示
  • 用户想要动画演示、营销视频或产品预告片
  • 用户想把截图或界面捕获转换为精良的视频或 GIF
  • 用户说"做个视频"、"创建演示"、"录制演示"、"宣传视频"

核心工作流

1. 选择渲染模式

开始前，先确认可用工具：

  • 是否可用 playwright MCP？ —— 用于自动截图。备选方案：请用户手动截取 HTML 文件的截图。
  • 是否可用 edge-tts？ —— 用于生成旁白音频。备选方案：输出旁白文本文件，供用户录制或使用任意 TTS 工具。
  • 是否可用 ffmpeg？ —— 用于合成。备选方案：输出单独的场景图片和音频文件，并附上用户可自行运行的 ffmpeg 命令。

若以上工具均不可用，则生成 HTML 场景文件、scenes.json 清单和旁白脚本。用户可手动合成，或使用任意视频编辑器。

模式方式适用场景
MCP 编排HTML → playwright 截图 → edge-tts 音频 → ffmpeg 合成当 playwright、edge-tts 和 ffmpeg MCP 均已连接时使用
手动编写 HTML 场景文件，提供 ffmpeg 命令供用户运行MCP 不可用时使用
2. 选择故事结构

经典演示（30-60 秒）： 钩子（3 秒）-> 问题（5 秒）-> 神奇时刻（5 秒）-> 证明（15 秒）-> 社会认可（4 秒）-> 邀请（4 秒）

问题-解决方案（20-40 秒）： 之前（6 秒）-> 之后（6 秒）-> 如何实现（10 秒）-> 行动号召（4 秒）

15 秒预告片： 钩子（2 秒）-> 演示（8 秒）-> 标志（3 秒）-> 标语（2 秒）

3. 设计场景

若未提供截图：

  • 对于命令行/终端工具：生成带有终端风格深色背景、等宽字体和打字动画效果的 HTML 场景
  • 对于概念性演示：使用以文字为主的场景，并遵循配色语言和排版系统
  • 仅当产品是视觉型且描述不足以表达时，才向用户索要截图

每个场景只有一个主要焦点：

  • 标题场景：产品名称
  • 问题场景：痛点（红色、混乱）
  • 解决方案场景：结果（绿色、宽敞）
  • 功能场景：被突出显示的截图区域
  • 结尾场景：URL / 行动号召按钮
4. 撰写旁白
  • 每个场景只表达一个观点。如果需要用"和"连接，那就应该拆成两个场景。
  • 以动词开头。写"整理你的标签页"，而不是"提供标签页整理功能"。
  • 避免行话。写"你的标签页会自动整理"，而不是"基于 AI 的标签页分类"。
  • 善用对比。例如："24 个标签页。一次点击。5 个分组。"

输出产物

对于每个视频，在 demo-output/ 目录中生成以下文件：

  1. scenes/ —— 每个场景一个 HTML 文件（视口为 1920x1080）
  2. narration/ —— 每个场景一个 .txt 文件（作为 edge-tts 的输入）
  3. scenes.json —— 清单，按顺序列出场景及其时长和旁白文本
  4. build.sh —— 运行完整流水线的 shell 脚本：
    • 对每个 HTML 场景执行 playwright screenshot → frames/
    • 对每个旁白文件执行 edge-tts → audio/
    • 使用 ffmpeg 将帧按交叉淡化转场拼接 → output.mp4

若 MCP 不可用，仍需生成第 1-3 项。并在 build.sh 中包含 ffmpeg 命令，供用户手动运行。

场景设计系统

完整的设计系统请参阅 references/scene-design-system.md，其中包括配色语言、动画时序、排版、HTML 布局、语音选项和节奏指南。

质量检查清单

  • 视频包含音频流
  • 分辨率为 1920x1080
  • 场景之间没有黑帧
  • 前 3 秒能抓住注意力
  • 每个场景只有一个焦点
  • 结束卡片包含 URL 和 CTA

反模式

反模式修复方法
幻灯片式节奏：每个场景时长相同，缺乏节奏感变化时长：钩子 3 秒，证明 8 秒，CTA 4 秒
屏幕上的大段文字将信息移至旁白，简化画面
泛泛的旁白："This feature lets you..."使用具体数字和具体动词
没有故事线：只是罗列功能采用问题 -> 解决方案 -> 证明的结构
原始截图始终添加圆角、阴影和深色背景
使用 ease 或 linear 动画使用弹簧曲线：cubic-bezier(0.16, 1, 0.3, 1)

交叉引用

  • 相关：engineering/browser-automation —— 适用于基于 playwright 的浏览器工作流
  • 另见：framecraft —— 开源场景渲染流水线

评论

支持 Markdown