企业官网建设流程全解析

HyperFrames Capsule 帧设计系统实战：以药丸几何为核心的趣味编辑排版规范

【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes

Capsule 是 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.md）：

• frontmatter 是规范层：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×1080（16:9），同时文档化 9:16（1080×1920）与 1:1（1080×1080）两种派生比例。显示层字号一律使用cqw单位，换算公式为：

px ÷ 1920 × 100 = cqw

即 19.2px ≈ 1cqw，1.9cqw ≈ 36.5px，12cqw ≈ 230px。安全区为pad（5cqw），装饰性浮动药丸（floating pill）作为壁纸允许溢出边缘。

容器法则（load-bearing）

FRAME.md 明确规定了承载帧的容器必须同时满足两个条件：

1. 每个帧的 ground 容器设置container-type: size；
2. 容器内携带径向光晕 + 颗粒（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 变量：

用色硬规则：

• 九色无语义映射：九个糖果色可互换填充药丸，不承担任何语义含义；
• 搭配节奏：暖色（coral/yellow/peach）配冷色（sky/lavender/violet/mint）配中性亮色（lime），相邻位置禁止出现两个同族色；
• 颜色落点唯一：颜色只出现在**统计数字（stat numerals）与药丸填充（pill fills）**上，绝不出现在 Bodoni 标题上；
• 阴影永远是shadow（8% 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 Moda（didone 衬线，字重 700–800，恒为墨色、恒为句首大写）承载所有标题、统计数字与引言；Space Grotesk承载正文与大写、带字距的 pill/label 文本。

frontmattertypography定义了完整的两套字阶（ramp）：

阅读字阶（Space Grotesk）

显示字阶（Bodoni Moda，墨色，句首大写）

三条排版硬规则：

1. 可读性下限：任何承重（load-bearing）行 ≥1.4cqw；px 级标签只是 chrome（装饰性元信息）；
2. Fit-to-measure（量体裁衣）：按文案长度选字号。整块标题宽度上限≤ 78cqw；≤3 词用display/closing-display；4–6 词用headline；7+ 词用section-headline；
3. 书写姿态：Bodoni 700+ 恒为墨色、句首大写（斜体仅通过<em>，斜体关键词允许染糖果色）；Space Grotesk 药丸/标签一律大写且 tracking ≥ 0.08em；Bodoni 显示层允许负字距。

五、深度与表面：软硬偏移阴影与 2px 描边

Capsule 的深度语言只有一种：软硬偏移阴影（soft hard-offset shadow）——无模糊、右下偏移、颜色恒为 8% ink。分级如下（来自 FRAME.md）：

设计逻辑是：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% / 0

Capsule 的圆角词汇表极其精简，共四档：

• 9999px：所有小药丸——chips、按钮、条形、节点、浮动药丸、引文高亮、强调线；
• 2rem：较大卡片——pillar-card、stat-pill、图表容器、视觉画框；
• 50%：圆形药丸——card-icon（60px）、step-node（56px）、orbit-center（160px）、导航圆点；
• 0：仅允许出现在颗粒覆盖层与视觉画框内部的渐变区域。不存在任何直角文字容器。

这一"万物皆药丸、无直角容器"的法则同样延伸到字幕皮肤：见下文第八节中的 caption pill。

七、组件库：从 pill 到 atmosphere

frontmattercomponents定义了十个基础组件，全部继承"2px 描边 + 药丸几何"：

值得注意的实现细节：在 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（封面 · 身份 · 居中）

• Ground：cream + 氛围 + 浮动药丸壁纸；
• Composes：title-pill、display、accent-line、5–8 枚浮动药丸；
• Focal：1–2 行墨色 Bodonidisplay标题居中，位于黄色 title-pill 之下，斜体关键词染糖果色；下方一条 coral accent-line；
• Chrome：大写 Space Grotesk 副题；Accent：斜体词 + 糖果浮动药丸；
• Silence：内容居中，药丸填满边缘；Density：medium-atmospheric。

落地实现见 showcase 的.qf1：黄色 title-pill（background: 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（支柱卡片 · 目录 · 左对齐三列——稠密帧）

• Ground：cream + 氛围；Composes：lavender title-pill、section-headline、3× pill-card；
• Focal：三张白色 2rem pill-card（圆形糖果 card-icon + Bodoni card-headline + Space Grotesk 正文），0.4cqw 阴影，其下是 Bodoni section-headline；
• Chrome：lavender 头部标签药丸；Accent：三枚 icon 填充按 coral/sky/lime 序列；
• Silence：紧凑——稠密例外帧，此帧不放浮动药丸；Density：dense-exception。

3 · Stat Grid（统计网格 · 数据 · 居中头部）

• Composes：section-headline、3–4× stat-pill；
• Focal：一排白色 stat-pill，每个 = 彩色 Bodoni stat-number + 大写标签 + 强调条；
• Accent：彩色数字与强调条（颜色触碰字体的唯一位置）；Density：standard。

4 · Pull Quote（引文 · 高亮药丸 · 左对齐）

• Ground：cream + 氛围 + 少量浮动药丸；Composes：quote-display、quote-highlight、accent-line；
• Focal：墨色 Bodoni 引言，其中一句话被 lime/skyquote-highlight药丸包裹（强调机制，绝不用粗体）；
• Chrome：大写署名；Silence：约 50%；Density：sparse。

showcase 的.qf3中高亮药丸实现为display: inline-flex的 lime 底圆角胶囊，字号 3cqw 且text-transform: none（高亮内文字保留原始大小写）。

5 · Orbit（轨道 · 概念 · 居中）

• Composes：orbit-center（160px lime 圆形、Bodoni 序号）+ 4–6 枚轨道卫星药丸（糖果、倾斜、带软阴影）；
• Focal：lime 中心被环绕的糖果药丸锚定；Accent：卫星色相；Density：medium。

6 · Closing Plate（收尾 · 居中）

• Ground：cream + 氛围 + 浮动药丸壁纸；Composes：yellow title-pill、closing-display、accent-line、浮动药丸；
• Focal：墨色 Bodoniclosing-display签名居中（斜体词染 violet/糖果色）；Density：medium-atmospheric。

九、构图法则：Do 与 Don't

Do（必做）

• 让每个文字容器都是药丸（9999px / 2rem）且带2px 墨色描边；
• Bodoni 标题恒为墨色、句首大写；颜色只存在于统计数字 + 药丸填充；
• 内容容器使用软偏移阴影（4/6/8/12px，8% ink）；浮动药丸保持扁平；
• 宣言型帧漂浮5–8 枚糖果药丸+ 径向光晕 + 颗粒；裸露的角落读起来像"坏了"；
• 行内强调用糖果 quote-highlight 药丸包裹，绝不单独用粗体/斜体；
• 暖 + 冷 + 中性亮三色搭配；封面/收尾倾向居中，卡片/引文倾向左对齐。

Don't（禁止）

• 无直角文字容器；无未描边的药丸；
• 无彩色 Bodoni 标题；无大写 Bodoni；
• 无模糊或改色阴影；无第十个强调色；
• 装饰性浮动药丸不投影；
• 标题不得拉满到边缘——量体裁衣。

十、多宽高比行为

同一配方在不同比例下按如下规则重排（FRAME.md 官方表）：

适配原则：pad（5cqw）守住短边；显示字阶重排但不得跌破 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 或厂商——渲染任何此类标记都应使用占位符；浮动药丸上的词汇必须是中性氛围词（"VISION""FUTURE""NEXT"），绝不写与内容相关的具体词。

十二、渲染前自审清单（Pre-Render Self-Audit）

在输出帧之前，逐项核对（可直接作为检查表使用）：

1. Squint——单个 Bodoni 元素以 3–5× 体量主导画面；
2. Silence——宣言帧承载氛围而非杂物；仅 pillar/stat 网格允许稠密；
3. Pills——每个容器都是药丸且带 2px 描边；无直角文字容器；
4. Color——糖果色仅在填充 + 统计数字；标题恒墨色；无第十色相；
5. Depth——软偏移阴影仅限内容容器；浮动药丸扁平；无模糊；
6. Type——Bodoni 墨色句首大写、量体裁衣；药丸大写带字距；≥1.4cqw 下限；
7. Anchor——封面/收尾/轨道居中，卡片/引文居左；无连续三个相同锚点；
8. Fabrication——每个数字都能回溯到脚本，否则用占位符。

此外，design-adherence.md 提供了一套规范后的机械校验流程：逐一检查配色是否全部出现在规范色板、字体族与字重是否匹配、圆角是否符合声明的角风格、间距是否落在声明的密度区间、阴影是否匹配声明的深度层级、Don't 列表是否全部被遵守，任何违规以清单形式报告并修复后再提供预览。

十三、已知边界与延伸

动效不在本规范范围内。FRAME.md 明确声明：frame.md只规定构图；源码中出现的 0.6s 淡入属于 deck 机制而非本系统规范。动效相关规则请转向hyperframes-animation技能（SKILL.md 中的边界说明）。

字体加载。Bodoni Moda 与 Space Grotesk 通过 Google Fonts 引入（showcase 的<link>声明了Bodoni+Moda:ital,opsz,wght@0,6..96,400..900与Space+Grotesk:wght@400;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/Don't 法则、多比例适配表与自审清单，配合 FRAME.md 规范文件与 frame-showcase.html 参考实现，足以让任何创作者或 Agent 在 HyperFrames 中产出风格一致、可验证、可移植的 Capsule 风格视频帧——记住那句原则：原子神圣 · 构图自由 · 数字来自脚本。

【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes