2026/9/11 20:53:54
FEATURED · 精选文章 
HyperFrames Frame Worker 角色实战faceless-explainer 的 invented 元素设计与 focal/roles 语义【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes本文深入解读 HyperFrames 开源仓库中faceless-explainer工作流的帧工人frame worker增量角色文档skills/faceless-explainer/sub-agents/frame-worker.md。它规定了无脸解说视频中每一帧的视觉元素如何被发明出来、如何按focal:/roles:语义分配职责、以及用户提供的真实图片/视频片段如何接入帧合成。读完本文你将掌握 frame worker 的职责边界、[video]片段的正确挂载方式、以及core 契约 工作流 delta双文档角色拼接机制背后的实现原理可直接用于理解并驱动多 worker 并行的视频帧构建流程。背景为什么需要一份增量角色文档在 HyperFrames 的多工作流体系里每个叙事型视频工作流faceless-explainer、product-launch-video、pr-to-video 等都共享同一套帧构建的硬规则同时各自持有只属于自己的约定。仓库用双文档拆分来解决这个问题core 契约skills/hyperframes-core/references/frame-worker-core.md——对所有帧工人通用的结构法则子合成形状、时间轴注册、clip 属性、仅变换transform-only动画、确定性渲染、根节点尺寸等增量文档delta本主题文档——只承载 faceless-explainer 工作流特有的语义focal:/roles:的解读、invented发明式视觉设计约束、用户真实媒体的接入方式。delta 文档开头就声明了一条关键规则The shared law is the core contract above公共法则是上面的核心契约——packet 构建器会把../hyperframes-core/references/frame-worker-core.md前置拼接到本文件前作为_role.md请把两份文档当作一个角色来读。 这意味着当你作为 frame worker 被派发时收到的角色文件是拼接产物delta 只负责本工作流特有内容。文档同时明确划清了边界想在这里添加通用的 GSAP / 时间轴规则放错了地方——那属于 core 契约或hyperframes-core。这种一份通用 一份增量的设计在实现层有完整对应。见下文角色拼接的源码实现。派发模型N-up 并行每个 worker 只拿一个 packetdelta 文档明确了 faceless-explainer 场景下的派发方式N-up 并行运行每个帧工人只负责一个帧you run N-up, one frame each你的派发dispatch恰好携带一个 packet。这与 skills/faceless-explainer/SKILL.md Step 5 的描述一致Dispatch one sub-agent per frame, in parallel if possible每个 worker 得到_role.mdcore delta 拼接后的完整角色该帧专属的 packet.hyperframes/frame-packets/frame_id.md派发上下文PROJECT_DIR、frame_id、画布尺寸、字幕状态与 keep-out 区域、是否有已确认的草图。worker 只能读取自己的 packet 和frame.md绝不能打开共享的STORYBOARD.mdpacket 已内联了上游为该帧选好的所有内容也绝不能修改STORYBOARD.md。每个 worker 只写自己的compositions/frames/NN-*.html。派发的通用契约可参考 skills/hyperframes-core/references/subagent-dispatch.md完成的判定标准始终是磁盘上出现了预期产物而非 harness 的通知。focal:/roles:的语义你在设计发明的元素在无脸解说工作流中视频里没有可拍摄的网站或实拍素材因此帧里的视觉元素全部是下游发明出来的。delta 文档对 packet 中的两个字段给出了本工作流的解读focal:—— 哪个发明出来的元素是这一帧的主角heroroles:—— 每个发明元素扮演什么角色foreground subject前景主体/background全出血背景/supporting辅助。文档特别强调Because the explainer isfaceless, these are elements you designa hero word, a diagram node, a chart series, a coined-term card, not captured assets. 也就是说focal/roles命名的是你亲手设计的元素——一个英雄词汇、一个图表节点、一组数据可视化序列、一张造词卡片——而不是从素材库挑选的资产。这与 skills/faceless-explainer/references/visual-design.md 中 Step 4 的写法一脉相承focal:命名这个节拍的 INVENTED 主角元素roles:按foreground subject/background/supporting为每个元素分配职责并且keep them few and load-bearing少而精、承载叙事。唯一的真实媒体是用户提供的图片public/basename — description。若该图片是用户提供的.mp4片段packet 中会带有[video]标记。按roles设计每个元素无脸解说约束下的设计规范delta 文档给出了一套可执行的逐角色设计约束角色设计要求foreground subject主角眼睛首先落下的东西。尊重 83% keep-out 区域画布底部约 17% 预留给卡拉 OK 字幕条把文字排在它周围而不是压在它上面background背景全出血full-bleed且调暗约 30%–50%保证前景内容可读supporting辅助标签、次级形状、环境层——保持安静不抢戏这些元素都是发明的你从frame.md的原子调色板、字体台阶、组件、构图规则出发用 SVG / CSS / 排版把它们构建出来build the idea the narrative describes——实现叙事所描述的那个想法绝不退回到通用装饰性散景或库存填充物stock filler。这也是 skills/faceless-explainer/references/visual-design.md 反复强调的Inventing the visual三分类排版/动能文字、抽象图形、图表/数据可视化且发明的英雄元素应占据画布的 40%–60%。用户真实媒体的接入[video]片段与img这是 delta 文档中技术细节最密集的部分。如果用户在roles:/focal:中命名了一张真实图片frame worker 必须按以下规则放置[video]候选.mp4渲染为**静音muted**的video classclip并携带data-start/data-duration/data-track-index三个属性依据核心 clip 契约必须是帧根节点的直接子元素a direct child of the frame root——绝不能嵌套进另一个带时间轴的元素里否则渲染器会把它冻结the renderer freezes it未打[video]标记的图片→ 普通img。对照 core 契约skills/hyperframes-core/references/frame-worker-core.md可以确认这套 clip 契约的完整形态每个classclip元素都必须有data-start/data-duration/data-track-index帧的全出血背景色块 / 渐变 / 网格必须用独立的、全时长的classclip背景层承载而不能画在#root上——因为合成时帧根节点会被 clip 门控到自己的场景窗口画在根上的背景不可靠深色内容可能落到黑色的宿主body上而不可见。一个符合契约的示意写法展示结构具体数值以 packet 为准template div idroot>const CONFIG { animationDir: resolve(SKILL_DIR, ../hyperframes-animation), corePath: resolve(SKILL_DIR, ../hyperframes-core/references/frame-worker-core.md), deltaPath: resolve(SKILL_DIR, sub-agents/frame-worker.md), };真正的逻辑全部委托给共享实现 skills/hyperframes-core/scripts/lib/frame-packets-core.mjs。其中角色拼接的核心函数buildRolePayloadexport function buildRolePayload({ corePath, deltaPath, outDir }) { const core readFileSync(corePath, utf8).trim(); const delta readFileSync(deltaPath, utf8).trim(); const role ${core}\n\n---\n\n${delta}\n; // ...写入 .hyperframes/frame-packets/_role.md }可以看到_role.md确实是两份文档的逐字拼接core 在前、delta 在后中间用---分隔没有任何手动的二次维护——read the two as one role不是口头约定而是构建器的硬行为。同一文件中buildFramePackets还完成了 packet 的生成用正则/^## Frame\s([^\n])$/gm从STORYBOARD.md切分每个帧块frameId从帧块的src字段推导出文件名如03-feature并把每帧的## Frame N块、blueprint:指向的蓝图正文## Selected blueprint: id、以及被引用的每个运动规则配方## Selected motion rule: id内联进 packet每个 packet 受maxPacketBytes 48_000字节上限约束超限直接抛错。这正是 delta 文档所说packet 内联了规则配方你要复现其机制绝不靠名字猜的实现基础。与 core 契约的分工什么该进 deltadelta 文档用一句明确的话划出了编辑边界Tempted to add a generic GSAP / timeline rule here? Wrong home——它属于 core 契约或hyperframes-core。 这份分工原则同样适用于阅读时的归属判断进 core适用于所有帧工人的规则——模板封装、时间轴注册、#root样式、clip 属性、仅变换动画、确定性、根节点尺寸、字体font-face规则、keep-out、退出动画禁令等进 delta工作流特有语义——本工作流focal/roles如何解读、invented 视觉约束、用户真实媒体的接入方式。在派发时core 提供的完整自检清单skills/hyperframes-core/references/frame-worker-core.md对 delta 同样生效其中有几条与 delta 内容直接咬合、极易踩坑值得牢记模板运输template transport所有style与script包括 GSAP 加载都必须位于template内部因为运行时只克隆模板内容#root样式规则帧根节点用#root选择器造型绝不用data-composition-id元素上的 class——渲染时根上的 class 会被作用域化到无法匹配的后代选择器导致整帧无样式Studio 预览仍然正常务必相信规则而非预览gsap_css_transform_conflict不要对将要被 GSAP 动画化 transform 属性的元素同时写 CSStransform如居中用的translateY(-50%)GSAP 会整体覆盖 transform 并悄悄丢掉 CSS 居中——改用margin/inset、xPercent/yPercent或fromTo字体规则命名任何字体都必须在文件内有对应的font-face且只能使用随项目发布的字体文件如frame.md声明的家族.woff2位于assets/fonts/或capture/assets/fonts/渲染机是无中文字体的干净无头 Chrome命名没有文件支撑的系统 CJK / 日文 / 天城文家族会导致文字静默回退到通用字体MP4 排版错乱时序规则帧主体必须在t 0.5s可见入场用fromTo而非 CSS 隐藏初始态非最后一帧禁止退出动画根转场本身就是退出禁止repeat/yoyo、Math.random、Date.now等非确定性逻辑——渲染器逐帧 seek。在整体工作流中的位置Step 4 规划 → Step 5 派发 → 合成装配把 delta 放回faceless-explainer的流水线skills/faceless-explainer/SKILL.md中看职责链路非常清晰Step 4视觉设计编排器用 skills/faceless-explainer/references/visual-design.md 给每个帧写时间编码镜头序列time-coded shot sequence并为每帧命名blueprint:、focal:、roles:、sfx:——focal/roles的发明元素语义在这里定义Step 5构建帧先跑node SKILL_DIR/scripts/frame-packets.mjs --project $PROJECT_DIR --storyboard $PROJECT_DIR/STORYBOARD.md生成每帧的受限 packet 与_role.mdcore delta 拼接然后并行派发一个 worker 一帧worker 产出每个 worker 把compositions/frames/frame_id.html写盘这是一个恰好一个裸template…/template片段、注册了window.__timelines[frame_id]暂停时间轴、按 delta 的 invented 视觉约束构建的子合成——写文件就是它的终态动作不编辑STORYBOARD.md、不合成 index、不运行 CLI装配与校验编排器在帧全部animated后运行assemble-index.mjs、transitions.mjs、lint/check若某帧失败会带着具体检查码重新派发该帧worker 的 Retry 分支要求先读lint/check反馈再重写。小结frame-worker.md虽然篇幅精炼却是 faceless-explainer 帧构建的语义开关它定义了focal:/roles:对发明元素的解读、按角色前景主体 / 全出血背景 / 辅助落地的设计约束、83% keep-out 与背景 30–50% 调暗的硬性要求以及用户真实.mp4片段必须以静音video classclip且为帧根直接子节点方式挂载的技术规则。配合 core 契约的通用法则与frame-packets-core.mjs的逐字拼接实现任何开发者都能完整还原为什么 worker 只读两个文件就能构建出一帧合格画面的机制——而这正是多 worker 并行、确定性渲染、最终可 lint / check 的视频合成流水线的关键一环。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
HyperFrames Frame Worker 角色实战：faceless-explainer 的 invented 元素设计与 focal/roles 语义
HyperFrames Frame Worker 角色实战faceless-explainer 的 invented 元素设计与 focal/roles 语义【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes本文深入解读 HyperFrames 开源仓库中faceless-explainer工作流的帧工人frame worker增量角色文档skills/faceless-explainer/sub-agents/frame-worker.md。它规定了无脸解说视频中每一帧的视觉元素如何被发明出来、如何按focal:/roles:语义分配职责、以及用户提供的真实图片/视频片段如何接入帧合成。读完本文你将掌握 frame worker 的职责边界、[video]片段的正确挂载方式、以及core 契约 工作流 delta双文档角色拼接机制背后的实现原理可直接用于理解并驱动多 worker 并行的视频帧构建流程。背景为什么需要一份增量角色文档在 HyperFrames 的多工作流体系里每个叙事型视频工作流faceless-explainer、product-launch-video、pr-to-video 等都共享同一套帧构建的硬规则同时各自持有只属于自己的约定。仓库用双文档拆分来解决这个问题core 契约skills/hyperframes-core/references/frame-worker-core.md——对所有帧工人通用的结构法则子合成形状、时间轴注册、clip 属性、仅变换transform-only动画、确定性渲染、根节点尺寸等增量文档delta本主题文档——只承载 faceless-explainer 工作流特有的语义focal:/roles:的解读、invented发明式视觉设计约束、用户真实媒体的接入方式。delta 文档开头就声明了一条关键规则The shared law is the core contract above公共法则是上面的核心契约——packet 构建器会把../hyperframes-core/references/frame-worker-core.md前置拼接到本文件前作为_role.md请把两份文档当作一个角色来读。 这意味着当你作为 frame worker 被派发时收到的角色文件是拼接产物delta 只负责本工作流特有内容。文档同时明确划清了边界想在这里添加通用的 GSAP / 时间轴规则放错了地方——那属于 core 契约或hyperframes-core。这种一份通用 一份增量的设计在实现层有完整对应。见下文角色拼接的源码实现。派发模型N-up 并行每个 worker 只拿一个 packetdelta 文档明确了 faceless-explainer 场景下的派发方式N-up 并行运行每个帧工人只负责一个帧you run N-up, one frame each你的派发dispatch恰好携带一个 packet。这与 skills/faceless-explainer/SKILL.md Step 5 的描述一致Dispatch one sub-agent per frame, in parallel if possible每个 worker 得到_role.mdcore delta 拼接后的完整角色该帧专属的 packet.hyperframes/frame-packets/frame_id.md派发上下文PROJECT_DIR、frame_id、画布尺寸、字幕状态与 keep-out 区域、是否有已确认的草图。worker 只能读取自己的 packet 和frame.md绝不能打开共享的STORYBOARD.mdpacket 已内联了上游为该帧选好的所有内容也绝不能修改STORYBOARD.md。每个 worker 只写自己的compositions/frames/NN-*.html。派发的通用契约可参考 skills/hyperframes-core/references/subagent-dispatch.md完成的判定标准始终是磁盘上出现了预期产物而非 harness 的通知。focal:/roles:的语义你在设计发明的元素在无脸解说工作流中视频里没有可拍摄的网站或实拍素材因此帧里的视觉元素全部是下游发明出来的。delta 文档对 packet 中的两个字段给出了本工作流的解读focal:—— 哪个发明出来的元素是这一帧的主角heroroles:—— 每个发明元素扮演什么角色foreground subject前景主体/background全出血背景/supporting辅助。文档特别强调Because the explainer isfaceless, these are elements you designa hero word, a diagram node, a chart series, a coined-term card, not captured assets. 也就是说focal/roles命名的是你亲手设计的元素——一个英雄词汇、一个图表节点、一组数据可视化序列、一张造词卡片——而不是从素材库挑选的资产。这与 skills/faceless-explainer/references/visual-design.md 中 Step 4 的写法一脉相承focal:命名这个节拍的 INVENTED 主角元素roles:按foreground subject/background/supporting为每个元素分配职责并且keep them few and load-bearing少而精、承载叙事。唯一的真实媒体是用户提供的图片public/basename — description。若该图片是用户提供的.mp4片段packet 中会带有[video]标记。按roles设计每个元素无脸解说约束下的设计规范delta 文档给出了一套可执行的逐角色设计约束角色设计要求foreground subject主角眼睛首先落下的东西。尊重 83% keep-out 区域画布底部约 17% 预留给卡拉 OK 字幕条把文字排在它周围而不是压在它上面background背景全出血full-bleed且调暗约 30%–50%保证前景内容可读supporting辅助标签、次级形状、环境层——保持安静不抢戏这些元素都是发明的你从frame.md的原子调色板、字体台阶、组件、构图规则出发用 SVG / CSS / 排版把它们构建出来build the idea the narrative describes——实现叙事所描述的那个想法绝不退回到通用装饰性散景或库存填充物stock filler。这也是 skills/faceless-explainer/references/visual-design.md 反复强调的Inventing the visual三分类排版/动能文字、抽象图形、图表/数据可视化且发明的英雄元素应占据画布的 40%–60%。用户真实媒体的接入[video]片段与img这是 delta 文档中技术细节最密集的部分。如果用户在roles:/focal:中命名了一张真实图片frame worker 必须按以下规则放置[video]候选.mp4渲染为**静音muted**的video classclip并携带data-start/data-duration/data-track-index三个属性依据核心 clip 契约必须是帧根节点的直接子元素a direct child of the frame root——绝不能嵌套进另一个带时间轴的元素里否则渲染器会把它冻结the renderer freezes it未打[video]标记的图片→ 普通img。对照 core 契约skills/hyperframes-core/references/frame-worker-core.md可以确认这套 clip 契约的完整形态每个classclip元素都必须有data-start/data-duration/data-track-index帧的全出血背景色块 / 渐变 / 网格必须用独立的、全时长的classclip背景层承载而不能画在#root上——因为合成时帧根节点会被 clip 门控到自己的场景窗口画在根上的背景不可靠深色内容可能落到黑色的宿主body上而不可见。一个符合契约的示意写法展示结构具体数值以 packet 为准template div idroot>const CONFIG { animationDir: resolve(SKILL_DIR, ../hyperframes-animation), corePath: resolve(SKILL_DIR, ../hyperframes-core/references/frame-worker-core.md), deltaPath: resolve(SKILL_DIR, sub-agents/frame-worker.md), };真正的逻辑全部委托给共享实现 skills/hyperframes-core/scripts/lib/frame-packets-core.mjs。其中角色拼接的核心函数buildRolePayloadexport function buildRolePayload({ corePath, deltaPath, outDir }) { const core readFileSync(corePath, utf8).trim(); const delta readFileSync(deltaPath, utf8).trim(); const role ${core}\n\n---\n\n${delta}\n; // ...写入 .hyperframes/frame-packets/_role.md }可以看到_role.md确实是两份文档的逐字拼接core 在前、delta 在后中间用---分隔没有任何手动的二次维护——read the two as one role不是口头约定而是构建器的硬行为。同一文件中buildFramePackets还完成了 packet 的生成用正则/^## Frame\s([^\n])$/gm从STORYBOARD.md切分每个帧块frameId从帧块的src字段推导出文件名如03-feature并把每帧的## Frame N块、blueprint:指向的蓝图正文## Selected blueprint: id、以及被引用的每个运动规则配方## Selected motion rule: id内联进 packet每个 packet 受maxPacketBytes 48_000字节上限约束超限直接抛错。这正是 delta 文档所说packet 内联了规则配方你要复现其机制绝不靠名字猜的实现基础。与 core 契约的分工什么该进 deltadelta 文档用一句明确的话划出了编辑边界Tempted to add a generic GSAP / timeline rule here? Wrong home——它属于 core 契约或hyperframes-core。 这份分工原则同样适用于阅读时的归属判断进 core适用于所有帧工人的规则——模板封装、时间轴注册、#root样式、clip 属性、仅变换动画、确定性、根节点尺寸、字体font-face规则、keep-out、退出动画禁令等进 delta工作流特有语义——本工作流focal/roles如何解读、invented 视觉约束、用户真实媒体的接入方式。在派发时core 提供的完整自检清单skills/hyperframes-core/references/frame-worker-core.md对 delta 同样生效其中有几条与 delta 内容直接咬合、极易踩坑值得牢记模板运输template transport所有style与script包括 GSAP 加载都必须位于template内部因为运行时只克隆模板内容#root样式规则帧根节点用#root选择器造型绝不用data-composition-id元素上的 class——渲染时根上的 class 会被作用域化到无法匹配的后代选择器导致整帧无样式Studio 预览仍然正常务必相信规则而非预览gsap_css_transform_conflict不要对将要被 GSAP 动画化 transform 属性的元素同时写 CSStransform如居中用的translateY(-50%)GSAP 会整体覆盖 transform 并悄悄丢掉 CSS 居中——改用margin/inset、xPercent/yPercent或fromTo字体规则命名任何字体都必须在文件内有对应的font-face且只能使用随项目发布的字体文件如frame.md声明的家族.woff2位于assets/fonts/或capture/assets/fonts/渲染机是无中文字体的干净无头 Chrome命名没有文件支撑的系统 CJK / 日文 / 天城文家族会导致文字静默回退到通用字体MP4 排版错乱时序规则帧主体必须在t 0.5s可见入场用fromTo而非 CSS 隐藏初始态非最后一帧禁止退出动画根转场本身就是退出禁止repeat/yoyo、Math.random、Date.now等非确定性逻辑——渲染器逐帧 seek。在整体工作流中的位置Step 4 规划 → Step 5 派发 → 合成装配把 delta 放回faceless-explainer的流水线skills/faceless-explainer/SKILL.md中看职责链路非常清晰Step 4视觉设计编排器用 skills/faceless-explainer/references/visual-design.md 给每个帧写时间编码镜头序列time-coded shot sequence并为每帧命名blueprint:、focal:、roles:、sfx:——focal/roles的发明元素语义在这里定义Step 5构建帧先跑node SKILL_DIR/scripts/frame-packets.mjs --project $PROJECT_DIR --storyboard $PROJECT_DIR/STORYBOARD.md生成每帧的受限 packet 与_role.mdcore delta 拼接然后并行派发一个 worker 一帧worker 产出每个 worker 把compositions/frames/frame_id.html写盘这是一个恰好一个裸template…/template片段、注册了window.__timelines[frame_id]暂停时间轴、按 delta 的 invented 视觉约束构建的子合成——写文件就是它的终态动作不编辑STORYBOARD.md、不合成 index、不运行 CLI装配与校验编排器在帧全部animated后运行assemble-index.mjs、transitions.mjs、lint/check若某帧失败会带着具体检查码重新派发该帧worker 的 Retry 分支要求先读lint/check反馈再重写。小结frame-worker.md虽然篇幅精炼却是 faceless-explainer 帧构建的语义开关它定义了focal:/roles:对发明元素的解读、按角色前景主体 / 全出血背景 / 辅助落地的设计约束、83% keep-out 与背景 30–50% 调暗的硬性要求以及用户真实.mp4片段必须以静音video classclip且为帧根直接子节点方式挂载的技术规则。配合 core 契约的通用法则与frame-packets-core.mjs的逐字拼接实现任何开发者都能完整还原为什么 worker 只读两个文件就能构建出一帧合格画面的机制——而这正是多 worker 并行、确定性渲染、最终可 lint / check 的视频合成流水线的关键一环。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
