HyperFrames 帧级设计系统实战以 Editorial Forest 为例解读 frame.md 规范与落地【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes导读本文基于 HyperFrames 创意技能库skills/hyperframes-creative中的Editorial Forest 帧预设frame preset系统讲解视频项目帧级设计规范frame.md的完整结构、设计令牌design tokens、六种帧版式frame treatments、多宽高比行为与渲染前自检流程。读完本文你将掌握如何把一个以 YAML frontmatter 为规范层、以 Markdown 正文为语境层的帧级设计系统应用到 HyperFrames 视频创作中并能借助同目录的frame-showcase.html与caption-skin.html理解其底层 CSS 实现逻辑。一、frame.md 是什么帧级设计系统规范在 HyperFrames 的创意工作流中frame.md是以帧frame1920×1080为单位的视频设计系统是design.md面向网页/静态页面的视频优先伴侣。二者文件格式相同YAML frontmatter Markdown 正文但frame.md将品牌重新锚定在视频帧这个单元上。从 design-spec.md 可知其解析契约frontmatter 是规范层normative layercolors、typography、spacing、components是真正可机读的值必须逐字引用精确 hex、字族、字重不得发明或取整正文是语境层context##章节承载意图、使用时机与令牌无法表达的约束用于判断而非取值解析优先级frame.md → design.md → DESIGN.md取第一个存在的文件frame.md恒为小写帧预设目录下发布的是大写的FRAME.md模板被工作流复制并重命名为frame.md后使用。Editorial Forest 预设FRAME.md即这样一个完整样例其设计意图被概括为atoms are sacred · composition is free · numbers come from the script原子神圣、构图自由、数字来自脚本定位是 Penguin classic / quiet annual report / art-book spread 式的文学编辑风。二、设计令牌色彩、字体、间距速查表2.1 色彩令牌ColorsEditorial Forest 严格使用绿 / 粉 / 奶油三色组triad 近似色整个调色板只有 8 个令牌令牌色值角色green#2e4a2a森林绿主表面、填充、规则线green-deep#243a21深绿粉底上的文字green-lite#3a5a36浅绿第二种瓦片填充pink#e89cb1灰玫瑰强调色 绿底文字pink-deep#d27e96深粉粉上粉的边框cream#efe7d4燕麦纸默认地面cream-2#e6dcc4奶油二号地面上的瓦片ink#1a1a17暖近黑奶油底正文用法规则内容帧默认地面cream封面/陈述/摘要帧用green制造重力时刻单帧最多两种表面色调三种即喧闹绝不出现第四色族表面从不使用rgba透明度。在 frame-showcase.html 中这些令牌被落为 CSS 变量--green、--pink、--cream、--cream-2、--ink等见第 14–25 行全部组件都从变量取值。2.2 字体令牌Typography系统只允许两个字体Source Serif 4衬线承担所有展示级标题与正文与JetBrains Mono等宽承担全部编辑级镀铬标签、字幕、坐标刻度、页脚线。两条字号阶梯ramp阅读/镀铬阶梯正文与 UI 镀铬令牌规格bodySource Serif 41.56cqw字重 400行高 1.38body-cardSource Serif 41.35cqw字重 400行高 1.34labelJetBrains Mono26px /1.35cqw字重 500字距0.18em大写caption-monoJetBrains Mono24px /1.25cqw字重 500字距0.14em大写展示阶梯所有标题与数字全部 Source Serif 4 字重 500、启用 optical-size 轴、负字距令牌cqw行高字距title-card-sm2.90.98−0.01emtitle-card3.50.96−0.01emheadline4.41.0−0.02emheadline-xl5.00.96−0.02emdisplay7.31.02−0.02emdisplay-hero/stat-figure11.50.92−0.02em / −0.03emstat-figure-unit5.70.92—name2.31.0字重 600仅署名用核心纪律展示级一律 500绝不 400、绝不 700正文 400署名 600——500→400 的下沉就是阅读节奏衬线只用这三档字重禁止斜体、下划线、第三字体、500 字重的衬线正文等宽一律大写、字距 0.08–0.18em。可读性下限任何承重行 ≥1.4cqw等宽 px 级标签仅作镀铬。2.3 间距令牌Spacing令牌值slide-pad5cqw对应源设计稿 96–140px 的宽松留白rule2px系统唯一的分隔线粗细rule-card2.5pxstep tile 专用radius-card6pxtopic tile 圆角radius-step8pxstep tile 圆角三、帧的构成画布、安全区与容器法则3.1 三种画布主画布1920×108016:9展示字号以cqw撰写换算公式为px ÷ 1920 × 100 cqw竖屏1080×19209:16方形1080×10801:1。3.2 安全区slide-pad即5cqw安全边距topbar顶部栏与 footline页脚线都位于其内。3.3 容器法则load-bearing承重规则每一帧地面必须设置container-type: size所有帧相对单位一律用cqw/cqh相对它计算绝不使用vw——因为源设计稿是固定 1920 画布其 px 可干净映射px ÷ 1920 × 100。细线恒为 2px卡片圆角恒为 6/8px。在 frame-showcase.html 第 422–429 行可看到这一法则的实现.frame类同时声明aspect-ratio: 16/9; container-type: size;其内部 topbar 的左右定位用5cqw、字号用0.95cqw全部锚定容器尺寸而非视口。四、Frame Craft Bar渲染前的三道目测关卡任何结构性检查之前每帧必须通过三项目测关卡检查内容Squint眯眼看只有一个 Source Serif 4 瞬间主导画面其体量是邻近元素的 3–6 倍表面色块居中视线Silence寂静每帧只有一个主题置于深负空间中topic-tile 与 step 网格是唯一允许密集的例外Restraint克制每帧最多两种表面色调展示 500 / 正文 400绿色地面仅留给重力时刻Reference参照目标观感是 Penguin 经典封面 / 安静的年报 / 画册跨页失败形态是带阴影的多彩网页仪表盘五、颜色使用细则标题配色绿底用奶油hero 尺度可用粉、绿底用粉、粉底用深绿。正文配色奶油底用墨色、绿底用奶油、粉底用深绿。标签/规则线取区域强调色粉在绿上、绿在奶油上、深绿在粉上。瓦片填充在 green / pink / green-lite / cream-2绿边框 之间轮转。禁止项无第四色族三色组 近似色即全部调色板表面绝不使用rgba透明度。该配色体系与 video-composition.md 的品牌色神圣、应用方式自由契约一致——严格继承 hex 与字重关系布局则是自由的。六、深度与表面纸面扁平Editorial Forest 的深度完全扁平、纸基层级感只来自三种手段色块对比——奶油地上的绿瓦片靠墨块分离获得浮起感2px 细线规则——以区域强调色做区块分隔边框 vs 填充——cream-2 瓦片 2px 绿边框读起来与实心瓦片是不同层级。天花板硬性禁令零阴影任何box-shadow都会击碎纸感、无渐变、无辉光表面一律是实色墨在纸上。形状上topic tile 6px、step tile 8px、图例色块 2px、条形顶部3px 3px 0 0、花押圆 50%——没有直角也没有重度圆角花押圆是唯一全圆元素。七、组件系统组件规格要点用途topbar等宽标签 花押圆/计数器顶部边沿标签左、标记右每帧必有的脊椎缺失即未处理footlinecaption-mono×2space-between绝对定位底部封面/数据/摘要帧monogram-circle2px 粉边框、50% 圆、130px、等宽花押身份印章仅封面/摘要topic-tile四色填充轮转 2px 绿边框cream-2 款 6px 圆角、无阴影caption-mono序号 title-card-sm 等宽脚注目录/清单模式step-tilecream绿边框 / green / pink 填充轮转、2.5px 边框、8px 圆角等宽序号 title-cardbody-card 顶部规则上的等宽标记框架/流程卡片kpi-blockcaption-mono标签 →stat-figurestat-figure-unit→body上方 2px 强调规则超大衬线数字meta-dl2px 绿顶部规则3 列 dt/dd 网格caption-monodt 衬线 dd元数据清单bar56px 宽、3px 3px 0 0圆角、上方等宽数值粉/奶油/绿三色垂直图表条形rule-thin2px 实线绿在奶油上 / 粉在绿上 / 深绿在粉上唯一分隔符永不 1px、永不 3px在 frame-showcase.html 中瓦片四色轮转的实现.tile.green/.pink/.lite/.cream2第 297–328 行、花押圆.monobig第 361–373 行、KPI 块.kpi .fig128px/0.92 行高/−0.03em第 329–360 行、条形图.bars .bar56px 宽第 374–397 行与 meta-dl 全部可对照查看可作为逐组件复刻的参考实现。八、六种帧版式Frame Treatments每种版式遵循固定配方ground地面· container容器· composes组成· focal焦点· chrome镀铬· accent强调· silence寂静度· Fixed/Free固定/自由· density密度。1 · Cover封面 · 身份 · 超大衬线 · 绿底 · 左对齐地面greenslide-pad组成topbar等宽标签 花押圆、display-hero、正文 lede、footline焦点两行 Source Serif 4display-hero粉色其中一词奶油色居左强调粉展示字 花押圆寂静度~50%密度低固定衬线 500、扁平、2px 粉花押圆自由标题文案与奶油色词的选择。实现见 frame-showcase.html 的.ef1第 467–506 行封面 h3 用13cqw粉字、奶油色强调词.cr、花押圆7cqw直径 0.13cqw粉边框。2 · Topic Tiles目录 · 轮转填充网格 · 奶油底 · 密集帧地面cream组成topbar、headline-xl、3–4 个 topic-tile焦点一排 6px 瓦片填充在 green / pink / cream-2边框间轮转每个含等宽序号 衬线标题强调瓦片填充4 选 3 混用网格内不重复密度密集例外固定6px 圆角、轮转填充、无阴影自由瓦片标题与填充选择。实现见.ef2第 508–571 行三列repeat(3, 1fr)网格 0.6cqw圆角green/pink/cream2 三种填充。3 · KPI Stat数据 · 超大数字 · 绿底地面green组成topbar、kpi-block等宽标签 220px stat-figure 衬线描述、footline焦点Source Serif 4stat-figure约 11.5cqw带单位粉色置于 2px 粉规则之上强调粉数字寂静度~55%密度低固定衬线 500 数字、2px 强调规则、扁平自由数字来自脚本、标签、描述。实现见.ef3第 573–619 行18cqw粉数字 9cqw单位 等宽标签与0.12cqw粉顶部规则。4 · Statement引言 · 展示衬线 · 奶油底 · 左对齐地面cream慷慨留白组成topbar、display、600 字重署名、caption-mono角色行焦点两行 Source Serif 4display约 7.3cqw绿色 600 字重署名 等宽角色强调无——衬线自身承重寂静度~55%密度低固定衬线 500 展示 600 署名无斜体自由引言、姓名、角色。实现见.ef4第 621–651 行6.4cqw绿衬线 1.9cqw600 字重署名 等宽角色行。5 · Step Framework流程 · 8px step 瓦片 · 奶油/绿底地面cream或绿组成topbar、headline、3–4 个 step-tile焦点一排 8px step 瓦片2.5px 边框——等宽序号 衬线 68px 标题 正文 顶部规则上的等宽标记填充轮转 cream绿边框 / green / pink强调瓦片填充寂静度中等密度标准固定8px 圆角、2.5px 边框、等宽标记自由步骤内容与填充。6 · Chart数据 · 条形 元数据 · 绿底地面green组成topbar、headline、条形 2px 轴规则、meta-dl焦点56px 粉/奶油/绿条形立于内侧 2px 规则上带等宽刻度可选 3 列 meta-dl 在其下强调条形填充寂静度中等密度标准固定56px 条形、3px 顶部、2px 轴、等宽刻度自由数值来自脚本与标签。九、构图规则Do / DontDo必须所有展示级文字用Source Serif 4 字重 500、opsz、负字距、紧凑行高正文400所有标签/字幕/刻度/页脚线用JetBrains Mono 500 大写、0.08–0.18em每帧都有 topbar等宽标签 花押或计数器数据/封面帧带 footline每帧选一个主导表面最多两种色调瓦片填充轮转、网格内不重复用区域强调色的2px 细线分隔区块花押圆只留给封面/摘要展示字阶激进放大statement/stat/cover 用 7.3–11.5cqw编辑式左倾每帧一个主题。Dont禁止无box-shadow、渐变、辉光——只允许扁平纸基深度无第三字体无斜体/下划线无 500 字重衬线正文无等宽做标题尺度无第四色族无rgba表面无 1px 或 4px 规则线仅 2px / 2.5px无两个互相竞争的内容块不许省略 topbar标题不得撑满全宽——按量降阶。十、多宽高比行为Aspect-Ratio Behavior版式16:99:161:1Cover展示居左花押右上展示置顶花押在下展示居中花押角落Topic Tiles3–4 横排纵向堆叠2×2KPI Stat数字居左数字居中、更高居中Statement引言居左引言堆叠居中Step Framework3–4 横排堆叠2×2Chart条形 元数据条形更高、元数据堆叠方形图表slide-pad在短边保持成立展示字阶重新分级时不得低于1.4cqw可读性下限。topbar 在所有比例下横跨顶部花押圆可降级到角落。十一、真实实体、数字与声明硬规则Approved Real Entities源设计稿未定义任何真实客户、Logo 或厂商——此类标记一律渲染为占位符。花押、页脚字符串与瓦片计数器承载每套 deck 的身份数字属于内容。Numerals Claims硬规则帧尺度上绝不虚构数字、KPI、日期或计数。KPI 块、条形与 meta 值在脚本提供之前一律渲染为— figure —、{metric}、— %占位符。期号/计数器属于装饰性镀铬。这与 story-spine.md 的 source-traceable visuals视觉可溯源原则一脉相承。十二、渲染前自检清单Pre-Render Self-Audit检查项标准Squint一个衬线瞬间主导表面色块居中视线Silence每帧一主题于深负空间仅瓦片网格允许密集Triad最多两种表面色调标题/正文/标签配色正确无第四色族TypeSource Serif 4 展示 500opsz、负字距/ 正文 400等宽大写 0.08–0.18em≥1.4cqw 下限Depth零阴影、零渐变2px 细线6/8px 圆角花押圆为唯一全圆Chrome每帧有 topbar数据/封面帧有 footlineFabrication每个数字都追溯至脚本否则用占位符如需自动化的对比度核验可用 contrast-report.mjs 检查渲染帧的对比度警告。十三、已知缺口与落地注意Known Gaps动效明确不在范围内frame.md只规定构图源设计依赖deck-stage.js处理缩放与导航没有转场规范。动效原子规则请转向hyperframes-animation技能字体加载Source Serif 4opsz 8..60与 JetBrains Mono 经由 Google Fonts 引入optical-size 轴至关重要——无 opsz 的回退字体会压平随尺寸变化的字形。中文回退方案展示用 LXGW WenKai、正文用 Noto Serif SC、镀铬用 Noto Sans Mono CJK9:16 / 1:1 属指导性须逐比例验证可读性下限与双色调纪律是否成立纯 CSS 实现条形、细线、瓦片与花押圆全部 CSS-only无需外部图片素材对比度green-on-pink / pink-on-green 仅在展示尺度84px使用小字保持 cream-on-green 或 ink-on-cream。十四、配套资产字幕皮肤与预览画册除FRAME.md外预设目录还提供两个可直接使用的配套资产frame-showcase.html——预设的帧版式预览画册contact sheet完整渲染了封面、色板、字阶、组件、六种构图、规则与字幕皮肤预览用于查看观感按 design-spec.md 约定不并入项目其中的__bundler_thumbnailSVG 模板还展示了打包缩略图绿底 粉色 Aa 花押圆 细线的规范画法。caption-skin.html——该预设的下三分之一卡拉OK式字幕皮肤燕麦奶油卡片 单条 2px 绿细线边框 6px 圆角 无阴影保持扁平纸感Source Serif 4 字重 500、句首大写、暖墨字形未念词为淡墨、当前词为灰玫瑰色柔和面板box-shadow扩散模拟 6px 圆角块、无模糊、已念词落为实墨并清除面板。其令牌契约--cap-ink、--cap-canvas、--cap-accent、--cap-accent-2、--font-display、--font-body、--cap-band-top、--cap-band-height由captions.mjs从项目的frame.md注入:root保证品牌令牌贯通钩子.caption-group / .caption-word与.is-active / .is-spoken状态由引擎逐帧 seek 驱动gsap.set({className})禁用tl.call()回调否则渲染时状态错位。结语从规范到渲染的完整链路Editorial Forest 帧预设给出了一个自洽的闭环FRAME.md提供机读令牌与版式配方frame-showcase.html 提供可对照的 CSS 实现caption-skin.html 提供字幕层落地而 design-spec.md 定义了预设采用与解析机制frame.md → design.md → DESIGN.md优先级frontmatter 即品牌真相。按 SKILL.md 的工作流将FRAME.md复制为项目的frame.md并叠加品牌令牌随后按六种版式配方与自检清单逐帧落 HTML即可稳定产出安静、自信、文学化的视频帧——全部元素条形、细线、瓦片、花押圆均为 CSS 原生无需任何外部图片素材。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 HyperFrames 帧级设计系统实战：以 Editorial Forest 为例解读 frame.md 规范与落地
HyperFrames 帧级设计系统实战以 Editorial Forest 为例解读 frame.md 规范与落地【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes导读本文基于 HyperFrames 创意技能库skills/hyperframes-creative中的Editorial Forest 帧预设frame preset系统讲解视频项目帧级设计规范frame.md的完整结构、设计令牌design tokens、六种帧版式frame treatments、多宽高比行为与渲染前自检流程。读完本文你将掌握如何把一个以 YAML frontmatter 为规范层、以 Markdown 正文为语境层的帧级设计系统应用到 HyperFrames 视频创作中并能借助同目录的frame-showcase.html与caption-skin.html理解其底层 CSS 实现逻辑。一、frame.md 是什么帧级设计系统规范在 HyperFrames 的创意工作流中frame.md是以帧frame1920×1080为单位的视频设计系统是design.md面向网页/静态页面的视频优先伴侣。二者文件格式相同YAML frontmatter Markdown 正文但frame.md将品牌重新锚定在视频帧这个单元上。从 design-spec.md 可知其解析契约frontmatter 是规范层normative layercolors、typography、spacing、components是真正可机读的值必须逐字引用精确 hex、字族、字重不得发明或取整正文是语境层context##章节承载意图、使用时机与令牌无法表达的约束用于判断而非取值解析优先级frame.md → design.md → DESIGN.md取第一个存在的文件frame.md恒为小写帧预设目录下发布的是大写的FRAME.md模板被工作流复制并重命名为frame.md后使用。Editorial Forest 预设FRAME.md即这样一个完整样例其设计意图被概括为atoms are sacred · composition is free · numbers come from the script原子神圣、构图自由、数字来自脚本定位是 Penguin classic / quiet annual report / art-book spread 式的文学编辑风。二、设计令牌色彩、字体、间距速查表2.1 色彩令牌ColorsEditorial Forest 严格使用绿 / 粉 / 奶油三色组triad 近似色整个调色板只有 8 个令牌令牌色值角色green#2e4a2a森林绿主表面、填充、规则线green-deep#243a21深绿粉底上的文字green-lite#3a5a36浅绿第二种瓦片填充pink#e89cb1灰玫瑰强调色 绿底文字pink-deep#d27e96深粉粉上粉的边框cream#efe7d4燕麦纸默认地面cream-2#e6dcc4奶油二号地面上的瓦片ink#1a1a17暖近黑奶油底正文用法规则内容帧默认地面cream封面/陈述/摘要帧用green制造重力时刻单帧最多两种表面色调三种即喧闹绝不出现第四色族表面从不使用rgba透明度。在 frame-showcase.html 中这些令牌被落为 CSS 变量--green、--pink、--cream、--cream-2、--ink等见第 14–25 行全部组件都从变量取值。2.2 字体令牌Typography系统只允许两个字体Source Serif 4衬线承担所有展示级标题与正文与JetBrains Mono等宽承担全部编辑级镀铬标签、字幕、坐标刻度、页脚线。两条字号阶梯ramp阅读/镀铬阶梯正文与 UI 镀铬令牌规格bodySource Serif 41.56cqw字重 400行高 1.38body-cardSource Serif 41.35cqw字重 400行高 1.34labelJetBrains Mono26px /1.35cqw字重 500字距0.18em大写caption-monoJetBrains Mono24px /1.25cqw字重 500字距0.14em大写展示阶梯所有标题与数字全部 Source Serif 4 字重 500、启用 optical-size 轴、负字距令牌cqw行高字距title-card-sm2.90.98−0.01emtitle-card3.50.96−0.01emheadline4.41.0−0.02emheadline-xl5.00.96−0.02emdisplay7.31.02−0.02emdisplay-hero/stat-figure11.50.92−0.02em / −0.03emstat-figure-unit5.70.92—name2.31.0字重 600仅署名用核心纪律展示级一律 500绝不 400、绝不 700正文 400署名 600——500→400 的下沉就是阅读节奏衬线只用这三档字重禁止斜体、下划线、第三字体、500 字重的衬线正文等宽一律大写、字距 0.08–0.18em。可读性下限任何承重行 ≥1.4cqw等宽 px 级标签仅作镀铬。2.3 间距令牌Spacing令牌值slide-pad5cqw对应源设计稿 96–140px 的宽松留白rule2px系统唯一的分隔线粗细rule-card2.5pxstep tile 专用radius-card6pxtopic tile 圆角radius-step8pxstep tile 圆角三、帧的构成画布、安全区与容器法则3.1 三种画布主画布1920×108016:9展示字号以cqw撰写换算公式为px ÷ 1920 × 100 cqw竖屏1080×19209:16方形1080×10801:1。3.2 安全区slide-pad即5cqw安全边距topbar顶部栏与 footline页脚线都位于其内。3.3 容器法则load-bearing承重规则每一帧地面必须设置container-type: size所有帧相对单位一律用cqw/cqh相对它计算绝不使用vw——因为源设计稿是固定 1920 画布其 px 可干净映射px ÷ 1920 × 100。细线恒为 2px卡片圆角恒为 6/8px。在 frame-showcase.html 第 422–429 行可看到这一法则的实现.frame类同时声明aspect-ratio: 16/9; container-type: size;其内部 topbar 的左右定位用5cqw、字号用0.95cqw全部锚定容器尺寸而非视口。四、Frame Craft Bar渲染前的三道目测关卡任何结构性检查之前每帧必须通过三项目测关卡检查内容Squint眯眼看只有一个 Source Serif 4 瞬间主导画面其体量是邻近元素的 3–6 倍表面色块居中视线Silence寂静每帧只有一个主题置于深负空间中topic-tile 与 step 网格是唯一允许密集的例外Restraint克制每帧最多两种表面色调展示 500 / 正文 400绿色地面仅留给重力时刻Reference参照目标观感是 Penguin 经典封面 / 安静的年报 / 画册跨页失败形态是带阴影的多彩网页仪表盘五、颜色使用细则标题配色绿底用奶油hero 尺度可用粉、绿底用粉、粉底用深绿。正文配色奶油底用墨色、绿底用奶油、粉底用深绿。标签/规则线取区域强调色粉在绿上、绿在奶油上、深绿在粉上。瓦片填充在 green / pink / green-lite / cream-2绿边框 之间轮转。禁止项无第四色族三色组 近似色即全部调色板表面绝不使用rgba透明度。该配色体系与 video-composition.md 的品牌色神圣、应用方式自由契约一致——严格继承 hex 与字重关系布局则是自由的。六、深度与表面纸面扁平Editorial Forest 的深度完全扁平、纸基层级感只来自三种手段色块对比——奶油地上的绿瓦片靠墨块分离获得浮起感2px 细线规则——以区域强调色做区块分隔边框 vs 填充——cream-2 瓦片 2px 绿边框读起来与实心瓦片是不同层级。天花板硬性禁令零阴影任何box-shadow都会击碎纸感、无渐变、无辉光表面一律是实色墨在纸上。形状上topic tile 6px、step tile 8px、图例色块 2px、条形顶部3px 3px 0 0、花押圆 50%——没有直角也没有重度圆角花押圆是唯一全圆元素。七、组件系统组件规格要点用途topbar等宽标签 花押圆/计数器顶部边沿标签左、标记右每帧必有的脊椎缺失即未处理footlinecaption-mono×2space-between绝对定位底部封面/数据/摘要帧monogram-circle2px 粉边框、50% 圆、130px、等宽花押身份印章仅封面/摘要topic-tile四色填充轮转 2px 绿边框cream-2 款 6px 圆角、无阴影caption-mono序号 title-card-sm 等宽脚注目录/清单模式step-tilecream绿边框 / green / pink 填充轮转、2.5px 边框、8px 圆角等宽序号 title-cardbody-card 顶部规则上的等宽标记框架/流程卡片kpi-blockcaption-mono标签 →stat-figurestat-figure-unit→body上方 2px 强调规则超大衬线数字meta-dl2px 绿顶部规则3 列 dt/dd 网格caption-monodt 衬线 dd元数据清单bar56px 宽、3px 3px 0 0圆角、上方等宽数值粉/奶油/绿三色垂直图表条形rule-thin2px 实线绿在奶油上 / 粉在绿上 / 深绿在粉上唯一分隔符永不 1px、永不 3px在 frame-showcase.html 中瓦片四色轮转的实现.tile.green/.pink/.lite/.cream2第 297–328 行、花押圆.monobig第 361–373 行、KPI 块.kpi .fig128px/0.92 行高/−0.03em第 329–360 行、条形图.bars .bar56px 宽第 374–397 行与 meta-dl 全部可对照查看可作为逐组件复刻的参考实现。八、六种帧版式Frame Treatments每种版式遵循固定配方ground地面· container容器· composes组成· focal焦点· chrome镀铬· accent强调· silence寂静度· Fixed/Free固定/自由· density密度。1 · Cover封面 · 身份 · 超大衬线 · 绿底 · 左对齐地面greenslide-pad组成topbar等宽标签 花押圆、display-hero、正文 lede、footline焦点两行 Source Serif 4display-hero粉色其中一词奶油色居左强调粉展示字 花押圆寂静度~50%密度低固定衬线 500、扁平、2px 粉花押圆自由标题文案与奶油色词的选择。实现见 frame-showcase.html 的.ef1第 467–506 行封面 h3 用13cqw粉字、奶油色强调词.cr、花押圆7cqw直径 0.13cqw粉边框。2 · Topic Tiles目录 · 轮转填充网格 · 奶油底 · 密集帧地面cream组成topbar、headline-xl、3–4 个 topic-tile焦点一排 6px 瓦片填充在 green / pink / cream-2边框间轮转每个含等宽序号 衬线标题强调瓦片填充4 选 3 混用网格内不重复密度密集例外固定6px 圆角、轮转填充、无阴影自由瓦片标题与填充选择。实现见.ef2第 508–571 行三列repeat(3, 1fr)网格 0.6cqw圆角green/pink/cream2 三种填充。3 · KPI Stat数据 · 超大数字 · 绿底地面green组成topbar、kpi-block等宽标签 220px stat-figure 衬线描述、footline焦点Source Serif 4stat-figure约 11.5cqw带单位粉色置于 2px 粉规则之上强调粉数字寂静度~55%密度低固定衬线 500 数字、2px 强调规则、扁平自由数字来自脚本、标签、描述。实现见.ef3第 573–619 行18cqw粉数字 9cqw单位 等宽标签与0.12cqw粉顶部规则。4 · Statement引言 · 展示衬线 · 奶油底 · 左对齐地面cream慷慨留白组成topbar、display、600 字重署名、caption-mono角色行焦点两行 Source Serif 4display约 7.3cqw绿色 600 字重署名 等宽角色强调无——衬线自身承重寂静度~55%密度低固定衬线 500 展示 600 署名无斜体自由引言、姓名、角色。实现见.ef4第 621–651 行6.4cqw绿衬线 1.9cqw600 字重署名 等宽角色行。5 · Step Framework流程 · 8px step 瓦片 · 奶油/绿底地面cream或绿组成topbar、headline、3–4 个 step-tile焦点一排 8px step 瓦片2.5px 边框——等宽序号 衬线 68px 标题 正文 顶部规则上的等宽标记填充轮转 cream绿边框 / green / pink强调瓦片填充寂静度中等密度标准固定8px 圆角、2.5px 边框、等宽标记自由步骤内容与填充。6 · Chart数据 · 条形 元数据 · 绿底地面green组成topbar、headline、条形 2px 轴规则、meta-dl焦点56px 粉/奶油/绿条形立于内侧 2px 规则上带等宽刻度可选 3 列 meta-dl 在其下强调条形填充寂静度中等密度标准固定56px 条形、3px 顶部、2px 轴、等宽刻度自由数值来自脚本与标签。九、构图规则Do / DontDo必须所有展示级文字用Source Serif 4 字重 500、opsz、负字距、紧凑行高正文400所有标签/字幕/刻度/页脚线用JetBrains Mono 500 大写、0.08–0.18em每帧都有 topbar等宽标签 花押或计数器数据/封面帧带 footline每帧选一个主导表面最多两种色调瓦片填充轮转、网格内不重复用区域强调色的2px 细线分隔区块花押圆只留给封面/摘要展示字阶激进放大statement/stat/cover 用 7.3–11.5cqw编辑式左倾每帧一个主题。Dont禁止无box-shadow、渐变、辉光——只允许扁平纸基深度无第三字体无斜体/下划线无 500 字重衬线正文无等宽做标题尺度无第四色族无rgba表面无 1px 或 4px 规则线仅 2px / 2.5px无两个互相竞争的内容块不许省略 topbar标题不得撑满全宽——按量降阶。十、多宽高比行为Aspect-Ratio Behavior版式16:99:161:1Cover展示居左花押右上展示置顶花押在下展示居中花押角落Topic Tiles3–4 横排纵向堆叠2×2KPI Stat数字居左数字居中、更高居中Statement引言居左引言堆叠居中Step Framework3–4 横排堆叠2×2Chart条形 元数据条形更高、元数据堆叠方形图表slide-pad在短边保持成立展示字阶重新分级时不得低于1.4cqw可读性下限。topbar 在所有比例下横跨顶部花押圆可降级到角落。十一、真实实体、数字与声明硬规则Approved Real Entities源设计稿未定义任何真实客户、Logo 或厂商——此类标记一律渲染为占位符。花押、页脚字符串与瓦片计数器承载每套 deck 的身份数字属于内容。Numerals Claims硬规则帧尺度上绝不虚构数字、KPI、日期或计数。KPI 块、条形与 meta 值在脚本提供之前一律渲染为— figure —、{metric}、— %占位符。期号/计数器属于装饰性镀铬。这与 story-spine.md 的 source-traceable visuals视觉可溯源原则一脉相承。十二、渲染前自检清单Pre-Render Self-Audit检查项标准Squint一个衬线瞬间主导表面色块居中视线Silence每帧一主题于深负空间仅瓦片网格允许密集Triad最多两种表面色调标题/正文/标签配色正确无第四色族TypeSource Serif 4 展示 500opsz、负字距/ 正文 400等宽大写 0.08–0.18em≥1.4cqw 下限Depth零阴影、零渐变2px 细线6/8px 圆角花押圆为唯一全圆Chrome每帧有 topbar数据/封面帧有 footlineFabrication每个数字都追溯至脚本否则用占位符如需自动化的对比度核验可用 contrast-report.mjs 检查渲染帧的对比度警告。十三、已知缺口与落地注意Known Gaps动效明确不在范围内frame.md只规定构图源设计依赖deck-stage.js处理缩放与导航没有转场规范。动效原子规则请转向hyperframes-animation技能字体加载Source Serif 4opsz 8..60与 JetBrains Mono 经由 Google Fonts 引入optical-size 轴至关重要——无 opsz 的回退字体会压平随尺寸变化的字形。中文回退方案展示用 LXGW WenKai、正文用 Noto Serif SC、镀铬用 Noto Sans Mono CJK9:16 / 1:1 属指导性须逐比例验证可读性下限与双色调纪律是否成立纯 CSS 实现条形、细线、瓦片与花押圆全部 CSS-only无需外部图片素材对比度green-on-pink / pink-on-green 仅在展示尺度84px使用小字保持 cream-on-green 或 ink-on-cream。十四、配套资产字幕皮肤与预览画册除FRAME.md外预设目录还提供两个可直接使用的配套资产frame-showcase.html——预设的帧版式预览画册contact sheet完整渲染了封面、色板、字阶、组件、六种构图、规则与字幕皮肤预览用于查看观感按 design-spec.md 约定不并入项目其中的__bundler_thumbnailSVG 模板还展示了打包缩略图绿底 粉色 Aa 花押圆 细线的规范画法。caption-skin.html——该预设的下三分之一卡拉OK式字幕皮肤燕麦奶油卡片 单条 2px 绿细线边框 6px 圆角 无阴影保持扁平纸感Source Serif 4 字重 500、句首大写、暖墨字形未念词为淡墨、当前词为灰玫瑰色柔和面板box-shadow扩散模拟 6px 圆角块、无模糊、已念词落为实墨并清除面板。其令牌契约--cap-ink、--cap-canvas、--cap-accent、--cap-accent-2、--font-display、--font-body、--cap-band-top、--cap-band-height由captions.mjs从项目的frame.md注入:root保证品牌令牌贯通钩子.caption-group / .caption-word与.is-active / .is-spoken状态由引擎逐帧 seek 驱动gsap.set({className})禁用tl.call()回调否则渲染时状态错位。结语从规范到渲染的完整链路Editorial Forest 帧预设给出了一个自洽的闭环FRAME.md提供机读令牌与版式配方frame-showcase.html 提供可对照的 CSS 实现caption-skin.html 提供字幕层落地而 design-spec.md 定义了预设采用与解析机制frame.md → design.md → DESIGN.md优先级frontmatter 即品牌真相。按 SKILL.md 的工作流将FRAME.md复制为项目的frame.md并叠加品牌令牌随后按六种版式配方与自检清单逐帧落 HTML即可稳定产出安静、自信、文学化的视频帧——全部元素条形、细线、瓦片、花押圆均为 CSS 原生无需任何外部图片素材。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考