vibe-video — AI 驱动的短视频生成器（代码 → MP4）
仅用代码将任意创意转化为短篇氛围视频。AI 会编写 Canvas/JS 动画，逐帧渲染，并通过 ffmpeg 合成 MP4（可选背景音乐）。
使用时机
在用户想要创建 15–60 秒短视频时使用此技能，适用场景包括：
- 知识讲解 — 诺贝尔事实、科学原理、心理学洞见
- 情感隐喻 — 依恋、焦虑、放手、记忆
- 产品推广 — 应用功能、品牌故事、上线公告
- 社会观察 — 行为模式、文化现象
- 抽象概念艺术 — 纯粹视觉诗篇、循环动画
工作流（5 步，请勿跳过）
第 1 步：澄清（最多提 3 个问题）
与用户确认以下内容：
- 时长 — 15秒 / 30秒 / 45秒 / 60秒（默认 30 秒）
- 宽高比 — 9:16（竖屏）/ 16:9（横屏）/ 1:1（正方形）（默认 9:16）
- 风格 — 参见
style-presets.md中的风格预设 - 主题与情感弧线 — 核心信息是什么？希望留下何种感受？
第 2 步：输出故事板
在编写任何代码之前，先生成故事板表格：
| 时间 | 视觉描述 | 字幕（≤20 字） | 视觉/音频提示 |
|----------|-------------------------|----------------|-----------------------------|
| 0–3 秒 | …… | …… | …… |
规则：
- 每个字幕保持 ≥2 秒；关键结论 ≥3 秒
- 前 3 秒内设置钩子（反直觉的事实 / 情感开场 / 核心痛点）
- 总镜头数 5–8 个，节奏慢→快→慢
- 视觉描述必须明确：形状、颜色、运动方向、镜头移动
等待用户确认后再继续。如果用户提出修改，只修改指定的镜头。如果超过 3 个镜头发生变化，则重新输出完整的故事板。
第 3 步：编写渲染代码
复制 assets/templates/animation.js + animation.html 作为起点——它们实现了图层系统、字幕淡入、基于种子的伪随机数背景以及 window.seek(t) 接口，并带有实时浏览器预览。编辑 STORYBOARD 和 draw*() 函数。
完整技术规范参见 rendering-guide.md。快速参考：
// 时间驱动动画——每个视觉元素都是 t 的纯函数
// （不使用 Math.random() 或 Date.now()——如有需要请使用基于种子的 PRNG，
// 确保任何帧都能以相同方式重新渲染，用于静止帧和断点恢复渲染）
function seek(t) {
// t = 当前时间（秒）
// 返回此帧的视觉状态
// 使用线性插值来处理位置/透明度/缩放
}
// 图层系统
// 图层 0：背景（渐变 / 粒子）
// 图层 1：主体
// 图层 2：动态装饰（光丝 / 粒子 / 线条）
// 图层 3：字幕叠加层
// 导出
// Playwright 无头 → 逐帧截图 → ffmpeg 合成
第 3.5 步：故事板 → H3 提示（预检）
在确认的故事板与第一行渲染代码之间插入此步骤。故事板是为人类编写的；H3 需要不同的语法。预先翻译是避免该流程中唯一不可修复错误的措施——AI 镜头可能会重绘你需要保持一致的角色的。
# 首先进行 lint：时间线间隙、H3 窗口（4–15 秒）、引擎分配、信用估算
node assets/templates/lint-storyboard.js examples/storyboard-sample.txt
然后，针对每个 H3 镜头，生成一个六段提示块，并将其摄像机编号和剪切标记复制回动画代码中，使两层同步移动。
完整流程、字段规则、检查清单和 lint 表： storyboard-to-h3.md
第 4 步：渲染与合成
先预览静止帧——检查一帧约需 1 秒，完整渲染需要几分钟：
# 在 t=0 / 4 / 10 秒进行快速检查（自动使用已安装的 Edge 或 Chrome）
node assets/templates/still.js --html animation.html --times 0,4,10
# 渲染帧（12–15fps 通常足够；平滑运动建议用 24–30）
node assets/templates/render-playwright.js --html animation.html --out ./frames --fps 30 --duration 15
# 合成（如果 ffmpeg 不在 PATH 中，请设置 FFMPEG=/path/to/ffmpeg）
bash assets/templates/composite.sh ./frames output.mp4 30
# 带背景音乐
bash assets/templates/composite.sh ./frames output.mp4 30 bgm.mp3
# 混合模式：Canvas 层叠加 AI 氛围底板（透明帧，无需抠像）
node assets/templates/render-playwright.js --html animation.html --out ./frames --fps 30 --duration 56 --alpha true
bash assets/templates/composite.sh --overlay plate.mp4 ./frames output.mp4 30
Windows 注意：如果 bash composite.sh 行为异常（Git Bash 垫片 / PATH 被截断），可直接从 Node 使用 child_process.spawn 调用 ffmpeg——参见 rendering-guide.md 中的故障排除部分。
旧版手动命令：
# 渲染帧
node render.js # 输出 frames/frame_0001.png ...
# 使用 ffmpeg 合成
ffmpeg -framerate 30 -i frames/frame_%04d.png -c:v libx264 -pix_fmt yuv420p output.mp4
# 带背景音乐
ffmpeg -framerate 30 -i frames/frame_%04d.png -i bgm.mp3 -c:v libx264 -c:a aac -pix_fmt yuv420p -shortest output.mp4
第 5 步：交付
交付内容：MP4 文件 + 故事板 + 源代码。文件大小目标：30 秒视频 <50MB。
技能中的文件
| 文件 | 用途 |
|---|---|
SKILL.md | 本文件——技能主定义 |
style-presets.md | 6 种视觉风格预设，含调色板和渲染提示 |
rendering-guide.md | 技术规范：Canvas 渲染、缓动、确定性规则、故障排除 |
metaphor-library.md | 抽象概念的视觉隐喻映射 |
caption-guide.md | 字幕排版、时序和语调规则 |
bgm-guide.md | 按视频类型选择的 BGM 指南 |
storyboard-to-h3.md | 预检：故事板 lint + H3 六段提示块（在编写代码之前） |
../assets/templates/lint-storyboard.js | 故事板 lint 工具：时间线间隙、H3 4–15 秒窗口、引擎分配、信用估算 |
../assets/templates/animation.js + animation.html | 即用型脚手架（图层、字幕、基于种子的背景、实时预览） |
../assets/templates/render-playwright.js | 帧渲染器：浏览器自动检测（Edge/Chrome/chromium）、画布同步截图 |
../assets/templates/still.js | 单帧静止图像渲染器，用于低成本检查 |
../assets/templates/composite.sh | ffmpeg 合成器（视频 / 视频+BGM，支持 FFMPEG= 覆盖） |
../assets/templates/render-template.js | Node-canvas 变体（无需浏览器；CSS/字体支持有限） |
示例提示
知识讲解
制作一个 30 秒 16:9 的知识视频，讲为什么切洋葱会流泪。
风格：科技蓝图。弧线：现象 → 机制 → 解决方案。
情感隐喻
制作一个 30 秒 9:16 的关于占有欲的情感视频。
风格：柔光。视觉隐喻：光丝缠绕 → 松开 → 萤火虫。
产品推广
制作一个 15 秒 9:16 的专注应用产品推广。
风格：极简线条。弧线：痛点 → 解决方案 → 结果。
许可证
MIT——参见 LICENSE 文件。免费用于个人和商业用途。