Hyperframes 嵌入式字幕审美验收用 reference bar 与五项正向检查把关“世界级”渲染【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes导读本文讲解 Hyperframes 仓库内embedded-captions技能中一份常被忽略却决定成品档次的文档——reference-bar.md它定义了“什么才是世界级字幕”的分语域审美标尺Vogue 封面、Apple Keynote、Errol Morris 纪录片、K-pop 歌词视频并给出渲染上线前必须跑完的五项正向检查海报测试、怯懦测试、一眼层级、场景握手、留白审计。读完本文你将掌握如何在几何门禁全部通过之后再用“设计师视角”给每一帧渲染做最终质检以及如何把这份标尺交给子代理做 fresh-eyes review从而把结果从“没有坏”提升到“值得签名”。一、为什么要一份“外部标尺”reference-bar.md开宗明义地指出一个残酷事实没有外部参照的自评永远会通过Self-review without an external bar always passes。在 Hyperframes 的embedded-captions流水线里这一判断尤其关键。整个工作流见 SKILL.md由 5 步组成决策门禁挑选单一视觉身份 →prepare.sh并行完成抠像/转写/安全区计算 → 创作 JSON →preview-frames.cjs快速预览 →render-and-composite.sh出片。其中第 4 步预览环节几何门禁已经用脚本挡住了坏的渲染check-timing.cjs --strict强制词级时间戳与转写误差在 80ms 内check-occlusion.cjs像素级通过 headless Chromium 的measure-layout.cjs采样真实 DOM 坐标把关遮挡率与画面越界check-overflow.cjs拦截字幕出框。但正如该文档所写这些门禁回答的是有没有东西坏了is anything broken而 reference bar 回答的是这些大厂的资深设计师会不会签收它would a designer at these houses sign it。前者是工程下限后者是审美上限——两者缺一不可。与之配套的 18 条美学原则见 aesthetic-principles.md其中反复出现的主题与 reference bar 一致字幕要服务于人脸原则 1 The subject always wins、要嵌入场景而非悬浮原则 2 Occlude, dont hover、对比度是层级问题而非亮度问题原则 3。reference bar 正是把这些原则浓缩成可执行的验收时刻。二、分语域参照四种世界级标杆reference-bar.md按**语域register**给出四档参照每一档都对应embedded-captions中真实存在的视觉语言见 dna/README.md 的 DNA 注册表与 CATALOG.md 的 35 个身份表。1. premium-warm / editorialcream、editorial——Vogue 封面与 A24 片头标尺一帧 Vogue 封面或 A24 的字幕卡。判定要点字体与主体互动报头masthead压在人物头部之后文字与人物形成前后纵深关系而不是贴在画面上一两档字号是选出来的而非默认的字号层级之间有明确的设计意图单帧截图可以当海报打印。自查问题高潮帧单独截出来像一张设计过的封面还是一个长歪了的字幕对应到实现层面这正是creamInter 暖奶油色 screen 混合 辉光浮现英雄字与editorialBodoni Moda 衬线 小写斜体英雄字两支 DNA 的验收基准。在 composition-craft.md 中被称为Vogue-masthead效果的遮挡美学——主体吃掉英雄字 30–40% 的笔画正是报头压在人物之后的实现手段不要为了可读而缩小字号回避遮挡。2. tech-premiumkeynote、ink——Apple Keynote 幻灯片标尺叠加在素材上的 Apple 发布会幻灯片。判定要点不透明、有分量、死点居中的自信负空间在干活negative space is doing the work没有任何装饰物nothing decorating。自查问题这一帧放进 WWDC 的 sizzle 开场里会显得格格不入吗对应keynoteInter 800 不透明白、行扫揭示、英雄字上扫揭示静止即自信与ink近黑 multiply 混合字像印在墙上专治高亮场景。注意 SKILL.md 的 Visual QA 第一条washout与此呼应亮背景上裸用浅色文字必死亮场应改选ink而非强行覆盖某个 DNA 的锁定外观。3. formaldocumentary——Errol Morris / PBS Frontline标尺Errol Morris 纪录片与 PBS《前线》节目。判定要点字体的克制像法庭文书the restraint of a court document静止本身就是权威stillness reads as authority。自查问题有没有任何一处动画在抢注意力有就剪掉。对应documentaryDNAburn-in 揭示、无英雄字肃穆即风格。这也是 aesthetic-principles.md 原则 14每 30 秒打破一次节奏的反面教材语境——formal 语域里克制不是没想法而是最高级的设计决策。4. loud——K-pop 歌词视频 / Nike 广告标尺K-pop 歌词视频或 Nike 广告。判定要点字体主动与主体对抗并刻意获胜type fights the subject and wins on purpose色彩饱和且贴合场景color is saturated and scene-true鼓点与字词同拍落下the beat hits WITH the word。自查问题英雄帧会不会让你忍不住回放对应loudAnton 字体 场景采样强调色 单字砸落与涟漪正文在前层bodyLayer: fg以及 neon / glitch / chrome / velocity 等 loud 系 DNA。语域与 DNA 的映射速查语域reference bar对应 DNAdna/README.md场景适配premium-warm / editorialcream、editorial暗/中调暖色场景band luma 150tech-premiumkeynote、ink发布会/产品ink专治亮场luma 150formaldocumentary访谈/严肃题材任何亮度loudloud、neon、glitch、chrome、velocity按内容语域细分运动/霓虹/黑客/时尚三、五项正向检查在失败检查之后跑这是reference-bar.md的核心可执行部分在预览图preview sheet上、在失败检查全部跑完之后依次过这 5 关。注意其定位——失败清单防止渲染坏了正向清单负责让它被设计过the failure list keeps a render from being broken; the positive list is what makes itdesigned见 SKILL.md § Visual QA。1. 海报测试Poster test单独截出高潮帧。你会把它当剧照发出去吗如果构图需要靠运动来解释那构图就没完成。这条检查对应 SKILL.md Visual QA 的第 4 条Hero presence高潮字应该大、且明显藏在人物身后约 30–55% 被遮挡而不是边缘处一个悬浮标签。海报测试把英雄存在感从工程指标升维成审美裁决——一帧静止图必须独立成立。2. 怯懦测试Timid test有没有任何正文字幕在道歉字号小、缩在角落、离人物剪影很远小是一种选择怯懦是一种默认。要么拥抱主体要么把边距当作设计好的栏目认真做。这条直接呼应 aesthetic-principles.md 原则 4干掉恒定的下三分之一与原则 7 的字号纪律正文字号约帧高 3.5–5%hook 字号才允许 7–9%。小是经过思考的视觉决策小而心虚则是没有决策。3. 一眼层级One-glance hierarchy缩到缩略图尺寸把整张 sheet 缩小你还能分得清开场 / 正文 / 英雄字吗如果层级糊成一团说明对比度比例出了问题。实现侧的依据在 composition-craft.md 的climax 必须 POP一节高潮字与正文强调字之间至少要拉开≥1.8×与最小字号档至少≥2.5×同平面内层级对比才是重点climax 应约为 emphasis 的 2×emphasis 约为 narrator 的 1.3–1.5×。缩略图测试正是验证这些比例是否真的产生了视觉落差。4. 场景握手Scene handshake说出三条字体承认了这段素材的方式从场景采样的强调色、遮挡穿越、阴影方向、景深模糊、调色温。少于两条 这是个贴纸不是嵌入。这是嵌入感的量化检查。支撑它的实现机制非常具体场景采样强调色DNA 参数化中var(--accent)从本场景采样见 dna/README.md遮挡穿越matte 抠像让主体真实吃掉嵌入字check-occlusion.cjs把关 30–55% 的 hero 遮挡目标光影方向接触阴影沿实测光照方向落下、嵌入字模糊匹配场景景深scene opticsRMS 耦合英雄字入场振幅跟随说话响度。如果一帧画面里的字与素材毫无这三类交互那它就不是嵌入而是贴纸——这正是 composition-craft.md 反复批判的悬浮字幕病。5. 留白审计Dead-air audit逐帧扫过没有字幕的时间段。它们是有设计的停顿主体撑起画面还是缺口设计只是停了停顿靠节奏赢得缺口是节奏的 bug。这与 aesthetic-principles.md 原则 14每 30 秒打破一次节奏和 composition-craft.md 的persistence字幕停留时间由场景的叙事弧线决定而非公式直接相关。无字幕的静默段可以是情绪蓄力accumulate-through-climax 前的空拍也可以是设计者罢工。四、与几何门禁的分工两套检查各管什么要正确使用这五项正向检查必须先理解它和失败检查的关系。整条流水线是先防坏、再求好检查层工具/文档回答的问题失败检查failure checksSKILL.md § Visual QA 五条washout、text-on-text、reading order、hero presence、balancecheck-timing.cjs、check-occlusion.cjs、check-overflow.cjs有没有东西坏了正向检查positive checksreference-bar.md 五条海报、怯懦、一眼层级、场景握手、留白设计师会不会签收实际运行顺序见 SKILL.md § Visual QA运行node scripts/preview-frames.cjs project [t…]每帧约 2 秒得到忠实合成预览嵌入层截图 真实视频帧 matte 遮挡 rail 叠加输出project/preview/t时间.png与拼图sheet.png。预览采样默认覆盖每个 climax 窗口与分组中点——脚本会对每个 hero 组取入场与保持两个采样点并对其余组至少取一个中点避免整段旁白被漏出预览图见 preview-frames.cjs 的采样逻辑用这份 sheet 先跑失败检查五条washout / text-on-text / reading order / hero presence / balance再用同一份 sheet 跑本节五项正向检查。render-and-composite.sh中的check-occlusion.cjs是像素级门禁headless Chromium 驱动 GSAP 时间线 seek 到每组 15/40/65/90% 采样点用getBoundingClientRect()测真实 DOM 坐标再与 matte alpha 比对。它的失败结论需要人工用3 步判定规则解释虚词可吃、实词保命、内容词 30–65% 遮挡是预期效果而非 bug——这条规则同样服务于 reference bar 的第 4 条场景握手遮挡是被设计进画面的不是事故。一句话总结分工门禁回答能不能上线正向检查回答值不值得签名。该技能文档明确渲染只有在**失败检查通过 AND 五项正向检查至少 4/5 通过且每条都有具体证据**时才允许交付。五、Fresh-eyes review把标尺交给子代理reference-bar.md最后给出可落地的协作协议给子代理预览图 5 条失败检查SKILL.md § Visual QA 这 5 条正向检查让它对两份清单分别给出裁决PASS/FIX。当失败检查通过且至少 4/5 正向检查通过需附具体证据时渲染才允许交付。设计这套流程的动机在 SKILL.md 中写得很直白你对自己的布局有确认偏差confirmation bias。作者本人回看自己的作品总会觉得还行所以需要一双新鲜的眼睛。推荐工作流每次循环只需数秒因为预览只要约 2 秒/帧node scripts/preview-frames.cjs project产出preview/sheet.png给子代理仅提供预览图 Visual QA 五条失败检查 reference-bar 五项正向检查要求按帧输出PASS或具体的FIX建议在plan.json/theme.json中修复重新编译make-cinematic.cjs或render-theme.sh重新预览只在预览全部通过后再花钱渲染一次——完整渲染要数分钟绝不用它来发现布局问题。关于至少 4/5 通过的边界需要理解其意图允许有意识的设计取舍例如某个语域下刻意保留一处克制的平淡但每条通过都必须有具体证据加速强调色取自桌面台灯色温英雄字下沿 40px 被发梢轻扫而不是含糊的看起来不错。这与 composition-craft.md 要求把创作理由写进_notes字段、以及check-occlusion.cjs报告事实、人做判断的理念一脉相承审美结论必须可复述、可核查。六、把标尺落到日常流水线一份可复制的验收清单综合上述内容每次交付前请按此顺序执行第 1 步先跑门禁防坏bash scripts/prepare.sh projectmatte ∥ 转写 ∥ 音频包络 → safe-zonesnode scripts/preview-frames.cjs project生成预览图人工过 SKILL.md § Visual QA 五条失败检查过check-timing.cjs±80ms、check-occlusion.cjsper-word peak ≥65% 判 obliterated按 3 步规则解释、check-overflow.cjs。第 2 步再跑 reference bar求好对照 reference-bar.md海报测试——高潮帧单独截图能当剧照发吗怯懦测试——有没有在道歉的正文一眼层级——缩略图尺寸下三层还分得开吗场景握手——能说出至少两条字体承认素材的证据吗留白审计——无字幕段是设计过的停顿还是缺口第 3 步fresh-eyes review 交付把预览图与两份清单交给子代理逐帧裁决失败检查全过 正向检查 ≥4/5带证据→ 运行bash scripts/render-and-composite.sh project出片Theme 模式则bash scripts/render-theme.sh project产出final_fx.mp4编译期即含时序与完整性门禁不满足 → 回到plan.json/theme.json修改重编译、重预览循环至达标。对已踩过的坑failure-modes.md 记录了技能开发期间的真实事故CoreML 抠像毁坏脸部 alpha、letter-spacing 动画引发行跳动、screen 混合在亮背景上消失等这些是正向检查无法替你兜底的底层问题应在排查时优先对照。结语从没有坏到值得签名reference-bar.md全文很短但它划出了一条清晰的交付红线工程门禁与审美标尺是两个独立的关卡。Hyperframes 的embedded-captions流水线已经用脚本自动化了前者时序、遮挡、越界、转写一致性而后者——分语域的世界级参照与五项正向检查——是任何脚本都无法替代的判断力必须由人或获得充分上下文的子代理带着具体证据去执行。下一次预览图生成后不妨先问自己一句把这一帧单独截出来它是一张海报还是一个长歪了的字幕这就是 reference bar 的全部意义。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考