企业官网建设流程全解析

HyperFrames 帧级设计系统实战：以 Editorial Forest 为例解读 frame.md 规范与落地

【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes

导读

本文基于 HyperFrames 创意技能库（skills/hyperframes-creative）中的Editorial Forest 帧预设（frame preset），系统讲解视频项目帧级设计规范frame.md的完整结构、设计令牌（design tokens）、六种帧版式（frame treatments）、多宽高比行为与渲染前自检流程。读完本文，你将掌握如何把一个以 YAML frontmatter 为规范层、以 Markdown 正文为语境层的帧级设计系统应用到 HyperFrames 视频创作中，并能借助同目录的frame-showcase.html与caption-skin.html理解其底层 CSS 实现逻辑。

一、frame.md 是什么：帧级设计系统规范

在 HyperFrames 的创意工作流中，frame.md是以"帧"（frame，1920×1080）为单位的视频设计系统，是design.md（面向网页/静态页面）的视频优先伴侣。二者文件格式相同（YAML frontmatter + Markdown 正文），但frame.md将品牌重新锚定在视频帧这个单元上。

从 design-spec.md 可知其解析契约：

• frontmatter 是规范层（normative layer）：colors、typography、spacing、components是真正可机读的值，必须逐字引用（精确 hex、字族、字重），不得发明或取整；
• 正文是语境层（context）：##章节承载意图、使用时机与令牌无法表达的约束，用于判断而非取值；
• 解析优先级：frame.md → design.md → DESIGN.md，取第一个存在的文件；frame.md恒为小写，帧预设目录下发布的是大写的FRAME.md模板，被工作流复制并重命名为frame.md后使用。

Editorial Forest 预设（FRAME.md）即这样一个完整样例：其设计意图被概括为"atoms are sacred · composition is free · numbers come from the script"（原子神圣、构图自由、数字来自脚本），定位是 "Penguin classic / quiet annual report / art-book spread" 式的文学编辑风。

二、设计令牌：色彩、字体、间距速查表

2.1 色彩令牌（Colors）

Editorial Forest 严格使用绿 / 粉 / 奶油三色组（triad）+ 近似色，整个调色板只有 8 个令牌：

用法规则：内容帧默认地面cream，封面/陈述/摘要帧用green制造"重力时刻"；单帧最多两种表面色调，三种即喧闹；绝不出现第四色族，表面从不使用rgba透明度。在 frame-showcase.html 中，这些令牌被落为 CSS 变量（--green、--pink、--cream、--cream-2、--ink等，见第 14–25 行），全部组件都从变量取值。

2.2 字体令牌（Typography）

系统只允许两个字体：Source Serif 4（衬线，承担所有展示级标题与正文）与JetBrains Mono（等宽，承担全部"编辑级镀铬"：标签、字幕、坐标刻度、页脚线）。两条字号阶梯（ramp）：

阅读/镀铬阶梯（正文与 UI 镀铬）：

展示阶梯（所有标题与数字，全部 Source Serif 4 字重 500、启用 optical-size 轴、负字距）：

核心纪律：展示级一律 500（绝不 400、绝不 700），正文 400，署名 600——500→400 的下沉就是阅读节奏；衬线只用这三档字重，禁止斜体、下划线、第三字体、500 字重的衬线正文；等宽一律大写、字距 0.08–0.18em。可读性下限：任何承重行 ≥1.4cqw，等宽 px 级标签仅作镀铬。

2.3 间距令牌（Spacing）

三、帧的构成：画布、安全区与容器法则

3.1 三种画布

• 主画布：1920×1080（16:9），展示字号以cqw撰写，换算公式为px ÷ 1920 × 100 = cqw；
• 竖屏：1080×1920（9:16）；
• 方形：1080×1080（1:1）。

3.2 安全区

slide-pad即5cqw安全边距，topbar（顶部栏）与 footline（页脚线）都位于其内。

3.3 容器法则（load-bearing，承重规则）

每一帧地面必须设置container-type: size，所有帧相对单位一律用cqw/cqh相对它计算，绝不使用vw——因为源设计稿是固定 1920 画布，其 px 可干净映射（px ÷ 1920 × 100）。细线恒为 2px，卡片圆角恒为 6/8px。在 frame-showcase.html 第 422–429 行可看到这一法则的实现：.frame类同时声明aspect-ratio: 16/9; container-type: size;，其内部 topbar 的左右定位用5cqw、字号用0.95cqw，全部锚定容器尺寸而非视口。

四、Frame Craft Bar：渲染前的三道目测关卡

任何结构性检查之前，每帧必须通过三项目测：

五、颜色使用细则

标题配色：绿底用奶油（hero 尺度可用粉）、绿底用粉、粉底用深绿。正文配色：奶油底用墨色、绿底用奶油、粉底用深绿。标签/规则线取区域强调色：粉在绿上、绿在奶油上、深绿在粉上。瓦片填充在 green / pink / green-lite / cream-2+绿边框 之间轮转。

禁止项：无第四色族（三色组 + 近似色即全部调色板）；表面绝不使用rgba透明度。该配色体系与 video-composition.md 的"品牌色神圣、应用方式自由"契约一致——严格继承 hex 与字重关系，布局则是自由的。

六、深度与表面：纸面扁平

Editorial Forest 的深度完全扁平、纸基，层级感只来自三种手段：

1. 色块对比——奶油地上的绿瓦片靠墨块分离获得浮起感；
2. 2px 细线规则——以区域强调色做区块分隔；
3. 边框 vs 填充——cream-2 瓦片 + 2px 绿边框读起来与实心瓦片是不同层级。

天花板（硬性禁令）：零阴影（任何box-shadow都会击碎纸感）、无渐变、无辉光；表面一律是实色"墨在纸上"。形状上：topic tile 6px、step tile 8px、图例色块 2px、条形顶部3px 3px 0 0、花押圆 50%——没有直角，也没有重度圆角；花押圆是唯一全圆元素。

七、组件系统

在 frame-showcase.html 中，瓦片四色轮转的实现（.tile.green/.pink/.lite/.cream2，第 297–328 行）、花押圆（.monobig，第 361–373 行）、KPI 块（.kpi .fig128px/0.92 行高/−0.03em，第 329–360 行）、条形图（.bars .bar56px 宽，第 374–397 行）与 meta-dl 全部可对照查看，可作为逐组件复刻的参考实现。

八、六种帧版式（Frame Treatments）

每种版式遵循固定配方：ground（地面）· container（容器）· composes（组成）· focal（焦点）· chrome（镀铬）· accent（强调）· silence（寂静度）· Fixed/Free（固定/自由）· density（密度）。

1 · Cover（封面 · 身份 · 超大衬线 · 绿底 · 左对齐）

• 地面green，slide-pad；组成topbar（等宽标签 + 花押圆）、display-hero、正文 lede、footline；
• 焦点两行 Source Serif 4display-hero粉色（其中一词奶油色），居左；
• 强调粉展示字 + 花押圆；寂静度~50%；密度低；
• 固定衬线 500、扁平、2px 粉花押圆；自由标题文案与奶油色词的选择。

实现见 frame-showcase.html 的.ef1（第 467–506 行）：封面 h3 用13cqw粉字、奶油色强调词.cr、花押圆7cqw直径 +0.13cqw粉边框。

2 · Topic Tiles（目录 · 轮转填充网格 · 奶油底 · 密集帧）

• 地面cream；组成topbar、headline-xl、3–4 个 topic-tile；
• 焦点一排 6px 瓦片，填充在 green / pink / cream-2+边框间轮转，每个含等宽序号 + 衬线标题；
• 强调瓦片填充（4 选 3 混用，网格内不重复）；密度密集例外；
• 固定6px 圆角、轮转填充、无阴影；自由瓦片标题与填充选择。

实现见.ef2（第 508–571 行）：三列repeat(3, 1fr)网格 +0.6cqw圆角，green/pink/cream2 三种填充。

3 · KPI Stat（数据 · 超大数字 · 绿底）

• 地面green；组成topbar、kpi-block（等宽标签 + 220px stat-figure + 衬线描述）、footline；
• 焦点Source Serif 4stat-figure（约 11.5cqw，带单位）粉色，置于 2px 粉规则之上；
• 强调粉数字；寂静度~55%；密度低；
• 固定衬线 500 数字、2px 强调规则、扁平；自由数字（来自脚本）、标签、描述。

实现见.ef3（第 573–619 行）：18cqw粉数字 +9cqw单位 + 等宽标签与0.12cqw粉顶部规则。

4 · Statement（引言 · 展示衬线 · 奶油底 · 左对齐）

• 地面cream，慷慨留白；组成topbar、display、600 字重署名、caption-mono角色行；
• 焦点两行 Source Serif 4display（约 7.3cqw）绿色 + 600 字重署名 + 等宽角色；
• 强调无——衬线自身承重；寂静度~55%；密度低；
• 固定衬线 500 展示 + 600 署名（无斜体）；自由引言、姓名、角色。

实现见.ef4（第 621–651 行）：6.4cqw绿衬线 +1.9cqw600 字重署名 + 等宽角色行。

5 · Step Framework（流程 · 8px step 瓦片 · 奶油/绿底）

• 地面cream（或绿）；组成topbar、headline、3–4 个 step-tile；
• 焦点一排 8px step 瓦片（2.5px 边框）——等宽序号 + 衬线 68px 标题 + 正文 + 顶部规则上的等宽标记；填充轮转 cream+绿边框 / green / pink；
• 强调瓦片填充；寂静度中等；密度标准；
• 固定8px 圆角、2.5px 边框、等宽标记；自由步骤内容与填充。

6 · Chart（数据 · 条形 + 元数据 · 绿底）

• 地面green；组成topbar、headline、条形 + 2px 轴规则、meta-dl；
• 焦点56px 粉/奶油/绿条形立于内侧 2px 规则上，带等宽刻度；可选 3 列 meta-dl 在其下；
• 强调条形填充；寂静度中等；密度标准；
• 固定56px 条形、3px 顶部、2px 轴、等宽刻度；自由数值（来自脚本）与标签。

九、构图规则：Do / Don't

Do（必须）

• 所有展示级文字用Source Serif 4 字重 500、opsz、负字距、紧凑行高；正文400；
• 所有标签/字幕/刻度/页脚线用JetBrains Mono 500 大写、0.08–0.18em；
• 每帧都有 topbar（等宽标签 + 花押或计数器）；数据/封面帧带 footline；
• 每帧选一个主导表面（最多两种色调）；瓦片填充轮转、网格内不重复；
• 用区域强调色的2px 细线分隔区块；花押圆只留给封面/摘要；
• 展示字阶激进放大（statement/stat/cover 用 7.3–11.5cqw）；编辑式左倾，每帧一个主题。

Don't（禁止）

• 无box-shadow、渐变、辉光——只允许扁平纸基深度；
• 无第三字体；无斜体/下划线；无 500 字重衬线正文；无等宽做标题尺度；
• 无第四色族；无rgba表面；无 1px 或 4px+ 规则线（仅 2px / 2.5px）；
• 无两个互相竞争的内容块；不许省略 topbar；
• 标题不得撑满全宽——按量降阶。

十、多宽高比行为（Aspect-Ratio Behavior）

slide-pad在短边保持成立；展示字阶重新分级时不得低于1.4cqw可读性下限。topbar 在所有比例下横跨顶部；花押圆可降级到角落。

十一、真实实体、数字与声明（硬规则）

Approved Real Entities：源设计稿未定义任何真实客户、Logo 或厂商——此类标记一律渲染为占位符。花押、页脚字符串与瓦片计数器承载每套 deck 的身份，数字属于内容。

Numerals & Claims（硬规则）：帧尺度上绝不虚构数字、KPI、日期或计数。KPI 块、条形与 meta 值在脚本提供之前一律渲染为— figure —、{metric}、— %占位符。期号/计数器属于装饰性镀铬。这与 story-spine.md 的 "source-traceable visuals"（视觉可溯源）原则一脉相承。

十二、渲染前自检清单（Pre-Render Self-Audit）

如需自动化的对比度核验，可用 contrast-report.mjs 检查渲染帧的对比度警告。

十三、已知缺口与落地注意（Known Gaps）

• 动效明确不在范围内：frame.md只规定构图；源设计依赖deck-stage.js处理缩放与导航，没有转场规范。动效原子规则请转向hyperframes-animation技能；
• 字体加载：Source Serif 4（opsz 8..60）与 JetBrains Mono 经由 Google Fonts 引入，optical-size 轴至关重要——无 opsz 的回退字体会压平"随尺寸变化"的字形。中文回退方案：展示用 LXGW WenKai、正文用 Noto Serif SC、镀铬用 Noto Sans Mono CJK；
• 9:16 / 1:1 属指导性：须逐比例验证可读性下限与双色调纪律是否成立；
• 纯 CSS 实现：条形、细线、瓦片与花押圆全部 CSS-only，无需外部图片素材；
• 对比度：green-on-pink / pink-on-green 仅在展示尺度（84px+）使用；小字保持 cream-on-green 或 ink-on-cream。

十四、配套资产：字幕皮肤与预览画册

除FRAME.md外，预设目录还提供两个可直接使用的配套资产：

1. frame-showcase.html——预设的帧版式预览画册（contact sheet），完整渲染了封面、色板、字阶、组件、六种构图、规则与字幕皮肤预览，用于查看观感（按 design-spec.md 约定，不并入项目）；其中的__bundler_thumbnailSVG 模板还展示了打包缩略图（绿底 + 粉色 Aa + 花押圆 + 细线）的规范画法。

2. caption-skin.html——该预设的下三分之一卡拉OK式字幕皮肤：燕麦奶油卡片 + 单条 2px 绿细线边框 + 6px 圆角 + 无阴影（保持扁平纸感）；Source Serif 4 字重 500、句首大写、暖墨字形；未念词为淡墨、当前词为灰玫瑰色柔和面板（box-shadow扩散模拟 6px 圆角块、无模糊）、已念词落为实墨并清除面板。其令牌契约（--cap-ink、--cap-canvas、--cap-accent、--cap-accent-2、--font-display、--font-body、--cap-band-top、--cap-band-height）由captions.mjs从项目的frame.md注入:root，保证品牌令牌贯通；钩子.caption-group / .caption-word与.is-active / .is-spoken状态由引擎逐帧 seek 驱动（gsap.set({className})，禁用tl.call()回调，否则渲染时状态错位）。

结语：从规范到渲染的完整链路

Editorial Forest 帧预设给出了一个自洽的闭环：FRAME.md提供机读令牌与版式配方，frame-showcase.html 提供可对照的 CSS 实现，caption-skin.html 提供字幕层落地，而 design-spec.md 定义了预设采用与解析机制（frame.md → design.md → DESIGN.md优先级，frontmatter 即品牌真相）。按 SKILL.md 的工作流，将FRAME.md复制为项目的frame.md并叠加品牌令牌，随后按六种版式配方与自检清单逐帧落 HTML，即可稳定产出"安静、自信、文学化"的视频帧——全部元素（条形、细线、瓦片、花押圆）均为 CSS 原生，无需任何外部图片素材。

【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes