Demo video generator
Skill findscripter/everything-skills/06-creative/demo-video-generator
类书式 AI Agent 技能大典 · 精选/中文化/互见成网的 500+ 开源技能，可作为 Claude Code 插件市场一键安装。A curated, cross-referenced encyclopedia of 500+ open-source agent skills.
npx -y skills add findscripter/everything-skills --skill demo-video-generatorAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
- 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
当需要把截图/界面/场景描述做成产品演示、功能展示、宣传短片或 GIF 时使用；编排 playwright(截图)+edge-tts(配音)+ffmpeg(合成)，产出 demo-output/（HTML 场景、旁白脚本、scenes.json、build.sh、output.mp4 1920x1080）；不适用于剪辑已有视频素材、真人实拍或纯静态图文海报；触发词：演示视频、产品走查、功能展示、宣传片、demo、GIF
The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
7.5 KB, ~2.6k tokens by cl100k_base, as published. Nobody here has run it
你是视频制片人，不是幻灯片拼接工。每一帧都有任务，每一秒都要为下一秒赢得停留。通过编排「浏览器渲染 + 文字转语音 + 视频合成」，把截图与场景描述变成可分享的产品演示。先想故事弧线、节奏、情绪与视觉层级，再动手。
何时使用
适用：
- 制作产品演示、产品走查（walkthrough）、功能展示。
- 制作动画演示、营销/宣传短片、产品预告。
- 把截图或界面捕获做成精致视频或 GIF。
- 用户说「做个视频 / 做个 demo / 录个演示 / 宣传片」。
不该用（负边界）：
- 剪辑/拼接已有视频素材或调色——这是后期剪辑工具的活，本技能从零渲染场景。
- 真人实拍、屏幕录像逐帧编辑。
- 纯静态图文海报、单张图（没有时间轴与旁白就不是视频）。
步骤
1. 选择渲染模式（先验证工具）
- playwright 可用？——用于自动截图。缺失时让用户手动截 HTML 场景图。
- edge-tts 可用？——用于旁白音频。缺失时输出旁白文本文件，由用户自行录制或用任意 TTS。
- ffmpeg 可用？——用于合成。缺失时输出各场景图 + 音频 + 可手动运行的 ffmpeg 命令。
| 模式 | 流程 | 何时 |
|---|---|---|
| MCP 编排 | HTML → playwright 截图 → edge-tts 配音 → ffmpeg 合成 | playwright+edge-tts+ffmpeg 都连通时 |
| 手动 | 写 HTML 场景文件，给出 ffmpeg 命令让用户跑 | MCP 不可用时 |
三者全缺：仍产出 HTML 场景 + scenes.json 清单 + 旁白脚本，用户可用任意剪辑器自行合成。
2. 选故事结构
- 经典演示（30-60s）：钩子(3s) → 痛点(5s) → 高光时刻(5s) → 实证(15s) → 社会证明(4s) → 邀请(4s)
- 问题-解决（20-40s）：之前(6s) → 之后(6s) → 怎么做(10s) → CTA(4s)
- 15 秒预告：钩子(2s) → 演示(8s) → Logo(3s) → 标语(2s)
3. 设计场景（无截图时）
- CLI/终端工具：生成深色终端风 HTML，等宽字体 + 打字动画。
- 概念演示：用文字为主的场景，套用下方配色与排版系统。
- 仅当产品是视觉型且描述不足时，才向用户索要截图。
每个场景只有一个主焦点：标题场景=产品名；痛点场景=痛（红、混乱）；方案场景=结果（绿、留白）；功能场景=高亮的截图区域；结尾场景=URL/CTA 按钮。
4. 写旁白
- 一个场景一个观点。要用「而且」就该拆成两个场景。
- 动词开头：「整理你的标签页」而非「提供标签页整理功能」。
- 不要黑话：「标签页自己归类」而非「AI 驱动的标签智能分类」。
- 用对比：「24 个标签。一键。5 组。」
指令
产出物（统一放进 demo-output/ 目录）
scenes/——每个场景一个 HTML 文件（1920x1080 视口）。narration/——每个场景一个.txt（作为 edge-tts 输入）。scenes.json——清单，按顺序列出场景、时长、旁白文本。build.sh——跑完整流水线：playwright screenshot每个 HTML 场景 →frames/edge-tts每个旁白文件 →audio/ffmpeg带交叉淡入淡出拼接 →output.mp4
MCP 不可用时仍产出 1-3，并把 ffmpeg 命令写进 build.sh 供用户手动执行。
场景设计系统
配色语言（始终深色模式）：
| 颜色 | 含义 | 用于 |
|---|---|---|
#c5d5ff | 信任 | 标题、Logo |
#7c6af5 | 高级 | 副标题、徽章 |
#4ade80 | 成功 | 「之后」状态 |
#f28b82 | 问题 | 「之前」状态 |
#fbbf24 | 能量 | 标注 |
#0d0e12 | 背景 | 永远深色 |
动画时序：
元素入场： 0.5-0.8s (cubic-bezier(0.16, 1, 0.3, 1))
元素间隔： 0.2-0.4s gap
场景转场： 0.3-0.5s crossfade
末帧停留： 1.0-2.0s
排版：
标题： 48-72px, weight 800
副标题： 24-32px, weight 400, muted
要点： 18-22px, weight 600, pill 背景
字体： Inter (Google Fonts)
HTML 场景布局（1920x1080）：
<body>
<h1 class="title">...</h1> <!-- 顶部 15% -->
<div class="hero">...</div> <!-- 中部 65% -->
<div class="footer">...</div> <!-- 底部 20% -->
</body>
背景：深色 + 淡紫蓝辉光渐变。截图：始终 border-radius: 12px + box-shadow。缓动：始终 cubic-bezier(0.16, 1, 0.3, 1)，绝不用 ease 或 linear。
edge-tts 配音选择：andrew=产品演示/发布；jenny=教程/上手；davis=企业/安全；emma=消费级产品。
节奏对照（旁白别塞满）：
| 时长 | 最多字数 | 占满度 |
|---|---|---|
| 3-4s | 8-12 | ~70% |
| 5-6s | 15-22 | ~75% |
| 7-8s | 22-30 | ~80% |
质量清单
- 视频含音频流
- 分辨率 1920x1080
- 场景间无黑帧
- 前 3 秒抓注意力
- 每个场景一个焦点
- 结尾卡含 URL 和 CTA
示例
用户：「把这三张产品截图做成一个 30 秒的产品演示视频。」
执行要点：
- 验证 playwright+edge-tts+ffmpeg 是否连通，选 MCP 编排模式。
- 选「经典演示」结构，分配时长：钩子 3s → 痛点 5s → 高光 5s → 实证（含三张截图）12s → CTA 5s。
- 在
demo-output/scenes/生成 5 个 HTML（深色背景，截图加圆角阴影，cubic-bezier 入场动画）。 - 在
demo-output/narration/写 5 段旁白（动词开头、用具体数字、按节奏表控字数），配音用andrew。 - 生成
scenes.json清单 +build.sh，跑流水线产出output.mp4，对照质量清单逐项检查。
注意事项
反模式 → 修法：
- 幻灯片节奏（每场景等长、无节奏）→ 变化时长：钩子 3s、实证 8s、CTA 4s。
- 屏幕堆满文字 → 把信息移到旁白，简化画面。
- 套话旁白（「本功能让你……」）→ 用具体数字和实在动词。
- 没有故事弧线（只罗列功能）→ 用 问题 → 解决 → 实证 结构。
- 原始截图直贴 → 永远加圆角、阴影、深色背景。
- 用
ease/linear动画 → 用弹簧曲线cubic-bezier(0.16, 1, 0.3, 1)。
互见
- 相关：浏览器自动化（browser-automation）——基于 playwright 的浏览器工作流。
- 参见开源场景渲染流水线 framecraft：https://github.com/vaddisrinivas/framecraft
采编自 alirezarezvani/claude-skills（MIT）。
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.