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

HyperFrames Bold Poster 帧设计系统实战用 FRAME.md 搭建印刷感海报视频帧【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframesBold 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 颜色令牌Colorscolors: bg: #FFFFFF # 纸张白 —— 默认底色 dark: #1C1410 # 暖棕黑墨 —— 正文、边框、标题 red: #D8000F # 番茄红 —— 唯一强调色 light: #F5F2EF # 米白 —— 交替条纹面板这是整个系统的色彩上限只有四个颜色{colors.red}是唯一的强调色。所有数字、章节分隔线、眉标eyebrow、左栏线、项目符号、进度条以及整幅声明面板的底色都由红色承担{colors.light}仅用于交替面板的条纹。没有第五种颜色禁止绿/蓝/黄类别差异只能来自位置、标签与倾斜角度。红色有三条禁区不作正文文字、不作淡色调tint、不作无文字填充色块。2.2 字体令牌与排版梯级Typography系统语音由三种字体的堆叠构成文档中称为three-face stack字体职责关键约束Shrikhand重板草体所有主标题、章节头、大数字、卡片标题仅字重 400常规倾斜 −6°..2°数字一律红色Libre Baskerville文学衬线所有正文段落行高 ≥1.5正文默认 1.75——印刷感的来源Space Grotesk等宽感无衬线纯装饰性 chrome标签、眉标、计数、项目符号正文大写字距 2–3px绝不用于标题排版被明确分为两条梯级ramp阅读/chrome 梯级Baskerville 正文 0.85cqw行高 1.75、body-cell 0.7cqw行高 1.55、Space Grotesk 标签 10px/600/2px 字距/大写/红色、bullet-body 0.62cqw展示/主视觉梯级Shrikhand 400section-header3.3cqw →card-title1.9cqw →cell-number2.7cqw →red-quote4.7cqw →hero-title-bottom10.4cqw2°→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-red3–4 个词用hero-title5 个词以上用section-header主视觉是三行堆叠组合。内联strong会把文字切到 Space Grotesk 600 作为强调禁止斜体展示字、禁止不倾斜的红色主视觉字。2.3 间距令牌与组件令牌spacing: pad-slide: 3cqw 3.6cqw # 帧内边距故意收得很紧让海报字挤满画面 gap-grid: 1.5cqw 2cqw # 网格间距组件令牌的完整定义来自 FRAME.md 前端组件关键值描述progress-bar背景{colors.red}高 0.5cqw贴底边宽度随索引增长最抢眼的 chrome——每帧底部红色进度条hero-title-stackhero-title hero-title-red hero-title-bottom 三行倾斜 −4°/2°至少一行红色标志性开场3 行 Shrikhand 组合stat-bigstat-big 字阶红色红底上为白 堆叠投影rotate(−6deg)海报比例的主视觉数字fin-grid外框 0.3cqw 墨色 内格线 0.15cqw 墨色交点在交点处相接圆角 0双线制表签名红色 Shrikhand 数字 等宽标签 衬线小字red-leftbar-cardborderLeft 4px 红色padding0 0 0 ~1cqw圆角 0无描边无阴影悬挑在红色左栏线上的编辑卡片无外轮廓red-panel/dark-panel整幅红色 / 深墨底色文字白色满幅声明表面红色展示字承载堆叠投影stacked-text-shadow2px 2px 0 rgba(28,20,16,.25), 4px 4px 0 rgba(28,20,16,.2), 6px 6px 0 rgba(28,20,16,.15)全系统唯一的阴影——text-shadow绝不使用 box-shadowbullet红色长破折号—标记绝对定位于左侧上限三条禁止默认圆点符号三、帧的容器法则1920×1080 与 cqw 单位体系Bold Poster 的基本单位是帧frame主画幅 1920×108016:9同时规范 1080×19209:16与 1080×10801: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任何结构检查之前每一帧先过四道眯眼测试Squint眯眼——只有一个展示瞬间以 3–6 倍的体量统治画面hero stack、stat-big或close-big没有任何元素与之竞争Silence留白——声明型帧保留约50–60% 负空间财务网格fin-grid是唯一允许密集的例外Restraint克制——仅四色、红色唯一强调每帧只有一个展示瞬间堆叠投影是唯一阴影项目符号不超过三条Reference参照——瞄准复古意大利体育杂志封面 / 世纪中叶欧洲年报失败的典型症状是圆角 柔和阴影 多重强调色的幻灯片。四、纵深与表面Depth Surface平面是基调纵深全部来自四个允许的手段重边框3px1.5px 双线网格、2px 全局卡片描边、4px 红色左栏线表面反转整幅红色或深墨声明面板倾斜旋转的 Shrikhand 打破基线制造体量感唯一阴影仅红底展示字使用三阶堆叠 text-shadow。天花板Ceiling禁止 box-shadow、禁止圆角表面方角是唯一形态唯一例外是 hint 药丸 4px、禁止渐变。形状规则同样一刀切除 hint 药丸外全系统圆角半径 0——卡片、单元格、面板、标注全部是利落矩形。这套零圆角 零投影 方角的约束在 showcase 源码中体现为.leftcardborder-left: 4px solid var(--red)无 outline、.fingrid/.cell3px 外框 / 1.5px 内线与.redpanel .qtext-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-slideComposes标签 section-header fin-gridFocal3px 外框 / 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 出处citeAccent堆叠投影本身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-cardFocal悬挑在 4px 红色左栏线上的卡片——Shrikhand 标题 Baskerville 正文 红色长破折号项目符号上限三条Accent红色左栏线 符号Silence中等Fixed4px 红左栏、em-dash 符号、无外轮廓Density标准。实现证据.leftcardborder-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-bigDensity低。六、构图规则Do / DontDo主标题堆叠成三行 Shrikhand——至少一行倾斜、至少一行红色所有数字用红色 Shrikhand声明型展示字倾斜−5° 到 −6°眉标用Space Grotesk 600 大写、字距 2–3px、红色正文用Baskerville 行高 1.75数据网格用3px 外框 1.5px 内线双线边框其余场合用红左栏卡片用红色长破折号项目符号、上限三条红底展示字应用堆叠 text-shadow每帧只有一个展示瞬间声明帧保留负空间。Dont无第二强调色无圆角方角唯一hint 药丸除外无投影——红底堆叠 text-shadow 是唯一阴影无字体替换无 Shrikhand 正文、无 Baskerville 标签、无 Space Grotesk 标题无默认圆点符号无不倾斜的红色声明展示字声明帧不许拥挤长行不许通栏撑满要降档。这套 Do/Dont 在 showcase 中成对呈现为.do-card.do红色 em-dash 前缀与.do-card.dont墨色 × 前缀两块对照区。七、宽高比行为Aspect-Ratio Behavior模板16:99:161:1Hero Stack左对齐堆叠标语在下居中堆叠、更高堆叠标语在下Hero Stat数字居中居中、更高居中Financial Grid横向 3 格2 列 / 堆叠2×2Pull Quote引语居左引语堆叠居中Editorial Cards横向 2–3 张堆叠堆叠Closingclose-big 居中close-big 堆叠居中规则补充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-AuditSquint——单一展示瞬间统治画面无竞争元素Silence——声明帧保留约 50–60% 负空间只有 fin-grid 允许密集Color——仅四色红色唯一强调无红色正文Type——Shrikhand 400 倾斜用于声明、红色数字、量体裁衣Baskerville 正文行高 1.75等宽 chrome 大写 2–3px≥1.4cqw 地板Depth——平面红底堆叠投影是唯一阴影方角Bullets——红色长破折号上限三条Fabrication——每个数字都能溯源到脚本否则为占位符。这正好与 design-adherence.md 规定的创作后验证流程呼应逐项核对颜色每个 hex 必须出现在规格调色板中、字体族与字重、圆角、间距、深度阴影用法与声明层级一致、规避规则Dont 清单全部未出现违规项以检查清单形式报告并在交付预览前修复。十、已知边界与落地配套动效明确不在范围内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无需任何外部图片素材。预置目录还附带两份可直接复用的产物frame-showcase.html——六种模板的 16:9 预览样张Palette / Typography / Components / Frame Compositions / Frame Rules / Captions 六节其中.pbar宽度按 16% → 48% → 64% → 82% → 88% → 100% 递增直观演示进度条宽度随索引增长的 chrome 语义按 design-spec.md 的约定它只用于看效果不得被引入项目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 的工作流若项目尚无设计规格将 FRAME.md 复制为项目根下的frame.md小写把前端令牌作为品牌真值覆盖进项目打开 frame-showcase.html 确认视觉效果与六种模板的构图创作阶段严格套用 video-composition.md 的消费契约——设计规格是品牌不是布局规格中 hex、字体族、字重关系与 Do/Dont 必须严格执行但帧内排版布局自由发挥同时把 Web 尺度放大为视频尺度视频标题 64–120px、正文 28–42px、边框 2–4px、留白 60–140px渲染后按 design-adherence.md 的六项清单校验确认没有发明第五种颜色、没有圆角/投影/渐变越界、数字全部可溯源到脚本。Bold Poster 的本质是一套约束即风格的帧级设计系统四色、三字体、一种红、一条投影、一种边框语法配合 6 个可复用模板与逐帧自审流程让每一帧都稳定输出印刷、响亮、不容认错的编辑海报质感——这正是 HyperFrames 将设计规格固化为可执行创作契约的典型范例。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考