使用 JavaScript、Canvas 和 Web Audio 创建无素材程序化影片

procedural-film 的作用

procedural-film 是一种代理技能，可将主题制作成时长约 30 秒的竖屏影片。每部影片不会组装图像、视频或音频文件，而是使用原生 JavaScript 在 HTML canvas 上绘制所有画面，并通过 Web Audio API 合成音轨。

最终项目可以生成独立的 HTML 播放器和 MP4 导出文件。由于画面和声音都通过代码生成，影片发布时无需任何媒体资源。

仓库在 examples/butterfly-life 中包含一个完整的参考作品。该作品用 17 个镜头展现帝王蝶的生命周期，时长 32 秒、速度为 120 bpm，并使用 1080×1920 的竖屏画面和每秒 24 帧的帧率。

主要功能

• 程序化画面：每个像素都通过原生 JavaScript 和 Canvas 绘制。
• 合成音频：所有声音都通过 Web Audio 生成。
• 无资源交付：影片不依赖单独的媒体文件。
• 竖屏输出：参考工作流面向适合手机观看的 1080×1920 格式。
• 多种交付形式：流水线会创建独立 HTML 播放器和 MP4 导出文件。
• 基于代理的制作：并行子代理可以编写独立场景，多个评审轮次则负责审查镜头。
• 内置验证：示例在渲染前包含六项检查组成的质量门禁。

了解仓库结构

仓库分为可复用的技能和一个完整示例：

• skills/procedural-film/ 包含代理技能。
• skills/procedural-film/SKILL.md 定义完整的制作流水线。
• skills/procedural-film/foundation/ 包含会复制到每部新影片中的引擎和工具。
• skills/procedural-film/templates/ 包含四个规划文档模板。
• skills/procedural-film/reference/ 包含镜头类型索引、场景与音乐指南以及参考帧。
• examples/butterfly-life/ 包含帝王蝶影片的规划文档、源代码、工具、HTML 播放器和手机端 MP4。

前置条件

使用该技能前，请安装以下软件：

• Node.js 20 或更高版本
• ffmpeg，并确保其位于系统 PATH 中
• 用于 Playwright 的 Chromium
• 支持技能和并行子代理的代理，例如 Claude Code

确认 Node.js 和 ffmpeg 可用：

node --version
ffmpeg -version

安装 procedural-film 技能

1. 克隆仓库

git clone https://github.com/kuhnhomeuk-cell/procedural-film.git

2. 将技能链接到代理

在克隆仓库所在的目录中，在 Claude Code 的技能文件夹里创建符号链接：

ln -s "$PWD/procedural-film/skills/procedural-film" ~/.claude/skills/procedural-film

符号链接很有用，因为它能让完整示例继续与技能并列存放于 examples/butterfly-life/。如果你使用其他兼容代理，请将同一个技能目录链接到该代理的技能文件夹中。

3. 安装示例所需的工具依赖

npm install --prefix examples/butterfly-life/tools

4. 为 Playwright 安装 Chromium

npx --prefix examples/butterfly-life/tools playwright install chromium

从主题创建影片

链接技能后，让代理围绕某个主题创建程序化影片。例如：

制作一部关于蜜蜂生命周期的程序化影片。

代理会遵循 skills/procedural-film/SKILL.md 中的流水线。制作过程有意设置得较为充分：每个镜头由一个代理编写场景文件，文件可能超过 1,000 行，随后多个评审轮次会审查每个镜头。

请为长时间运行且资源消耗较高的代理会话做好准备。README 指出，完成一部影片可能会消耗代理使用计划中的很大一部分额度。

重新构建帝王蝶参考影片

重新构建随附示例，是验证 Node.js、ffmpeg、Playwright 和 Chromium 配置是否正确的最简单方法。

1. 运行验证门禁

node examples/butterfly-life/tools/check.cjs

check.cjs 脚本会运行项目的六项检查门禁。验证成功时，退出状态码为 0。

2. 渲染 MP4

node examples/butterfly-life/tools/render.cjs

渲染器会将生成的视频写入：

examples/butterfly-life/exports/butterfly-life.mp4

3. 重新构建独立 HTML 播放器

node examples/butterfly-life/tools/build.cjs

此命令会重新构建 HTML 播放器。现有的交互式播放器位于 examples/butterfly-life/dist/butterfly-life.html，可以下载或在浏览器中打开。

实用的开发工作流

1. 从明确定义的主题开始，并要求代理围绕该主题制作一部程序化影片。
2. 允许代理及并行子代理生成规划文档和场景文件。
3. 让批评流程审查镜头，而不是在初次生成后就停止。
4. 在渲染前运行项目的验证检查。
5. 解决报告的问题，然后重复运行检查，直到检查成功退出。
6. 渲染 MP4，并重新构建自包含的 HTML 播放器。
7. 在浏览器中打开播放器，审查最终的竖屏影片。

高级技巧

将参考影片作为制作目标

学习预期的项目布局和输出质量时，请研究 examples/butterfly-life。其中的规划文档、源代码、工具、渲染后的播放器以及导出的手机视频，展示了该技能旨在生成的成果。

更改风格前先阅读辅助参考资料

reference/ 目录包含镜头类型索引、场景指导、音乐指导和视觉参考帧。这些材料为代理流程所做的决策提供背景信息。

每次最终渲染前都进行验证

在运行 render.cjs 前，先运行 check.cjs。将六项检查全部通过所返回的成功退出代码视为生成最终 MP4 的前提。

合理安排时间和代理使用量

该流程更重视详细的场景生成和反复批评，而不是快速输出。由于单个镜头文件可能包含超过 1,000 行代码，不要假设该流程会像简短的单次提示生成任务一样迅速完成。

保持技能与仓库的链接，而不是复制技能

符号链接可以让技能保持与克隆的仓库连接，并保留对蝴蝶示例的便捷访问。这样也能避免创建一个脱离仓库布局的独立复制安装。

结语

procedural-film 提供了一种由代理驱动的方式，可以完全使用 JavaScript 绘图和合成音频来制作竖屏影片。链接技能并安装所需工具后，你可以按主题请求制作影片，验证生成的场景，导出 MP4，并构建一个无需捆绑传统媒体资源的独立 HTML 播放器。

该项目采用 MIT 许可证发布。其视觉和编辑方式以 Kevin Ngo 的 果蝇的一生 为范本，相关细节记录在 examples/butterfly-life/docs/reference-analysis.md 中。