HyperFrames Capsule 帧设计系统实战以药丸几何为核心的趣味编辑排版规范【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframesCapsule 是 HyperFrames 仓库skills/hyperframes-creative/frame-presets/中面向视频帧frame层的设计预设以万物皆药丸pill为核心几何语言配合奶油画布、九色糖果强调色、Bodoni Moda Space Grotesk 双字体体系与软硬偏移阴影构成一套可以直接落地的 1920×1080 视频排版规范。本文以 capsule/FRAME.md 为主体骨架结合同目录下的 frame-showcase.html 与 caption-skin.html 实现源码完整讲解色板、字阶、组件、六种帧版式、构图规则与多宽高比适配并给出可直接复用的 cqw 容器单位换算方式与渲染前自审清单。一、Capsule 是什么从设计规范到帧系统在 HyperFrames 的创意技能体系中每个视频项目都可能携带一份设计规范design spec其读取优先级为frame.md → design.md → DESIGN.md规则定义见 references/design-spec.md。其中frame.md是面向视频帧的规范以帧为单位重新组织品牌是design.md面向 Web/静态页面的视频优先配套文档。Capsule 预设中的FRAME.md正是这样一个规范模板——工作流在进入创作阶段时将其复制为项目内的frame.md并叠加品牌 token 使用frame.md恒为小写预设目录下的FRAME.md是供采用的模板。一份规范由两层构成二者地位并不相等见 design-spec.mdfrontmatter 是规范层colors、typography、spacing、components中的值是机器可读的真实取值精确 hex、字体族、字重必须原样引用不得发明或取整正文 prose 是上下文层##各节Overview、The Frame、Composition Rules……承载意图、适用场景与 token 无法表达的约束用于判断而非取值。Capsule 的定位见 design-spec.md 预设对照表是playful editorial趣味编辑风——friendly / soft / editorial产品想要温暖与亲和力。其核心原则浓缩为一句atoms are sacred · composition is free · numbers come from the script原子神圣 · 构图自由 · 数字来自脚本。二、帧的画布规格、安全区与容器法则画布规格与 cqw 换算Capsule 以**帧frame**为基本单位主画布为1920×108016:9同时文档化 9:161080×1920与 1:11080×1080两种派生比例。显示层字号一律使用cqw单位换算公式为px ÷ 1920 × 100 cqw即 19.2px ≈ 1cqw1.9cqw ≈ 36.5px12cqw ≈ 230px。安全区为pad5cqw装饰性浮动药丸floating pill作为壁纸允许溢出边缘。容器法则load-bearingFRAME.md 明确规定了承载帧的容器必须同时满足两个条件每个帧的 ground 容器设置container-type: size容器内携带径向光晕 颗粒radial-glow grain氛围层。所有帧内相对单位必须是cqw/cqh相对该容器绝不使用vw。在 frame-showcase.html 的实现中可以验证这一约定.frame类声明了aspect-ratio: 16/9; container-type: size;其内部的所有尺寸、字号、边框、阴影偏移均以cqw为单位书写例如封面标题font-size: 12cqw、标题药丸border: 0.25cqw solid var(--outline)、阴影box-shadow: 0.4cqw 0.4cqw 0 var(--shadow)。由于cqw相对容器宽度这套代码在 16:9 / 9:16 / 1:1 任意容器下都能等比例缩放——这是配方可移植的根本机制。药丸圆角保持9999px/2rem形状不随比例缩放而阴影偏移量用cqw随帧缩放。三道目测关卡Frame Craft Bar任何结构检查之前每个帧先过三道眯眼测试Squint眯眼单一 Bodoni 标题或统计数字要以其最近邻元素3–6×的体量占据主导Silence留白宣言型帧承载的是氛围而非杂乱药丸作为壁纸而非内容支柱卡片与统计网格是唯一的稠密例外Restraint克制每个药丸都带 2px 描边颜色只触及填充 统计数字绝不触及标题软阴影只用于承载内容的药丸浮动药丸保持扁平不存在第十个强调色Reference参照目标是 Memphis / 冰淇淋店风格的编辑排版失败形态是无贴纸感的扁平 SaaS 卡片网格。三、色彩系统九个糖果色与用色边界Capsule 的全部颜色 token 定义在 FRAME.md 的 frontmattercolors中且在 frame-showcase.html 的:root中落地为 CSS 变量Token色值角色cream#F5F5F0画布底色sun-bleached cream日晒漂白奶油ink#1A1A1A正文 / 标题墨色outline#1E1E1E通用 2px 描边white#FFFFFF内容药丸底coral#E85D4E糖果强调色lime#C4D94E糖果强调色lavender#C5B5E0糖果强调色sky#8BB4F7糖果强调色violet#A06CE8糖果强调色yellow#F2D160糖果强调色peach#F5B895糖果强调色mint#A8E6CF糖果强调色shadowrgba(26,26,26,0.08)唯一允许的阴影色8% ink用色硬规则九色无语义映射九个糖果色可互换填充药丸不承担任何语义含义搭配节奏暖色coral/yellow/peach配冷色sky/lavender/violet/mint配中性亮色lime相邻位置禁止出现两个同族色颜色落点唯一颜色只出现在**统计数字stat numerals与药丸填充pill fills**上绝不出现在 Bodoni 标题上阴影永远是shadow8% ink不存在第十个颜色。此外颜色在帧中的在场感还需要参考 video-composition.md 的指导视频帧中氛围光晕应达到 12–25% 不透明度而非 Web 的 3–8%强调元素可用全饱和。在 showcase 的 body 背景中可看到三团径向光晕的落地写法radial-gradient(ellipse at 12% 8%, rgba(229,93,78,0.1), transparent 45%)等三层叠加。四、字体系统Bodoni Moda × Space Grotesk 双声部Capsule 的字体是一组两面对话Bodoni Modadidone 衬线字重 700–800恒为墨色、恒为句首大写承载所有标题、统计数字与引言Space Grotesk承载正文与大写、带字距的 pill/label 文本。frontmattertypography定义了完整的两套字阶ramp阅读字阶Space GroteskToken规格用途body0.85cqw · weight 400 · line-height 1.6正文subtitle0.95cqw · weight 400 · tracking 0.18em · uppercase副题pill-text0.75cqw · weight 600 · tracking 0.12em · uppercase药丸文字label14px · weight 500 · tracking 0.1em · uppercase标签仅 chrome 用途显示字阶Bodoni Moda墨色句首大写Token规格用途card-headline1.9cqw · weight 700 · line-height 1.1卡片标题orbit-numeral2.6cqw · weight 700 · line-height 1.0轨道序号quote-display4.2cqw · weight 600 · line-height 1.3 · tracking −0.01em引言stat-number3.6cqw · weight 800 · line-height 1.0 · tracking −0.03em统计数字section-headline4.0cqw · weight 700 · line-height 1.05 · tracking −0.01em章节标题headline5.0cqw · weight 700 · line-height 1.05 · tracking −0.02em主标题closing-display8.5cqw · weight 800 · line-height 0.95 · tracking −0.03em收尾大标题display12.0cqw · weight 800 · line-height 0.88 · tracking −0.03em封面大标题三条排版硬规则可读性下限任何承重load-bearing行 ≥1.4cqwpx 级标签只是 chrome装饰性元信息Fit-to-measure量体裁衣按文案长度选字号。整块标题宽度上限≤ 78cqw≤3 词用display/closing-display4–6 词用headline7 词用section-headline书写姿态Bodoni 700 恒为墨色、句首大写斜体仅通过em斜体关键词允许染糖果色Space Grotesk 药丸/标签一律大写且 tracking ≥ 0.08emBodoni 显示层允许负字距。五、深度与表面软硬偏移阴影与 2px 描边Capsule 的深度语言只有一种软硬偏移阴影soft hard-offset shadow——无模糊、右下偏移、颜色恒为 8% ink。分级如下来自 FRAME.md阴影偏移对应元素0.2cqw4px小节点0.3cqw6pxstat-pill、orbit pill、图节点0.4cqw8px支柱卡片pillar-cards0.6cqw12px视觉画框visual frame设计逻辑是2px 描边承担主要浮起作用相对奶油画布阴影只补一层飘浮感。因此装饰性浮动药丸不投影——这让内容与氛围一眼可分天花板ceiling明确禁止模糊阴影、改色阴影、渐变深度。在 showcase 实现中可看到这套分级的落地封面标题药丸.tp用box-shadow: 0.4cqw 0.4cqw 0 var(--shadow)支柱卡片.c用box-shadow: 0.6cqw 0.6cqw 0 var(--shadow)而壁纸药丸.ffp无 shadow。六、形状语法9999px / 2rem / 50% / 0Capsule 的圆角词汇表极其精简共四档9999px所有小药丸——chips、按钮、条形、节点、浮动药丸、引文高亮、强调线2rem较大卡片——pillar-card、stat-pill、图表容器、视觉画框50%圆形药丸——card-icon60px、step-node56px、orbit-center160px、导航圆点0仅允许出现在颗粒覆盖层与视觉画框内部的渐变区域。不存在任何直角文字容器。这一万物皆药丸、无直角容器的法则同样延伸到字幕皮肤见下文第八节中的 caption pill。七、组件库从 pill 到 atmospherefrontmattercomponents定义了十个基础组件全部继承2px 描边 药丸几何组件关键属性用途pill圆角 9999px小/ 2rem卡片0.2cqw solid outline描边背景任意糖果色或 white万能容器——每个 chip/按钮/标签/统计块/节点/条形。不存在无描边的药丸pill-card白底、2rem 圆角、0.4cqw 0.4cqw 0阴影承载圆形 card-icon Bodoni 标题 Space Grotesk 正文stat-pill白底、2rem、0.3cqw阴影唯一让颜色触碰数字的地方附 40px 强调条title-pill黄色底、9999px、0.3cqw阴影封面/收尾大标题上方的徽章card-icon糖果底、50% 圆、60px、Bodoni 数字/字母卡片标记floating-pill糖果底、圆角 9999px/50%、旋转 −20°..25°、无阴影装饰性壁纸彩纸宣言帧每帧 5–8 枚扁平quote-highlightlime/sky 底、9999px引文内包裹短语的内联糖果药丸——替代粗体/斜体的强调机制bar-trackcream 底、9999px填充为子糖果药丸数值靠右边缘36px 高药丸图表轨道accent-linecoral 底、9999px60×4收尾 80×4珊瑚药丸分隔线atmospherecream 上叠加 1–3 团径向糖果光晕6–15% 不透明度 4% 颗粒层每个帧的基线画布层从不缺席值得注意的实现细节在 showcase 中bar-track 的填充.barfill本身也是药丸border-radius: 9999px右缘border-right: 2px solid var(--outline)收边数值标签内嵌在填充末端orbit 的卫星药丸带 0.3cqw 软阴影而中心orbit-center为 160px lime 圆形diagram 节点之间的连接线用 4px 高墨色条实现。八、六种帧版式Frame Treatments每种版式遵循统一配方ground · container · composes · focal · chrome · accent · silence · Fixed/Free · density地面 · 容器 · 构成 · 焦点 · 修饰 · 强调 · 留白 · 固定/自由 · 密度。氛围光晕 颗粒在每个帧上宣言型帧额外携带浮动药丸壁纸。1 · Cover封面 · 身份 · 居中Groundcream 氛围 浮动药丸壁纸Composestitle-pill、display、accent-line、5–8 枚浮动药丸Focal1–2 行墨色 Bodonidisplay标题居中位于黄色 title-pill 之下斜体关键词染糖果色下方一条 coral accent-lineChrome大写 Space Grotesk 副题Accent斜体词 糖果浮动药丸Silence内容居中药丸填满边缘Densitymedium-atmospheric。落地实现见 showcase 的.qf1黄色 title-pillbackground: var(--yellow)box-shadow: 0.4cqw 0.4cqw 0、h3标题font-size: 12cqw; line-height: 0.88; letter-spacing: -0.3cqw其中em斜体词染 coral。2 · Pillar Cards支柱卡片 · 目录 · 左对齐三列——稠密帧Groundcream 氛围Composeslavender title-pill、section-headline、3× pill-cardFocal三张白色 2rem pill-card圆形糖果 card-icon Bodoni card-headline Space Grotesk 正文0.4cqw 阴影其下是 Bodoni section-headlineChromelavender 头部标签药丸Accent三枚 icon 填充按 coral/sky/lime 序列Silence紧凑——稠密例外帧此帧不放浮动药丸Densitydense-exception。3 · Stat Grid统计网格 · 数据 · 居中头部Composessection-headline、3–4× stat-pillFocal一排白色 stat-pill每个 彩色 Bodoni stat-number 大写标签 强调条Accent彩色数字与强调条颜色触碰字体的唯一位置Densitystandard。4 · Pull Quote引文 · 高亮药丸 · 左对齐Groundcream 氛围 少量浮动药丸Composesquote-display、quote-highlight、accent-lineFocal墨色 Bodoni 引言其中一句话被 lime/skyquote-highlight药丸包裹强调机制绝不用粗体Chrome大写署名Silence约 50%Densitysparse。showcase 的.qf3中高亮药丸实现为display: inline-flex的 lime 底圆角胶囊字号 3cqw 且text-transform: none高亮内文字保留原始大小写。5 · Orbit轨道 · 概念 · 居中Composesorbit-center160px lime 圆形、Bodoni 序号 4–6 枚轨道卫星药丸糖果、倾斜、带软阴影Focallime 中心被环绕的糖果药丸锚定Accent卫星色相Densitymedium。6 · Closing Plate收尾 · 居中Groundcream 氛围 浮动药丸壁纸Composesyellow title-pill、closing-display、accent-line、浮动药丸Focal墨色 Bodoniclosing-display签名居中斜体词染 violet/糖果色Densitymedium-atmospheric。九、构图法则Do 与 DontDo必做让每个文字容器都是药丸9999px / 2rem且带2px 墨色描边Bodoni 标题恒为墨色、句首大写颜色只存在于统计数字 药丸填充内容容器使用软偏移阴影4/6/8/12px8% ink浮动药丸保持扁平宣言型帧漂浮5–8 枚糖果药丸 径向光晕 颗粒裸露的角落读起来像坏了行内强调用糖果 quote-highlight 药丸包裹绝不单独用粗体/斜体暖 冷 中性亮三色搭配封面/收尾倾向居中卡片/引文倾向左对齐。Dont禁止无直角文字容器无未描边的药丸无彩色 Bodoni 标题无大写 Bodoni无模糊或改色阴影无第十个强调色装饰性浮动药丸不投影标题不得拉满到边缘——量体裁衣。十、多宽高比行为同一配方在不同比例下按如下规则重排FRAME.md 官方表版式16:99:161:1Coverdisplay 居中药丸环绕display 置顶药丸成带居中药丸减少Pillar Cards头部 三列头部 三行堆叠头部 21Stat Grid3–4 列2×22×2Pull Quote引文居左引文置顶高亮内联居中Orbit中心 4–6 卫星中心 3 卫星中心 4Closing居中 药丸居中药丸成带居中适配原则pad5cqw守住短边显示字阶重排但不得跌破 1.4cqw 下限越窄的比例浮动药丸数量越少保持壁纸而非杂物的身份。9:16 下字幕胶囊的最大宽度同步收窄至 92%见 caption-skin 的media (max-aspect-ratio: 9/16)分支。十一、数字与声明硬规则占位符纪律Capsule 有一条不可妥协的规则禁止在帧尺度上发明数字、统计或计数。所有数字槽位渲染为— figure —、{metric}、N%这类占位符stat-pill 的数字与 bar-track 的宽度保持占位直到脚本提供真实数值。这一点与principle: numbers come from the script数字来自脚本遥相呼应也与技能体系中的source-traceable visuals可溯源视觉一致。与此同时**Approved Entities许可实体**规定源码中没有定义任何真实客户、Logo 或厂商——渲染任何此类标记都应使用占位符浮动药丸上的词汇必须是中性氛围词VISIONFUTURENEXT绝不写与内容相关的具体词。十二、渲染前自审清单Pre-Render Self-Audit在输出帧之前逐项核对可直接作为检查表使用Squint——单个 Bodoni 元素以 3–5× 体量主导画面Silence——宣言帧承载氛围而非杂物仅 pillar/stat 网格允许稠密Pills——每个容器都是药丸且带 2px 描边无直角文字容器Color——糖果色仅在填充 统计数字标题恒墨色无第十色相Depth——软偏移阴影仅限内容容器浮动药丸扁平无模糊Type——Bodoni 墨色句首大写、量体裁衣药丸大写带字距≥1.4cqw 下限Anchor——封面/收尾/轨道居中卡片/引文居左无连续三个相同锚点Fabrication——每个数字都能回溯到脚本否则用占位符。此外design-adherence.md 提供了一套规范后的机械校验流程逐一检查配色是否全部出现在规范色板、字体族与字重是否匹配、圆角是否符合声明的角风格、间距是否落在声明的密度区间、阴影是否匹配声明的深度层级、Dont 列表是否全部被遵守任何违规以清单形式报告并修复后再提供预览。十三、已知边界与延伸动效不在本规范范围内。FRAME.md 明确声明frame.md只规定构图源码中出现的 0.6s 淡入属于 deck 机制而非本系统规范。动效相关规则请转向hyperframes-animation技能SKILL.md 中的边界说明。字体加载。Bodoni Moda 与 Space Grotesk 通过 Google Fonts 引入showcase 的link声明了BodoniModa:ital,opsz,wght0,6..96,400..900与SpaceGrotesk:wght400;500;600;700中文字体配对ZCOOL XiaoWei / Yozai从源设计中继承。需要注意 typography.md 的警告Bodoni Moda 在预打包字体清单中属于可渲染但被标记为通用/被禁单色文化的族若追求可预测的离线渲染需自行font-face嵌入或接受编译期的字体抓取路径。纯 CSS 实现。颗粒覆盖层、径向光晕、浮动药丸与条形填充全部由 CSS 完成不需要任何外部图片素材——这是本系统可复制性的关键保障。字幕皮肤延伸。同目录的 caption-skin.html 把 Capsule 的视觉语言延伸到卡拉 OK 式字幕一个 9999px 圆角的 cream 字幕胶囊caption-pill带通用 2px 墨色描边与 8px 硬偏移阴影Bodoni 墨色字形未读词为淡墨色当前词点亮为糖果高亮糖果填充 随圆角的 spread 光晕无模糊、无布局偏移已读词沉淀为实墨色。其 token 契约--cap-ink、--cap-canvas、--cap-accent、--cap-accent-2、--font-display、--font-body等由工作流从项目frame.md注入实现品牌 token 直通字幕层。结语Capsule 的价值在于把趣味编辑风压缩成一组可执行的原子规则药丸几何 2px 描边 奶油画布 九色糖果 双字体 软硬偏移阴影。本文覆盖的六种帧版式、Do/Dont 法则、多比例适配表与自审清单配合 FRAME.md 规范文件与 frame-showcase.html 参考实现足以让任何创作者或 Agent 在 HyperFrames 中产出风格一致、可验证、可移植的 Capsule 风格视频帧——记住那句原则原子神圣 · 构图自由 · 数字来自脚本。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考