HyperFrames Code Editorial 帧规范实战以 1920×1080 帧为单位构建温暖的编辑器品牌书【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes本指南以skills/hyperframes-creative/frame-presets/code-editorial/FRAME.md为主体讲解 HyperFrames 项目中 Code Editorial 帧预设frame preset的完整设计规范色板、字体系统、毛发线层级、组件库、六种帧处理Frame Treatments、构图红线与多宽高比适配。读完本文你将掌握如何把该预设落地为项目frame.md设计规范并为 PR 讲解视频、代码发布等内容产出兼具文学出版气质与代码亲和力的视频帧。什么是 Code Editorial 帧预设HyperFrames 是一个写 HTML、渲染视频、为 Agent 而生的项目其创意方向由skills/hyperframes-creative技能包承载。在该技能包的frame-presets/目录下code-editorial预设与 biennale-yellow、blockframe、blue-professional 等十余个预设并列定位是warm-editorial brand book温暖的编辑部品牌书——文学出版社或研究笔记的质感但专门面向开发者内容代码变更、产品发布、文档说明。依据design-spec.md的消费契约FRAME.md是预设模板Template工作流的 Step 2 会把它复制为项目内的frame.md再叠加品牌令牌。规范文件由两部分组成YAML frontmatter 是规范性层colors、typography、spacing、components是机器可读的真实取值必须逐字引用精确 hex、字体族、字重不得改写或四舍五入Markdown 正文是语境层Overview、The Frame、Composition Rules 等小节承载意图、适用时机与约束供人做判断而非取数值。本预设前言的自我定义值得先读一遍principle: atoms are sacred · composition is free · numbers come from the script 原子神圣 · 构图自由 · 数字来自脚本「原子神圣」指色板、字体、间距令牌不可篡改「构图自由」指在令牌约束下版式与密度可任意发挥「数字来自脚本」指帧内所有数字、代码、统计数据都必须来自 PR 摄取的真实数据禁止编造详见数字与声明一节。预设同时附带三份配套资产均在仓库内可查frame-presets/code-editorial/fonts/EB Garamond、Inter、JetBrains Mono 各 400/700 两档 WOFF2 本地字体及三份 OFL 许可证文本frame-presets/code-editorial/caption-skin.html预设专属的字幕皮肤下三分之一卡拉OK式字幕卡片frame-presets/code-editorial/frame-showcase.html六种帧处理的预览接触表contact sheet用于查看效果不进入项目。设计总纲奶油、墨、珊瑚的三元组Code Editorial 的核心论点是三色cream 是地面ground——温暖的米白纸面ink 是声音voice——所有正文与标题的墨色coral 是电压voltage——极度稀缺的强调色每帧至多出现一次。另有第四个颜色——warm navy暖海军蓝——只在代码现身的地方出现作为代码/终端表面的结构锚点而非第四品牌色。每一处表面都是温暖的 cream绝不是纯白、绝不是冷灰内容聚集在比地面深半步的 tile 表面上边界是半步的柔和过渡而非硬对比。抬升只用1px 低透明度墨色毛发线至多叠加一个柔和暖阴影——没有重投影、没有辉光、没有渐变。三种编辑部声音各司其职声音字体职责展示displayEB Garamond封面、标题、拉引语、大号统计数字大字号 轻微负字距italic是其表现性声部正文与界面body/chromeInter正文、导语、卡片标题、按钮、UI 框架索引层indexicalJetBrains Monokicker眉题、技术标签、代码窗口、状态条切换任一声部的字体族都会破坏整个体系——无衬线标题或衬线标签读起来像另一个品牌。帧尺度的关键特征奶油 / 墨 / 珊瑚三元组 暖海军蓝代码表面奶油是默认地面墨是声音珊瑚是稀缺电压EB Garamondsentence case、负字距承担全部展示文字Inter承担正文/界面JetBrains Mono承担索引与代码毛发线抬升——1px 低透明度墨色边框 至多一个柔和暖阴影无重投影、辉光、渐变珊瑚定量配给——每帧至多一个珊瑚时刻CTA、行内链接或全出血色带三选一珊瑚绝不用于标题或正文密度自由——按内容需求填满帧一帧可以是单一焦点也可以是密集的分层构图✱ 珊瑚尖标记开启 kicker暖海军蓝只保留给代码/终端表面。帧单位与容器法则The Frame本预设的单位是帧frame主画布1920×108016:9。展示文字使用cqw单位排版换算公式为px ÷ 1920 × 100 cqw竖版1080×19209:16方形1080×10801:1安全区slide-pad约 4.2cqwkicker/等宽字体框架元素位于其内。容器法则承重墙必须遵守每个帧地面都必须设置container-type: size所有帧相对单位一律用cqw/cqh相对容器绝不用vw。毛发线始终 1px卡片圆角保持 6/8/12px暖纸阅读感必须在任何比例下成立。帧工艺检查Frame Craft Bar任何结构性检查之前用肉眼测试把关每一帧眯眼测试Squint——只有一个 EB Garamond 展示时刻在 3–6 倍于邻居的尺度上主导画面三元组测试Trinity——奶油/tile 地面、墨色文字、珊瑚恰好一次暖海军蓝只在代码表面无冷灰、纯白、第四色相字体测试Type——EB Garamond sentence case 展示文字负字距Inter 400 正文JetBrains Mono kicker大写、0.16em 字距、珊瑚 ✱ 代码。色板令牌预设完整色板frontmattercolors:与design.md源一致令牌值用途ink#141413墨色标题与正文声音cream#FAF9F5默认地面暖纸tile#EFE9DE半台阶表面内容聚集地tile-strong#ECE3D4更强的半台阶表面coral#CC785C稀缺电压每帧至多一次navy#181715代码/终端表面主体navy-soft#1F1E1B代码表面次级navy-elev#252320代码表面标题栏/抬升层使用规则默认地面是 cream内容聚集在 tile / tile-strong半台阶暖色递进绝非硬对比。标题与正文在奶油/tile 上用 ink在海军蓝上用 cream。coral 是稀缺电压——每帧一个时刻CTA、行内链接或全出血色带永不作为正文、永不作卡片填充。暖海军蓝navy / navy-soft / navy-elev是代码/终端/深色卡片表面——结构性锚点不是第四品牌色。无冷灰、无纯白、无纯黑。固定语法色装饰不可混入品牌色当代码行是手工排版而非由code-*块渲染时语法着色固定为关键字 coral、字符串teal#5DB8A6、数字amber#E8A55A状态色为成功#5DB872/ 警告#C64545。这些颜色跟随代码表面不属于品牌三元组——它们被声明在 §Colors 而非可混排的colors:块中因此任何品牌混排remix都绝不会重绘它们。字体系统与排版标尺两套字阶ramp阅读/界面字阶Inter JetBrains Mono尺寸用 cqwkicker 用 px角色字体尺寸字重行高字距bodyInter1.5cqw4001.5—leadInter2.08cqw4001.5—card-titleInter2.3cqw5001.25−0.005embuttonInter1.46cqw5001.0—tag-upperInter1.35cqw500—0.18em 大写kickerJetBrains Mono28px / 1.46cqw500—0.16em 大写mono-labelJetBrains Mono26px / 1.35cqw500—0.02emcodeJetBrains Mono1.67cqw4001.6—展示字阶EB Garamond 400、sentence case、负字距渲染器只内嵌 400/700 两档——作者只用 400 书写700 会读成厚重的粗体而偏离体系italic 是浏览器合成的倾斜对拉引语声部可接受角色尺寸行高字距headline4.6cqw1.06−0.018emquote-pull5.0cqw1.12−0.012emitalicdisplay-italic6.7cqw1.05−0.012emitalicdisplay7.3cqw1.02−0.022emnumber-hero9.4cqw0.95−0.025emdisplay-cover9.9cqw0.98−0.028emnumber-unitJetBrains Mono2.08cqw1.0字重 500排版硬约束可读性下限任何承重文字行 ≥1.4cqw等宽字体的 px 标签只是界面装饰适配测量fit-to-measure标题按长度定字号。整块上限≤ 78cqw≤3 个词 →display-cover4–6 个词 →display7 个词以上 →headline。把 7.3–9.9cqw 档位留给封面/宣言/数据EB Garamond 展示文字用 sentence case不是 title case、不是全大写、字重 400、负字距−0.012…−0.028em表达立场或定义时用italic。Inter 正文用 sentence case、字重 400。JetBrains Mono kicker全大写、0.16em 字距、前缀珊瑚 ✱。没有大写衬线、没有无衬线标题、没有衬线标签。深度与表面Depth Surface毛发线抬升体系只有三种手段1px 毛发线墨色约 12% 透明度边框是主要抬升手段在海军蓝上用 cream14%一个柔和暖阴影0 1px 3px ink8%, 0 4px 16px ink4%——罕见使用绝不厚重半台阶表面cream 上的 tile 块靠暖色递进而非投影获得抬升感。天花板Ceiling无重投影、无辉光、无内容渐变、无倾斜。这套系统没有光可发它靠暖意与毛发线阅读。间距体系一并固化slide-pad4.2cqw约 80px 1920、gap-md1.7cqw、圆角6px小框架/ 8px卡片与代码表面/ 12px大卡片与引语框/ 9999px真正的药丸——无直角、无厚重圆角编辑部式注册表是轻柔圆角绝非生硬。组件库frontmattercomponents:定义了六个语义组件构图时以角色而非裸样式引用card-hairline——编辑部内容卡片毛发线 一个柔和阴影填充 cream 或 tile12px 圆角。抬升感来自毛发线 一个暖阴影绝无重投影、辉光或渐变kicker-spike——珊瑚 ✱ 前缀的眉题JetBrains Mono 大写、索引式2–5 个词、绝非纯文本、绝非完整句子coral-callout——每帧唯一的电压时刻CTA、单个行内链接或全出血色带三选一可全出血用 coral 填充或 cream 配珊瑚边缘一帧内绝不出现两处珊瑚number-lockup——英雄数字EB Garamond 数字 JetBrains Mono 单位如200K、1,204、−318、17 files。数字是衬线体单位永远是等宽体绝不反过来pull-quote——EB Garamond italic 引文 小号 Inter 全大写出处提交信息、评审意见或论点section-rule——唯一的分隔线1px珊瑚可以画上去引出章节绝不用 2px 以上、绝不用厚重分隔code-surface——暖海军蓝代码/终端表面navy 主体、navy-elev 标题栏与状态条、cream14% 边框、8px 圆角。代码本身由code-*注册表块渲染code-diff / code-typing / code-snippet-*本预设只拥有周围的表面、标题栏、状态条和等宽框架——不拥有代码渲染spike-mark——✱ 品牌字形U2731永远是 coral。在单个强调拍上淡入并缩放 0.92→1绝不旋转。六种帧处理Frame Treatments每种处理遵循统一配方ground地面· container容器· composes组成· focal焦点· chrome框架· accent强调· Fixed/Free固定/自由· density密度。每帧只允许一个珊瑚时刻并以 kicker-spike 开场。1 · Cover封面 · 身份 · 超大 EB Garamond · creamGroundcream slide-padComposeskicker-spike、display-cover、lead、mono-label 索引Focal珊瑚 ✱ kicker 之下的 2–3 行 EB Garamonddisplay-coversentence case、inkChrome等宽索引条仓库 · 分支Accent唯一的珊瑚 ✱FixedEB Garamond 400 sentence case、毛发线、cream 地面Free标题、等宽索引、版式与画面饱满度Density自由。2 · Statement宣言 · 单行 EB Garamond · cream 或 navyGroundcream或为增加重力用 navyComposeskicker-spike、display、可选 leadFocal一行 2 行的 EB Garamonddisplay用一句话承载变更——若表达立场则用italicChrome等宽 kickerAccent无——由衬线本身承载或一个珊瑚词Fixedsentence case 衬线Free内容行、地面、版式与密度。3 · Code Surface代码 · 暖海军蓝代码窗口 · PR 关键帧Groundcream 中框出 navycode-surface8px、cream14% 毛发线、navy-elev 标题栏 等宽文件名Composes等宽文件名、code-*块code-diff / code-typing / code-snippet-*、可选 section-ruleFocal代码面板——diff / before→after / 逐字输入的代码片段Chrome等宽文件名 状态条Accent面板内语法珊瑚/teal/amber面板外一个珊瑚标记如/−行槽提示Fixed暖海军蓝表面、等宽代码、毛发线Free选哪个code-*块、代码内容来自 diff、面板尺寸Density密集。4 · Number / Impact数据 · 超大数字 · creamGroundcream slide-padComposeskicker-spike、number-lockup、lead/说明、可选 section-ruleFocalEB Garamondnumber-hero数字 等宽单位压在 1px 规则线上——PR 影响1,204 / −318、17 files、2.1× fasterChrome等宽标签Accent数字用 ink至多一个珊瑚单位Fixed衬线数字 等宽单位、毛发线规则Free具体数字来自脚本、标签、版式与密度。5 · Pull-quote引语 · EB Garamond italic · creamGroundcreamComposeskicker-spike、pull-quote、tag-upper 出处FocalEB Garamonditalicquote-pull——提交信息、评审意见或论点下方小号 Inter 全大写出处作者 · 角色Chrome等宽 kickerAccent无或一个珊瑚标记FixedEB Garamond italic 引文 全大写出处Free引文、署名、版式与密度。6 · Closing / CTA收尾 · 珊瑚电压 · cream 或 navyGroundcream或 navyComposes展示式签名sign-off、coral-callout、可选贡献者行assets/login.png头像 等宽名字Focal短 EB Garamond 签名 唯一的coral-calloutCTA 或全出血色带shipped-by 收尾时加一行毛发线圆环头像芯片Chrome等宽索引Accent唯一的珊瑚电压Fixed一个珊瑚时刻、毛发线头像圆环、sentence case 衬线Free签名文案、谁参与发布、版式与密度。构图规则Do / DontDo应该每帧站在暖奶油地面上内容聚集在半步 tile 表面全部展示文字用EB Garamond、sentence case、负字距Inter 400正文JetBrains Monokicker大写、0.16em、珊瑚 ✱ 代码珊瑚每帧只配给一个时刻——CTA、行内链接或全出血色带用1px 毛发线 至多一个柔和暖阴影抬升暖海军蓝只保留给代码/终端表面一个清晰焦点领衔区域以kicker-spike开场按内容需求填满帧每个数据都配衬线数字 等宽单位代码经由code-*块渲染在海军蓝表面上。Dont禁止无纯白、无冷灰、无纯黑无第四品牌色navy 是结构性的语法色是装饰性的无重投影、辉光、内容渐变、倾斜——只有毛发线抬升无大写或 title case 的 EB Garamond 展示文字无无衬线标题无衬线标签无衬线排版的数字单位一帧内无两处珊瑚珊瑚绝不设置标题或正文标题不要越过测量上限——按字阶逐级下调。宽高比行为处理16:99:161:1Cover展示文字左对齐索引置顶展示文字置顶索引在下展示文字居中索引角落Statement行左对齐/居中行堆叠居中Code Surface面板框在奶油中面板更高、行数更少面板居中、方形Number/Impact数字左对齐数字居中、更高居中Pull-quote引文左对齐引文堆叠居中Closing/CTA签名 头像行签名置顶、头像在下居中、头像换行slide-pad在短边上保持生效展示文字重新落到 1.4cqw 可读下限之上。代码表面在任何比例下都保持毛发线 等宽框架头像行换行而不是缩小到低于可读性。真实实体与头像Approved Real Entities源码中未定义任何真实客户、Logo 或供应商——任何此类标记一律渲染为占位符。贡献者头像来自项目的assets/login.png由 PR 的 people graph 分阶段拉取✱ 尖、毛发线和代码表面均为纯 CSS无需外部图片。在 PR 视频工作流中见pr-to-video的 frame worker头像只出现在 credits 收尾帧以毛发线圆环芯片形式呈现绝不装饰代码帧。数字与声明硬规则帧尺度上永远不许编造数字、数据、diff 或计数。渲染槽位一律用— figure —、{metric}、N / −M占位。number-lockup、代码面板和影响数据在脚本来自 PR 摄取提供真实值之前保持占位符。分支名、文件数与/−总计必须追溯到 diff提交/issue 编号属于界面装饰。渲染前自查清单Squint——一个 EB Garamond 展示时刻主导画面Trinity——奶油地面 tile 台阶 墨色声音珊瑚恰好出现一次暖海军蓝只在代码表面无冷灰/纯白/第四色相Type——EB Garamond sentence case 展示文字负字距Inter 400 正文JetBrains Mono kicker大写 0.16em、珊瑚 ✱ 代码≥1.4cqw 下限Depth——1px 毛发线 至多一个柔和暖阴影无重投影/辉光/渐变/倾斜6/8/12px 圆角Code——代码由code-*块渲染在暖海军蓝表面语法 coral/teal/amber数字配等宽单位Fabrication防编造——每个数字/diff 都追溯到 PR否则用占位符。与代码块、字幕、字体的协作细节代码内容归code-*注册表块所有Code Editorial 的一个重要边界代码本身的渲染不属于本预设。PR 视频的代码拍code beat使用注册表中的现成动画块——code-diff统一 diff删除行红收、新增行绿展、code-morphFLIP 形变、code-typing逐字键入 光标、code-highlight0 基行号扫光、code-scroll1 基行号滚动定位、code-3d-extrude/code-particle-assemble/code-shader-dissolveWebGL 效果等。安装方式统一为npx hyperframes add block-name # 写入 compositions/block-name.html这些块是自包含子合成内联引擎 引擎逐帧 seek 的暂停 GSAP 时间线以data-composition-id挂载进帧。块通过两个全局变量定制window.__TOKENS以 Shiki 令牌烘焙的代码内容与window.__BLOCK效果、时序、行号。块自带编辑器窗口标题栏/文件名恰好读作 code-editorial 的海军蓝Code Surface——预设负责周围的表面与框架块负责代码动画。完整词汇表见pr-to-video/references/code-vocabulary.md。关键适配点块内部节奏必须适配帧的data-duration——code-typing按固定每字符速度键入长代码片段在短帧内会打不完字同时注意code-highlight是 0 基、code-scroll是 1 基行号块没有字幕安全带开启字幕时要把代码面板压到顶部约 83% 以内避开底部字幕避让带。字幕皮肤复用预设令牌预设自带的caption-skin.html是它的下三分之一卡拉 OK 字幕外观暖奶油卡片从页面上抬起靠 1px 墨色毛发线 一个柔和暖阴影正是 Code Editorial 唯一的抬升语言12px 圆角、不倾斜。EB Garamond sentence case、暖墨字形未读词呈淡墨色当前词呈全墨并在 3px 珊瑚电压下划线下方品牌的行内链接手势border-bottom实现下划线且不引起布局位移已读词落为纯墨、下划线清除。它引用固定令牌词汇表--cap-ink、--cap-canvas、--cap-accent、--font-display、--font-body等由captions.mjs从项目的frame.md注入:root令牌因此品牌叠加自然流转。本地字体与font-faceEB Garamond、Inter、JetBrains Mono 以本地授权 WOFF2 资产随预设一起发布400 700 两档见fonts/。build-frame.mjs把字体重 400 700 暂存进assets/fonts/并把精确的font-face块追加到生成的frame.md——因此 Studio、快照与渲染都能离线解析这些字体无需首次运行时拉取 Google Fonts。作者书写展示文字用字重 400700 读作厚重粗体、偏离注册表italic 视为浏览器合成倾斜对拉引语声部可接受只有当项目重度依赖 italic 时才补充真实斜体字面。EB Garamond 是暖调旧式衬线低对比度、人文主义若字体加载失败回退到 Georgia 或另一款旧式衬线——绝不回退到无衬线。CJK 场景Noto Serif SC展示/ Noto Sans SC正文/ Noto Sans Mono CJK代码衬线退场时 sentence case 的暖意仍然延续。已知边界Known Gaps动效刻意不在范围内。FRAME.md 只规定构图。Code Editorial 的运动语汇——短交叉溶解、无过冲/反弹/弹性、珊瑚是唯一的画上去元素、数字滚动计数、代码逐行键入——属于工作流的motion-language.md与hyperframes-animation不在本文件语法色teal#5DB8A6/ amber#E8A55A/ 状态色是固定装饰声明在 §Colors不在可混排的colors:块中——品牌混排绝不会重绘它们代码本身是code-*注册表块本预设只拥有周围的暖海军蓝表面 等宽框架9:16 / 1:1 是指导性规范——请逐比例验证可读性下限并确认奶油/tile 暖意与一珊瑚纪律在每个比例下都成立。如何在实际项目中使用本预设按照design-spec.md的流程把预设落地到项目解析规范按frame.md → design.md → DESIGN.md优先级取第一个存在的规范文件frame.md恒为小写预设的FRAME.md是模板被采用为小写frame.md采用预设将code-editorial/FRAME.md复制为项目frame.mdfrontmatter 令牌即品牌真理可选品牌混排build-frame.mjs支持--preset code-editorial自动完成其余工作——复制 FRAME.md → frame.md、按角色把品牌令牌映射到预设键只改colors:值与typography:的 fontFamily键、字阶、间距不动、暂存品牌字体文件并追加根相对路径的font-face块。混排按亮度极性映射预设的暗值取品牌的暗值、亮值取品牌的亮值若品牌是深色模式整个预设会被反转canvas↔ink 互换而非硬套查看效果打开frame-showcase.html预览六种帧处理的接触表但绝不把展示文件纳入项目落地渲染帧以 HTML/CSS/SVG 构建代码拍交给code-*块字幕与字体按上文契约接入最终由 HyperFrames 引擎逐帧 seek 渲染为视频。这套体系的核心方法论可以一句话概括把文学出版与开发者内容焊在一起——cream/tile 的暖纸地面、EB Garamond 的句子式展示、jetbrains Mono 的索引式眉题、1px 毛发线的抬升以及那只每帧只出现一次的珊瑚 ✱。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考