prod-by-claude

prod-by-claude

将 Strudel 曲目转为实时编程视频。音乐根据代码离线渲染，视频由 Strudel 自身的音符事件驱动，因此每个高亮都会与对应音符同步。

适用场景

• 用户想要 Strudel 代码演奏的视频，例如：“把这首 Strudel 曲目制作成视频”“显示代码亮起”“实时编程视频”，或 Agent 为用户创作的曲目。
• 不适用于其他音频或 DAW 项目、对谈视频，或没有 Strudel 代码的现有音频文件可视化（这类情况请使用 HyperFrames 音乐工作流）。

输入

• 一首 Strudel 曲目（.strudel.js），或一份创作要求。请按照 references/composing.md 进行创作。如果没有曲目，请从 assets/example/track.strudel.js 开始（仅合成器，不含采样）。
• 编曲安排：小节数，以及哪些小节是铺垫段和高潮段。

工具和依赖项

• Node 22 或更高版本、npm，以及固定使用 [email protected] 的 HyperFrames CLI（通过 npx --yes 运行）。
• tools/package.json 固定了其余所有依赖项：@strudel/web 1.3.0（AGPL-3.0，从 npm 安装，不随项目提供）、puppeteer-core 25.12.0、@puppeteer/browsers 3.2.3，以及 OFL 字体 @fontsource/jetbrains-mono 5.3.0 和 @fontsource/rubik-mono-one 5.3.0。
• 用于录制的 Chrome for Testing 149.0.7827.22，或通过 CHROME=<path> 指定的任意 Chrome。
• 无需凭据。

工作流

1. 创建项目（直接复制文件）： node <skill>/scripts/new-project.mjs <project-dir> [track.strudel.js]
2. 编辑 <project-dir>/video.json：bars、builds、drops、themes、storm 部分、signoff（参见 references/video.md、references/themes.md）。 模板已与示例曲目匹配，使用模板时可跳过此步骤。
3. 在 <project-dir>/tools 中安装固定版本的工具：npm install
4. 在 <project-dir>/tools 中，如果未设置 CHROME，则获取 Chrome for Testing： npx --yes @puppeteer/[email protected] install [email protected] --path .chrome
5. 在 <project-dir>/tools 中录制：node record.mjs ..。32 小节大约需要 5-7 分钟（设置 10 分钟超时），每 4 小节会打印一次音量，并在发生削波时发出警告。修正曲目并重新录制，直到高潮段峰值不高于 -2 dBFS，且没有削波样本。
6. 在 <project-dir>/tools 中构建视频数据：node build-data.mjs ..。该命令会打印第 7 步所需的快照命令。
7. 在 <project-dir> 中运行 npx --yes [email protected] check .，然后运行打印出的快照命令，并检查每一帧（检查要点见 references/video.md）。
8. 用户要求制作视频时，在 <project-dir> 中本地渲染： npx --yes [email protected] render . -o renders/video.mp4 HyperFrames 云端渲染（npx --yes [email protected] cloud render .）会消耗用户账户中的点数：只有在用户明确同意后才可使用。

如果曲目发生变化，请重复步骤 5-7。如果 video.json 发生变化，请重复步骤 6-7。

输出

• assets/bgm.wav（混音）、assets/stem-<part>.wav（示波器部分）、data/events.json（包含每个音符及其代码位置）、data/events.js（编曲读取的内容）。
• renders/video.mp4，1080×1080，30 fps；如果包含收尾画面，时长约为 pre + bars × 240 / bpm + 4.6 秒。

副作用

• 文件：仅在 <project-dir> 内写入。build-data.mjs 会重写 index.html 中的 data-duration 和音频 data-start 属性。
• 网络：npm install（npm 注册表）、Chrome for Testing 下载（来自 Google 存储空间，约 150 MB），以及合成加载时从 cdn.jsdelivr.net 获取 GSAP。除非传入 --describe false，否则 snapshot 会将帧上传到托管的字幕模型，因此务必传入该参数。录制仅在 127.0.0.1 上运行，不会获取任何内容，除非曲目本身加载采样（此时会从曲目命名的采样 URL 获取）。
• 音频：录制在无头模式下静音进行；不会外放声音。
• 费用：无，除非用户批准云端渲染。

验证

• record.mjs 以 0 退出，列出每个部分，且报告没有削波。
• check 通过，错误数为 0。代码行超出画面下方的 canvas_overflow 信息提示属于预期情况。
• 在快照中：第 1 行在 0.6 s 开始输入；第一个部分在 pre 后绽放并高亮；每次 drop 中都有涂鸦；每次 drop 后都有解码；结尾处有收尾画面。
• 在渲染中：第一个声音在 pre 秒时响起，视频以黑屏结束。

权利

用 Strudel 编写的音乐归其作者所有；Strudel 的 AGPL 适用于软件，而非曲目。内置合成器无需授权。曲目加载的采样属于他人的录音：仅使用用户拥有或已获授权的声音。