1实现原理 · 为什么它能做到

画面与声音同源：先把 Strudel 曲目离线渲染成音频，再把每个音符事件映射回产出它的代码 token，视频由这些事件驱动——所以每次高亮都落在它自己的音符上，而不是后期对轨。

skills/prod-by-claude/SKILL.md

The music is rendered offline from the code, and the video is driven by Strudel's own note events, so every highlight lands on its note.

这里在做什么：把「代码即画面」做成数据问题——音画同源，冲突只能来自录音本身，不可能来自对齐。

录音链路：record.mjs 在 127.0.0.1 上起一个只服务 recorder.html 与 node_modules 的静态服务，用静音无头 Chrome 逐 part 单独求值，导出每个音符的时间、所属 part、取值，以及产出它的代码字符区间，然后离线渲整轨 mix（含可选 ending）与 ._scope() part 的 solo stem。

skills/prod-by-claude/scripts/record.mjs

// Serves recorder.html (the pinned @strudel/web build from node_modules) on 127.0.0.1, opens it in a … // muted headless Chrome, and for the track named in <project>/video.json: … // 1. evaluates every labelled part on its own and exports each note event with its time, part,

这里在做什么：headless 录音比录屏稳——不依赖实时播放、不抖动，还顺手把事件表与代码坐标一起导出（locs 供高亮用）。

离线一致性的关键：recorder.html 只从本机 node_modules 载入钉版 @strudel/web，不从 strudel.cc 取任何东西；示例轨道是纯合成器无采样，所以首跑不需要额外的采样网络请求。

skills/prod-by-claude/scripts/recorder.html

nothing is fetched from strudel.cc. Samples are only fetched if the track itself calls samples(...).

这里在做什么：把「录音环境」钉死，避免上游网页编辑器改版导致渲染结果漂移。

时间轴不是手写的：build-data.mjs 把 Strudel cycle 换算成视频秒，生成 window.SQ（token 高亮、段落 power-on、widget、能量曲线），把总时长写回 index.html 的 data-duration、把音频起点写成 pre。

skills/prod-by-claude/scripts/build-data.mjs

const sec = (c) => +(PRE + c * SPC).toFixed(4); // strudel cycle -> video seconds … fs.writeFileSync(path.join(project, "data/events.js"), "window.SQ = " + JSON.stringify(out) + ";\n"); … // stamp the length into index.html; the audio stays the length of the recording

这里在做什么：改曲不必改时间轴——任何「bars/builds/drops/themes」的编辑都只是重算一次数据。

镜头也默认自动规划：不给 camera 就按段落 power-on 取景、build 段推近 all( 块、drop 后揭示新段落、结尾拉远到 sign-off；要覆盖才在 video.json 里写 camera 行。

skills/prod-by-claude/references/video.md

Leave `camera` out to get the automatic plan: frame each part as it powers on, push in on the `all(` block during builds, reveal the newest part after a drop, pull wide after the last drop, and zoom to the sign-off.

这里在做什么：模板自带的 video.json 已对齐样例轨道（SKILL.md：'The template already matches the example track, so skip this step when using it.'），首跑可零改动。

录音质量是门禁而非事后补救：录制按每 4 小节打印电平并告警，要求反复录到 drop 峰值 ≤ -2 dBFS 且无削波；改曲就退回步骤 5-7 重录，改 video.json 只回步骤 6-7。

skills/prod-by-claude/SKILL.md

Fix the track and record again until the drops peak at or below -2 dBFS with no clipped samples.

这里在做什么：把「重录很贵」显式化（32 小节约 5-7 分钟），逼 agent 先量后修，而不是靠渲染完再看。

2核心能力

01Strudel 曲目离线录音：整轨 mix + 每个 ._scope() part 的 solo stem + 含代码坐标的音符事件表

02「代码即画面」的成片语法：token 按音符点亮（outline/ononset 反闪/稀疏 ring/拖尾）、段落随首音 bloom、真实主题切换、build 腐蚀代码、drop 涂鸦 ASCII 风暴、圆形解码回编辑器、typed sign-off

03自动相机计划（可被 video.json 的 camera 行覆盖），镜头由小节而非手写关键帧驱动

041080×1080 @30fps MP4 输出，时长由 bars 与 BPM 推导（pre + bars×240/bpm + 4.6 秒）

05一键脚手架：拷贝模板 + 轨道 + 工具脚本，纯文件操作无依赖无网络

06可执行的验证清单：build-data 直接给出该看的 snapshot 时刻，并强制 --describe false（不上传帧）

3外部依赖

Kind	Dependency / Endpoint
cli	HyperFrames CLI（钉版 0.8.70，经 npx --yes 调用；check/snapshot/render/cloud render）
package	@strudel/web 1.3.0（AGPL-3.0，从 npm 装，不进仓库）
package	puppeteer-core 25.12.0 + @puppeteer/browsers 3.2.3 与 OFL 字体（@fontsource/jetbrains-mono、rubik-mono-one）
package	Chrome for Testing 149.0.7827.22（录音用；可用 CHROME=<path> 覆盖）
network	成片构图在载入时从 jsDelivr 取 GSAP 3.14.2（故渲染并非完全离线）
api	HyperFrames 云渲染（可选，消耗用户账户额度，须用户显式同意才可走）
network	轨道自身若调用 samples(...)，录音时会去轨道写明的采样 URL 取音频（示例轨道无采样）

4管控建议与判定依据

建议配套管控措施

面向 Agent

分级或逐次授权，建议在沙箱运行

面向管理者

审批流程、可回滚、全程审计

判定依据（文件路径与关键语句摘要）

scripts/: 执行本地脚本或命令: node scripts/new-project.mjs <dir>（纯本地文件拷贝：模板 + 轨道 + 4 个 tools 文件）
网络端点: 声明外部网络访问: npm install（npm registry；依赖版本由 tools/package.json 钉死）
本地工作目录: 文件读写与工件输出: 仅在 <project-dir> 内：data/events.json、data/events.js、assets/bgm.wav、assets/st

审计说明： 。判级对象＝skill 自身目录（SKILL.md + scripts/ 四个文件 + assets/template + 示例轨道 + references×3）。自身脚本零外发：record.mjs 只绑 127.0.0.1 的静态服务并驱动本机无头 Chrome，recorder.html 只从 node_modules 载 @strudel/web，build-data.mjs / new-project.mjs 纯本地读写；目录内无任何凭证读取（SKILL.md 明写 'No credentials.'，process.env 只取 CHROME 路径），无第三方数据外发。联网只有两类：① 官方源的固定版本安装——npm install（npm registry，package.json 钉死）与 Chrome for Testing 149.0.7827.22（官方 @puppeteer/browsers 安装器，约 150MB，取自 Google 存储）；② 产物期引用——构图载入时从 cdn.jsdelivr.net 取 GSAP 3.14.2，按批4 口径（产物期外链不判级）与同 repo 先例（hyperframes-animation / hyperframes-core 均为此类判蓝）不据此抬档。云渲染消耗账户额度属用户显式同意的可选路径（已写进 risks，不判级）。未见 TLS 降级、绕过检测、批量采集或本地任意代码执行面。

5第二遍独立确认

[ok] 『No credentials.』声明是否成立 — SKILL.md Rights/Side effects 段明写 'No credentials.'；目录内 process.env 命中只有 record.mjs 的 CHROME 与 CFG 类入参，未见 key/token/cookie/keychain 读取，也无 .env 解析。
[discrepancy] 『录音离线』是否等于全流程离线 — 录音段确实离线（127.0.0.1 静态服务 + 本地无头 Chrome + node_modules 里的 @strudel/web；recorder.html 注释明写 nothing is fetched from strudel.cc），但建仓（npm install、Chrome for Testing 下载）与渲染期构图载入 GSAP（cdn.jsdelivr.net）都要联网。SKILL.md 自己把这些写进 Side effects，故非隐瞒；只是『离线』的适用范围仅限录音。据此把档位定为蓝（官方源固定版本安装 + 产物期 CDN，与同 repo 先例 hyperframes-animation / hyperframes-core 同口径）。
[ok] 高亮是否真由音符事件驱动（而非后期对齐） — 链路可读通：record.mjs 导出每音符的 locs（代码字符区间）→ build-data.mjs 用 byLoc 汇总成 token 时间表与段落/widget 时间 → 写成 window.SQ → 模板 app.js 消费。音画同源成立，不是后期对轨。
[discrepancy] 是否误把 ffmpeg 列为依赖 — 本 skill 目录内不调用 ffmpeg：录音与 mix 走 Strudel 的离线渲染器，编码由 HyperFrames CLI 负责。故 external_deps 不列 ffmpeg（同批姊妹 skill 有列，本 skill 没有）。
[ok] 大写 S 标签的拒绝逻辑是否真在代码里 — record.mjs 实有 'const soloing = labels.filter((l) => l.length > 1 && l.startsWith("S"));' 并在命中时 fail 提示改名——不是文档空话。
[unlocatable] 录制耗时与云渲染额度的具体数值 — 『约 5-7 分钟/32 小节』与云渲染『消耗多少额度』只有文档声明，源码内无可复现依据；本次为只读侦查，未运行录音或渲染，故不作为已核事实使用。

6结论

音画同源：画面由 Strudel 的音符事件驱动，高亮与音乐不可能错位

时间轴数据化：cycle→秒换算与相机计划都在 build-data.mjs 里算，改曲只需重录、改配置只需重算

录音不依赖实时播放：127.0.0.1 静态服务 + 无头静音 Chrome，可重复、不外放、不上传

副作用写得诚实且完整：网络（npm/Chrome/GSAP）、成本（云渲染扣额度）、snapshot 可能上传帧（要求 --describe false）都单列

质量闭环具体：录到 drop ≤ -2 dBFS 且无削波，再走 check/snapshot、按时刻看帧

适合： 适合手里有一条 Strudel 现场编程曲目（或愿意让 agent 先按 references/composing.md 作曲），想要一条「代码自己演奏」的 1080×1080 视频的用户；也适合把这种视频当作品集/社媒内容、需要可重复重建（模板 + 数据 + 录制脚本都在项目里）的场景。macOS/Linux 上按文档走即可，首跑用自带示例轨道可零改动验证链路。

不适合： 不适合：① 非 Strudel 的音频/DAW 工程——skill 明写不管（其他音频或 DAW 项目请走 HyperFrames 的音乐工作流）；② 没有代码要展示的视觉化需求（对既有音频文件做可视化不在范围）；③ 不想装 Node 22/npm、也不想下载 Chrome 的纯离线环境（录音链路与渲染链路都需要本地 Chrome 与 npm 包）；④ 不愿承担云渲染额度或不愿联网渲染的用户（应只用本地 render，并接受 GSAP 需联网这一事实）。

Install Agent-Ready

① Verified Mirror 2026-09-28

Option A · Direct DownloadDownload prod-by-claude.tar.gz

sha256: 90eabb744789abe6…

Option B · Copy Guide for Agent

install.json

agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。

② Upstream GitHub

GitHub Repo ↗

Pinned to commit ba7a0bb6d3.