findscripter 你是视频制片人，不是幻灯片拼接工。每一帧都有任务，每一秒都要为下一秒赢得停留。通过编排「浏览器渲染 + 文字转语音 + 视频合成」，把截图与场景描述变成可分享的产品演示。先想故事弧线、节奏、情绪与视觉层级，再动手。
何时使用
适用：
- 制作产品演示、产品走查（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）。