HyperFrames Coral 帧系统设计规范详解三面硬边排版的视频帧实现指南【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes本文围绕 HyperFrames 仓库内skills/hyperframes-creative/frame-presets/coral/FRAME.md这一帧级frame-scale设计系统展开。Coral 预设以杂志海报为视觉母题用珊瑚红 / 墨黑 / 暖奶油三种实色表面在硬边hard edge处相接来构建构图配合 Bebas Neue 大写追踪标题与 Inter 正文的双声部字阶以及 45° 斜纹与壁纸大数字两大气质签名。读完本文你将掌握 Coral 帧系统从设计令牌token到六种帧版式frame treatment的完整规范理解cqw容器单位与container-type: size的帧容器法则并能结合仓库内的frame-showcase.html与caption-skin.html实现代码直接落地可渲染的视频帧与字幕皮肤。一、Coral 帧系统是什么从设计文档到可运行帧Coral 是 HyperFrames 创意技能hyperframes-creative内置的一组**即用型帧预设frame-preset**之一。FRAME.md是它的帧级设计规格模板当你在一个视频 / HyperFrames 项目中选择该预设时工作流会将其以frame.md的名称复制进项目作为整个视频的帧尺度设计系统详见 design-spec.md 的从预设起步一节。这套系统的设计主张写在文档 frontmatter 中是全文的纲领unit单位帧 —— 主画幅1920×108016:9同时记录了9:16与1:1两种派生画幅单位是帧而不是幻灯片里的某一页。principle原则atoms are sacred · composition is free · numbers come from the script原子即神圣 · 构图可自由 · 数字来自脚本。版本alpha。与面向网页/静态页面的design.md不同FRAME.md是以视频为第一优先的配套规格原子atoms完全一致且不可改动—— 三面系统coral fire / ink black / warm cream、Bebas Neue 大写加追踪 Inter 正文、45° 斜纹、装饰性壁纸数字、硬色区切分、零阴影、零圆角圆形除外而构图、帧尺度与宽高比行为则为帧重新编写。运动motion明确不在本文档范围内。规格的读取方式frontmatter 是规范层正文是语境层按 design-spec.md 的定义这类规格是YAML frontmatter Markdown 正文的双层结构且两层地位不同frontmatter 是规范性normative层colors、typography、spacing、components中的值是机器可读的真实令牌使用时必须逐字引用精确 hex、字族、字重不得发明或取整正文是语境context层## Overview、The Frame、Composition Rules等小节承载意图、何时使用与约束阅读时用来做判断而不是取值。这一约定直接决定了本文的写作方式下文所有色值、字号、字距、边距均直接引自 FRAME.md 的 frontmatter而版式判断与使用场景则来自正文章节。二、设计令牌Design Tokens颜色、字阶与间距2.1 颜色三面系统 墨色中性阶Coral 的色板是七个真实令牌 白色其中三个构成三面系统的实体表面令牌色值在帧系统中的角色{colors.coral}#E85D5D签名色 —— 既是强调边框、图标方块、时间线节点、浅色表面上的眉毛字也是环境整块区域{colors.coral-dark}#D44A4A渐变端点 图表对比序列{colors.cream}#F5F0E8暖色画布 —— 杂志纸张{colors.cream-dark}#E8E0D4微妙区域区分信息条info-bar底色{colors.black}#1A1A1A最强表面引言与声明性画面的底色{colors.gray}#6B6B6B正文段落、标签、元信息{colors.light-gray}#B0B0B0墨色表面上的三级文字{colors.white}#FFFFFF卡片填充置于珊瑚或奶油之上颜色令牌与源相同、完全一致。到了帧尺度三面通过构图自由混合 —— coral/cream、coral/ink、ink/cream或单一表面。标题headline用色规则奶油/珊瑚表面上是墨色ink墨色表面上是奶油色cream—— 绝不使用灰色绝不在珊瑚上用白色。眉毛字eyebrow用色规则奶油/墨表面上用珊瑚色珊瑚表面上用墨色 —— 不存在珊瑚上叠珊瑚的组合。整个系统中唯一被允许的渐变是罕见的135° coral-dark→coral特性区域其余一切皆为平涂flat。2.2 字阶Type Ramp阅读阶与展示/英雄阶系统是双声部结构frontmatter 中完整给出了两套阶梯阅读阶Inter—— 承载正文与眉毛字令牌参数用途bodyInter ·1.0cqw· weight 400 · line-height 1.7正文body-lightInter ·1.5cqw· weight 300 · line-height 1.5引文语气pull-quote voicesection-labelInter · 12px · weight 700 · tracking 4px · 大写章节标签item-labelInter · 11px · weight 700 · tracking 3px · 大写条目标签quote-attributionInter · 14px · weight 600 · tracking 3px · 大写引言出处quote-roleInter · 12px · weight 400 · tracking 1px引言角色行展示/英雄阶Bebas Neue—— 承载所有标题、数据与元数字始终大写、始终追踪令牌尺寸cqw字距行高card-title1.91px1.1sidebar-value2.3—1.0bar-title2.32px1.0card-stat2.5—1.0column-title3.72px1.0section-headline4.22px1.0stat-numeral5.0—1.0hero-title6.54px0.9jumbo-feature9.012px1.0background-numeral10.0—12% 墨色壁纸数字giant-mark14.0—35% 墨色装饰性超大引号/字符搭配的硬性规则有三条可读性地板legibility floor任何承重load-bearing行 ≥1.4cqw像素级标签只是镀铬装饰不承担可读性。量体裁衣fit-to-measure按行长定标题字号。标题块上限≤ 78cqw≤3 个词 → 用hero-title/jumbo-feature4–6 个词 → 用section-headline7 个词以上 → 降到column-title。所有 Bebas 元素大写 ≥1px 追踪标准 2px、英雄 4px、超大 12px所有 Inter 标签大写、1–4px 追踪。不使用斜体、下划线或句子式大小写的 Bebas。frame-showcase.html中可看到这套令牌的真实落地--display: Bebas Neue与--body: Inter定义在:rootframe-showcase.html 第 13–32 行展示区标题font-size: 8.5cqw; letter-spacing: 0.3cqw; line-height: 0.86壁纸数字font-size: 16cqw; color: rgba(0,0,0,0.12)与 frontmatter 的hero-title/background-numeral一一对应。2.3 间距令牌令牌值含义pad-x5cqw标准水平帧边距即安全区pad-y4cqw垂直帧边距pad-col3cqw列间距gap-grid1.7cqw网格间隙card-pad2cqw卡片内边距三、帧容器法则为什么是cqw而不是vwCoral 帧的主画幅是 1920×108016:9同时文档记录了两种派生画幅垂直 1080×19209:16与方形 1080×10801:1。安全区为5cqw即pad-x标准帧内边距区域边缘可出血到全帧。这里有一条承重load-bearing法则 —— 容器法则每个帧的 ground 都必须设置container-type: size所有帧相对单位都用cqw/cqh基于该容器解析绝不使用vw。用vw定尺寸的帧只要不是全屏显示就会被放大失真cqw则能在任意渲染尺寸下都相对帧本身正确解析。这解释了为什么 frontmatter 中的字号全部以cqw为单位如px ÷ 1920 × 100 cqw的换算关系而不是固定像素。在 frame-showcase.html 中可以看到容器法则的标准实现.frame类设置aspect-ratio: 16/9; container-type: size;第 427–434 行这是帧地面的基准容器帧内所有尺寸均以cqw书写例如封面顶部珊瑚带的品牌字font-size: 2cqw、壁纸数字font-size: 16cqw、英雄标题font-size: 8.5cqw、特性数据帧的巨型壁纸数字font-size: 34cqw第 448–509 行时间线节点、装饰元素同样全部是cqw定位。这套容器查询单位体系的语义是帧在任何渲染尺寸预览缩略、全屏播放、异形画幅下都保持等比这正是它区别于普通网页vw布局的核心工程理由。四、帧气质签名Atmospherics斜纹、壁纸数字与巨形标记Coral 帧系统有三件标志性的大气层元素全部是CSS-only无需任何外部图片45° 对角斜纹diagonal-hatch—— 铺在珊瑚区域上的 6% 墨色纹理。frontmatter 中的实现定义是repeating-linear-gradient(45deg, transparent 0 20px, rgba(0,0,0,.06) 20px 40px)变体允许 −45°30/60px 节奏、90° 垂直60/62px、10% 墨色。文档强调它是纹理不是景深。showcase 中--hatch令牌与此完全一致frame-showcase.html 第 25–31 行。壁纸数字background-numeral—— 置于珊瑚区域标题背后的超大 Bebas 数字12% 墨色rgba(0,0,0,0.12)是过轻区域的标准填充物。巨形标记giant-mark—— 置于珊瑚区域内部、35% 墨色rgba(0,0,0,0.35)的超大引号 / 字符半装饰性。规则是每段引言一个巨形标记。三个签名在 showcase 中均有实现封面珊瑚带的壁纸数字0116cqw、特性帧的壁纸数字24034cqw、引言帧的巨形引号font-size: 24cqw; color: rgba(0,0,0,0.35)。深度与表面Depth Surface的天花板很明确无 box-shadow、无悬浮卡片、无柔和渐变唯一的例外是那个 135° 珊瑚特性区域、无圆角矩形。深度信号只允许四种硬区域边界主要结构手段、强调边框卡片 5px 珊瑚顶边、侧栏瓦片 4px 珊瑚左边、时间线 4px 墨线、45° 斜纹无深度含义的纹理、壁纸排版12% 数字 35% 巨形标记叠于内容之后。形状Shapes规则每个矩形都是0 半径—— 区域、卡片、侧栏瓦片、图标方块、信息条、强调线一律直角圆形只用 50% 半径—— 导航圆点10px、导航箭头44px、时间线节点20px。圆角只属于圆形是整套系统的几何纪律。五、组件库Components单一边框即全部镀铬frontmatter 的components节定义了 10 个可组合组件。Coral 的设计哲学是每个元素只允许一件镀铬组件核心定义说明region-split两/三块实色表面在硬边相接行比 38/62、列比 40/60、50/50主布局装置—— 无渐变、无圆角接缝边界即布局card白色底 0.26cqw约 5px珊瑚顶边0 圆角、无阴影5px 珊瑚顶边是唯一镀铬承载 card-icon 标题 正文 珊瑚色 card-statsidebar-item白色底 0.2cqw约 4px珊瑚左边4px 珊瑚左边是唯一镀铬card-icon珊瑚底、白字、2.5cqw正方形、0 圆角卡片标记 —— 一个居中的白色 Bebas 字形accent-line珊瑚色4cqw × 0.25cqw结尾变体 60×4副标题强调线background-numeral12% 墨色壁纸数字置于珊瑚区域标题之后giant-mark35% 墨色置于珊瑚区域内部timeline0.2cqw墨线渐变虚线 ::after 珊瑚节点奶油光晕、50% 半径墨线 珊瑚节点 奶油光晕info-barcream-dark底、无圆角无阴影特性区域下方的页脚带 —— 左侧 Bebas 标题、右侧 Inter 元信息showcase 对组件库做了像素级还原卡片.c-card为白色底 border-top: 5px solid var(--coral) 48px 珊瑚图标方块frame-showcase.html 第 295–311 行侧栏瓦片.c-side为border-left: 4px solid var(--coral)第 331–336 行时间线.timeline为 4px 墨线 20px 珊瑚圆点奶油边框光晕 Bebas 标签第 355–384 行信息条.infobar为cream-dark底、左 Bebas 标题右 Inter 大写元信息第 385–403 行。这些实现可以直接对照 frontmatter 中的组件定义逐项验证。六、六种帧版式Frame Treatments逐帧配方FRAME.md的核心实战内容是六种版式配方。每个配方遵循同一模板Ground地面·Container容器·Composes组成·Focal焦点·Chrome镀铬·Accent强调·Silence留白·Fixed/Free固定/自由·Density密度配方基调能居中则居中、错开锚点、每区域一个想法。版式 1 · Region-Split Cover区域切分封面 · 身份页 · 硬区域边 · 左锚Ground38/62 行切分 —— 上方珊瑚带斜纹 壁纸数字叠于奶油面上。Composesregion-split、diagonal-hatch、background-numeral、hero-title。Focal奶油区域中左锚定的两行hero-title墨色第二行用珊瑚色。Chrome珊瑚带内左侧 Bebas 品牌字、右侧 Bebas 元信息。Fixed带内墨色压珊瑚ink-on-fire、珊瑚上斜纹、硬边Free标题文案、哪行用珊瑚色、元信息。Density稀疏奶油场约 45% 留白。showcase 的.f1第 448–509 行即该配方的实现grid-template-rows: 36% 64%、珊瑚顶带内品牌字与Vol. 01元信息、右下角 16cqw 壁纸数字01、奶油底区内珊瑚眉毛字 两行8.5cqw英雄标题第二行em为珊瑚色。版式 2 · Feature Stat特性数据帧 · 缩放移动 · 珊瑚环境 · 左锚Ground整帧珊瑚 斜纹。Composesdiagonal-hatch、background-numeral、section-label、统计标题、body-light。Focalstat-numeral/jumbo-feature数据或两行标题墨色背后 12% 墨色壁纸数字。Chrome墨色section-label眉毛字可选 Inter-300 支持行≤44cqw。Fixed墨色压珊瑚、斜纹在场、壁纸数字在后Free数据、标题、支持文案。约 40% 珊瑚场留白。showcase 的.f2第 511–554 行为整帧珊瑚 右上角 34cqw 壁纸数字240 墨色眉毛字 7cqw 墨色标题 ≤44cqw 的 Inter-300 支持行。版式 3 · Quote Layout引言版式 · 面板切分 · 巨形标记Ground40/60 列切分 —— 左侧珊瑚面板斜纹 巨形标记 右侧墨色面板。Composesregion-split、giant-mark、body-light、accent-line、quote-attribution。Focal墨色面板上 2–3 行cream色weight 300的 Inter 拉引文。Chrome珊瑚面板上 35% 墨色巨形标记出处上方 60×4 珊瑚强调线。FixedInter-300 引文、墨色面板、墨色压珊瑚标记Free引文、出处、标记字形。珊瑚面板大部分就是那个标记。showcase 的.f3第 557–609 行40%/60% 列切分左侧珊瑚面板 24cqw 巨形引号35% 墨色右侧墨色面板2.6cqwInter-300 奶油引文 4cqw×0.25cqw 珊瑚强调线 大写出处行。版式 4 · Closing Plate收尾版 · 奶油场 珊瑚带 · 居中Ground奶油场 底部珊瑚带斜纹。Composessection-label、section-headline/hero-title、accent-line、info-bar。Focal居中两行墨色签名语下方珊瑚accent-line。Chrome上方墨色眉毛字底部珊瑚带页脚承载 Bebas 签名语 年份。Fixed居中、墨色文字、一条珊瑚带Free签名文案、带内容。约 55% 空奶油。showcase 的.f4第 612–668 行居中 9cqw 墨色标题 珊瑚强调线 底部 8cqw 珊瑚带斜纹 左侧 Thank You、右侧 2026。版式 5 · Three-Column Catalog三栏目录 · 目录页 · 密度帧 · 居中标题Ground奶油或墨色场pad-x。Composessection-headline、3× card。Focal居中的section-headline下方三张白色card5px 珊瑚顶边、48px 图标方块、Bebas 标题、Inter 正文、珊瑚色统计。Fixed5px 珊瑚顶边为唯一镀铬、无阴影无圆角Free三张卡片内容。Density密集例外—— 它是全系统中唯一允许密排的帧对应三栏目录是全套系统唯一的密集例外这一留白纪律。showcase 组件区第 954–979 行展示的三张卡片Region Split / Diagonal Hatch / Wallpaper Numeral正是这一版式的组件形态。版式 6 · Timeline时间线 · 流程页 · 水平导轨 · 左锚Ground奶油场pad-x。Composessection-headline、timeline。Focal墨色时间线 4–5 个珊瑚节点奶油光晕与 Bebas 标签。Fixed墨线、珊瑚节点、奶油光晕Free节点数量、标签。Density标准。showcase 中的时间线第 1020–1032 行有 Plan / Block / Set / Ship 四个节点墨线 珊瑚圆点 奶油边框光晕。七、构图规则Do 与 DontDo应当做以多表面区域切分构图 —— coral / ink / cream 在硬边相接边界即布局。每个 Bebas 元素大写 追踪标准 2px、英雄 4px、超大 12px每个 Inter 标签大写、1–4px。眉毛字coral 用于奶油/墨表面、ink 用于珊瑚表面标题 ink 用于奶油/珊瑚、cream 用于墨。珊瑚区域上应用45° 斜纹6% 墨过轻的珊瑚区域用12% 壁纸数字填充。卡片只用5px 珊瑚顶边、瓦片只用4px 珊瑚左边作为镀铬。封面签名与目录标题处倾向居中特性与引言页左锚 / 面板切分。Dont禁止做不要把 Bebas 写成句子式大小写或未追踪不要用非 Inter 的正文字体与 Bebas 搭配。不要引入第四种表面、投影、悬浮感或圆角矩形。不要在珊瑚上放白色标题永远是墨色也不要在任何地方用灰色标题灰色只属于正文/元信息。不要用渐变柔化区域边界唯一的例外是罕见的 135° 珊瑚特性区域。不要把珊瑚区域填成零碎残片 —— 要么填满要么加壁纸数字 / 巨形标记。不要把标题拉满边到边 —— 长行要降阶fit-to-measure。八、宽高比行为一份画幅迁移对照表FRAME.md用一张表明确了六种版式在三种画幅下的迁移策略是 9:16 / 1:1 适配的实操依据版式16:99:161:1Region-Split Cover38/62 行标题居左珊瑚带更高标题下移40/60标题更低Feature Stat数据居左、数字居右数据在上、数字在背后数字居中Quote Layout40/60 珊瑚墨堆叠珊瑚标记在上、引文在下堆叠Closing Plate奶油 底部珊瑚带奶油 更高的带居中带在下方Three-Column Catalog标题在上、三列并排标题在上、三卡片堆叠标题在上、21 排布Timeline水平导轨垂直导轨紧凑水平适配纪律有两条硬性约束安全区在短边保持 5cqw 内边距每个画幅都要重新阶梯化展示字号确保没有承重行跌破1.4cqw可读性地板。另有一条 CJK 注意事项Bebas 在 CJK 环境下大约宽 20%因此每个画幅都要按实际宽度调整换行。九、诚实渲染实体占位与数字铁律Approved Entities获准实体源中不定义任何真实客户、Logo 或厂商 —— 渲染此类标记一律使用占位符。系统提供的是表面与几何而不是品牌。Numerals Claims数字与声明 · 硬性规则在帧尺度上绝不虚构数字、统计、日期或数量。渲染插槽使用— figure —、{metric}、N×这样的占位只有脚本script提供时才出现真实数字 —— 特性数据帧、目录、时间线尤其要携带占位符而非编造的值。壁纸数字01、02…是装饰性的允许使用序数。这条规则与预设原则中的numbers come from the script互为表里 —— 设计系统只提供几何与表面数据必须来自内容源头。十、渲染前自审清单Pre-Render Self-AuditFRAME.md在末尾提供了一份七项自审清单建议每次渲染前逐条过一遍Squint眯眼测每个区域只有一个焦点元素且以 3–5× 优势压过邻近元素Silence留白测稀疏帧 40–55% 留白只有目录页允许密排Surfaces表面测coral/ink/cream 中的两到三面在硬边相接无第四表面Type字阶测Bebas 大写 追踪、量体裁衣墨色压珊瑚眉毛字颜色与表面匹配≥1.4cqw 地板Depth深度测0 阴影、0 圆角矩形斜纹 壁纸承载纹理Anchor锚点测签名/标题页居中、特性/引言页面板/左锚不允许连续 3 帧共享同一锚点Fabrication虚构测每个数字都能追溯到脚本否则就是占位符。配合技能目录下的 design-adherence.md创作后的规格核验颜色、字型、圆角、间距、深度与 contrast-report.mjs渲染帧对比度告警检查可以形成创作 → 自审 → 机器核验的闭环。十一、字幕皮肤Coral 硬边几何的延伸实现Coral 预设还附带了自己的下三分之一卡拉 OK 字幕皮肤caption-skin.html。它的视觉语言完全继承帧系统暖奶油色平块 单条墨色发丝边框、方形直角border-radius: 0、零圆角零阴影Coral 的深度只来自硬色边从不来自投影、Bebas Neue 大写追踪墨色字形。皮肤的实现契约文件头部注释中明确声明值得注意令牌契约只引用固定词汇表--cap-ink · --cap-canvas · --cap-accent · --cap-accent-2 · --font-display · --font-body · --cap-band-top · --cap-band-heightcaption-skin.html 第 15–16 行每个变量都带珊瑚字面量回退值便于独立预览品牌令牌由captions.mjs从项目的frame.md注入到style contenteditable="false">【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考