OpenMontage HyperFrames 设计规范实战：Biennale Yellow 帧预设（FRAME.md）全解

OpenMontage HyperFrames 设计规范实战：Biennale Yellow 帧预设（FRAME.md）全解

【免费下载链接】OpenMontageWorld's first open-source, agentic video production system. 12 production pipelines, 100+ tools, 700+ agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage

本文以 OpenMontage 仓库.agents/skills/hyperframes-creative/frame-presets/biennale-yellow/下的FRAME.md为主体，完整拆解这份面向视频画面（frame）层级的"文学-编辑式"设计系统：从 YAML frontmatter 的 7 个颜色 token、16 档字号、10 类组件，到 Cover / Ledger / Poster Panel 等六种画面处理的装配配方与 9:16、1:1 适配规则。读完你不仅能原样复刻"纸、墨、黄"的艺博会目录质感画面，还能理解 frame.md 这类设计规格在 OpenMontage HyperFrames 技能体系中被 Agent 读取、采纳与验证的完整链路。

1. 它是什么：视频优先的"帧设计规格"预设

Biennale Yellow（双年展黄）是 OpenMontage 中 HyperFrames Creative 技能（.agents/skills/hyperframes-creative/SKILL.md）所维护的一组**现成 frame-preset（帧预设）**之一。同目录下还并排存在着 blockframe、blue-professional、bold-poster、capsule、cartesian、claude、cobalt-grid、coral、creative-mode、daisy-days、editorial-forest 等十余套风格完全不同的预设。

这套预设定义的是视频帧（1920×1080 为主）尺度上的设计系统，而非网页/静态页面的设计。其本质文件FRAME.md采用"YAML frontmatter + Markdown 正文"双结构：

• frontmatter 是规范层（normative）：colors、typography、spacing、components中是可被机器精确解析的颜色值、字号、行高、字距——引用时必须逐字照搬，不可四舍五入或自行发挥；
• 正文（## 起）是语境层（context）：Overview、Frame Treatments、Composition Rules 等章节承载 token 表达不了的"何时用、为何用、用在哪"的意图与约束。

依据 .agents/skills/hyperframes-creative/references/design-spec.md 的定义，在 HyperFrames 工作流中读取设计规格的优先级是frame.md → design.md → DESIGN.md，其中 frame.md 是视频 / HyperFrames 项目的首选规格且恒为小写；本预设发布的是大写FRAME.md模板，工作流的设计步骤会将其拷贝进项目并改名为小写frame.md采纳使用，再按需叠加品牌 token。

每一套预设目录都同时附送frame-showcase.html（预览其画面处理的"样张联系表"）与caption-skin.html（该预设专属的字幕皮肤），Biennale Yellow 三件套齐备。可对照本仓库的 frame-showcase.html 与 caption-skin.html 直接"看到"这套风格。

2. Overview：从艺博会目录到视频画面

Biennale Yellow 在帧尺度上是一套文学-编辑式（literary-editorial）系统，气质对标艺术双年展的画册：暖羊皮纸底色、单一深靛蓝墨色、以阳光黄作为氛围色。没有卡片、没有按钮、没有阴影、没有圆角——结构词汇只有**纸（paper）、墨（ink）、黄（sun）三种。深度由柔和的径向日光晕（sun bloom）**制造，而非靠图层抬升（elevation）。

它由三种字体各自承担僵化分工：

• Instrument Serif（仅 weight 400、紧凑行高、负字距）承担全部 display、数字与引文，范围从 40px 到 720px+；
• Archivo承担正文与宽字距大写 micro-label；
• JetBrains Mono承担所有日期、数字与页码。

文字永远是墨色——对比度来自字号与字重，绝不来自颜色。整体情绪介于折页博物馆宣传册与慢阅读文学季刊之间：自信、有氛围、极度克制。

帧尺度的关键特征可归纳为五条：

• 每一帧都是暖羊皮纸底，绝不用白色或灰色；
• 单一墨色承担所有文字与规则线；阳光黄只以 bloom / panel / tile 三种形态出现；
• Instrument Serif 400承担 display（紧凑、负字距）；Archivo 承担正文与 micro-label；JetBrains Mono 承担数据；
• 1px 发丝线是唯一边框——不存在更粗的线；无阴影、无圆角；
• sun bloom 是每一帧的主深度层；可加 ember 反向光晕营造冷暖张力；编辑克制——留白即优雅，拥挤会破坏目录感。

3. frontmatter 规范层逐 token 拆解

3.1 Colors：七个 token，三种身份

Token	色值	在画面中的角色
paper	#E9E5DB	暖羊皮纸，通用底色（ground），从不使用纯白/灰
paper-deep	#DCD6C4	次级羊皮纸带/加深底
sun	#F1EE2E	阳光黄，面板（panel）、光晕（bloom）、瓦片压印（tile）
sun-soft	#F8F39B	sun bloom 的中间色环
haze	#F0DA7C	sun bloom 的外圈色环
ink	#1B2566	深靛蓝，每一行文字与每一条规则线的唯一颜色
ember	#E26B4A	余烬橙，只作 15–22% 的次级反向光晕——绝不作填充、绝不作文字

文档对用色纪律写得非常绝对："没有第二文字色"；"系统从不反色"——墨压在黄上（ink on sun）正确，黄字压在墨上（yellow text on ink）不存在。在frame-showcase.html中这些 token 被实现为:rootCSS 变量（--paper、--ink、--sun、--ember等），并在色彩章节用色板逐个标注了 hex 与用途。

3.2 Spacing：全用容器相对单位

Token	值	含义
pad-edge	4cqw	画面四周安全边距（约等价 40–76px），优雅感依赖边缘负空间
pad-region	4.2cqw	区域/区块内边距
gap-region	2.5cqw	区域间距

3.3 Typography：两条字号坡道（16 档 token）

阅读/数据坡道（承担正文与界面 chrome）：

Token	字体	尺寸	字重	行高/字距	用途
body	Archivo	0.85cqw	400	1.5	正文
body-lede	Archivo	0.95cqw	400	1.55	导语段落
micro-label	Archivo	13px	600	0.18em 大写	微型标签
rail-label	Archivo	13px	600	0.32em 大写	侧边轨标签
mono-data	JetBrains Mono	0.73cqw	400	0.04em	数据
pagenum	JetBrains Mono	13px	400	0.08em, opacity 0.75	页码

Display 坡道（Instrument Serif 400 全包，紧凑行高、负字距、负 tracking）：

Token	cqw 尺寸	行高	tracking	用途
ledger-title	1.55	1.15	—	台账行标题
strand-title	1.7	1.1	—	条目行标题
headline-sm	2.9	1.0	—	小标题/长文案
headline	4.6	1.06	−0.005em	主标题
date-rail	5.0	0.96	−0.005em	顶部日期轨
display-it	7.0	1.04	−0.005em（italic）	斜体引文
numeral-md	7.5	0.92	−0.01em	中等数字
display	14.6	0.86	−0.018em	巨幅主视觉文字
numeral-jumbo	28.0	0.84	−0.04em	巨型章节数字

注意尺寸单位是cqw（容器宽度百分比）：换算公式为px ÷ 1920 × 100 = cqw。在frame-showcase.html中可以看到真实落地值，例如封面标题.yf1 h3 { font-size: 13cqw; line-height: 0.84; letter-spacing: -0.018em; }，章节分隔画面数字.yf2 .num { font-size: 38cqw; }（画面宽约 930px 时为 38cqw≈88px，正是"巨数字"的观感），页码.pn { right: 3cqw; bottom: 2.6cqw; font-size: 1cqw; }。

两条字体纪律必须遵守：

• Instrument Serif 只用 weight 400（该字体的对比度就是字重信号本身），绝无 bold serif；
• micro-label 一律uppercase Archivo 600、字距 ≥0.16em；所有数字/日期用 mono；正文与 display 中绝不出现 mono；没有第二个文字色。

3.4 Components：十个构成件

组件	关键定义	角色
sun-bloom	径向渐变：sun 70–95% 核心 → sun-soft → haze 18–22% → paper 0% 透明；尺寸占画面 42–70%，偏心或置于焦点元素之后	主深度层，每帧一个；平板的羊皮纸帧看起来是"破的"
ember-bloom	径向，ember 15–22% 不透明度	次级冷暖平衡；永远从属、不占主导
block-tile	sun 40–70% 不透明度的矩形，铺在 8×4 网格上	封面/colophon 的分层海报压印
yellow-panel	纯 sun 填充、ink 文字、0 圆角、无边框（直接贴纸面）	整栏/三分之一通栏的"最强色彩陈述"
hairline-rule	1px solid ink（稠密行用 18–20% ink 柔和变体）	唯一边框：页眉下划线、页脚上缘、台账分隔线
strand-row	下缘 1px ink 18–20%；strand-title + body	编号编辑式列表（serif 数字 + serif 标题 + sans 正文）
ledger-row	4 列表格化排布：mono 日期 · serif 标题 · sans 场馆 · mono 时长（右对齐）	表格日历
footer-band	每格上缘 1px ink；micro-label + body-sm	封面/colophon 底部的四栏元数据条
vertical-rail	rail-label 字体，旋转贴左缘	章节/分隔画面的章节标记
pagenum	mono，ink 75%，右下角	唯一常驻 chrome

caption 皮肤同步遵循同一组件词汇：在 caption-skin.html 中，字幕卡是"暖羊皮纸卡片 + 唯一允许的 1px 靛墨发丝边框 + 直角 + 无阴影"；进行中的词获得一个太阳黄方形硬块 underprint（墨色在上），与 frontmatter 中yellow-panel"ink on sun"的签名一致。

4. The Frame：画布、视检门槛与"容器法则"

4.1 Frame Craft Bar：四条先于结构的肉眼测试

每一帧在进入任何结构性检查之前，都必须先通过四条"眯眼看"门槛：

• Squint（眯眼）：画面中存在一个 Instrument Serif 时刻，尺寸是相邻元素 3–6 倍，主导画面；sun bloom 将视线汇聚到中心；
• Silence（静默）：帧读起来55–60% 是空的；台账页（ledger）是唯一的密度例外——密度来自安静的细线重复，而非元素堆砌；
• Restraint（克制）：所有文字与规则线只有一种墨色；每帧一个 sun bloom（可选一个从属的 ember）；从不反色；
• Reference（参照）：目标参照物是"艺术双年展目录 / 慢速展览海报 / 文学季刊"；失败形态是"扁平 CMS 模板"（无光晕）或"描边卡片堆"。

4.2 画布尺寸与安全区

• 主画布：1920×1080（16:9），display 文字用cqw撰写（px ÷ 1920 × 100 = cqw）；
• 纵向：1080×1920（9:16）；方形：1080×1080（1:1）——均为文档明文规格；
• 安全区：pad-edge4cqw（约等价 40–76px）。优雅感依赖边缘负空间；只有 bloom、tile、panel 允许出血（bleed）。

4.3 容器法则（承重结构）

每一帧的 ground 都必须设置container-type: size；所有帧内相对单位都基于该容器使用cqw/cqh，绝不用vw。发丝线保持 1px；bloom 尺寸以画面百分比缩放。这正是让同一套 token 能在 16:9 / 9:16 / 1:1 三档画布间无痛迁移的技术前提——frame-showcase.html中每个演示帧的 CSS 都写了container-type: size;（其 16:9 预览帧还用aspect-ratio: 16/9固定比例），可视为该法则的直接实现样例。

5. Depth & Surface：氛围式深度

本系统的深度是氛围式的，不是结构式的。深度来源有五层：

1. Sun bloom（主层）：分层径向渐变——sun 70–95% 核心 → sun-soft → haze 18–22% → paper 0% 透明；占画面 42–70%；每帧一个；
2. Ember bloom：对角角落的 15–22% 桃色次级光晕，永远从属；
3. Block-tile underprint：8×4 网格上的半透明黄矩形（封面/colophon 用）；
4. Yellow panel：唯一"硬"色彩陈述——整栏/三分之一通栏灌满 sun，ink 压顶；
5. Hairline rules：1px ink 结构分隔（稠密行的柔和 18–20% 变体）。

硬性上限（Ceiling）：零 box-shadow、零 text-shadow、零圆角、不存在粗于 1px 的边框。在frame-showcase.html中该约束落实为.frame { box-shadow: 0 0 0 1px rgba(27,37,102,0.15); }——注意这里仍只用 1px 描边做预览帧的轮廓，且 bloom/ember 均以position:absolute + radial-gradient实现、用pointer-events:none避免遮挡内容。Shapes同步规定：一切元素圆角为 0，严格矩形；bloom 无边缘（直接溶入纸面）。

6. Frame Treatments：六种画面处理的装配配方

每种处理遵循同一配方格式，这也是设计 spec 向 Agent 表达"如何组织一帧"的模板语言：

Recipe：ground（底）· container（容器）· composes（组装的组件）· focal（焦点）· chrome（常驻装饰）· accent（强调）· silence（静默度）· Fixed/Free（固定项/自由项）· density（密度）。

文档通配前置条件：每一帧都必须有 sun bloom + 右下角 pagenum；稀疏是默认状态。

6.1 Cover（身份页 · 动作：display + sun bloom · 左对齐）

• Ground：paper + 一个大型 sun bloom（中心偏左）+ 对角角落的 ember 反向光晕；
• Composes：micro-label、display、date-rail、footer-band、pagenum；
• Focal：两行 Instrument Serifdisplay（斜体关键词），ink 色、左对齐、压在 micro-label 之下；
• Chrome：右上角 serif date-rail；底部四栏 footer-band；
• Accent：sun bloom + yellow；Silence：bloom 撑起开放空间；
• Fixed：ink 文字、一个 bloom、1px footer 线、无阴影；Free：标题、日期、footer 单元格；Density：低。

6.2 Chapter Divider（章节分隔 · 动作：巨型数字 · 垂直轨）

• Ground：paper + 角落锚定的 sun bloom；Composes：vertical-rail、numeral-jumbo、headline-sm；
• Focal：单个巨大的 Instrument Serifnumeral-jumbo（约 28cqw）主导画面，下方是 serif 标题；
• Chrome：沿左缘旋转的 vertical-rail 标签 + pagenum；Accent：数字背后的 bloom；
• Silence：约 60%；Fixed：serif 400、jumbo 数字、rail 标签；Free：序数、标题、rail 文本；Density：低。

6.3 Ledger（目录页 · 动作：发丝表格行 · 唯一的密度页）

• Ground：paper（bloom 可选且须细微）；Composes：headline-sm + micro-label 顶栏、ledger-rows；
• Focal：四列表格日历——mono 日期 · serif 标题 · sans 场馆 · mono 时长，行间以 hairline-soft 分隔、表头用 1px ink 规则线；
• Accent：无——密度靠安静重复而非颜色；Chrome：pagenum；
• Silence：紧凑——密度例外（靠重复实现，不靠丰富）；
• Fixed：hairline 规则线、mono 日期、serif 标题；Free：行数、场馆；Density：密度例外。

6.4 Manifesto / Quote（宣言页 · 动作：斜体 serif · 居中 bloom）

• Ground：paper + 居中 sun bloom；Composes：超大 serif 引号、display-it、署名；
• Focal：两行 Instrument Serif斜体display-it引文，ink 色、居中、置于超大引号之下；
• Chrome：micro-label 署名；Accent：居中 bloom；Silence：约 60%，刻意开放；
• Fixed：斜体 serif、一个 bloom、ink；Free：引文、署名；Density：低。

6.5 Poster Panel（海报页 · 动作：yellow panel · 分栏）

• Ground：paper + 通栏{colors.sun}yellow-panel（整栏或三分之一栏）；
• Focal：ink 色 Instrument Serifheadline直接压在 sun 面板上（ink-on-yellow，签名式手法）；
• Chrome：micro-label、pagenum；Accent：面板本身；
• Silence：paper 一侧保持开放；Fixed：ink-on-sun、面板直接贴纸面无边框、无阴影；Free：标题、面板侧/宽度；Density：低。

6.6 Strand List（节目单 · 动作：编号编辑式行 · 左对齐）

• Ground：paper + 细微 sun bloom；Composes：micro-label、headline-sm、strand-rows；
• Focal：编号列表——serif 数字 + serif 标题 + sans 正文，hairline-soft 分隔；
• Chrome：micro-label、pagenum；Accent：bloom；
• Silence：中等，行距留白呼吸；Fixed：serif 数字、hairline-soft 规则线；Free：条目、文案；Density：标准。

7. Composition Rules：Do 与 Don't

Do（应当）：

• 从暖羊皮纸起步；加一个 sun bloom（可选 ember 反向光晕）——氛围就是深度；
• 每一行都用ink；display 用Instrument Serif 400（紧凑、负字距）、正文用Archivo、所有数字/日期用JetBrains Mono；
• 所有分隔线都是1px ink 发丝线（稠密行用柔和变体）；海报时刻灌yellow panel（ink 压顶）；
• micro-label 保持uppercase Archivo 600、0.16–0.32em；页码钉在右下角；
• 倾向稀疏；封面/章节/列表页左对齐或不对称，宣言页居中。

Don't（禁止）：

• 无投影、无圆角、无描边卡片、无粗于 1px 的边框；
• 无第二文字色；无加粗 Instrument Serif；无反色墨底；
• 正文/display 不用 mono；不替换字体；
• 别把画面塞满——稀疏即优雅；别漏掉 bloom——扁平的羊皮纸会退化成 CMS 模板；
• 别让标题通栏顶到头——坡道要逐档降级（fit-to-measure）。

8. Aspect-Ratio Behavior：三档比例下的响应布局

处理	16:9	9:16	1:1
Cover	display 左、date-rail 右上、footer 底部	display 上、footer 堆叠	display 上部、footer 底部
Chapter Divider	jumbo 数字、rail 左	数字居中、rail 顶部	数字居中
Ledger	4 列行	去掉场馆列 → 3 列	3 列
Manifesto	居中斜体	居中、更高	居中
Poster Panel	侧栏面板 + paper	上/下面板带	三分之一面板
Strand List	编号行	行（更紧凑）	行

配套执行规则：pad-edge固定在短边上；display 的字号上限使用较短轴钳制，保证竖屏不被巨标题撑爆；承重文字行保持≥1.4cqw；台账/条目列表的首列在 9:16 下允许收紧。这解释了为何容器法则强制cqw/cqh而不是vw——配合min(vw,vh)类钳制模式，同一 token 才能在纵向画布上安全缩放。

9. 反造假硬规则：Numerals & Claims

文档明确：任何画面尺度上都不得杜撰数字、日期、时长或计数。真实客户、Logo、厂商均未在本预设源中定义——若需呈现一律以占位符替代。节目标题、场馆、日期属于"内容"，而系统只提供"纸、墨、黄"。

• 数字槽位一律渲染为— figure —、{metric}、NN JUN、N m这类占位；
• 台账日期/时长与图表数值尤其要保留占位符，直到脚本（script）提供真实数据；
• 章节序数（01、02…）属于装饰性元素，不受此限。

10. Pre-Render Self-Audit：渲染前自检清单

这是设计规格给生成方的最终门禁，渲染前逐项核对：

1. Squint—— 一个 serif display 时刻主导画面；bloom 汇聚视线；
2. Silence—— 稀疏帧 55–60% 留白；只有 ledger 页稠密（靠重复而非丰富）；
3. One color—— 全部文字与规则线用 ink；sun 只做 bloom/panel/tile；ember 只做反向光晕；无反色；
4. Type—— Instrument Serif 400、紧凑负字距、fit-to-measure；micro-label 大写 ≥0.16em；mono 数字；≥1.4cqw 下限；
5. Depth—— 0 阴影、0 圆角、仅 1px 发丝线；必须有一个 sun bloom；
6. Anchor—— 封面/章节/列表左对齐，宣言页居中；pagenum 在右下角；
7. Fabrication—— 每个数字/日期都能追溯到脚本，否则用占位符。

这条清单与技能内的 references/design-adherence.md 形成呼应：后者正是 HyperFrames 工作流在"构建之后、预览之前"执行的后置校验协议，按 颜色（所有 hex 必须出现在 spec 调色板中）、字体（无替换）、圆角、间距、深度、规避清单 六项核对产物是否忠于 spec。

11. Known Gaps：文档自述的边界

原文档对"这份 spec 不覆盖什么"交代得非常坦白，使用时应视为硬边界：

• 动效刻意不在范围内：frame.md 只规定画面构成；"源"里的 280ms 交叉淡入是 deck 层面的机制，不属于本预设。HyperFrames 体系将动画规则交给 hyperframes-animation 技能（其中维护着 transitions 目录、blueprints、rules 等独立资产）；
• 字体供给与 CJK 回退：Instrument Serif + Archivo + JetBrains Mono 走 Google Fonts；CJK 场景下 display 用 Smiley Sans、正文用 Noto Serif SC、标签用 Noto Sans SC；斜体 serif 与 mono 表格数字在汉字体系中无精确对应物——台账日期建议保持拉丁字符；
• 9:16 / 1:1 属于指导而非铁律：min(vw,vh)钳制模式用于避免 display 被撑爆，但需按各比例逐一实测；
• 纯 CSS 实现：sun/ember bloom、block tile、yellow panel、hairline rule 全部为 CSS-only，无需任何外部图片素材。

12. 在 HyperFrames 技能体系中如何消费这份 spec

把这份 FRAME.md 放回它的运行上下文，Agent 的消费链路是清晰的（参见 .agents/skills/hyperframes-creative/SKILL.md 的 Workflow 与 Routing 表）：

1. 读取并装载：如果项目带设计 spec，按frame.md → design.md → DESIGN.md优先级读取第一个存在的文件，在 Step 1 只解析一次，frontmatter 视为品牌真理、正文视为判断语境；
2. 可选用预设：将某个frame-presets/*/FRAME.md（此处即 biennale-yellow）作为 frame.md 模板采纳；本仓库所有预设目录保持"FRAME.md + frame-showcase.html + caption-skin.html"的固定三件套结构；当 Agent 需要选定风格时可借助同技能内的 references/design-spec.md 表格对比各预设的观感描述（biennale-yellow 的适用场景是"自信 / 有氛围 / 克制，想要博物馆目录式优雅与编辑权威的产品"）；
3. 按"品牌即规范、布局即自由"落地：颜色 hex、字体族与字重关系、Do/Don't 必须严格执行，而字号缩放、间距、装饰透明度可按视频媒介自适应调整——这正是 references/video-composition.md 中 "The Design Spec Is Brand, Not Layout" 的核心主张：视频画面不是网页，视频需要更大的字号（标题 64–120px、正文 28–42px、边框 2–4px）、更强的色彩在场感与 8–10 个视觉元素/场景的密度；
4. 后置校验：渲染前用上述 Pre-Render Self-Audit，渲染后跑 references/design-adherence.md 的六项对照，把违规项修正后再出预览。

换句话说，Biennale Yellow 的 FRAME.md 不只是"一份好看的配色方案"，而是一套自带解析协议、装配配方、反造假纪律与自检门禁的可执行品牌规格——这正是 HyperFrames Creative 技能把"设计方向"交给 AI Agent 执行时的核心载体。

【免费下载链接】OpenMontageWorld's first open-source, agentic video production system. 12 production pipelines, 100+ tools, 700+ agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage