Warm-Editorial 帧系统拆解OpenMontage HyperFrames 的 claude FRAME.md 视频设计预设全解析【免费下载链接】OpenMontageWorlds 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导读在 HyperFrames 体系中一份frame.md就是一套以帧为单位的视频设计系统。本文以 claude/FRAME.md 预设为对象完整解析其 frontmatter 令牌配色/字阶/间距/组件、六种画幅处理Frame Treatment配方、容器单位与宽高比纪律并对照 hyperframes-creative 技能族的采纳、消费与校验机制。读完你既能直接套用该预设产出代码变更/发布类视频也能理解并改写出任意温暖编辑风帧系统。一、这份文档是什么从 FRAME.md 模板到项目里的 frame.mdHyperFrames 的创意方向技能hyperframes-creative把品牌与画幅的视觉规则收敛成一份设计规格文档。其中frame-scale帧级设计系统对应的文件被约定为frame.md——它是面向视频/画幅的设计系统与面向网页的design.md是同一格式的两个变体详见 references/design-spec.md。采纳优先级frame.md→design.md→DESIGN.md按序读取第一个存在的文件frame.md优先且恒为小写。仓库中每个预设目录内携带的是大写FRAME.md模板采纳时被复制为项目里的小写frame.md二者在 Linux 上是刻意区分开的不同文件。预设目录hyperframes-creative/frame-presets/下固定维护一组视觉预设biennale-yellow、blue-professional、cartesian、claude、coral、creative-mode 等十余套每套目录里固定包含三件套——FRAME.md模板、用于预览画幅处理的frame-showcase.html以及预设自带的字幕皮肤caption-skin.html。claude 预设的定位按 design-spec.md 中的选型表claude 预设的视觉气质是温暖编辑风品牌书推荐用于考虑周全、文学气质、开发者向的内容——一段代码变更、一次发布、一份文档其卖点是编辑式的冷静 一流的代码面板表现。具体的采纳命令在音乐类工作流中给出了示范见 music-to-video/references/planning.mdcp ../hyperframes-creative/frame-presets/preset/FRAME.md $PROJECT_DIR/frame.md规则是整段视频共享同一预设原封不动地复制、不修改只把其中的typography.font与colors取真值回填进分镜/计划文件的style字段——引用十六进制与字体族必须逐字逐句禁止臆造或取整。而各画幅的排版归属模板与动效预设只负责定调不负责构图。二、单位是帧1920×1080 主画幅与容器法则预设的 YAML frontmatter 开宗明义定义了它自己的物理单位unit: the frame — 1920×1080 primary; 9:16 and 1:1 documented principle: atoms are sacred · composition is free · numbers come from the script主画幅 16:9 1920×1080竖版 9:16 1080×1920方版 1:1 1080×1080。三类比例的处理策略在文档中均有覆盖。排版用cqw相对单位显示层字号全部以cqw容器宽度百分比标定换算公式即px ÷ 1920 × 100 cqw。例如 90px ≈ 4.6875cqw。容器法则承载性规则原文标注 load-bearing每个画幅的 ground 必须声明container-type: size所有帧内相对单位一律用cqw/cqh对着它求值绝不使用vwhairline 恒为 1px、卡片圆角恒为 6/8/12px——暖纸阅读体验必须在每个比例下存活。安全区slide-pad: 4.2cqw约 80px 1920kicker/等宽排版 chrome 全部收在安全区内。画幅工艺条Frame Craft Bar在进入任何结构化校验前每一帧必须先过三条眯眼测试eyeball testSquint眯眼只有一个 EB Garamond display 时刻占视觉主导其尺寸约为相邻元素的 3–6 倍Trinity三位一体cream/tile 地面、ink 文字、coral 恰好出现一次暖 navy 只出现在代码面不得出现冷灰/纯白/第四种色调Type字体EB Garamond 句子大小写 display负字距Inter 400 正文JetBrains Mono kicker全大写 0.16em coral ✱与代码。三、Frontmatter令牌即规范normative layer该文档采用YAML frontmatter Markdown 正文的双层结构二者地位不对等frontmatter 是规范层机器可读的真值引用时必须逐字照抄正文是语境层记录意图、适用时机与令牌承载不了的约束。完整令牌如下。配色令牌colors: ink: #141413 cream: #FAF9F5 tile: #EFE9DE tile-strong: #ECE3D4 coral: #CC785C navy: #181715 navy-soft: #1F1E1B navy-elev: #252320设计理念为cream 是地面、ink 是声音、coral 是电压暖 navy 只是代码显现处的结构锚点。系统性禁止冷灰、纯白、纯黑、第四品牌色。coral 是稀缺电压一帧至多一处CTA、行内链接或通栏 bandcoral 绝不用于标题或正文行也不做卡片填充。tile/tile-strong相对 cream 是半步暖阶永远不是硬对比。角色对照如下表。令牌色值职责ink#141413暖近黑文字的声音cream#FAF9F5默认地面约 60% 画面占比的暖纸tile/tile-strong#EFE9DE/#ECE3D4内容聚集的半步表面coral#CC785C稀缺电压每帧一次navy/navy-soft/navy-elev#181715/#1F1E1B/#252320代码/终端面结构性锚点语法色固定珊瑚关键字、#5DB8A6teal字符串、#E8A55Aamber数字代码面板内部装饰非品牌、不可 remix边框 / 阴影 / 间距令牌borders: { hairline: 1px solid ink12%, hairline-strong: 1px solid ink20%, dark: 1px solid cream14% (on navy) } shadows: { card: 0 1px 3px ink8%, 0 4px 16px ink4%, none: none } spacing: slide-pad: 4.2cqw # ~80px 1920 gap-md: 1.7cqw hairline: 1px radius-sm: 6px radius-md: 8px radius-lg: 12px radius-pill: 9999px注意ink12%这类写法表示以 ink 色 12% alpha 混合的 1px 边框——整套系统的抬升语言就是这一条低透明度的 1px hairline加上最多一枚柔和暖阴影0 1px 3px ink8%, 0 4px 16px ink4%。禁用天花板无重投影、无辉光、无内容渐变、无倾斜。系统自身不发光靠暖度与发丝线阅读。四、两套字阶Typography Ramps与排印规则字体是三款、三种职能不可互换职能——换脸即换品牌EB Garamond 承担一切 display封面/标题/引言/大数字Inter 承担正文与 UI chromeJetBrains Mono 承担索引层kicker、技术标签、代码窗、状态条。# — reading chrome ramp — body: { fontFamily: Inter, cqw: 1.5, weight: 400, lineHeight: 1.5 } lead: { fontFamily: Inter, cqw: 2.08, weight: 400, lineHeight: 1.5 } card-title:{ fontFamily: Inter, cqw: 2.3, weight: 500, lineHeight: 1.25, tracking: -0.005em } button: { fontFamily: Inter, cqw: 1.46, weight: 500, lineHeight: 1.0 } tag-upper:{ fontFamily: Inter, cqw: 1.35, weight: 500, tracking: 0.18em, upper: true } kicker: { fontFamily: JetBrains Mono, px: 28, cqw: 1.46, weight: 500, tracking: 0.16em, upper: true } mono-label:{ fontFamily: JetBrains Mono, px: 26, cqw: 1.35, weight: 500, tracking: 0.02em } code: { fontFamily: JetBrains Mono, cqw: 1.67, weight: 400, lineHeight: 1.6 } # — display ramp (EB Garamond 400, sentence case, negative tracking…) — headline: { fontFamily: EB Garamond, cqw: 4.6, weight: 400, lineHeight: 1.06, tracking: -0.018em } quote-pull: { fontFamily: EB Garamond, cqw: 5.0, weight: 400, lineHeight: 1.12, tracking: -0.012em, italic: true } display-italic:{ fontFamily: EB Garamond, cqw: 6.7, weight: 400, lineHeight: 1.05, tracking: -0.012em, italic: true } display: { fontFamily: EB Garamond, cqw: 7.3, weight: 400, lineHeight: 1.02, tracking: -0.022em } number-hero: { fontFamily: EB Garamond, cqw: 9.4, weight: 400, lineHeight: 0.95, tracking: -0.025em } display-cover:{ fontFamily: EB Garamond, cqw: 9.9, weight: 400, lineHeight: 0.98, tracking: -0.028em } number-unit: { fontFamily: JetBrains Mono, cqw: 2.08, weight: 500, lineHeight: 1.0 }三条排印铁律可读下限任何承重文字行字号 ≥1.4cqwmono 的 px 级标签kicker 28px、mono-label 26px只算 chrome不受此约束。量体裁衣fit-to-measure标题字号按行文字数选取——整块宽度上限≤ 78cqw≤3 词用display-cover9.9cqw4–6 词用display7.3cqw7 词降到headline4.6cqw7.3–9.9cqw 档位只留给封面/宣言/大数字。大小写与风格EB Garamond 一律句子大小写sentence case——不 title case、不全大写正文 Inter 400 也是句子大小写JetBrains Mono kicker 全大写 0.16em 字距 coral ✱ 前缀负字距范围 −0.012…−0.028em斜体是立场/定义的表达性语域。无全大写衬线、无 sans 标题、无衬线标签。五、形状与组件体系Components圆角阶梯固定为6px 小 chrome / 8px 卡片与代码面 / 12px 大卡片与引言框 / 9999px 真胶囊无直角、无重圆角编辑式语域温和圆润、绝不生硬。frontmatter 的components:块定义了八类可组合组件card-hairline—— 编辑式内容卡cream 或 tile 填充 1px ink12% hairline 12px 圆角 那枚柔和暖阴影抬升hairline 一枚阴影永不重投影/辉光/渐变。kicker-spike—— ✱ coral 前缀的眉题JetBrains Mono 全大写、索引式措辞2–5 词绝不落成纯文本或整句。coral-callout—— 每帧唯一的电压时刻CTA / 行内链接 / 通栏 bandcoral 满幅或 cream 面 coral 描边on-coral 时文字用 cream。number-lockup—— 大数字锁定组EB Garamondnumber-hero数字 JetBrains Mononumber-unit单位如200K、1,204、−318、17 files。数字是衬线单位永远 mono绝不衬线。pull-quote—— EB Garamond 斜体引言 下方小号 Inter 全大写 cite提交信息、评审意见、论点。section-rule—— 唯一的 1px 分隔线ink12%navy 面上 cream14%coral 1px 规则可画入引出区块从不 2px、从不粗分隔。code-surface—— 暖 navy 代码/终端面板navy 主体 navy-elev 标题栏与状态条 cream14% 边框 8px 圆角代码本体由code-*registry 块渲染本预设只拥有外围表面与 mono chrome。spike-mark—— ✱U2731品牌字形永远 coral单一强调节拍上淡入并 0.92→1 缩放永不旋转。这些组件的 CSS 落地可以在同目录的frame-showcase.html预览联系表见 claude/frame-showcase.html里看到比如.caption-pill用1px solid color-mix(ink 12%) 双段柔和阴影再现 hairline 抬升.kpi .fig .u验证数字衬线 单位 mono。注意 showcase 仅供预览画幅观感从不被带入项目。六、六种画幅处理Frame Treatments配方每帧按同一条配方流水线拆解Ground · 容器 · Composes(组成) · Focal(焦点) · Chrome · Accent · Fixed/Free · Density。硬性前置每帧一次 coral以 kicker-spike 开场。原文档提供了六个明确场景的配方1 · Cover身份 · 超大卫字体 · creamGroundcreamslide-padComposes kicker-spike、display-cover、lead、mono 索引Focal 2–3 行 EB Garamonddisplay-cover句子大小写、ink置于 coral ✱ kicker 之下Chrome 顶/角 mono 索引条repo · branchAccent 唯一的那枚 coral ✱FixedEB Garamond 400 句子大小写、hairline、cream 地面Free标题文字、mono 索引、版式与满幅程度Density 自由。2 · Statement宣言 · 单行 EB Garamond · cream 或 navyGround cream要重力感时换 navyFocal 一行两行高的 EB Garamonddisplay用一句话承载变化——若是立场句则上斜体Chrome mono kickerAccent 无衬线自持或至多一个 coral 词。3 · Code Surface代码 · 暖 navy 代码窗 · PR 关键帧Ground cream 框住 navy code-surface8px 圆角、cream14% hairline、navy-elev 标题栏 mono 文件名Focal 代码面板本身——diff / before→after / 逐行敲入的 snippet代码由code-diff/code-typing/code-snippet-*等code-*registry 块渲染语法色只存在于面板内部coral 关键字 / teal 字符串 / amber 数字面板外至多一枚 coral 标记如/−gutter 提示Density 密。4 · Number / Impact数据 · 超大数字 · creamFocal 用 EB Garamondnumber-hero数字配 mono 单位压在 1px 规则之上——即 PR 冲击力指标1,204 / −318、17 files、2.1× fasterAccent 数字 ink至多一个 coral 单位数字/指标一律来自脚本PR ingest此处仅定骨架。5 · Pull-quote引言 · EB Garamond 斜体 · creamFocal EB Garamond 斜体quote-pull——一条 commit message、一行评审意见或论点——下方小号 Inter 全大写 cite作者 · 角色Accent 无或一枚 coral 标记。6 · Closing / CTA收尾 · coral 电压 · cream 或 navyComposes display 签名、coral-callout可选 contributor 行assets/login.png头像 mono 姓名Focal 一句短 EB Garamond 收尾语 唯一 coral-calloutshipped-by式收尾配一排 hairline 描边头像章Accent 那唯一一处 coral 电压。在真实项目里这些配方对应每个场景文件one frame one composition file one scene的排版骨架而内容真值由计划/脚本步骤注入——例如 music-to-video 流程中 Step 2 骨架为每帧写下 span/mood/feelStep 3 再绑定模板与真值锚点。七、构成法则Do / Dont 与成品校验Do每帧立在暖 cream 地面上内容聚集在半步 tile 表面display 一律 EB Garamond 句子大小写 负字距Inter 400 正文JetBrains Mono kicker 代码coral 每帧限一处CTA / 行内链接 / 通栏 band抬升只用 1px hairline 至多一枚柔和暖阴影navy 只留给代码/终端面每帧一个清晰焦点、区块以 kicker-spike 开场、按内容意愿填满画面统计数字用衬线数字 mono 单位代码一律经code-*块渲在 navy 面上。Dont无纯白、冷灰、纯黑无第四品牌色navy 是结构色、语法色是装饰无重投影、辉光、内容渐变、倾斜——只允许 hairline 抬升无大写/标题大小写 EB Garamond、无 sans 标题、无衬线标签、无衬线数字单位一帧内无两处 coralcoral 不上标题不上正文标题不越过 measure 上限——逐级下调档位。成品级校验环节有专门参考文档 references/design-adherence.md它规定在交付 preview 前按颜色每个 hex 必须出现在规格调色板里、字体、圆角、间距、深度、规避清单六项逐一核对违规按 checklist 报告并修复。八、跨比例行为矩阵Treatment16:99:161:1Coverdisplay 左置、索引顶置display 顶置、索引下置display 角落索引Statement行左/居中行堆叠居中Code Surface面板被 cream 框定面板更高、行更少面板居中方形Number/Impact数字左置数字居中、更高居中Pull-quote引言左置引言堆叠居中Closing/CTA签名 头像行签名顶、头像下居中、头像换行纪律slide-pad在短边上守住display 在 1.4cqw 下限之上重新排档代码面在每个比例上都保持 hairline mono chrome头像行宁可换行也不缩到不可读。文档明确提示 9:16 与 1:1 属于指导性输出仍需逐比例核验可读下限与cream/tile 暖度 单 coral纪律。九、实体与数字红线硬规则原文档没有定义任何真实客户、Logo 或厂商——此类标识一律以占位符渲染贡献者头像来自 PR 人员图谱暂存的assets/login.png✱、hairline、代码面均为纯 CSS无需外部图片帧级永不编造数字/统计/diff/计数槽位渲染为— figure —、{metric}、N / −M占位符直到脚本由 PR ingest 供给填真值分支名、文件数、/−总数须能溯源到 diffcommit/issue 编号仅作 chrome。十、渲染前自审清单Pre-Render Self-Audit原文档提供的最终检查项可当作六条验收门禁眯眼单一 display 主导、三位一体cream 地面 tile 阶 ink 声音、coral 恰一次、navy 只上代码面、无第四色、字体句子大小写 EB Garamond / Inter 400 / JetBrains Mono kicker code、≥1.4cqw 下限、深度1px hairline 至多一枚暖影、6/8/12px 圆角、代码由code-*块渲于暖 navy 面、语法三色、数字配 mono 单位、无编造每个数字/diff 溯源到 PR否则占位符。十一、已知边界与落地约束Known Gaps最后这节决定哪些事不在本文件职责内了解它能避免越权使用动效刻意越界claude 的运动语域短交叉溶解、无 overshoot/bounce/elastic、coral 是唯一画入色、数字上数、代码逐行敲入托管在所属 workflow 的motion-language.md与 hyperframes-animation 技能中本FRAME.md只规约静帧构图。这也与hyperframes-creative技能非动画的自我定位一致。字体交付方式EB Garamond / Inter / JetBrains Mono 三款已由 HyperFrames 渲染器通过fontsource内嵌数据打包可离线按名解析、无 Google Fonts 依赖——帧无需携带这三款的.woff2或font-face。内嵌集只有 400 700 两个字重且无真斜体因此 display 一律以 400 创作700 会读成超粗、跑出语域斜体按浏览器合成斜线对待对引言语域可接受若项目重度依赖斜体才需自备真 EB Garamond italic.woff2font-face。衬线回退EB Garamond 是暖调旧式衬线低对比、人文主义万一字体加载失败回退到 Georgia 或另一款旧式衬线绝不回退到 sans。CJK 场景改用 Noto Serif SCdisplay/ Noto Sans SC正文/ Noto Sans Mono CJK代码衬线消失时句子大小写的暖意来补位。语法色不可 remixteal#5DB8A6/ amber#E8A55A/ 状态色是固定装饰声明在 §Colors不在可 remix 的colors:块中——品牌再创作永远不会重刷它们。职责切割代码本体属于code-*registry 块本预设只拥有外围暖 navy 表面 mono chrome。十二、与配套件的衔接showcase 与字幕皮肤claude 预设目录的同名组件值得在落地时一并取用frame-showcase.html一张 1400 行的画幅联系表逐页演示调色板、两套字阶、八类组件与六个 treatment 的真实观感含1920×1080与16:9容器下的 cqw 排版范例浏览器直接打开即可看到整本预设但永远不要拷入项目。caption-skin.html预设自带的下三分之一逐词卡拉OK字幕皮肤。它只引用一套固定令牌词汇--cap-ink·--cap-canvas·--cap-accent·--font-display等每个变量都带 claude 字面量回退发布类工作流的 Step 2 会把它复制成项目的caption-skin.html再由captions.mjs填充三处预留位——空GROUPS数组引擎的场景感知词组、0时长与画布尺寸、空的data-brand-tokens样式从项目frame.md派生:root令牌。视觉上它把预设的暖 cream 卡片 1px hairline 一枚暖影抬升语言延伸到字幕层未读词淡墨、当前词全墨 3px coral电压下划线border-bottom即内联链接手势、无排版位移、已读词落为全墨并清除下划线三态切换用gsap.set({className})由引擎逐帧 seek 驱动刻意不用tl.call()回调以保证渲染态正确。若要把该预设接入自己的项目推荐的完整链路是按 design-spec.md 的优先级与解析规则读取/采纳 spec → 依据 video-composition.md 理解规格是品牌、不是版式品牌色神圣、视频适配归你字号、间距、透明度、边框粗细并遵循其密度原则每场景 8–10 个元素、三层背景/中景/前景→ 创作时逐帧套用本文的 treatment 配方 → 渲染前跑 design-adherence.md 的六项核对清单。这样一份只有三色 一款衬线的温暖编辑风就能在任意比例、任意场景里保持同一品牌张力——正如预设箴言所述atoms are sacred · composition is free · numbers come from the script。【免费下载链接】OpenMontageWorlds 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考