HyperFrames pr-to-video将 GitHub Pull Request 一键转化为代码变更讲解视频【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes导读HyperFrames 是Write HTML. Render video. Built for agents.的视频框架其pr-to-video路由专为 GitHub Pull Request 设计——输入一个 PR 引用URL、owner/repo#N或 this PR输出一段以 diff、before/after、文件树和影响场景为骨架的 changelog / feature-reveal / fix-explainer / refactor-walkthrough 讲解视频硬上限约 3 分钟。读完本文你将掌握该路由的完整工作流Step 0–6、PR 体量→时长映射表、叙事设计方法与code-*动画块词汇以及底层脚本fetch-pr / ingest的实现原理。一、路由定位输入、输出与触发词pr-to-video是 HyperFrames 意图层intent layer路由表中的第七优先路由见 skills/hyperframes/SKILL.md核心契约记录在 skills/hyperframes/references/routes/pr-to-video.md输入GitHub PR URL、owner/repo#N、或已检出仓库中的 this PR通过gh读取它不是网站截图请求。输出带 diff、before/after、文件树与影响场景的 changelog、feature reveal、fix explainer 或 refactor walkthrough 视频硬上限约 3 分钟时长跟随变更体量。触发词make a video about this PR、turn PR #1187 into a changelog video、release-notes video from this pull request。该路由与product-launch-video网站/产品推广和faceless-explainer无 PR 的主题讲解的关键区别输入是代码变更而非网站——没有 capture 步骤也没有真实素材贡献者头像除外。意图不明确时统一回退到/hyperframes入口由 skills/hyperframes/references/intent-interview.md 负责路由决策最终把锁定的 brief 写入BRIEF.md后续流程只读该文件。二、Interview 阶段把 PR 体量翻译成时长路由文档定义了访谈阶段Interview必须收集的要素要素说明PR 引用URL、owner/repo#N或 this PR角度 (angle)changelog / feature-reveal / fix-explainer / refactor-walkthrough优先推荐 PR 自身暗示的那个受众 (audience)开发者默认、混合技术人群、非技术干系人时长 (length)由下方体量表推导目的地 (destination)代码讲解默认 16:9时长必须来自 PR 的变更体量而不是拍脑袋——先只读地 peek 一次工作流的 Step 1 仍会做完整的确定性抓取gh pr view PR_REF --json title,additions,deletions,changedFiles以additions deletions为基准changedFiles向上微调选定档位并在 pitch 中说明依据PR 变更体量推荐时长trivial≲ 50 行变更~20–40sfocused~50–200 行~40–70ssubstantial~200–600 行~70–110slarge≳ 600 行或 25 文件~110–180s用一句话陈述依据例如 ~40s — small change, 44/−13 across 12 files。档位是 diff 能支撑的故事上限绝不是需要填满的下限一个一句话能讲完的故事无论档位如何都建议 30–90s 内收尾档位区间可以作为一个非推荐的完整 walkthrough 选项出现。Interview 阶段还包括pitch round角度与开场钩子——diff 修正事实而不是叙事与run-shape协作/自主两种运行形态。相应的详细访谈模板见 skills/hyperframes/references/pitch-round.md 与 skills/hyperframes/references/intent-interview.md。三、工作流总览Step 0–6完整工作流定义在 skills/pr-to-video/SKILL.md阶段与产物一一对应步骤目标关键产物Step 0 Setup确认 brief含 PR 引用、初始化项目hyperframes.json、BRIEF.mdStep 1 Ingest无 capture抓取 PR 事实并入项目capture/pr.jsoncapture/diff.patch→capture/extracted/{tokens.json, visible-text.txt, people.json}assets/login.pngStep 2 Design System采用 code-editorial 帧预设frame.md.hyperframes/caption-skin.htmlStep 3 Storyboard Script把 PR 变成逐帧讲解计划STORYBOARD.md 需要旁白时的SCRIPT.mdStep 3.1 Audio生成旁白、词级时间戳、BGM 与音频元数据audio_meta.jsonStep 4 Frame Visual Design给每帧补充视觉方向与运动选择富化的STORYBOARD.mdStep 5 Build Frames逐帧构建 HTML 合成并装配可播放视频compositions/frames/NN-*.htmlindex.htmlStep 6 Finalize校验、审核、渲染renders/video.mp4三个用户门控步骤是 Step 0、Step 3 与 Step 6Step 5 通过有界 worker 池派发。风格在 Step 2 固定为code-editorial温暖的编辑风格海军蓝代码面、稀缺珊瑚色强调从不询问用户。Step 0Setup——先确认 brief再建项目项目目录解析用project-dir.mjs优先保留用户指定目录否则使用解析器输出的持久化外部缓存位置绝不在调用方仓库里创建videos/。init前运行preflight.mjs能力预检若已安装 CLI 无法运行本技能所需的校验命令先停止并按升级指引处理而不是浪费上下文。初始化命令npx hyperframes init $PROJECT_DIR --non-interactive --exampleblank --skillpr-to-video项目 basename 取自 PR如acme-sdk-pr-1842绝不用工作区名或时间戳。init 之后立即写BRIEF.md绝不能在 init 之前init 拒绝非空目录形状遵循 brief-contract随后展示npx hyperframes auth status的签名状态决定 TTS/BGM 走 HeyGen 还是本地引擎。Step 1Ingest——没有 capture用gh确定性抓取这是该路由与捕获型工作流最本质的区别。fetch-pr.mjs取代裸gh pr view capture/pr.json其实现skills/pr-to-video/scripts/fetch-pr.mjs有三个关键设计大 PR 文件列表补全gh pr view --json files在约 100 个文件处截断脚本改用分页的gh api --paginate repos/{owner}/{repo}/pulls/{number}/files64MB 缓冲按页--jq输出 NDJSON 补全pr.files并同步修正changedFiles。只写两个文件无 scratch 目录capture/pr.jsoncapture/diff.patch中间数据全部驻留内存避免污染工作区且保证确定性gh的 auth / not-found / private 错误会以gh自身的 stderr 退出 1编排者随即停止绝不虚构 PR 内容。MERGED PR 的 best-effort 版本解析shipped_versionversion_source端卡/CTAupgrade to vN需要一个真实版本而 PR 本身不携带版本。脚本先找 merge 之后第一个非 draft release 的 tag失败则回退到默认分支package.json的 version 并标记unreleased再失败则置 null技能随后回退到仅引用仓库 URL。随后的ingest.mjsskills/pr-to-video/scripts/ingest.mjs是纯离线转换产出合成 capture 包tokens.jsoncolors:[]/fonts:[]→ 保留 code-editorial 原生调色板PR 没有品牌 tokenvisible-text.txt叙事 SOURCE——由标题 metabase ← head · N/−M across F files people body commits 变更文件 预算受限的代表性 diff hunks组装的可读 briefbody 截断 2600 字符、diff 截断 4800 字符、每 hunk 上限 22 行renderHunk会折叠连续上下文为⋯标记、commits 上限 12 条、文件列表上限 40 条噪声路径lockfile / dist / min / map 等在 hunk 选择中被降权people.json贡献者PR author / commit authors / reviewers / commenters / assignees经 bot 去重过滤——isBot用[bot]后缀 一个覆盖 dependabot、github-actions、codecov、renovate、snyk-bot 等 30 个常见 CI 机器人的 denylist关键区分是PRauthor只是开 PR 的人不一定是写代码的人因此commits[].authors[]的提交作者被单独统计commitCount并按角色排序供 credits close 使用。头像下载fetch-people-avatars.mjs是唯一网络步骤best-effort 恒退出 0——缺失头像只是意味着没有作者 credits close。Step 1 的 gate 要求你能用一句话讲清这个 PR 改了什么。Step 2Design System——code-editorial 固定预设node SKILL_DIR/scripts/build-frame.mjs --preset code-editorial --hyperframes .脚本把 code-editorial 预设的FRAME.md复制为frame.md、复制 caption skin 到.hyperframes/caption-skin.html并自我校验映射断裂时退出 1。PR 没有品牌 token因此保留预设自身的完整设计不做任何手改。Step 3Storyboard Script——叙事设计而非朗读 diff核心规则一句话diff 是一串编辑视频是一次被引导的理解行为。绝不逐文件朗读 diff、绝不朗读 PR description——这是最常见的失败模式。场景顺序来自叙事设计而不是 diff 的文件顺序或 commit 列表价值先于证据——观众可见的收益这个变更解锁/修复/加速了什么必须在第二个 beat 落地diff 与机制是它的证据绝不是开场。具体叙事方法见 skills/pr-to-video/references/story-design.md后文第四节展开。Step 3.1Audio——旁白、词级时间戳与 BGM默认音色MarciaHeyGen/am_michaelKokoro用户点名音色/性别/语气时用--voice id传入否则男性声音这类请求会被静默忽略。命令node SKILL_DIR/scripts/audio.mjs --script ./SCRIPT.md --storyboard ./STORYBOARD.md --hyperframes . --out ./audio_meta.json --voice voice-id 后台运行然后继续 Step 4。全静默的标准标记STORYBOARD.md顶部 YAML 的music: none且没有SCRIPT.md——audio.mjs识别后什么都不生成并清除过期的audio_meta.jsonassemble把缺失的audio_meta.json当作静默。music: none但有旁白则只关 BGM。拼写必须精确不要自创标记。Step 4Frame Visual Design——时间编码的镜头序列方法主体在 skills/pr-to-video/references/visual-design.md。核心单元是按旁白编排的时间编码镜头序列time-coded shot sequence每个 Scene 窗口声明屏幕上有什么、什么在动、坐在哪里inline 布局任何东西都不能在旁白提到它之前出现——这是反 PowerPoint 的核心机制。反模式是 front-loading在开头 ~25% 把整个画面堆上去然后冻住。每个代码帧的scene里必须指名 hunk 与code-*块如 therequest()retry block, ~6 lines,code-diff并附一个不超过 12 行的### Source excerptfenced diff 块——worker 被禁止重新打开完整 diff。运动词表与规则 id 见 skills/pr-to-video/references/motion-language.md。Step 5Build Frames——有界派发与装配先等 Step 3.1 音频完成然后audio.mjs sync-durations真实旁白时长优先静默帧保留估算绝不手改同步后的时长与fetch-sfx。预先安装STORYBOARD 命名的全部 registry 块npx hyperframes add block-name避免并行 worker 竞争 registry。frame-packets.mjs构建有界 packet代码帧缺少### Source excerpt直接硬失败并硬性限制 packet 字节写_role.md最多派发 3 个 worker每个 worker 只读自己的 packet 与frame.md绝不打开完整 STORYBOARD、diff.patch 或 visible-text.txt。失败帧只重派该帧最多一次重试必须附上具体的 validator/lint 发现。全出血背景挂在classclip层上绝不在#root——背景设在#root/data-composition-id上会被帧窗口裁剪深色内容会落到黑色宿主body上不可见。背景装配captions.mjs build用.hyperframes/caption-skin.html注入 token与assemble-index.mjs把头像从assets/幂等暂存。Step 6Finalize——校验、审核、渲染node SKILL_DIR/scripts/transitions.mjs inject --storyboard ./STORYBOARD.md --hyperframes . node SKILL_DIR/scripts/transitions.mjs verify --storyboard ./STORYBOARD.md --index ./index.html npx hyperframes lint npx hyperframes check npx hyperframes snapshot --at frame-midpoints # → snapshots/contact-sheet.jpg命令失败时浮出 stderr 并停止不要堆叠恢复命令对compositions/frames/NN-*.html做最小安全修改后重跑失败项。已知误报不要追check可能报 caption 高亮词#caption-word-*/.caption-line约 1–4px 的text_box_overflow——caption pill 的line-height故意紧凑且无overflow:hidden重字重字形的墨迹溢出到 pill 自身 padding实际没有任何裁剪。不要加大 captionline-height会让 pill 膨胀。只有当text_box_overflow指向帧元素#el-NN-*才需要处理。审核后渲染npx hyperframes render --skillpr-to-video --quality high --output renders/video.mp4交付 MP4 contact sheet 帧 id便于精确到单帧的修订。预览npx hyperframes preview $PROJECT_DIR --background收尾--stop只停本项目后台服务器审核期间绝不拆除。四、叙事设计四个 PR 原型与 PR 原生帧类型story-design.md把 PR 视频归为四种完整路径可复合arc写作outer with inner原型结构适用Changeloghook 点名头条 → 2–4 个并列变更项 → ship/wrap发布 PR、vN 有什么新东西Feature-revealhook用户语言的结果→ impact现在能做什么→ change命名→ diff新代码敲入→ mechanism动画演示→ 回扣承诺新增一个显著特性Fix-explainerproblem症状→ mechanism坏行为动画→ diffcausefix 的 before→after→ mechanism/impact现在正常了bugfix PRtension→turn→reliefRefactor-walkthroughhooksmell/why→ before_after → mechanism结构解开同输入同输出→ evidence行数/perf 数据重构、性能、清理、迁移选型 tie-breaker修 bug 的特性 → feature-reveal 带一个 fix body beat需要小重构的 fix → fix-explainerfix 是头条。PR 原生帧类型type字段叙述节奏标签而非硬枚举每种映射到 code-editorial 的处理方式与典型视觉type职责典型视觉hook高杠杆开场 3–5sCover或code-3d-extrude英雄代码时刻problemPR 解决的 bug/smell/paincode-highlight聚光问题行change命名变更/特性/PR 本身Statement / Coverdiff变更主体——before→after、hunk、新代码敲入code-diff/code-morph/code-typingbefore_after旧形状 vs 新形状显式对比code-morph/code-diffmechanism展示变更在运行时的行为请求重试、缓存填充、串行→并行、竞态解决奶油底上的发明式 SVG/GSAP 图表flowchart/flowchart-vertical/data-chartimpact收益落地——现在能用什么number-lockupevidence具体佐证——N/−M、通过的测试、benchmarkcode-diff红→绿 /number-lockupcreditsshipped-by close——变更背后的人头像行assets/login.pngcta收尾号召——pull it / upgrade / read the PR珊瑚色 callout正文节奏铁律交替diff展示变更的代码与mechanism展示变更的运行时行为落在impact/evidence上。全 diff 的正文读起来像代码 show-and-tell每个 PR 都有变更所以至少存在一个diff/change帧而多数 PR 也值得一个行为动画帧。Hook 策略选择其一钩子说观众的结果语言绝不报文件名/函数名/标识符惊人统计This PR deletes 1,200 lines.、反直觉主张、痛点共鸣Every deploy, the same flaky timeout.、概念宣告、before/after teaser、利害/后果、直接对话。每帧字数预算——字数才是真正的度量TTS 约2.2 词/秒45 词的7 秒脚本实际要 20 秒。默认软目标 ≤19 词 / ≤9s例外最多 2 帧主 diff 或因果链 change≤26 词 / ≤12s硬上限 26 词必须裁剪或拆分整片目标 ≤~400 词甜区 30–90s / ≤~155 词。估算公式duration ≈ ceil(word_count / 2.2)。静默帧合法且常见——diff 敲入、before→after morph、计数器滚动都可以静默voiceover留空、不进SCRIPT.md。每行旁白写成离散 cueThree retries — then it backs off — then it gives up clean让 Step 5 能按词揭示画面。五、code-* 动画块词汇代码帧的现成中心件skills/pr-to-video/references/code-vocabulary.md 定义了代码帧的两类会动的画面代码变更的行与行为变更在运行时做了什么。安装方式统一为npx hyperframes add block-name写入compositions/block-name.html作为子合成以data-composition-src挂载进帧。每个块内联了引擎与一条被引擎按帧 seek 的暂停 GSAP 时间线全部 1920×1080、确定性/seek-safe无 CSS transition、无 rAF、种子随机——绝无Math.random/Date.now。定制只改两个全局window.__TOKENSShiki token 化的代码内容与window.__BLOCK效果与时间选择。块行为注意输入PR beatcode-diff编辑器窗内的 unified diff删除行红色折叠、新增行绿色展开6s恰好 2 个 states引擎做 LCS diff默认 PR 块字面 add/removecode-morph一段代码变形为另一段共享 token 滑行、退场淡出7s2 states跨 state 复用 tokenkey才滑行重构/重命名/签名变更连续性code-typing逐字符打字机 滑行光标5s单 state新函数/文件敲入屏幕code-highlight蓝带扫过一行其余变暗5s__BLOCK.line0-based聚光关键行code-scroll镜头滚动长文件定位目标行6s__BLOCK.line1-based在大文件里定位变更code-3d-extrude光照斜面的 3D 代码板旋转落位8sWebGL单 state seed英雄代码时刻风格优先不用于读 diffcode-particle-assembleGPU 粒子散射后飞回精确字形像素8sWebGL单 state seed戏剧性高潮揭示code-shader-dissolve代码从种子噪声中编译成形 边缘辉光7sWebGL单 state seed编译通过/可以工作了code-snippet-flight离散片段从侧边飞入组装成堆叠程序6s__TOKENS.flight.states各模块拼装成特性三大坑① 必须把块的内建节奏适配到帧的data-durationcode-typing按固定字符速度打字长片段会超帧②code-diff/code-morph需要 ≥2 个 baked states其余单 state③ 行索引不统一code-highlight0-based、code-scroll1-based。另外这些块是全出血无 caption 安全带的启用字幕时要把代码面板控制在顶部 ~83% 以内。code-snippet-*家族是独立成品合成而非调色板VS Code workbench 12 个主题与 Apple Terminal 12 个 profile适合要真实 IDE/终端环境感时使用。六、mechanism 帧用动画证明行为而不是只展示代码机制帧是 PR 视频不显扁平的最重要解药。它不是code-*块而是发明的动画图表SVG/HTML/GSAP用 code-editorial 的原子奶油底、发丝墨线的节点/边/泳道、一个珊瑚色激活标记或flowchart/flowchart-vertical/data-chartregistry 块。按变更触及的内容选择动画对象变更触及…动画行为不是代码使用重试/退避/韧性请求生命周期fire → 500 → 等待延迟增长→ retry → 200发明 SVG/GSAP缓存/记忆化冷慢打 DBvs 热快打缓存两车道竞速发明 SVG/GSAP并发/并行串行单车道重塑为并行车道发明 /flowchart竞态/顺序 bug先坏流程丢项、双写冲突再修好流程发明 SVG/GSAP性能两条时间线/柱竞速新的先到data-chart重构/迁移纠缠调用图解开成干净图同输入→同输出flowchart/ 发明新端点/管道/状态数据流过新路径状态机逐步点亮flowchart-vertical与code-*块拥有自己的动画不同图表的运动是你的把 ≥3 个效果编排为入场画节点/泳道→ 发展跑流程→ 落位解决态 一处珊瑚强调绝不让它入场后冻结。diff 帧与 mechanism 帧互补——diff 是代码中的证明mechanism 是运动中的证明。七、Credits close真实的人真实的版本每个 PR 视频都以credits帧收尾点名真正的贡献者skills/pr-to-video/references/story-design.mdPR author 只是开了 PR不一定是写代码的人——常是队友提交了大部分 commit。credits 按commitCount优先 committer再排 reviewers。仅此帧设置asset_candidates1–6 个assets/login.png仅avatarFetched: true的 login正文保持纯代码头像只出现在 close。旁白念名字绝不念 handlepeople.json只为 gh 已命名的贡献者带name字段author / commit authors / mergedByreviewers/commenters/assignees 只有裸 login——写 credits 前用gh api users/login --jq .name补全将上屏的 1–6 人的名字GitHub 也没有公开名字时屏上回退到 login并从口播行中剔除该人。TTS 朗读裸miguAng18947550是这套机制要避免的失败模式。版本是唯一绝不允许编造的事实ctaupgrade to vN或 changelogwhats new in vN需要真实版本而 PR 不带版本——Step 1 为 MERGED PR 解析 best-effort 版本并写入visible-text.txt的Shipped in: version (source)行。Shipped in:存在就用该确切版本version_source为unreleased时改口 shipping in the next release没有该行未合并或解析失败就只写仓库/PR URL绝不猜测版本号。八、视觉与运动时间编码镜头序列 四条运动信条视觉设计方法skills/pr-to-video/references/visual-design.md要求每个帧是一组按 VO 编排的时间窗口窗口数 旁白 cue 数揭示铺到后 ~50%收在保持静止的阅读上——静止优于坏运动。布局用 inline 词汇framingcentered / rule-of-thirds / split-screen / layered-depth / asymmetric 60-40 / triptych / full-width strip整片 ≥3 种取景且不连续重复、density主视觉 ≥40% 画布、≥3 深度层、hierarchysize 3:1 / weight 800 vs 400 / contrast / 上三分位 / motion 中至少取 2、depthsize / blur / opacity gradient / overlap / shadow-stack / counter-scale。禁止导航栏、页脚、滚动条、真实光标/浏览器 chrome、通用装饰形状、紫色-蓝色AI渐变。## Video direction块在 STORYBOARD 顶部只写一次每帧 Scene 只写增量。运动信条skills/pr-to-video/references/motion-language.md四条加载规则Smooth beats bouncy——power3长尾缓动是默认back.out/bounce.out/elastic.out是头号劝退项overshoot 降级为罕见的显式俏皮例外。后 ~50% 按 VO 顺序揭示——反 PowerPoint 机制前 ~25% 只放 VO 当下在说的东西。没有 lazy breathing、没有坏的慢 pan/push——宁无运动不要坏运动hold 期间唯一被认可的活性是微妙 jitter。内部接缝是速度匹配的切——zoom-through / cut-the-curve / waterfall 见 skills/pr-to-video/references/cut-catalog.md。seek-safe 硬规则不可协商无无限/循环运动无repeat/yoyo无随机/墙钟每次渲染必须逐帧一致入场用fromTo显式声明 from 态避免 seek 闪烁运动禁止走 CSStransition/keyframes浏览器时钟会与 HF seek 时钟脱同步全部驱动在暂停的 GSAP 时间线内帧内只有入场 顺序揭示无中途退场——帧的退场就是 harness 注入的transition_intransition 名只用 registry 的cut | crossfade | blur-crossfade | push-slide LEFT|RIGHT|UP|DOWN | zoom-through | squeeze整片 2–3 种重复第一帧为cut。九、Quick Reference与捕获型工作流的差异PR 增量 vs 捕获素材型工作流skills/pr-to-video/SKILL.md 的 Quick Reference 小结无 Step 1 captureghCLI 把 PR 摄入合成capture/extracted/包tokens.jsonvisible-text.txtpeople.json唯一真实素材是贡献者assets/login.png头像credits close无asset-descriptions.md、无 asset-staging 步骤。代码 beat 由code-*registry 块在 code-editorial 的海军蓝 Code Surface 上渲染风格恒定code-editorial。自带脚本清单fetch-prPR →capture/pr.jsondiff.patch大 PR 安全、无 scratch、ingest离线合成 capture 包、fetch-people-avatars头像 →assets/共享引擎build-frame预设采纳 品牌 remix、audioTTS/BGM/SFX/时长同步、captions、transitionsinject verify、assemble-index其余全部交给hyperframesCLI。格式landscape1920x1080/ portrait1080x1920/ square1080x1080由目的地推导在 storyboard frontmatter 中一次性设置竖版/方版按 visual-design.md 的指引纵向堆叠布局居中 hero 锚在 y ≈ 0.42 × height。整套工作流的测试覆盖可在 skills/pr-to-video/scripts/ 下的assemble-index.test.mjs、captions.test.mjs、frame-contract.test.mjs、workflow-guardrails.test.mjs中进一步研读worker 角色契约见 skills/pr-to-video/sub-agents/frame-worker.md它与该技能../hyperframes-animation/rules/、hyperframes-creative一起承载全部设计与运动规则而不把这些规则塞进本技能本体。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考