企业官网建设流程全解析

hyperframes Broadside 帧预设解读：以 1920×1080 帧为单位的抗议海报式视频设计系统

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

本文以 hyperframes 开源仓库中 Broadside 帧预设规格文档 为核心，系统讲解这套面向视频帧（frame）的双寄存器设计系统：从设计令牌（颜色、字体、间距）到六种帧处理（Cover / Statement / Stat Grid / Fadelist / Pull Quote / Compare），从容器法则到宽高比适配，并辅以同目录 frame-showcase.html 与 caption-skin.html 的源码实现进行印证。读完你可以在自己的 hyperframes 项目中直接采用或定制该预设，掌握"原子神圣、构图自由、数字来自脚本"的帧级设计方法论。

一、先理解：frame.md 在 hyperframes 创意工作流中的位置

在 hyperframes 的hyperframes-creative技能中，frame.md是帧尺度的设计系统规格（frame-scale design system），即视频/动态影像项目专用的品牌规范，是design.md（面向 Web 静态页面）的"视频优先"伴侣版本。同一个文件格式，但以帧为度量单位重写了品牌表达。

按 design-spec.md 的定义，规格文件的解析遵循三层规则：

1. 解析优先级：frame.md → design.md → DESIGN.md，命中第一个即停止读取；
2. 双层结构：frame.md由YAML frontmatter + Markdown 正文组成，且两层不对等——frontmatter 是规范层（colors、typography、spacing、components是真实的、可机器读取的值，必须逐字引用，不得发明或取整），正文是上下文层（各##章节承载意图、使用时机与约束）；
3. 预设采用：frame-preset 目录（如broadside/）以大写FRAME.md形式发布模板，工作流将其复制为项目内的小写frame.md并叠加品牌令牌——这也是本篇文章所依据文件命名的由来。

从 SKILL.md 的工作流看，frame-presets/是可选的"即用即取"路线：无设计规格且需要视觉方向时，可采纳一个现成预设作为frame.md。Broadside 在 design-spec.md 的预设对照表中的定位是：

Protest-poster system — two-register flat plane (ink-black / fire-orange), massive lowercase Barlow 900 treated as graphic primitive, IBM Plex Mono chrome (uppercase, 0.14em), fire-orange sole accent, 1px hairlines, sharp corners, no shadow —— 适用于 bold / typographic / declarative，需要"在场感与权威感"的产品。

二、系统总览：双寄存器抗议海报体系

Broadside 在帧尺度上是一套抗议海报（protest-poster）系统：字体大到"不再被读作文字，而是图形原语（graphic primitive）"。Barlowdisplay以 13cqw 字号让单个小写单词几乎横贯整帧。

系统运行在**两个寄存器（registers）**上：

• 深色寄存器：ink-black底 +cream文字，用于文档性表达（document）；
• 橙色寄存器：fire-orange底 + 深墨色文字，用于宣言性表达（declare）。

fire-orange是唯一的颜色——在深色上是点缀（accent），在橙色上是环境（environment）。平面是绝对平坦的；层级来自字重、字号和 1px 发丝线（hairline）。

Barlow承担从 display 到 body 的全部文字角色——表达力来自字重（400–900）与字号的变化，而非字面（face）对比。IBM Plex Mono只用于"铬饰"（chrome：数字、kicker、标签、坐标轴标签、/项目符号），一律大写并加字距。展示文字使用小写——这是该系统最具辨识度的一个决定，是对粗野主义惯例（brutalist norm）的刻意反转。

帧尺度的关键特征可概括为：

• 双寄存器——深色（cream 文字）/ 橙色（ink 文字），不存在 cream/纸面寄存器；
• 巨型小写 Barlow 900，负字距，作为图形原语（display 13cqw）；
• fire-orange 是唯一颜色——深色上作点缀，橙色上作完整环境；
• IBM Plex Mono 铬饰——大写、0.14em 字距、/项目符号、等宽目录编号；
• 平面（flat plane）——无阴影、无圆角（导航点除外）、无渐变；1px 发丝线承载结构；
• 低密度——每帧一个陈述，项目符号上限三条，宣言类帧上抑制铬饰。

三、帧规格与容器法则（The Frame）

Frame Craft Bar：三道目测关卡

每一帧在进入任何结构检查之前，先通过四道"目测关卡"：

• Squint（眯眼）——恰好一个 display 时刻以其他元素 3–6 倍的体量主导画面，无任何元素与之竞争；
• Silence（留白）——宣言类帧保持45–55% 空白；统计网格（stat grid）是唯一允许密集的例外；
• Restraint（克制）——每帧一个寄存器；fire-orange 是唯一颜色（深色上作点缀、橙色上作环境）；一个 display 时刻；项目符号上限三条；
• Reference（参照）——目标是 broadside 印刷品 / SPACE10 报告 / Wim Crouwel 网格 + 一种响亮颜色；失败的观感是"多强调色的企业幻灯片"。

帧尺寸与安全区

类型以cqw为单位编排：换算公式为px ÷ 1920 × 100 = cqw；或直接 1:1 沿用源设计稿的vw值。安全区为pad-x/pad-y5.5cqw——刻意收紧，让巨型字体逼近画框边缘形成压迫感。

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

每一帧的 ground 必须设置container-type: size；所有帧相对单位都必须是对它的cqw/cqh，绝不能用vw（一个用vw定尺寸的帧在不全屏播放时会被放大变形）。1px 发丝线始终维持 1px。

在 frame-showcase.html 的源码中，容器法则得到直接印证——预览帧类.frame设置了aspect-ratio: 16/9; container-type: size;（第 419–426 行），而封面.bf1的巨型标题正是font-size: 13cqw、负 0.04em 字距、小写、行高 0.84（第 468–475 行）：

.frame { aspect-ratio: 16/9; container-type: size; /* 容器法则：cqw/cqh 的基准 */ position: relative; overflow: hidden; background: var(--ink); border: 1px solid var(--border-dark); } .bf1 h3 { font-family: var(--sans); font-weight: 900; font-size: 13cqw; /* 13cqw 巨型 display */ line-height: 0.84; letter-spacing: -0.04em; text-transform: lowercase; }

四、色彩令牌与双寄存器用法

色彩令牌与源设计稿完全一致，分布于两个寄存器。完整令牌表如下（源自 FRAME.md frontmatter 的colors段）：

用法规则：

• 深色寄存器：ink-black底、cream文字，fire-orange作点缀（kicker、强调统计值、bullet/、前导条、引用标记、rule 短棒）；
• 橙色寄存器：fire-orange底、ink-black标题 + 正文，深墨叠加层（75/55/40/20%）充当弱化色调；
• 每帧只选一个寄存器并坚持到底。不允许第二强调色——在橙色上，强调手段是墨色的字重/透明度变化，绝不引入新色相；
• 橙色上不存在 cream 文字（ink-on-fire 是绝对的）。

frame-showcase.html 第 13–28 行把全部令牌落地为 CSS 变量--ink、--orange、--cream、--on-orange-muted等，与 frontmatter 逐字对应，可作为实现时的对照基准。

五、字体系统：阅读坡度与展示坡度

系统包含两条坡度（ramp）。阅读坡度（Barlow body 1.2cqw、mono label 0.72cqw）承载正文与铬饰；展示坡度（Barlowh24.5cqw →display13cqw，字重 700–900）承载每一个陈述。frontmattertypography段的完整规格：

配套排印约束：

• 可读性下限（legibility floor）：任何承重行 ≥1.4cqw；mono 标签只是铬饰；
• 适配度量（fit-to-measure）：headline 字号按句子长度决定。整块宽度上限≤ 78cqw；≤2 个词 →display；3–4 个词 →h1；5+ 个词 →h2。每帧只允许一个 display 时刻；
• Barlow 展示一律小写、字重 700–900、负字距（最大 −0.04em，h2为 −0.02em）。Mono 铬饰一律大写、0.1em+ 字距。无斜体、无下划线、无大写展示字。

frame-showcase.html 中.disp（Barlow 900、−0.04em、行高 0.9）与.mono（Plex Mono、uppercase、0.14em）两个工具类（第 43–53 行）正是这两条坡度的最小实现；封面 demo 的.cover h1用clamp(80px, 13vw, 210px)+ lowercase 演示了"巨型小写原语"的观感。

六、深度、表面与形状

扁平平面是唯一的技术手段。层级（hierarchy）只来源于四样东西：

• 字重 + 字号对比——主导信号（900 小写 display）；
• 1px 发丝线——铬饰条、stat-card 顶线、compare 分隔线、bar-track 左边线、图表基线；
• 颜色偏移——橙在墨上、墨在 cream 上、cream-muted 在 cream 上；
• 负空间——充裕而有意的空白区域。

天花板（ceiling）：无 box-shadow、无抬升（elevation）、无圆角表面（导航点除外）、无渐变底色。

形状：除导航点（50% 圆角）外处处 0 圆角。卡片、面板、标签、统计块、条形——全部是锐利矩形。

七、组件系统

frontmattercomponents段定义了完整的组件清单，配合 frame-showcase.html 的落地实现：

其中 bullet 的/标记是等宽铬饰的典型用例（content: "/"+font-family: var(--mono)），强调在橙色上、无第二色相。

八、六种帧处理（Frame Treatments）

每一种帧处理都按统一配方（recipe）描述：ground · register · composes · focal · chrome · accent · silence · Fixed/Free · density。核心纪律：每帧一个陈述；宣言类帧抑制铬饰。

1 · Cover（身份 · 动作：巨型字体 · 橙色寄存器 · 左对齐）

• Groundfire-orange；Composesbroadside-num、rule、kicker、display、lead；
• Focal1–2 个词的 Barlowdisplay（13cqw）小写墨色，左锚定，其下一条小的墨色 rule 短棒 + 等宽 kicker；再下方一行 75% ink 的 Barlow lead；
• Chrome左上角等宽目录编号、右上角等宽 meta（无发丝条）；
• Accent橙色上的墨色本身就是亮点；Silence~45%；Fixedink-on-fire、小写 900、平面；Free单词、kicker、lead；Density低。

showcase 的.bf1用display:flex; justify-content:center+ 5.5cqw 内边距实现左锚定居中的巨型小写字（第 437–443 行）。

2 · Statement（宣言 · 动作：字体即构图 · 深色寄存器 · 左对齐）

• Groundink-black；Composeskicker、display；
• Focal2–4 个词的 Barlowdisplay/h1小写 cream，其中一个子句（clause）以 fire-orange 上墨；
• Chrome等宽 kicker，无发丝条；
• Accent橙色子句；Silence~55%；Fixed小写 900、一个橙色子句、平面；Free陈述本身、哪个子句被点亮为橙色；Density低。

showcase 的.bf2 h3 em用font-style: normal; color: var(--orange)实现"单子句上墨"（第 501–504 行）——demo 文本 "type is thecomposition." 中只有最后一个词翻转为橙色。

3 · Stat Grid（数据 · 动作：顶边线卡片 · 深色 · 密集例外帧）

• Groundink-black，发丝条存在；Composesslide-chrome、kicker、3× stat-card；
• Focal一行三个仅顶边线的 stat-card——大号 Barlow-900 数字用 fire-orange，Barlow 标签，等宽注释；
• Chrome上 + 下发丝条（左 label、右编号）；
• Accent橙色数字；Silence中等——这是密度例外；
• Fixed仅顶边线卡片、橙色数字、1px 发丝线；Free数字（来自脚本）、标签；Density密集例外。

showcase 的.bf3 .sc用border-top: 1px solid var(--border-dark)+ 6cqw Barlow 900 橙色数字实现（第 532–557 行）。

4 · Fadelist（叙事 · 动作：不透明度堆叠 · 深色）

• Groundink-black；Composesfadelist（3 个堆叠的 Barlow-900 单词，不透明度 1.0/0.5/0.22）、fadelist-title；
• Focal三阶段单词堆叠（before/during/after），对面一个超大 fire-orange display 标题；
• Accent橙色标题；Silence中等；Fixed不透明度阶梯、小写 900；Free三个单词、标题；Density低-中。

showcase 的.bf4用左右两栏网格：左栏三行 opacity 递减的单词堆叠，右栏右对齐的 9cqw 橙色标题（第 571–606 行）。

5 · Pull Quote（引文 · 动作：超大引用标记 · 深色 · 左对齐）

• Groundink-black，铬饰抑制；Composesquote-mark、quote-text、attribution；
• FocalBarlowquote-text（700、小写）≤78cqw，位于一个超大的 fire-orangequote-mark（10cqw、行高 0.6）之下；
• Chrome等宽署名（姓名 + 角色）；
• Accent橙色引用标记；Silence~50%；Fixed橙色标记、小写引文；Free引文、署名；Density低。

6 · Compare（论证 · 动作：分屏 + 橙色 payoff · 深色 → 橙色）

• Ground左面板 ink-black + 右面板 fire-orange（payoff），1px 分隔线；Composescompare-panel 对、kicker、h3；
• Focal两个面板——左侧记录（cream on dark），右侧宣言（ink on orange）；
• Chrome等宽面板标签；
• Accent橙色 payoff 面板；Silence中等；Fixed右侧 ink-on-fire、1px 分隔线、平面；Freebefore/after 内容；Density标准。

showcase 的.compare用grid-template-columns: 1fr 1fr+ 右侧background: var(--orange)实现（第 354–367 行）。

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

Do：

• 每个 Barlow 展示字都设为小写字重 900、负字距——系统的签名；
• 宣言类帧上用fire-orange 作完整环境，深色上作唯一点缀；
• 铬饰保持IBM Plex Mono 大写、0.14em 字距；使用/等宽项目符号标记；
• 项目符号上限三条；每帧一个陈述；层级只来自字重、字号、1px 发丝线；
• 在 cover/chapter/statement/quote/end 上抑制发丝条，让字体填满画面；
• 大多数帧靠左排布；字体本身就是构图。

Don't：

• 绝不把 Barlow 展示字设为大写；绝不引入第二强调色；
• 绝不在橙色上使用 cream 文字（ink-on-fire 是绝对的）；绝不存在 cream/纸面寄存器；
• 无投影、无圆角表面（导航点除外）、无渐变底色；
• 无衬线伴侣字体；铬饰绝不用 Barlow 设置；
• 不要在一帧里塞两个 display 时刻；不要把长行撑到边到边——降级字号。

十、宽高比行为

适配要点：pad-x在短边上保持紧凑；重新分级 display 字号，让唯一的大行始终 ≤78cqw 且高于 1.4cqw 可读性下限。Mono 铬饰只使用拉丁字符与数字。

十一、实体与数字规范（硬规则）

• 不得虚构实体：源设计稿未定义任何真实客户、Logo 或厂商——渲染此类标记一律使用占位（高度 55cqh 的虚线img-placeholder）。系统只提供字体与一种颜色，不提供品牌；
• 不得虚构数字：帧尺度上绝不发明数字、百分比、日期或计数。数字槽位渲染为— figure —、{metric}、NN%。stat-card 的数字与条形高度在脚本提供前保持占位；
• 目录编号（No. 01）属于装饰性铬饰，允许顺序编排。

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

每一帧在提交渲染前逐条核对：

• Squint——恰好一个 display 时刻主导，无竞争元素；
• Silence——宣言帧约 45–55% 空白；只有统计网格允许密集；
• Register——每帧一个寄存器；橙色上 ink-on-fire、深色上 cream；无第二色相；
• Type——Barlow 小写 900 负字距、fit-to-measure；mono 铬饰大写 0.14em；≥1.4cqw 下限；
• Depth——0 阴影、0 圆角（导航点除外）；仅 1px 发丝线；
• Bullets——上限三条，橙色/标记；
• Fabrication——每个数字都能追溯到脚本，否则用占位符。

十三、已知边界与配套能力

规格文档明确声明的边界：

• 动效刻意不在范围内。FRAME.md 只规定静态构图；源设计稿的 0.8s 幻灯片切换与逐元素入场动画属于 deck 机制；
• 字体来源：Barlow 与 IBM Plex Mono 经由 Google Fonts 加载；Noto Sans SC 作为 CJK 回退字体——小写展示的信号在 CJK 中没有对应物，身份由双寄存器颜色系统承接（与源设计稿一致）；
• 9:16 / 1:1 只是指引：每种宽高比下都要验证那条大行 ≤78cqw 且高于下限；
• 条形图、compare 面板与虚线图片占位均为纯 CSS 实现，无需任何外部图片资源。

配套能力方面，同目录还提供了字幕皮肤caption-skin.html：一款抗议海报式 lower-third 卡拉 OK 字幕——ink-black 底板上一条 1px fire-orange 发丝线、锐角、无阴影、巨型小写 Barlow 900；未念到的词为弱化 cream，当前词做寄存器翻转（硬边 fire-orange 块 + ink 文字，无模糊），念过的词沉淀为纯 cream、橙色块清除。其令牌词汇（--cap-ink/--cap-canvas/--cap-accent/--cap-accent-2等）由项目的 frame.md 注入，并预留了cap-brand/cap-num/cap-cta三类可选词级强调（品牌词橙墨、数字切等宽铬饰、强调词橙色下划线），全部遵守"唯一强调色 + 平面"的纪律。

延伸阅读

• Broadside 帧预设规格——本文主体，frontmatter 为规范层、正文为上下文层；
• Broadside 帧展示页——六种帧处理、色板、字体坡度与组件的可直接预览的实现源码；
• Broadside 字幕皮肤——lower-third 卡拉 OK 字幕的 token 契约与三态实现；
• 设计规格解析规范——frame.md → design.md → DESIGN.md优先级与 frontmatter/prose 双层解读规则；
• 视频构图消费契约——“设计规格是品牌，不是布局”：品牌色严格、应用自由，以及视频尺度的字号/边框/留白换算表；
• hyperframes-creative 技能入口——工作流、路由表与其余 14 个帧预设的位置。

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