OpenMontage HyperFrames Creative Mode 帧级设计规范实战：FRAME 令牌体系与 1920×1080 视频排版系统

本篇技术指南围绕 OpenMontage 仓库中 hyperframes-creative 技能体系下的 creative-mode 帧预设（frame preset）展开，完整解析其设计规范文档 FRAME.md 中定义的 YAML 设计令牌、六种帧版式配方、构图自检清单与宽高比行为，并结合仓库内的 frame-showcase.html 参考实现与 caption-skin.html 字幕皮肤，还原每一组令牌在实际 CSS 中的落法。读完本文，你将能够：以"帧"而非"网页幻灯片"为单元落地一套 neo-brutalist 风格视频排版系统，理解 cqw 容器单位、硬偏移阴影、双字号阶梯等核心机制，并掌握设计规范的消费顺序与渲染前自检流程。

一、FRAME.md 的定位：视频优先的帧级设计规范

1.1 帧（frame）才是单位，不是幻灯片

creative-mode/FRAME.md 的 frontmatter 开篇即声明了它的身份：

name: Creative Mode — Frame (video / frame layer)
description: >
  Video-first companion to Creative Mode's design.md. The unit is the frame (1920×1080),
  not the slide-in-a-deck. Atoms are identical and sacred — warm cream canvas, 4px ink
  borders, hard offset shadows (no blur), Archivo Black uppercase at 0.92 line-height,
  JetBrains Mono taxonomy, Space Grotesk body, the four-accent palette. Composition,
  frame scale, and aspect-ratio behavior are rewritten for the frame. Motion is out of scope.
unit: the frame — 1920×1080 primary; 9:16 and 1:1 documented
principle: atoms are sacred · composition is free · numbers come from the script

这套规范是 Creative Mode 的帧层（video / frame layer）——它是为视频 / HyperFrames 项目服务的"帧级设计系统"，是 design.md（面向网页 / 静态页面）的视频优先姊妹文档。两者使用完全相同的文件格式（YAML frontmatter + Markdown 正文），区别只在于：帧层把"单元"从一页 slide 改写为一帧 1920×1080 的画面，并把构图、帧缩放、宽高比行为整体重写。

规范的三条总纲非常凝练：

• Atoms are sacred（原子不可侵犯）：颜色、字体、边框、阴影等基础令牌是品牌事实，逐字引用，绝不临场发挥；
• Composition is free（构图自由）：版式、锚点、留白在规则内自由发挥；
• Numbers come from the script（数字来自脚本）：任何数字、百分比、日期都必须来自脚本内容，否则一律用占位符。

1.2 规范如何被消费：SKILL.md 工作流与解析优先级

在 SKILL.md 定义的工作流中，如果项目带有设计规范，第一步就是读取它并把 frontmatter 令牌当作品牌真相（colors、fonts、spacing、tone、constraints）。文件解析优先级与规范格式统一由 design-spec.md 定义：

frame.md  →  design.md  →  DESIGN.md

读取第一个存在的文件，忽略其余：

SPEC=$(ls frame.md design.md DESIGN.md 2>/dev/null | head -1)

关键细节：

• frame.md 是视频 / HyperFrames 项目的首选规范，多个并存时它胜出；
• frame.md 永远是小写，不存在 FRAME.md 变体——帧预设（frame-preset）以大写 FRAME.md 模板的形式发布，工作流设计步骤把它复制为小写 frame.md 后再叠加品牌令牌；
• 规范只需在 Step 1 加载一次，后续的扩张、编写、合规检查都复用已加载的规范。

1.3 规范的二层结构：frontmatter 是规范层，prose 是语境层

按照 design-spec.md 的约定，一个规范由两层构成且权重不等：

层级	内容	消费方式
Frontmatter（规范层）	colors、typography、spacing、components 等机器可读值	逐字引用（精确 hex、字体族、字重），不得发明或取整
Prose（语境层）	Overview、The Frame、Composition Rules 等 ## 章节	用于判断"何时用、约束是什么"，提供令牌承载不了的意图

creative-mode/FRAME.md 完整遵循这一结构：frontmatter 承载全部设计令牌，正文承载六种帧版式配方与构图规则。

1.4 预设目录生态：creative-mode 只是十三分之一

frame-presets/ 目录下共 13 个现成帧预设（biennale-yellow、blockframe、blue-professional、bold-poster、broadside、capsule、cartesian、claude、cobalt-grid、coral、creative-mode、daisy-days、editorial-forest），每个预设文件夹都同时交付 FRAME.md 模板和 frame-showcase.html 预览联系表。creative-mode 在 design-spec.md 中的画像描述是：

Neo-brutalist editorial — cream canvas, 4px ink borders, hard offset shadows (no blur), four accents rationed two-to-three, Archivo Black uppercase at 0.92 line-height, JetBrains Mono taxonomy, Space Grotesk body, square corners save one pill chip. Pick when: sparse / graphic / punchy-restrained; a product that wants editorial presence and geometric confidence.

这套画像是"Risograph 编辑海报 × 朋克小报（punk-zine）"的混合体：奶油纸面、近黑墨水、四个满饱和强调色在画面上相撞，每一帧都是一块扁平色块构图——没有渐变、没有模糊阴影、没有圆角卡片（唯一的圆角是一个药丸胶囊 chip）。

二、帧的度量：尺寸、安全区与容器法则

2.1 三种画幅

画幅	尺寸	用途
Primary（主）	1920×1080（16:9）	所有显示字号以 cqw 编排（px ÷ 1920 × 100 = cqw）
Vertical（竖）	1080×1920（9:16）	文档化指导
Square（方）	1080×1080（1:1）	文档化指导

2.2 安全区

• chrome 内缩：3.3cqw（约 64px @1920）——顶栏、页脚等 chrome 元素的内缩线；
• 内容槽（content gutter）：5cqw（约 96px @1920）——正文内容的排布边界；
• 没有任何承重元素越过 3.3cqw 线。

2.3 容器法则（load-bearing，承重规则）

这是整份规范中最关键的一条工程约定：

Every frame ground sets container-type: size. ALL frame-relative units are cqw/cqh (1cqw = 1% of the frame's width), resolved against that ground — never vw. vw measures the page viewport, so a frame inflates whenever it isn't rendered full-screen; cqw resolves against the frame at any render size. This is why every size in the display ramp is cqw.

vw 度量的是页面视口——一旦帧不是全屏渲染，vw 会让帧内容随页面膨胀变形；而 cqw 只相对"帧地面"本身解析（1cqw = 帧宽度的 1%），无论帧以什么尺寸渲染都保持等比。这正是显示字号阶梯全部使用 cqw 的原因。

在 frame-showcase.html 的参考实现中，这一法则被原样落地：

.frame {
  aspect-ratio: 16/9;
  container-type: size;
  position: relative;
  overflow: hidden;
  border: 4px solid var(--ink);
  background: var(--cream);
}

随后所有帧内尺寸都基于这个容器解析：chrome 顶/底栏 left/right: 3.3cqw、top/bottom: 2.5cqw、字号 1.15cqw；封面的 display 字号直接用 15.5cqw。

2.4 令牌换算速查表

换算公式：px = cqw × 1920 ÷ 100。以下换算以 1920 基准为例（文档正文习惯将若干 cqw 值标注为"@1920"的近似 px，如 0.4cqw 标注为 4px、1.25cqw 对应硬阴影约 24px，showcase 实现中也确实使用固定的 4px 边框与 24px 阴影）：

令牌	cqw 值	1920 基准近似 px	用途
frame-pad	3.3cqw	~64px	chrome 内缩
content-gutter	5cqw	~96px	内容槽
grid-gap	1.5cqw	~28px	栅格间距
cell-pad	1.7cqw	~32px	卡片内边距
0.4cqw 边框	0.4cqw	4px（文档标注）	结构元素描边
硬偏移阴影	1.25cqw	~24px	唯一允许的阴影
display-hero	15.5cqw	~298px	封面大字
display-xl	11.0cqw	~211px	大标题
display-lg	8.0cqw	~154px	中等标题
display-head	4.2cqw	~81px	小标题 / 头部
stat-num	6.4cqw	~123px	统计数字
step-num	7.0cqw	~134px	步骤数字

三、颜色令牌：奶油地面 + 墨水边框 + 四强调色

3.1 完整色板

frontmatter 中的 colors 块（与 showcase 的 :root CSS 变量一一对应）：

令牌	Hex	角色
cream	#EFE9D9	通用画布，温暖，永远不是纯白
cream-2	#E4DCC4	凹陷表体填充（ledger）
ink	#0F0F0F	边框、文字、标尺、chrome
ink-2	#2A2A2A	次级正文文字
green	#1F8A4C	主导强调色 + 结尾板（closing plate）地面
green-dark	#136636	装饰杠杆上的深度
pink	#F06CA8	高能填充、marker、stamp
pink-dark	#D14E8B	阴影侧强调色
orange	#E85A1F	硬阴影颜色 + 统计填充
yellow	#F5C518	温暖标点、badge、圆

3.2 帧尺度的配给规则

令牌与来源一致，但帧尺度上有一套严格的配给纪律：

• cream 是地面（ground），几乎每帧都是它；
• ink 是边框 + 文字；
• 四个强调色（green / pink / orange / yellow）作为扁平填充，每帧只配给 2～3 个，永不四个齐出——"碰撞本身就是设计"；
• orange 同时是硬阴影色；
• green 兼任唯一的结尾板地面——它的稀缺就是冲击力；
• 禁止：引入第五种强调色、使用纯白、使用渐变。

四、字体阶梯：阅读阶梯与显示阶梯

4.1 两个字号阶梯

frontmatter 的 typography 块定义了两套阶梯：

阅读阶梯（reading ramp）——chrome 与正文使用，同时携带 px + cqw：

令牌	字体	px	cqw	weight	lineHeight	备注
body-lg	Space Grotesk	28	1.46	400	1.4	正文大号
body-md	Space Grotesk	24	1.25	400	1.3	正文中号
mono-label	JetBrains Mono	24	1.25	400	—	tracking 0.06em，大写
mono-kicker	JetBrains Mono	24	1.25	400	—	tracking 0.14em，大写
table-head	Archivo Black	28	1.46	400	—	表头，大写

显示/英雄阶梯（display / hero ramp）——帧原生，纯 cqw 编排：

令牌	字体	cqw	lineHeight	备注
step-title	Archivo Black	1.77	1.0	步骤标题，大写
badge-label	Archivo Black	1.46	—	徽章标签，大写
marker	Archivo Black	2.4	1.0	重点标注块
stamp-num	Archivo Black	2.2	0.9	印章数字
stat-num	Archivo Black	6.4	0.88	统计数字
step-num	Archivo Black	7.0	0.85	步骤数字
display-head	Archivo Black	4.2	0.92	tracking −0.01em，大写
display-lg	Archivo Black	8.0	0.9	tracking −0.01em，大写
display-xl	Archivo Black	11.0	0.9	tracking −0.01em，大写
display-hero	Archivo Black	15.5	0.84	tracking −0.02em，大写，字标封面专用

4.2 三个字体角色

• Archivo Black：显示声音。严格全大写 + 0.92 行高——字母重叠自身的字身高度，这种紧凑感就是品牌本身。"句首大写（sentence-case）的 Archivo Black 不存在"。
• JetBrains Mono：承载所有标签、kicker、计数器、坐标轴，作为"技术制品"寄存器（technical artifact register）。
• Space Grotesk：承载为数不多的正文行。

4.3 字号编排三规则

1. 可读性下限（legibility floor）：任何承重文字行 ≥ 1.4cqw（约 27px @1920）；mono chrome 的 1.15cqw 只用于 colophon（版权脚注）级内容。
2. fit-to-measure（随行长缩放）：标题字号跟随行长。标题块上限 ≤78cqw，绝不触碰安全边距。≤3 词 → display-hero/display-xl；4–6 词 → display-lg；7+ 词 → display-head。短行用大字，长行逐级降档。
3. 大写 + 0.92 行高：所有 Archivo Black 一律如此；mono 使用 0.06–0.14em tracking。绝不把 Archivo Black 的 letter-spacing 加到超过编码好的 −0.01em；绝不居中正文。

五、深度、表面与形状

5.1 两种深度装置（零模糊）

帧尺度只有两种制造深度的手段：

硬偏移阴影（hard offset shadow）——一个同方向的实心副本偏移约 1.25cqw：

box-shadow: 1.25cqw 1.25cqw 0 {colors.orange}, 1.25cqw 1.25cqw 0 0.2cqw {colors.ink};

在 showcase 的 marker 实现中（对应约 24px）：

.marker {
  background: var(--pink);
  border: 4px solid var(--ink);
  font-size: 46px;
  box-shadow:
    24px 24px 0 var(--orange),
    24px 24px 0 4px var(--ink);
}

色块对比（color-block contrast）——cream 上放 cream-2、ink 上放 cream、accent 上放 cream。对比足够时不需要阴影。

规则：每帧最多一个带硬阴影的重点块（marker、stamp）；图表堆叠可以用 0.95cqw 的纯 ink 偏移。天花板（ceiling）：任何地方都不允许模糊阴影、渐变、发光。

5.2 形状语言

半径	用途
0	所有结构元素——stat cell、step card、表格单元格、marker、面板
50%	装饰圆、stamp 内环、meta 圆点
999px	仅限顶栏 pill chip——唯一的圆角例外
旋转	只允许固定品牌角度：badge −4deg，stamp −6deg

六、组件库：十个可复用原子

frontmatter 的 components 块定义了十个组件，全部可以在 showcase 中找到一一对应的 CSS 实现：

组件	关键视觉	说明
frame-chrome	mono 顶栏 + meta 页脚	顶栏（左侧 section 标签 + 右侧 999px ink 描边 pill）+ 页脚（左侧描述 + 右侧 NN • NN 计数器，0.5cqw ink 圆点分隔）。大多数帧都有，纯满幅字标节奏若与之冲突可去掉
stat-cell	扁平强调色/cream 平铺	方角、无阴影；stat-num + mono 标签；0.4cqw ink 边框
step-card	ink 描边卡片	顶部巨型 step-num；序列在 cream 与强调色间交替，以 green 收尾
marker-block	每帧唯一硬阴影重点块	pink 底、ink 文字、签名式 orange+ink 硬偏移阴影
kicker-block	反色眉题 chip	ink 底 cream 字，mono-kicker 字体
badge-rotated	−4deg 黄色注释	"刻意不完美"的批注感
pill-badge	唯一圆角元素	cream 底、0.2cqw ink 描边、999px 圆角；读起来是 chip 而不是卡片
stamp	−6deg 收尾印章	pink 底、cream 描边、约 18cqw 见方、cream 圆形内环
comparison-table	cream-2 账本	ink 表头行 + cream Archivo 标签；pink/green 列填充变体；0.3cqw 内部标尺
decorative-circle	黄色装饰圆	与 green 面板配对制造形状对比

showcase 中 step-card 的序列示范了"交替 + green 收尾"：

.step-card.cream { background: var(--cream); }
.step-card.yellow { background: var(--yellow); }
.step-card.pink { background: var(--pink); }
.step-card.green { background: var(--green); color: var(--cream); }

七、六种帧版式配方（Frame Treatments）

每块版式是一份"配方"，字段约定为：ground（地面）· container（容器）· composes（组成）· focal（焦点）· chrome · accent（强调）· silence（留白）· Fixed（固定项）/ Free（自由项）· density（密度）。全部以 1920×1080 编排，默认居中，可变化锚点，每帧只有一个想法。

7.1 Wordmark Cover（字标封面 · 身份 · 居中）

• Ground cream，frame-pad；Container 栅格，chrome 上下，焦点居中
• Focal 两行字标，display-hero（15.5cqw）居中，第二行用强调色（pink/orange）
• Chrome mono 顶栏（section 标签 + pill）+ meta 页脚（描述 + 01•NN）
• Accent 仅第二行颜色；可选一个装饰圆从边缘出血
• Silence 约 55% 空 cream；Fixed Archivo Black 全大写 0.84 lh、字标上一处强调、方角；Free 用哪个强调色、换行位置、圆是否出血；Density 稀疏

showcase 实现（display-hero 的 15.5cqw 落点）：

.f-cover h3 {
  font-family: var(--display);
  text-transform: uppercase;
  line-height: 0.84;
  letter-spacing: -0.02em;
  font-size: 15.5cqw;
  text-align: center;
}

7.2 Big Claim（超大宣言 · 尺度 · 左锚）

• Ground 一个满幅强调色（pink/green/orange），content-gutter；Container flex，声明左锚垂直居中
• Focal 2–3 行宣言，display-xl/display-lg，ink 落在强调色上（ink-on-fire，绝不用白色）
• Chrome 声明上方小号 ink kicker-block + mono meta 页脚
• Accent 地面本身就是强调色，无第二强调色竞争；Silence 彩色场约 45% 空
• Fixed 强调色上 ink 文字、fit-to-measure 缩放、文字无阴影；Free 宣言内容、哪个强调色地面、断词位置；Density 稀疏——一个想法

7.3 Stat Grid（统计栅格 · 目录 · 唯一的高密度帧 · 居中）

• Ground cream，content-gutter；Container 栅格：居中 display-head 下挂一行 3 个 stat-cell
• Focal 一行三个 ink 描边单元格（green / pink / orange），每个含 stat-num + mono 标签
• Accent 三个单元格填充——这是命名的密度例外，允许一帧三个强调色
• Silence 约 25%，刻意紧凑；Fixed 0.4cqw 边框、方角、单元格无阴影、mono 标签
• Free 三个数字+标签、头部文案、选哪三个强调色；Density 密度例外

7.4 Closing Plate（结尾板 · 收尾 · 地面切换 · 居中）

• Ground green——整段视频唯一的 green 帧，frame-pad
• Focal 两行 display-lg 签售语，cream 色居中
• Composes frame-chrome（cream 变体）+ stamp
• Accent 角落一个 pink stamp，旋转 −6deg，cream 内环 + stamp-num
• Silence 约 55% 空 green；Fixed green 地面只留给这一拍、cream-on-green 文字、一个 stamp
• Free 签售文案、stamp 文字、stamp 角落位置；Density 稀疏

7.5 Featured Marker（重点标注 · 硬阴影焦点 · 左/非对称）

• Ground cream；Composes frame-chrome + marker-block + 可选 body-md 支撑行
• Focal pink marker-block，携带签名式 orange+ink 硬偏移阴影，非对称放置
• Accent pink 块 + orange 阴影（两个强调色）；Silence 约 50%
• Fixed 每帧恰好一个硬阴影、0.4cqw 边框；Free marker 文案、块位置、可选支撑行；Density 稀疏

7.6 Comparison Ledger（对比账本 · 数据 · 矩阵 · 左）

• Ground cream，content-gutter；Composes frame-chrome + comparison-table
• Focal cream-2 表格 + ink 表头行；一个列填充（pink 或 green）标记胜者
• Accent 唯一的列填充；Silence 紧凑——第二个密度例外
• Fixed cream-2 填充、0.3cqw 内部标尺、ink 表头行 + cream Archivo 标签
• Free 行内容、哪列填充、文案；Density 密度例外

八、构图规则：Do 与 Don't

应当（Do）

• 围绕每帧一个想法构图，焦点元素是邻居的 3–5 倍（眯眼测试）
• 默认居中——封面、宣言、统计栅格、结尾板都居中焦点；左侧/非对称留给 marker 和 ledger
• 稀疏帧保持 45–60% 空；只有统计栅格与账本允许高密度
• 每帧使用 2～3 个强调色；green 地面只留给结尾板
• 硬偏移阴影只花在每帧一个重点块上
• 标题 fit-to-measure 缩放；Archivo Black 全大写 0.92 lh

禁止（Don't）

• 不得圆角（pill chip 除外）；不得渐变、模糊、发光
• 不得把 Archivo Black 设为句首大写，或把 letter-spacing 加到超过 −0.01em
• 不得在一帧使用全部四个强调色、第五种强调色或纯白
• 不得居中正文；标签只能用 JetBrains Mono
• 不得把标题撑到边缘到边缘——长行要降档
• 不得在一帧放两个硬阴影

九、宽高比行为

版式	16:9	9:16	1:1
Wordmark Cover	两行居中	更高地堆叠，圆置顶	居中，更紧凑
Big Claim	声明居左，满幅强调色	声明置顶，强调色满幅	声明居中
Stat Grid	头部在 3 连排之上	头部置顶，3 个堆叠	头部置顶，2×2（第 4 格）
Closing Plate	签售居中，stamp 在角落	堆叠，stamp 在下	居中，stamp 在角落
Featured Marker	marker 非对称	marker 居中，阴影向下	marker 居中
Comparison Ledger	通栏表格	表格滚动到更少列	2 列表格

每种比例下，短边安全区都要守住 3.3cqw 的 chrome 内缩；显示字号按比例重新降档，确保任何承重行不低于 1.4cqw 的可读性下限。

十、品牌实体、数字与声明：两条硬规则

• Approved Entities（授权实体）：规范源码中没有定义任何真实客户、Logo 或厂商——渲染任何此类标记都用占位符。产品/栏目是内容无关的，系统提供的是几何，不是品牌。
• Numerals & Claims（数字与声明，硬规则）：帧尺度上绝不发明数字、百分比、计数或日期。数据槽渲染为 — figure —、{metric}、N×。只有脚本提供时才出现真实数字——统计栅格与账本尤其要放占位符，而不是编造的值。

十一、渲染前自检清单（Pre-Render Self-Audit）

每一帧在通过任何结构性检查之前，先过四道"眼球测试"（Frame Craft Bar）：

• Squint（眯眼）——恰好一个元素占主导，是其最近邻居的 3–6 倍（是鸿沟不是斜坡）：display-hero/display-xl 的宣言或 stat-num 数字，绝不出现两个竞争的标题；
• Silence（静默）——稀疏帧（封面、宣言、结尾）读起来 45–60% 空；统计栅格与对比账本是唯一的高密度例外。绝不为了"看起来完整"填满稀疏帧；
• Restraint（克制）——稀缺手势每帧只发射一次：至多一个硬偏移阴影、2～3 个强调色（永不四个全出）、green 地面只留给唯一结尾板；
• Reference（参照）——目标是 Risograph 编辑海报 / 朋克小报版面（扁平 ink 描边块、一个巨大宣言、大片 cream）；失败的样子是圆角、软阴影的 SaaS 功能栅格。

渲染前的逐项核对（Pre-Render Self-Audit）清单：

• Squint——一个元素以 3–5 倍支配其邻居，否则重缩放
• Silence——稀疏帧 45–60% 空；只有统计栅格 / 账本高密度
• Accents——每帧 2～3 个，永不四个全出；green 地面只出现在结尾
• Depth——0 模糊；至多一个硬偏移阴影；其余用色块对比
• Geometry——除 pill 外全部方角；旋转只在 −4/−6deg
• Type——Archivo Black 全大写 0.92 lh、fit-to-measure、承重行 ≥1.4cqw
• Anchor——默认居中；只有 marker + ledger 用左/非对称；不允许连续 3 帧共用同一锚点
• Fabrication——每个数字都能追溯到脚本，否则用占位符

规范之外，design-adherence.md 提供了渲染后的合规核查流程：逐一检查颜色（每个 hex 必须出现在规范色板中）、字体（字体族与字重匹配，无替代）、圆角（符合声明的角风格）、间距（在声明的密度范围内）、深度（阴影符合声明的层级）、规避规则（"Don'ts" 列表中无一项出现），发现违规以清单形式报告并修复后再交付预览。

十二、令牌如何被下游消费：字幕皮肤（caption-skin.html）示例

creative-mode 预设的令牌不仅服务正片帧，也服务字幕系统。caption-skin.html 是预设自带的"卡拉 OK 式下三分之一（lower-third karaoke）"字幕皮肤，它通过一套固定的令牌契约消费 frame.md：

--cap-ink · --cap-canvas · --cap-accent · --cap-accent-2 · --font-display ·
--font-body · --cap-band-top · --cap-band-height

皮肤头部注释说明：项目工作流中的 captions.mjs 会从项目的 frame.md 注入这套 :root 令牌，因此 Step-2 的品牌叠加会自动流进字幕；每个变量都带 creative-mode 的字面量回退值，供独立预览使用。皮肤保留三个钩子（勿改名）：.caption-group / .caption-word + 状态 .is-active / .is-spoken，以及根节点 data-composition-id="captions"。

字幕视觉完美复用了帧规范的语言：

• cream 卡片 + 4px ink 描边 + 硬偏移阴影（实心同方向 ink+orange 副本，无模糊——creative-mode 唯一的深度装置），方角；
• Archivo Black 全大写、0.92 行高、ink 字形；
• 即将播报的词呈淡 ink；当前词变成实心黄色 ink 块（品牌签名式的硬偏移阴影强调块，无模糊），ink 字压在上层；已播报词沉淀为实心 ink，强调块清除。

关键 CSS 片段：

.caption-pill {
  background: var(--cap-canvas, #efe9d9);
  border: 4px solid var(--cap-ink, #0f0f0f);
  border-radius: 0;
  box-shadow:
    14px 14px 0 var(--cap-accent-2, #e85a1f),
    14px 14px 0 4px var(--cap-ink, #0f0f0f);
}
.caption-word.is-active {
  color: var(--cap-ink, #0f0f0f);
  background: var(--cap-accent, #f5c518);
  box-shadow: 0 0 0 0.08em var(--cap-accent, #f5c518);
}
.caption-word.is-spoken {
  color: var(--cap-ink, #0f0f0f);
  background: transparent;
  box-shadow: none;
}

实现细节还提示了一个工程坑：状态切换使用 gsap.set({className})（应用在引擎的逐帧 seek 上），绝不用 tl.call() 回调——因为 seek 不会触发 call 回调，会导致渲染时状态错误。字幕组全部绝对定位堆叠在同一个带区（caption band）上，同一时间只显示一组（通过 opacity 切换），帧内容保持在带区之上。

十三、已知边界（Known Gaps）

规范末尾明确列出当前版本的边界，使用前务必知悉：

• Motion 刻意不在范围内：frame.md 只规定构图；时间与转场是后续阶段。结尾 green 被描述为一块"plate（板）"，而不是一个转场。
• Archivo Black 需要 Google Fonts，回退字体是 sans-serif；CJK 配对（Noto Serif SC 900 / NSC 400）从来源的 CJK 部分继承。
• 9:16 / 1:1 是指南而非像素锁定：每种比例都要实测可读性下限。
• 装饰几何（圆、stamp、堆叠块）纯 CSS 即可，不依赖任何外部图片。

十四、进一步阅读：仓库中的相关文件

• 规范本体：.agents/skills/hyperframes-creative/frame-presets/creative-mode/FRAME.md
• 参考实现（可打开预览的帧展示页）：.agents/skills/hyperframes-creative/frame-presets/creative-mode/frame-showcase.html
• 字幕皮肤：.agents/skills/hyperframes-creative/frame-presets/creative-mode/caption-skin.html
• 技能总览与工作流：.agents/skills/hyperframes-creative/SKILL.md
• 规范解析与优先级约定：.agents/skills/hyperframes-creative/references/design-spec.md
• 渲染后合规核查：.agents/skills/hyperframes-creative/references/design-adherence.md
• 无规范时的兜底创作方向：.agents/skills/hyperframes-creative/references/house-style.md
• 其余 12 个帧预设：.agents/skills/hyperframes-creative/frame-presets/<name>/FRAME.md（biennale-yellow、blockframe、blue-professional、bold-poster、broadside、capsule、cartesian、claude、cobalt-grid、coral、daisy-days、editorial-forest）

如果你的项目需要一个"稀疏、图形感强、克制而冲"的编辑海报式视频排版系统，creative-mode 预设是一份开箱即用的完整答案：原子令牌保持品牌刚性，构图在 Do/Don't 边界内完全自由，数字只信脚本——把这份规范复制为项目的 frame.md，再按照 SKILL.md 的工作流逐步消费即可。