prod-by-claude 教學：讓Strudel音符與HyperFrames程式高亮同步

程式碼跟著音樂亮起，如果只靠猜拍點，很容易前後漂移。prod-by-claude 的做法，是使用 Strudel 產生的音符事件，讓視覺高亮對到真正發聲的位置。

Strudel 是用程式描述音樂節奏的工具，HyperFrames 則負責組成影片。因為畫面和聲音讀取同一套事件，這個專案的用途比一般「替音樂配一支片」更明確。

它適合想展示音樂程式、節奏編排與現場寫碼風格的人。如果手上只有一首現成 MP3，應改選處理音訊分析的流程。

prod-by-claude 原作者與官方公開了什麼？

Jake Moran 原貼提供 Skill 入口，HyperFrames 官方也分享了同一案例。

公開的 Skill要求提供 Strudel 程式或作曲需求，再安排小節、音軌進出與畫面。小節是音樂的時間單位，比單純用第幾秒描述編曲更容易對齊節奏。

它針對程式音樂的展示，不是任意影片或任意音訊的通用動畫模板。先確認輸入種類，可以省掉後面硬套工具的時間。

準備節奏時，也要決定畫面怎麼呈現

先用短段音樂測試，安排哪些音軌先出現、哪裡增加層次，再決定需要顯示哪幾行程式。程式全部塞滿畫面，觀眾反而看不到目前發生什麼。

製作前可以整理這張需求表：

公開流程包含離線錄製、建立事件資料與影片輸出。錄音後仍要檢查是否失真，不能只看程式執行成功。

可複製的程式音樂影片需求

先依原始 Skill 說明建立專案並準備 Strudel 程式，再讓載入該 Skill 的代理讀取下方需求。這和只上傳一首音樂檔的操作不同。

以下為本站依專案做法改寫的範本，非原作者逐字 prompt，尚未做成片實測。

使用 prod-by-claude，把［Strudel程式檔］做成程式音樂影片。
先說明音軌、節奏與小節編排，使用目前專案固定的工具版本。
畫面只顯示和當下聲音有關的程式片段。
高亮使用 Strudel 音符事件，不另外猜測拍點。
先輸出短段錄音與畫面，確認沒有失真且事件同步。
使用我擁有權利的音色與素材，列出任何外部採樣來源。
交付 MP4、音訊、事件資料與可修改專案。

檢查同步時，找能清楚辨識的聲音

選一個鼓點或明確的音符，確認它發聲時，對應的程式片段也同時亮起。再跳到片段後半，看看是否仍保持同步。

如果整條聲音都晚了一點，要檢查錄音與影片起點；如果愈後面愈偏，則要回頭看時間與速度設定。這兩種問題需要不同修法。

可以直接放入現成歌曲嗎？

這套 Skill 面向 Strudel 程式與音符事件。只有音樂檔而沒有程式時，應使用其他音樂影片或視覺化工作流。

Strudel 開源，代表採樣也可自由使用嗎？

軟體授權和音樂採樣的權利不同。內建合成音與外部錄音來源要分開確認，自己的作品也要保留音源紀錄。

先做一個音軌、幾個小節的同步片段，確認高亮準確，再增加編排與畫面變化。

延伸閱讀：Claude 動畫做完怎麼交付？HTML、SVG 與 MP4 的用途和檢查重點

延伸閱讀：2026 Claude Code 做影片 Skills 推薦：HyperFrames、Remotion 到剪輯工具怎麼選？