企业官网建设流程全解析

HyperFrames Bold Poster 帧设计系统实战：用 FRAME.md 搭建印刷感海报视频帧

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

Bold Poster 是 HyperFrames 创意技能库（hyperframes-creative）内置的一款帧级（frame-scale）设计预置，以复古意大利体育杂志 + 世纪中叶欧洲年报为气质参照，用"四色限制 + 三字体堆叠 + 双线网格 + 唯一投影"把每一帧做成一张"印刷出来的海报"。本文以该预置的规格文档 FRAME.md 为骨架，逐项拆解其 YAML 前端令牌、六种帧模板（frame treatment）、cqw 容器单位法则与构图红线，并结合仓库内的 frame-showcase.html 与 caption-skin.html 源码，还原从设计令牌到可渲染 HTML 的完整落地路径。读完你将能直接采纳该预置作为项目frame.md，并知道如何校验渲染结果是否忠于设计系统。

一、Frame 规格是什么：frame.md的定位与读取方式

在 HyperFrames 创意流程中，frame.md是视频/帧层面的设计系统，是design.md（面向 Web 静态页面）的视频优先伴侣。它采用"YAML 前端 + Markdown 正文"双层的同构文件格式，由 design-spec.md 统一定义解析契约：

• 前端（frontmatter）是规范性层：colors、typography、spacing、components中的十六进制色值、字体族、字重、字号单位等是"机器可读的真值"，必须逐字引用，不得四舍五入或自行发明；
• 正文（prose）是语境层：Overview、The Frame、Composition Rules 等##段落承载意图、使用时机与令牌无法表达的限制，供创作时做判断，不作为取值来源。

当项目同时存在多个规格文件时，读取优先级为frame.md → design.md → DESIGN.md，命中即止。注意：frame.md恒为小写；预置目录中随附的是大写模板FRAME.md，工作流的设计步骤会把它复制进项目并重命名为小写frame.md，再覆盖品牌令牌。bold-poster预置的完整模板正是本文章围绕的 FRAME.md。

Bold Poster 的定位一句话概括：民粹主义（populist）编辑型海报——Shrikhand 粗犷手写展示体撑满海报比例、Libre Baskerville 古典衬线正文、一个饱和番茄红、墨水绘制的网格；每个画面都要有"印刷品"的质感，装饰严格收敛到最低限度。它的三条核心原则写在文档头部：

atoms are sacred · composition is free · numbers come from the script（原子令牌神圣不可侵犯 · 构图自由发挥 · 数字一律来自脚本）

二、设计令牌：四色、三字体与间距的机器可读真值

2.1 颜色令牌（Colors）

colors: bg: "#FFFFFF" # 纸张白 —— 默认底色 dark: "#1C1410" # 暖棕黑墨 —— 正文、边框、标题 red: "#D8000F" # 番茄红 —— 唯一强调色 light: "#F5F2EF" # 米白 —— 交替条纹面板

这是整个系统的色彩上限：只有四个颜色，{colors.red}是唯一的强调色。所有数字、章节分隔线、眉标（eyebrow）、左栏线、项目符号、进度条以及整幅声明面板的底色都由红色承担；{colors.light}仅用于交替面板的条纹。没有第五种颜色（禁止绿/蓝/黄），类别差异只能来自位置、标签与倾斜角度。红色有三条禁区：不作正文文字、不作淡色调（tint）、不作无文字填充色块。

2.2 字体令牌与排版梯级（Typography）

系统语音由三种字体的堆叠构成，文档中称为three-face stack：

排版被明确分为两条梯级（ramp）：

• 阅读/chrome 梯级：Baskerville 正文 0.85cqw（行高 1.75）、body-cell 0.7cqw（行高 1.55）、Space Grotesk 标签 10px/600/2px 字距/大写/红色、bullet-body 0.62cqw；
• 展示/主视觉梯级（Shrikhand 400）：section-header3.3cqw →card-title1.9cqw →cell-number2.7cqw →red-quote4.7cqw →hero-title-bottom10.4cqw（+2°）→hero-title11.5cqw →hero-title-red13.5cqw（−4°）→close-big13.5cqw（−5°）→stat-big22cqw（−6°，行高 0.82）。

两个关键约束值得单独强调：

• 可读性地板：任何承重文本行字号必须 ≥1.4cqw；等宽字体标签仅作 chrome，不承担可读性；
• 量体裁衣（Fit-to-measure）：根据标题长度决定字号档位，且整块标题宽度上限≤ 78cqw——≤2 个词用stat-big/hero-title-red；3–4 个词用hero-title；5 个词以上用section-header；主视觉是三行堆叠组合。

内联<strong>会把文字切到 Space Grotesk 600 作为强调；禁止斜体展示字、禁止不倾斜的红色主视觉字。

2.3 间距令牌与组件令牌

spacing: pad-slide: "3cqw 3.6cqw" # 帧内边距（故意收得很紧，让海报字挤满画面） gap-grid: "1.5cqw 2cqw" # 网格间距

组件令牌的完整定义（来自 FRAME.md 前端）：

三、帧的容器法则：1920×1080 与 cqw 单位体系

Bold Poster 的基本单位是帧（frame）：主画幅 1920×1080（16:9），同时规范 1080×1920（9:16）与 1080×1080（1:1）两个变体。所有展示字号以cqw撰写，换算公式为：

cqw = px ÷ 1920 × 100

即：body 0.85cqw ≈ 16.3px、hero-title 11.5cqw ≈ 221px、stat-big 22cqw ≈ 422px（按 1920 宽基准）。

文档特别强调一条承重法则（container law）：每个帧地面（frame ground）都必须设置container-type: size，所有帧相对单位一律使用cqw/cqh，永远不使用vw；边框保持 px，旋转变换（transform）保持不变。安全区pad-slide约 3cqw，刻意收窄，让海报级字体"拥挤"在画面内。这一法则在 frame-showcase.html 中有直接实现证据——.frame类即声明了aspect-ratio: 16/9; container-type: size;，其内部所有字号、字距、边框（如.pf1 .label的letter-spacing: 0.25cqw; font-size: 1cqw、.pf2 .big的font-size: 30cqw、.pf3 .grid的border: 0.3cqw solid var(--dark)）全部以 cqw 计量。

帧工艺栏（Frame Craft Bar）

任何结构检查之前，每一帧先过四道"眯眼测试"：

1. Squint（眯眼）——只有一个展示瞬间以 3–6 倍的体量统治画面（hero stack、stat-big或close-big），没有任何元素与之竞争；
2. Silence（留白）——声明型帧保留约50–60% 负空间；财务网格（fin-grid）是唯一允许密集的例外；
3. Restraint（克制）——仅四色、红色唯一强调；每帧只有一个展示瞬间；堆叠投影是唯一阴影；项目符号不超过三条；
4. Reference（参照）——瞄准"复古意大利体育杂志封面 / 世纪中叶欧洲年报"；失败的典型症状是"圆角 + 柔和阴影 + 多重强调色的幻灯片"。

四、纵深与表面（Depth & Surface）

平面是基调，纵深全部来自四个允许的手段：

• 重边框：3px+1.5px 双线网格、2px 全局卡片描边、4px 红色左栏线；
• 表面反转：整幅红色或深墨声明面板；
• 倾斜：旋转的 Shrikhand 打破基线制造体量感；
• 唯一阴影：仅红底展示字使用三阶堆叠 text-shadow。

天花板（Ceiling）：禁止 box-shadow、禁止圆角表面（方角是唯一形态，唯一例外是 hint 药丸 4px）、禁止渐变。形状规则同样一刀切：除 hint 药丸外全系统圆角半径 0——卡片、单元格、面板、标注全部是利落矩形。这套"零圆角 + 零投影 + 方角"的约束在 showcase 源码中体现为.leftcard（border-left: 4px solid var(--red)，无 outline）、.fingrid/.cell（3px 外框 / 1.5px 内线）与.redpanel .q（text-shadow: var(--stack-shadow)），以及.caption-pill的border-radius: 0。

五、六种帧模板（Frame Treatments）

每种模板遵循统一配方：ground（地面）· register（注册）· composes（构成）· focal（焦点）· chrome · accent（强调）· silence（留白）· Fixed/Free（固定/自由）· density（密度）。核心纪律是"每帧只有一个展示瞬间；声明帧保留大量负空间"。

5.1 Hero Stack——开场身份页

• Ground白色；Composeshero-title-stack + 标签 + Baskerville 标语 + 进度条；
• Focal三行 Shrikhand 堆叠（如墨色 / 红色倾斜 / 纸张白），至少一行红色、至少一行倾斜；
• Chrome等宽眉标 + 衬线标语；底部进度条 + 计数器；Accent红色那行字；Silence右侧半幅留白；
• FixedShrikhand 400、≥1 倾斜 + ≥1 红色、方角；Free词语与行号大小；Density低。

showcase 中的落地实现（.pf1）：眉标font-size: 1cqw; letter-spacing: 0.25cqw; color: var(--red)，三行字号分别为 11cqw（墨色）、13cqw（红色，rotate(-4deg)）、10cqw（墨色，rotate(2deg)），行高 0.84，页面封面则是clamp(60px, 12vw, 150px)起步的放大版。

5.2 Hero Stat——红底海报数字

• Ground整幅{colors.red}；Focal一个旋转 −6° 的白色stat-big数字居中，上方等宽标签、下方 Baskerville 副标题；白色数字叠加墨色堆叠投影；
• Silence约 60%；Fixed白字红底 + 堆叠投影 + −6° 倾斜；Free具体数字（来自脚本）与标签；Density低。

实现证据：.pf2 .big为font-size: 30cqw; line-height: 0.82; transform: rotate(-6deg)，投影用 cqw 版三阶0.15cqw/0.3cqw/0.45cqw 0墨色阴影，比前端的 px 令牌稍大以适配海报尺度。

5.3 Financial Grid——双线数据矩阵（唯一密集帧）

• Ground白色 +pad-slide；Composes标签 + section-header + fin-grid；
• Focal3px 外框 / 1.5px 内线的墨色网格单元格，每格 = 红色 Shrikhand 数字 + 等宽标签 + Baskerville 正文；
• Chrome等宽眉标 + 进度条；Accent红色数字；Silence紧——它是密度例外；
• Fixed双线边框、红色数字、衬线正文；Free数字（来自脚本）与标签；Densitydense-exception。

实现证据：.pf3 .grid用border: 0.3cqw solid var(--dark)+grid-template-columns: repeat(3, 1fr)，.cell为border: 0.15cqw solid var(--dark)，.num红色 Shrikhand 4cqw，.lab等宽 0.8cqw 大写，.bdBaskerville 0.95cqw 行高 1.5。

5.4 Pull Quote——红底引语

• Ground整幅{colors.red}；Focal两行白色 Shrikhand 引语 + 堆叠投影，下方 Baskerville 出处（cite）；
• Accent堆叠投影本身；Silence约 50%；Fixed白字红底 + 堆叠投影；Density低。

实现证据：.pf4 .q为font-size: 5.2cqw; line-height: 1.15的白色 Shrikhand 叠加三阶投影，.cite为 Baskerville 1.3cqw 白色（opacity 0.85）。

5.5 Editorial Cards——红左栏编辑卡片

• Ground白色（或米白交替条纹）；Composes标签 + section-header + 2–3 张 red-leftbar-card；
• Focal悬挑在 4px 红色左栏线上的卡片——Shrikhand 标题 + Baskerville 正文 + 红色长破折号项目符号（上限三条）；
• Accent红色左栏线 + 符号；Silence中等；Fixed4px 红左栏、em-dash 符号、无外轮廓；Density标准。

实现证据：.leftcard（border-left: 4px solid var(--red); padding-left: 18px）配合li::before { content: "—"; color: var(--red) }的红色长破折号符号，卡片本身无边框无阴影。

5.6 Closing Statement——结尾收束页

• Ground白色或{colors.dark}；Composesclose-big + 标签 + 正文副行 + 进度条；
• Focal一个红色close-big（−5° 旋转）签名式收尾，等宽眉标 + Baskerville 联系行；
• Accent红色倾斜标题；Silence约 60%；Fixed−5° 倾斜、红色 close-big；Density低。

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

Do：

• 主标题堆叠成三行 Shrikhand——至少一行倾斜、至少一行红色；
• 所有数字用红色 Shrikhand；声明型展示字倾斜−5° 到 −6°；
• 眉标用Space Grotesk 600 大写、字距 2–3px、红色；正文用Baskerville 行高 1.75；
• 数据网格用3px 外框 + 1.5px 内线双线边框；其余场合用红左栏卡片；
• 用红色长破折号项目符号、上限三条；红底展示字应用堆叠 text-shadow；
• 每帧只有一个展示瞬间；声明帧保留负空间。

Don't：

• 无第二强调色；无圆角（方角唯一，hint 药丸除外）；
• 无投影——红底堆叠 text-shadow 是唯一阴影；
• 无字体替换；无 Shrikhand 正文、无 Baskerville 标签、无 Space Grotesk 标题；
• 无默认圆点符号；无不倾斜的红色声明展示字；
• 声明帧不许拥挤；长行不许通栏撑满（要降档）。

这套 Do/Don't 在 showcase 中成对呈现为.do-card.do（红色 em-dash 前缀）与.do-card.dont（墨色 × 前缀）两块对照区。

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

规则补充：pad-slide在短边保持收紧；重新降档展示字号使整行在可读性地板之上保持 ≤78cqw；倾斜角度保持不变；进度条在所有比例下都横贯底部。showcase 的.pf3 .grid默认三列即对应 16:9 基准，9:16 与 1:1 需按上表调整列数。

八、数字与声明的硬性规则

文档明确要求：帧尺度上绝不虚构数字、财务数据、百分比或日期。脚本未提供时，一律渲染占位符——— figure —、{metric}、+NN%。fin-grid单元格和stat-big尤其要保留占位符直至脚本注入真值；目录编号 / 进度仅作装饰。同时，Approved Entities一节声明：源码中未定义任何真实客户、Logo 或品牌，渲染此类标记一律用占位符——系统只提供字体、一种红与墨色规则，不提供品牌。

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

• Squint——单一展示瞬间统治画面，无竞争元素；
• Silence——声明帧保留约 50–60% 负空间；只有 fin-grid 允许密集；
• Color——仅四色；红色唯一强调；无红色正文；
• Type——Shrikhand 400 倾斜用于声明、红色数字、量体裁衣；Baskerville 正文行高 1.75；等宽 chrome 大写 2–3px；≥1.4cqw 地板；
• Depth——平面；红底堆叠投影是唯一阴影；方角；
• Bullets——红色长破折号，上限三条；
• Fabrication——每个数字都能溯源到脚本，否则为占位符。

这正好与 design-adherence.md 规定的"创作后验证"流程呼应：逐项核对颜色（每个 hex 必须出现在规格调色板中）、字体族与字重、圆角、间距、深度（阴影用法与声明层级一致）、规避规则（Don't 清单全部未出现），违规项以检查清单形式报告并在交付预览前修复。

十、已知边界与落地配套

• 动效明确不在范围内：FRAME.md 只规定构图；源码中 550ms 的幻灯片切换属于 deck 机制，需交由 hyperframes-animation 技能处理（hyperframes-creative 是刻意"非动画"技能）；
• 字体来源：Shrikhand + Libre Baskerville + Space Grotesk 经 Google Fonts 加载；CJK 场景使用 Noto Serif SC 900/400 + Noto Sans SC，由于 Shrikhand 的粗板草体没有汉字等值物，需保留倾斜、红色与双线边框来承载品牌识别；
• 9:16 / 1:1 是指导性规范：需逐一验证每个比例下"那条大标题行 ≤78cqw"且倾斜不发生裁切；
• 网格、左栏卡片与堆叠投影均为纯 CSS，无需任何外部图片素材。

预置目录还附带两份可直接复用的产物：

1. frame-showcase.html——六种模板的 16:9 预览样张（Palette / Typography / Components / Frame Compositions / Frame Rules / Captions 六节），其中.pbar宽度按 16% → 48% → 64% → 82% → 88% → 100% 递增，直观演示"进度条宽度随索引增长"的 chrome 语义；按 design-spec.md 的约定，它只用于"看效果"，不得被引入项目；
2. caption-skin.html——预置自带的 lower-third 卡拉 OK 字幕皮肤：白纸卡片 + 1.5px 墨色描边 + 4px 番茄红左栏（呼应 red-leftbar-card 签名）、方角、无投影；单词三态（upcoming 淡墨 / is-active 番茄红面板 + 堆叠投影 / is-spoken 实墨无面板）通过gsap.set({className})在引擎逐帧 seek 上应用（不能用tl.call回调，否则渲染时状态错误）；其令牌词汇--cap-ink / --cap-canvas / --cap-accent / --cap-accent-2 / --font-display / --font-body / --cap-band-top / --cap-band-height由 captions.mjs 从项目frame.md注入，保持品牌一致性。

十一、如何在本项目中使用该预置

按 design-spec.md 与 SKILL.md 的工作流：

1. 若项目尚无设计规格，将 FRAME.md 复制为项目根下的frame.md（小写），把前端令牌作为品牌真值覆盖进项目；
2. 打开 frame-showcase.html 确认视觉效果与六种模板的构图；
3. 创作阶段严格套用 video-composition.md 的消费契约——"设计规格是品牌，不是布局"：规格中 hex、字体族、字重关系与 Do/Don't 必须严格执行，但帧内排版布局自由发挥；同时把 Web 尺度放大为视频尺度（视频标题 64–120px、正文 28–42px、边框 2–4px、留白 60–140px）；
4. 渲染后按 design-adherence.md 的六项清单校验，确认没有发明第五种颜色、没有圆角/投影/渐变越界、数字全部可溯源到脚本。

Bold Poster 的本质是一套"约束即风格"的帧级设计系统：四色、三字体、一种红、一条投影、一种边框语法，配合 6 个可复用模板与逐帧自审流程，让每一帧都稳定输出"印刷、响亮、不容认错"的编辑海报质感——这正是 HyperFrames 将设计规格固化为可执行创作契约的典型范例。

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