企业官网建设流程全解析

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 低透明度墨色毛发线，至多叠加一个柔和暖阴影——没有重投影、没有辉光、没有渐变。

三种编辑部声音，各司其职：

切换任一声部的字体族都会破坏整个体系——无衬线标题或衬线标签读起来像另一个品牌。

帧尺度的关键特征

• 奶油 / 墨 / 珊瑚三元组+ 暖海军蓝代码表面；奶油是默认地面，墨是声音，珊瑚是稀缺电压；
• EB Garamond（sentence case、负字距）承担全部展示文字；Inter承担正文/界面；JetBrains Mono承担索引与代码；
• 毛发线抬升——1px 低透明度墨色边框 + 至多一个柔和暖阴影，无重投影、辉光、渐变；
• 珊瑚定量配给——每帧至多一个珊瑚时刻（CTA、行内链接或全出血色带三选一）；珊瑚绝不用于标题或正文；
• 密度自由——按内容需求填满帧；一帧可以是单一焦点，也可以是密集的分层构图；
• ✱ 珊瑚尖标记开启 kicker；暖海军蓝只保留给代码/终端表面。

帧单位与容器法则（The Frame）

本预设的单位是帧（frame）：

• 主画布：1920×1080（16:9）。展示文字使用cqw单位排版，换算公式为px ÷ 1920 × 100 = cqw；
• 竖版：1080×1920（9:16）；方形：1080×1080（1:1）；
• 安全区：slide-pad约 4.2cqw，kicker/等宽字体框架元素位于其内。

容器法则（承重墙，必须遵守）：每个帧地面都必须设置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源一致）：

使用规则：默认地面是 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，尺寸用 cqw，kicker 用 px）：

展示字阶（EB Garamond 400、sentence case、负字距；渲染器只内嵌 400/700 两档——作者只用 400 书写，700 会读成厚重的粗体而偏离体系；italic 是浏览器合成的倾斜，对拉引语声部可接受）：

排版硬约束

• 可读性下限：任何承重文字行 ≥1.4cqw；等宽字体的 px 标签只是界面装饰；
• 适配测量（fit-to-measure）：标题按长度定字号。整块上限≤ 78cqw；≤3 个词 →display-cover；4–6 个词 →display；7 个词以上 →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）

毛发线抬升体系，只有三种手段：

1. 1px 毛发线：墨色约 12% 透明度边框是主要抬升手段（在海军蓝上用 cream@14%）；
2. 一个柔和暖阴影：0 1px 3px ink@8%, 0 4px 16px ink@4%——罕见使用，绝不厚重；
3. 半台阶表面：cream 上的 tile 块靠暖色递进而非投影获得抬升感。

天花板（Ceiling）：无重投影、无辉光、无内容渐变、无倾斜。这套系统没有"光"可发，它靠暖意与毛发线阅读。间距体系一并固化：slide-pad4.2cqw（约 80px @1920）、gap-md1.7cqw、圆角6px（小框架）/ 8px（卡片与代码表面）/ 12px（大卡片与引语框）/ 9999px（真正的药丸）——无直角、无厚重圆角；编辑部式注册表是"轻柔圆角"，绝非生硬。

组件库

frontmattercomponents:定义了六个语义组件，构图时以"角色"而非裸样式引用：

• card-hairline——编辑部内容卡片（毛发线 + 一个柔和阴影）；填充 cream 或 tile；12px 圆角。抬升感来自毛发线 + 一个暖阴影，绝无重投影、辉光或渐变；
• 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 标题栏与状态条、cream@14% 边框、8px 圆角。代码本身由code-*注册表块渲染（code-diff / code-typing / code-snippet-*），本预设只拥有周围的表面、标题栏、状态条和等宽框架——不拥有代码渲染；
• spike-mark——✱ 品牌字形（U+2731），永远是 coral。在单个强调拍上淡入并缩放 0.92→1，绝不旋转。

六种帧处理（Frame Treatments）

每种处理遵循统一配方：ground（地面）· container（容器）· composes（组成）· focal（焦点）· chrome（框架）· accent（强调）· Fixed/Free（固定/自由）· density（密度）。每帧只允许一个珊瑚时刻，并以 kicker-spike 开场。

1 · Cover（封面 · 身份 · 超大 EB Garamond · cream）

• Ground：cream +slide-pad；Composes：kicker-spike、display-cover、lead、mono-label 索引；
• Focal：珊瑚 ✱ kicker 之下的 2–3 行 EB Garamonddisplay-cover（sentence case、ink）；
• Chrome：等宽索引条（仓库 · 分支）；Accent：唯一的珊瑚 ✱；
• Fixed：EB Garamond 400 sentence case、毛发线、cream 地面；Free：标题、等宽索引、版式与画面饱满度；Density：自由。

2 · Statement（宣言 · 单行 EB Garamond · cream 或 navy）

• Ground：cream（或为增加重力用 navy）；Composes：kicker-spike、display、可选 lead；
• Focal：一行 2 行的 EB Garamonddisplay用一句话承载变更——若表达立场则用italic；
• Chrome：等宽 kicker；Accent：无——由衬线本身承载（或一个珊瑚词）；
• Fixed：sentence case 衬线；Free：内容行、地面、版式与密度。

3 · Code Surface（代码 · 暖海军蓝代码窗口 · PR 关键帧）

• Ground：cream 中框出 navycode-surface（8px、cream@14% 毛发线、navy-elev 标题栏 + 等宽文件名）；
• Composes：等宽文件名、code-*块（code-diff / code-typing / code-snippet-*）、可选 section-rule；
• Focal：代码面板——diff / before→after / 逐字输入的代码片段；
• Chrome：等宽文件名 + 状态条；Accent：面板内语法珊瑚/teal/amber；面板外一个珊瑚标记（如+/−行槽提示）；
• Fixed：暖海军蓝表面、等宽代码、毛发线；Free：选哪个code-*块、代码内容（来自 diff）、面板尺寸；Density：密集。

4 · Number / Impact（数据 · 超大数字 · cream）

• Ground：cream +slide-pad；Composes：kicker-spike、number-lockup、lead/说明、可选 section-rule；
• Focal：EB Garamondnumber-hero数字 + 等宽单位，压在 1px 规则线上——PR 影响（+1,204 / −318、17 files、2.1× faster）；
• Chrome：等宽标签；Accent：数字用 ink；至多一个珊瑚单位；
• Fixed：衬线数字 + 等宽单位、毛发线规则；Free：具体数字（来自脚本）、标签、版式与密度。

5 · Pull-quote（引语 · EB Garamond italic · cream）

• Ground：cream；Composes：kicker-spike、pull-quote、tag-upper 出处；
• Focal：EB Garamonditalicquote-pull——提交信息、评审意见或论点，下方小号 Inter 全大写出处（作者 · 角色）；
• Chrome：等宽 kicker；Accent：无，或一个珊瑚标记；
• Fixed：EB Garamond italic 引文 + 全大写出处；Free：引文、署名、版式与密度。

6 · Closing / CTA（收尾 · 珊瑚电压 · cream 或 navy）

• Ground：cream（或 navy）；Composes：展示式签名（sign-off）、coral-callout、可选贡献者行（assets/<login>.png头像 + 等宽名字）；
• Focal：短 EB Garamond 签名 + 唯一的coral-callout（CTA 或全出血色带）；"shipped-by" 收尾时加一行毛发线圆环头像芯片；
• Chrome：等宽索引；Accent：唯一的珊瑚电压；
• Fixed：一个珊瑚时刻、毛发线头像圆环、sentence case 衬线；Free：签名文案、谁参与发布、版式与密度。

构图规则：Do / Don't

Do（应该）：

• 每帧站在暖奶油地面上；内容聚集在半步 tile 表面；
• 全部展示文字用EB Garamond、sentence case、负字距；Inter 400正文；JetBrains Monokicker（大写、0.16em、珊瑚 ✱）+ 代码；
• 珊瑚每帧只配给一个时刻——CTA、行内链接或全出血色带；
• 用1px 毛发线+ 至多一个柔和暖阴影抬升；暖海军蓝只保留给代码/终端表面；
• 一个清晰焦点领衔；区域以kicker-spike开场；按内容需求填满帧；
• 每个数据都配衬线数字 + 等宽单位；代码经由code-*块渲染在海军蓝表面上。

Don't（禁止）：

• 无纯白、无冷灰、无纯黑；无第四品牌色（navy 是结构性的，语法色是装饰性的）；
• 无重投影、辉光、内容渐变、倾斜——只有毛发线抬升；
• 无大写或 title case 的 EB Garamond 展示文字；无无衬线标题；无衬线标签；无衬线排版的数字单位；
• 一帧内无两处珊瑚；珊瑚绝不设置标题或正文；
• 标题不要越过测量上限——按字阶逐级下调。

宽高比行为

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-morph（FLIP 形变）、code-typing（逐字键入 + 光标）、code-highlight（0 基行号扫光）、code-scroll（1 基行号滚动定位）、code-3d-extrude/code-particle-assemble/code-shader-dissolve（WebGL 效果）等。安装方式统一为：

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-face

EB Garamond、Inter、JetBrains Mono 以本地授权 WOFF2 资产随预设一起发布（400 + 700 两档，见fonts/）。build-frame.mjs把字体重 400 + 700 暂存进assets/fonts/，并把精确的@font-face块追加到生成的frame.md——因此 Studio、快照与渲染都能离线解析这些字体，无需首次运行时拉取 Google Fonts。作者书写展示文字用字重 400（700 读作厚重粗体、偏离注册表），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的流程，把预设落地到项目：

1. 解析规范：按frame.md → design.md → DESIGN.md优先级取第一个存在的规范文件（frame.md恒为小写；预设的FRAME.md是模板，被采用为小写frame.md）；
2. 采用预设：将code-editorial/FRAME.md复制为项目frame.md，frontmatter 令牌即品牌真理；
3. 可选品牌混排：build-frame.mjs支持--preset code-editorial自动完成其余工作——复制 FRAME.md → frame.md、按"角色"把品牌令牌映射到预设键（只改colors:值与typography:的 fontFamily，键、字阶、间距不动）、暂存品牌字体文件并追加根相对路径的@font-face块。混排按亮度极性映射：预设的暗值取品牌的暗值、亮值取品牌的亮值；若品牌是深色模式，整个预设会被反转（canvas↔ink 互换）而非硬套；
4. 查看效果：打开frame-showcase.html预览六种帧处理的接触表，但绝不把展示文件纳入项目；
5. 落地渲染：帧以 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