hyperframes motion-graphics 目錄塊映射指南復用優先的 Director 決策與 asset-fusion 合成實踐【免費下載鏈接】hyperframesWrite HTML. Render video. Built for agents.項目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes本指南圍繞 hyperframes 倉庫中skills/motion-graphics/catalog-map.md這一核心設計文檔展開系統講解 motion-graphics 工作流中分類 → 選塊 → 定制的復用優先策略Builder 的默認動作是組合現有 HF 目錄塊而非手寫動畫以及唯一真正屬于凈新增net-new能力的 asset-fusion真實素材幾何成為圖表合成邏輯。讀完本文你將掌握從意圖分類到shot-plan.json中blockcustomize字段落地的完整決策路徑并能按映射表在 180 個 registry blocks 與 217 個 catalog components 中快速鎖定可復用塊理解npx hyperframes add的安裝與就地定制機制以及 asset-fusion 的四步借與建borrow net-new方法論。復用優先默認組合目錄塊而非手寫motion-graphics skill 的 Director–Builder 雙 Agent 流水線見 agents/director.md 與 agents/builder.md明確約定Builder 的默認行為是組合現有 catalog 塊而不是逐幀手寫動畫。這個原則貫穿整個 skill 體系catalog-map.md就是 Director 在 Part 2設計階段完成選塊 定制決策的查表依據。復用動作本身只有一步安裝命令npx hyperframes add block該命令會把塊的源碼落到項目下的compositions/block.htmlregistry-item.json 中files[].target字段即聲明了這一落點例如data-chart的目標為compositions/data-chart.html。隨后 Builder就地定制customize in place直接編輯落在本地的 HTML。這里有一個關鍵的架構事實需要理解——絕大多數 block 把內容/數據烤進了自身的腳本里只有極少數暴露 CSS 變量形式的params因此復用的本質是add edit安裝 編輯而不是純變量注入。以registry/blocks/data-chart/registry-item.json為例它是少數暴露 CSS 變量參數的類型params: [ { key: --bg-color, label: Background, type: color, default: #faf9f6 }, { key: --text-color, label: Text color, type: color, default: #333333 } ]而更多 block如 north-korea-locked-down的registry-item.json中根本沒有params字段其素材如assets/korea-map.png與動畫邏輯直接內嵌在north-korea-locked-down.html中。這印證了文檔的判斷對大多數塊而言定制 打開本地 HTML 改數據數組、改文本、改調色板。只有兩類情況允許手寫hand-author(a) 沒有任何目錄塊覆蓋的空白gap(b) asset-fusion 的幾何即圖表綁定邏輯。決策產物shot-plan IR 中的 block 與 customizeDirector 在完成意圖分類classify intent → category后會在 shot-plan 中間表示IR中點名 block 及要定制的內容。這個 IR 的完整 schema 見 references/shot-plan-ir.md其頂層結構包含 envelope時長/幀率/畫布/風格/調色板/字體/節拍/導出格式、asset_needs[]素材需求空數組表示跳過素材搜索階段以及 build directive。catalog-map.md給出的核心用法是content中的blockcustomize字段content: { block: data-chart, customize: { data: [...], headline: …, palette: […] } }這與 shot-plan IR 的 invariants 一一對應只要命名了blockBuilder 就必須復用并定制它而不是手寫。例如類別charts的content形狀為{ type: bar|line|pie|race|pct, data[], labels[], headline, axes: bool }customize中的data數組即對應到 contenteditable="false">【免費下載鏈接】hyperframesWrite HTML. Render video. Built for agents.項目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes創作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考