HyperFrames Blue Professional 帧设计系统基于FRAME.md的咨询级视频帧规范与落地指南【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes导读Blue Professional是 HyperFrames 创意技能skills/hyperframes-creative内置的一套frame-preset帧预设其核心规范沉淀在 skills/hyperframes-creative/frame-presets/blue-professional/FRAME.md 中。它以「克制 一个强承诺」为哲学暖奶油画布配单一饱和钴蓝#1e2bfa用无阴影的软色调卡片承载全部层次目标是投资研究 / 麦肯锡简报式的可在远距离阅读的执行级视觉。读完本文你将掌握该预设的完整设计令牌frontmatter 规范层、六种帧版式Frame Treatments的配方、字号适配fit-to-measure规则、多宽高比行为以及如何把预设落地为项目中真实的frame.md与字幕皮肤。一、什么是 frame-preset规范文件的角色与读取方法1.1 预设如何被采用在 HyperFrames 的创意工作流中frame.md是一个视频 / 帧尺度frame-scale设计系统文件与面向 Web 的design.md互为表里。当项目没有现成设计规范时工作流可以选择一个现成的 frame-preset将其FRAME.md复制进项目并重命名为小写frame.md再叠加上品牌令牌。这一契约在 skills/hyperframes-creative/references/design-spec.md 中定义解析优先级frame.md → design.md → DESIGN.md只读第一个存在的frame.md永远小写预设里的大写FRAME.md是模板Linux 下与design.md是不同文件。文件结构 YAML frontmatter规范性层 Markdown 正文语境层frontmatter 中的colors、typography、spacing、components是机器可读的真实值必须逐字引用精确的 hex、字体族、字重不得发明或取整正文的##章节承载意图、何时使用与约束用于判断而非取值。每个预设目录还附带一个frame-showcase.html预览样张contact sheet用于看到该预设的观感但绝不把它引入项目正文。Blue Professional 预设目录共三个文件FRAME.md— 设计规范本体本文讲解对象frame-showcase.html— 六种版式 令牌 字幕的可视化实现样板caption-skin.html— 预设自带的底部三分之一lower-third卡拉 OK 字幕皮肤1.2 与其他预设的定位差异design-spec.md的预设对照表中对 Blue Professional 的定位是咨询级克制 —— 暖奶油画布、单一饱和钴蓝#1e2bfa唯一强调色、Space Grotesk Inter 排版、无阴影软色调卡片4% 填充 / 20% 边框 / 10–14px 圆角、100px 药丸形装饰、三级灰文字阶梯、钴蓝进度条适合measured / executive-readable / premium-signal、想要投资研究严谨感与精致克制的产品。它区别于biennale-yellow文学编辑风、blockframe新粗野主义、cartesian博物馆目录风等预设的关键就是单强调色 无阴影这两条不可妥协的红线。二、帧级核心特征克制但有一个强承诺FRAME.md在 Overview 中定义了帧尺度frame scale下的系统气质咨询级 —— 克制 一个强承诺。暖奶油画布 单一饱和钴蓝承担所有强调eyebrow、指标、CTA、图表填充、进度条。没有次品牌色、没有粉彩只有奶油、钴蓝和紧密的灰阶阶梯。语域是投资研究 / 麦肯锡简报克制、数据密集但不拥挤、远距离可读。帧尺度下的关键特征暖奶油地面铺满每一帧单一钴蓝是唯一强调色。Space Grotesk展示 / 数字 / chromeInter正文—— 近黑标题、钴蓝数字。色调卡片—— 钴蓝 4% 填充、钴蓝 20% 的 1.5px 边框、10–14px 圆角、无阴影。药丸形 chrome100px—— tag 药丸 唯一的实心钴蓝 CTA钴蓝进度条。全角落圆润除了进度条没有直角内容。Atmosphere斜切面板、点阵、同心环仅用于封面 / 收尾。系统在帧尺度的声音由两个固定角色构成Space Grotesk展示、所有数字、所有 chrome —— eyebrow 大写 0.08em 字距与 Inter正文、灰调、行高 1.6。标题近黑钴蓝只留给强调时刻。层次是软且带色调的 —— 4% 钴蓝卡片填充 20% 钴蓝边框 10–14px 圆角 ——从不加阴影。缺少生硬阴影恰恰是它的高级感信号。三、The Frame 与 Frame Craft Bar构图前的三道关卡3.1 帧规格与容器法则主规格1920×108016:9。展示字号以cqw撰写换算公式px ÷ 1920 × 100 cqw。竖版1080×19209:16方形1080×10801:1。安全区pad-x为 5cqw底部为 counter 与进度条预留空间。容器法则load-bearing承重规则每一帧地面必须设置container-type: size所有帧相对单位都是cqw/cqh永远不用vw。卡片圆角保持 px10–14px药丸圆角保持 100px边框保持 1–1.5px。在 frame-showcase.html 的实现里可以看到该法则的落实.frame类声明aspect-ratio: 16/9; container-type: size;内部所有尺寸如.gf1 h3 { font-size: 5.6cqw; }、.gf2 .c { border: 0.1cqw solid var(--border); border-radius: 1cqw; }均以cqw表达。3.2 三道 eyeball test视觉检验在任何结构检查之前先过三关Squint眯眼—— 每个画面只有一个近黑标题或钴蓝数字以 3–6 倍于邻元素的体量主导。Silence安静—— 内容帧平衡而不拥挤dashboard 是唯一允许密集的例外。Restraint克制——单一钴蓝强调承担一切标题保持近黑绝不用钴蓝无阴影靠色调卡片提层正 / 负向仅以内联文字出现。Reference参照—— 目标是投资研究 / 麦肯锡季度简报翻车的样子是重描边、多色彩的 dashboard。四、设计令牌frontmatter 规范层色彩 / 圆角 / 间距4.1 Colors 色彩令牌与design.md源一致的令牌frontmatter 中为精确值引用时必须逐字照搬令牌值用途colors.bg#fdfae7奶油画布普适地面colors.primary#1e2bfa饱和钴蓝唯一强调色colors.text#111111近黑标题绝不用钴蓝colors.text-muted#6b6b6b正文colors.text-light#9a9a9a三级文字colors.accent-lightrgba(30,43,250,0.08)8% 钴蓝浅强调轨道、tag 底colors.accent-mediumrgba(30,43,250,0.15)15% 钴蓝中强调colors.borderrgba(30,43,250,0.2)20% 钴蓝边框colors.card-bgrgba(30,43,250,0.04)4% 钴蓝卡片填充colors.positive#059669正向仅内联出现于涨跌 chipcolors.negative#dc2626负向仅内联出现于涨跌 chip关键纪律positive/negative只能以内联文字形式出现在方向性变化 chip 上绝不作为填充色系统没有第二个强调色。在frame-showcase.html的:root中这些令牌被原样翻译为 CSS 变量--bg、--primary、--card-bg等并同样以One Accent, Three Grays为预览标语。4.2 Radii 圆角令牌pill:100px药丸形 chromecard-lg:14px/card-md:12px/card-sm:10px按卡片尺寸递减bar:6px条形轨道与填充circle:50%步骤圆、导航圆、点、闭合环4.3 Spacing 间距令牌pad-x:5cqwpad-y-top:5cqwgap-cards:1.4cqwaccent-line:60px × 4px封面标题上方 / eyebrow 分隔线五、Typography 排版系统双阶梯与 fit-to-measure5.1 两条排版阶梯阅读阶梯reading ramp—— 承载正文与 chromebody: Inter 4000.85cqw行高 1.6muted 灰h4-eyebrow: Space Grotesk 6000.8cqw字距0.08em大写钴蓝tag: Space Grotesk 50012px钴蓝counter: Space Grotesk 50013px字距0.05emmuted展示 / 数字阶梯display / numerical ramp—— 承载标题与数字令牌字号字重行高颜色h31.25cqw5001.3近黑−0.02emstat-num1.9cqw7001.0钴蓝blockquote2.4cqw5001.35近黑h22.6cqw6001.1近黑−0.02emmetric-value3.0cqw7001.0钴蓝h14.2cqw7001.08近黑−0.02emquote-mark8.0cqw7000.5钴蓝opacity 0.155.2 三条排版纪律可读底线Legibility floor任何承重行load-bearing line字号 ≥1.4cqwpx 级 chrometag / counter只是 colophon题跋性信息。Fit-to-measure按长度定级标题字号匹配其长度。行宽上限≤ 78cqw≤3 词用h14–6 词用h27 词以上用h3。钴蓝数字按卡片尺寸在metric-value与stat-num之间缩放。字面规范标题近黑、−0.02emeyebrow 钴蓝、大写、0.08em数字钴蓝 600–700正文 Inter 400 muted、行高 1.6。无斜体、无大写正文、无钴蓝标题。frame-showcase.html的预览中eyebrow 的具体实现是.eyebrow { font-family: var(--disp); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 14px; color: var(--primary); }而标题则用letter-spacing: -0.02em的近黑展示字 —— 与 frontmatter 完全一一对应。六、Depth Surface 与 Shapes软色调永不偏移阴影6.1 层次来源深度来自三个手段不是投影色调卡片—— 4% 钴蓝填充 20% 钴蓝 1.5px 边框 10–14px 圆角无偏移即显浮起。左缘强调线—— split-highlight 区块上的 4px 钴蓝竖线把 callout 拉向前景。圆角—— 10–14px 圆角本身就是柔和度的一部分直角会破坏它。天花板Ceiling内容上零 box-shadow全系统唯一的阴影是 CTAhover时极淡的钴蓝投影无实心钴蓝边框无生硬描边。6.2 形状阶梯100px—— tag 药丸、CTA、导航按钮pill chrome14 / 12 / 10px—— 按卡片尺寸大指标卡 / 标准统计卡 / 细节 迷你卡6px—— 条形轨道 填充50%—— 步骤圆、导航圆、点、闭合环0—— 只有进度条。没有直角内容。七、Components 组件库FRAME.md的 frontmatter 为每个组件定义了令牌化规格card-tinted / metric-card—— 普适软色调内容卡无阴影。card-tintedcard-bg填充、1.5pxborder边框、card-lg圆角、shadow: none从不实心色、从不实心边框、绝无阴影。metric-card在其上叠加metric-value钴蓝数字 标签 描述可选内联 ↑/↓ 涨跌 chippositive/negative 文字、无填充。tag-pill / cta-button / accent-line—— 钴蓝药丸 chrome 唯一的实心 CTA 60×4 规则线。cta-button是系统唯一的实心元素钴蓝底、奶油字、100px 药丸soft cobalt on hover only —— 全系统唯一的阴影。bar-track / step-circle / split-highlight—— 钴蓝数据 序列 callout 模式。bar-track高 28px 轨道8% 钴蓝填充display: block以便宽度解析step-circle56px 圆形序列步骤按 1.0→0.85→0.7→0.55 递减透明度split-highlight为 8% 钴蓝底 4px 钴蓝左缘的内联 pull-quote。slide-headereyebrow 居左 tag-pill 居右其下h2—— 每个内容帧的顶部带状节奏atmosphere斜切面板 / 点阵 / 闭合环只用于封面与收尾progress-bar3px 高、底部边缘、宽度随 index 增长出现在每一帧。frame-showcase.html对全部组件做了可运行实现.card .mv46px 钴蓝 700 数字、.step .circ56px 圆形opacity: 1 / 0.85 / 0.7 / 0.55、.bars .track28px 高、6px 圆角、8% 钴蓝底、.hilite8% 钴蓝底 4px 钴蓝左缘 12px 圆角可打开该文件直接对照查看。八、六种 Frame Treatments 版式配方每种版式遵循同一配方ground · container · composes · focal · chrome · accent · silence · Fixed/Free · density。Atmosphere 只用于封面 / 收尾内容帧保持 slide-header 节奏。1 · Cover身份 · 动势对角强调 · 左对齐Ground奶油 裁剪的对角钴蓝浅色面板右侧约 36% 3×3 钴蓝点阵。Composesaccent-line、meta、h1、正文副题。Focal一个两行 Space Groteskh1近黑、左对齐位于钴蓝 accent-line meta 之下。Chromecounter 进度条。Accent钴蓝线 对角面板。Silence对角面板占据右三分之一。Fixed近黑 h1、钴蓝强调、atmosphere 仅在此。Free标题、meta。Density低。实现上.gf1 .deco用clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%)裁剪出右侧 36% 面板.gf1 .dots是grid-template-columns: repeat(3, 1fr)的 3×3 点阵opacity: 0.25。2 · Dashboard数据 · 动势3 联指标网格 · 密集帧Ground奶油pad-x。Composesslide-headereyebrow tag-pill、h2、3× metric/tinted card。Focal一排色调卡 —— 钴蓝metric-value Inter 标签 muted 描述 可选绿/红涨跌 chip。Fixed4% 色调卡、20% 边框、无阴影、钴蓝数字。Density密集例外全系统唯一的密集帧。3 · Bar Ranking数据 · 动势钴蓝条 · 左对齐Composeseyebrow、h2、bar-track 行。Focal3–5 行带标签的钴蓝填充条置于 8% 钴蓝轨道上百分比钴蓝。Fixed6px 轨道、钴蓝填充。Free行、数值来自脚本。Density标准。4 · Pull Quote引言 · 动势同心环 · 居中Ground奶油、居中背后有淡同心闭合环。Composesquote-mark、blockquote、cite。FocalSpace Groteskblockquote近黑位于 15% 透明度钴蓝 quote-mark 之下其下为 uppercase 钴蓝 muted 的 cite。Silence约 55%。Density低。frame-showcase.html中.gf4 .rings用两个嵌套的border-radius: 50%圆实现opacity: 0.4quote-mark 为font-size: 9cqw; opacity: 0.15的钴蓝引号。5 · Split Highlight内容 · 动势不对称分栏 · 左对齐Ground奶油、双栏。Composeseyebrow、h2、正文、split-highlight 块。Focal一列 Inter 正文旁边是 8% 钴蓝高亮块4px 钴蓝左缘承载内联 pull quote。Silence宽大的 gutter。Fixed色调高亮、4px 钴蓝规则。Density标准。6 · Closing / CTA收尾 · 动势居中环 CTAGround奶油 同心闭合环。Composesaccent-line、h1、正文、cta-button。Focal居中的近黑 Space Groteskh1其下是唯一实心钴蓝cta-button药丸。Silence约 60%。Fixed一个 CTA、近黑 h1、软环。Density低。九、Composition Rules 构图规则Do / DontDo应做每帧始于暖奶油让钴蓝承担每个强调eyebrow、数字、CTA、条、进度条。标题近黑、−0.02emeyebrow钴蓝大写 0.08em数字钴蓝 600–700。使用色调卡片4% 填充、20% 边框、10–14px 圆角、无阴影正文 Inter 400 muted、行高 1.6。所有 chrome 保持药丸形100px每个收尾帧一个实心钴蓝 CTA。Atmosphere对角面板、点阵、环只留给封面 / 收尾内容帧保持 slide-header 节奏。封面 / dashboard / split 靠左quote / closer 居中。Dont禁忌无第二强调色无钴蓝标题。内容无投影只有那个软钴蓝 CTA hover无实心钴蓝边框。无直角进度条除外无字体替换无大写正文。绿/红涨跌 chip 不做通用强调 —— 只用于方向性对比。不要用更重的边框填充空间 —— 要增加内容实质不要把标题撑满整行edge-to-edge。十、Aspect-Ratio Behavior 多宽高比行为版式16:99:161:1Cover标题左对角右标题上对角带下方标题上部点阵角落Dashboard3 卡横排3 卡纵排2×2Bar Ranking3–5 条3–5 条更紧3 条Pull Quote居中环在后居中更高居中Split Highlight并排堆叠堆叠Closing / CTA居中 CTA居中 CTA居中 CTA规则pad-x在短边保持展示字号在 1.4cqw 底线之上重排封面对角面板在 9:16 下变为顶部 / 底部带状CJK 构建中数字保持拉丁阿拉伯数字。十一、硬性规则Numerals Claims 与 Approved Entities批准实体源中未定义任何真实客户、Logo 或厂商 —— 任何此类标记渲染为占位符。数字、指标、引言是内容系统只提供奶油 钴蓝 灰阶。数字与主张硬性规则在帧尺度绝不杜撰数字、财务数据、百分比或日期。渲染槽位为— figure —、{metric}、NN%、↑ —。指标卡、条形值、统计格在脚本提供前一律承载占位符方向性 chip 必须来自脚本中的真实对比。十二、Pre-Render Self-Audit 渲染前自检清单Squint—— 每帧只有一个近黑标题或钴蓝数字主导。Silence—— 内容帧平衡不拥挤只有 dashboard 可以密集。Single accent—— 仅钴蓝标题近黑正/负仅内联。Type—— Space Grotesk 标题近黑 −0.02em、钴蓝 eyebrow 0.08em 数字Inter 正文 muted 行高 1.6≥1.4cqw 底线。Depth—— 色调卡无阴影、软圆角、20% 钴蓝边框无直角内容。Anchor—— 封面 / dashboard / split 靠左quote / closer 居中atmosphere 仅封面 / 收尾。Fabrication—— 每个数字都追溯到脚本否则用占位符。十三、已知边界Known Gaps动效刻意超出范围FRAME.md只规定构图源中的 500ms translateX 过渡与条形填充动画属于deck mechanics应由 skills/hyperframes-animation 技能处理。字体来源Space Grotesk Inter 通过 Google Fonts 加载CJK 配对Noto Sans SC 700 展示 / Noto Serif SC 400 正文沿用CJK 下 eyebrow 的大写 字距信号会减弱 —— 需用 accent-line 补强。9:16 / 1:1 仅为指导需验证底线并确认对角面板能重排为带状。对角面板clip-path、点阵、同心环、条形均为纯 CSS无需任何外部图片素材。十四、落地指引把预设变成项目的 frame.md 与字幕皮肤14.1 采用流程按 skills/hyperframes-creative/SKILL.md 的工作流项目有设计规范则先读它并把 frontmatter 令牌视为品牌真相没有时可选现成预设 —— 将本预设的FRAME.md复制为项目frame.md并用品牌令牌覆盖 frontmatter 中的对应字段。注意design-spec.md的告诫frontmatter 是规范性层令牌值精确 hex、字体族、字重必须逐字引用不能四舍五入。14.2 字幕皮肤caption-skin.html 的令牌契约预设自带的 caption-skin.html 是 lower-third 卡拉 OK 字幕皮肤。其工作机制文件头注释中完整声明生产流程中如 product-launch-video 的 Step 2把它复制为项目caption-skin.html由captions.mjs填充三处预留孔位空GROUPS数组 ← 引擎的场景感知词分组0的 duration 宽高 ← 真实总时长与画布尺寸空data-brand-tokens样式 ← 由项目frame.md派生的:root令牌。令牌契约固定词表--cap-ink·--cap-canvas·--cap-accent·--cap-accent-2·--font-display·--font-body·--cap-band-top·--cap-band-height。每个变量都有 blue-professional 的字面量回退值如#111111、#fdfae7、#1e2bfa便于独立预览。钩子不可改名.caption-group/.caption-word及状态.is-active/.is-spoken根节点data-composition-idcaptions时间线挂在window.__timelines[captions]。状态切换用gsap.set({className})在引擎逐帧 seek 上应用绝不用tl.call()回调seek 不触发回调会导致渲染时状态错误。该皮肤在视觉上完整复刻了本预设的核心语义奶油上的软钴蓝色调卡color-mix4% 填充 20% 边框 14px 圆角、无阴影Space Grotesk 句首大写近黑字形未读词 muted 灰、当前词变为实心钴蓝 chip品牌标志性的单强调手势奶油文字压顶、已读词落回近黑、chip 清除。可选词级强调.cap-brand品牌词钴蓝、.cap-num数字钴蓝 700、.cap-cta方向性红#dc2626下划线仅内联。9:16 以下通过media (max-aspect-ratio: 9/16)收紧药丸宽度并重排字号。14.3 预览与验证打开frame-showcase.html可直接在浏览器中对照全部令牌、六种版式、组件与字幕的最终观感渲染后可用skills/hyperframes-creative/scripts/contrast-report.mjs检查对比度告警。所有实现均为纯 CSS HTML无外部图片依赖可直接作为项目帧的起点。结语FRAME.md不是一份可以随意发挥的风格指南而是一套令牌精确、纪律严明的帧级设计系统frontmatter 提供机器可读的确定性正文提供构图判断的语境。Blue Professional 的价值在于它的自我约束 —— 一个钴蓝、三条灰、无阴影、药丸形 chrome —— 正是这种少让它能在远距离被读懂、在数据密集时保持秩序并在 HyperFrames 的 HTML 渲染管线中稳定产出咨询级视频帧。掌握本文的令牌表、六种版式配方与自检清单即可在项目里复刻并扩展这套系统。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考