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），仅供参考