HyperFrames Daisy Days 帧预设解析：以 1920×1080 帧为单位的童趣插画风视频设计系统

HyperFrames Daisy Days 帧预设解析：以 1920×1080 帧为单位的童趣插画风视频设计系统

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

本篇指南系统讲解 HyperFrames 开源仓库中hyperframes-creative技能所携带的Daisy Days 帧预设（frame preset）：一个以“帧”（1920×1080 视频帧）为单位的、面向绘本插画 × 贴纸 kawaii 风格的完整设计系统。文章将带你吃透其FRAME.md中的色彩令牌、字体双梯度、贴纸式深度、组件库与六种帧处理配方，并对照仓库中的frame-showcase.html预览样板与caption-skin.html字幕皮肤，理解如何把它作为frame.md设计规格落地到真实视频项目中。

Daisy Days 预设在整个创作流程中的位置

在 HyperFrames 的创作链路中，hyperframes-creative技能（skills/hyperframes-creative/SKILL.md）负责“非动效的创意方向”——品牌、节奏、风格、旁白与构图。它明确定义了设计规格的读取优先级：

frame.md → design.md → DESIGN.md

frame.md是视频项目的帧级设计系统（design.md的 video-first 版本）。仓库在 skills/hyperframes-creative/references/design-spec.md 中给出了取用预设的标准路径：把预设目录里的FRAME.md模板复制为项目的frame.md，再叠加品牌令牌即可，且“引用预设并非必需，自定义规格同样有效”。design-spec 对 Daisy Days 的定位描述是：

Cheerful picture-book — 3px charcoal outlines, 6/4px hard offset shadows (no blur), nine sunny-garden pastels, Fredoka One + Quicksand, generous radii, hand-drawn SVG ornament layer.

每个预设目录还附带frame-showcase.html（帧处理的预览联系表）与caption-skin.html（该预设专用的字幕皮肤），用于“看”效果，而非打包进项目。

Daisy Days 预设目录共三个文件（skills/hyperframes-creative/frame-presets/daisy-days/）：

FRAME.md 的结构：frontmatter 是规范层，正文是语境层

FRAME.md采用“YAML frontmatter + Markdown 正文”双层结构，两层地位不同（依据 design-spec.md）：

• Frontmatter 是规范层（normative）：colors、typography、spacing、components、borders、shadows是机器可读的真实数值。使用时必须逐字引用——精确的 hex、字体族、字重——不得发明或四舍五入。
• 正文是语境层（context）：## Overview、The Frame、Composition Rules等小节承载令牌承载不了的意图、使用时机与约束，用于判断而非取值。

FRAME.md开头用principle字段凝练了整套系统的哲学：atoms are sacred · composition is free · numbers come from the script（原子神圣 · 构图自由 · 数字来自脚本）。这三点分别对应：设计令牌不可篡改、布局方式自由发挥、任何数字都不能凭空捏造。

色彩系统：九个明媚花园色 + 一个暖色点缀

frontmatter 中的colors令牌与 showcase 中的 CSS 变量一一对应（对比 FRAME.md 与 frame-showcase.html 的#ds-tokens段）：

使用规则（原文档核心约束，必须遵守）：

• 默认底cream，按情绪轮换饱和粉彩（turquoise / soft-pink / butter / mint / lavender / peach / sky）。
• 卡片永远是白色，无论什么表面之上。
• 边框与阴影永远是炭黑text-dark——绝不上色、绝不模糊、绝不rgba（仅软文本阴影变体例外）。
• coral是唯一高饱和点缀——只能用于小标记（步骤圆、圆点、表头），永远不能当表面色。
• 粉彩不承载语义含义；没有第九种颜色。

borders与shadows令牌进一步固化了“贴纸感”：

borders: { primary: "3px solid text-dark", thin: "2px solid text-dark" } shadows: { default: "6px 6px 0 text-dark", small: "4px 4px 0 text-dark", text-headline: "3px 3px 0 text-dark", text-headline-soft: "3px 3px 0 rgba(0,0,0,0.2)" }

字体排印：Fredoka One × Quicksand 双梯度

typography令牌定义了两条互不跨越的字体梯度（ramp）：

阅读梯度（Quicksand）——承载正文与元信息：

展示梯度（Fredoka One，单字重、永不斜体）——承载所有标题、引言、引用与标记数字：

排印硬规则：

• 可读性下限：任何承重文本行 ≥1.4cqw；meta只是“chrome”（装饰性元信息）。
• 按长度配字号（fit-to-measure）：标题按其文本长度定级。块宽上限≤ 78cqw；≤3 词用display，4–6 词用headline，7 词以上用title。
• 角色严格不跨界：Fredoka One 管所有展示、Quicksand 管所有正文，永不互换。Fredoka 单字重（无斜体、无下划线、无替代字重）；Quicksand 保持 500/600/700；Fredoka 字距 0.02em；Quicksand 正文永不大写。

字体加载有个现实注意事项（见原文档“Known Gaps”）：源文件命名的是Fredoka One，但 Google Fonts 现在提供Fredoka 变量字族——实际加载应请求Fredoka:wght@500;600;700并把展示字重设为 600（视觉上等于 Fredoka One），同时把Fredoka One保留在字体栈首位以兼容仍提供它的环境。frame-showcase.html的加载正是这种双栈写法：--disp: "Fredoka", "Fredoka One", "Baloo 2", sans-serif。中文场景则使用 ZCOOL XiaoWei（展示）/ Yozai（正文）。

深度与表面：贴纸式 2D 图形深度

深度是纯 2D、图形化的——粗描边 + 硬偏移 = 贴纸贴在纸上。阴影一律实色炭黑、零模糊、指向右下：

• shadows.default（6px）：卡片、帧容器、徽章、图表容器。
• shadows.small（4px）：小卡片、步骤圆、头像。
• 文本标题阴影：饱和表面上 Fredoka 标题加 3px 炭黑文字阴影（粉/薄荷上用 20% 软变体rgba(0,0,0,0.2)），cream 上的标题平铺炭黑不加阴影。

天花板约束：不允许模糊阴影、不允许rgba（除软文本阴影）、不允许渐变、不允许辉光；一个元素要么投射硬炭黑偏移阴影，要么不投。

形状与圆角体系

• 20px卡片、28px特色容器（featured）、50px药丸（徽章、计数器）、50%所有圆形、4px图例色块。
• 零方角——每个区域都必须圆角。

组件库：七个可复用原子

text-headline-shadow不是独立组件而是标题处理：3px 炭黑文字阴影（粉/薄荷上 20% 软变体），只应用于饱和表面上的 Fredoka 标题——让标题读起来像形状一样“带描边”。

六种帧处理（Frame Treatments）配方

每种处理遵循统一配方（recipe）：ground · container · composes · focal · chrome · accent · silence · Fixed/Free · density，且铁律是每帧一个内容容器 + 3–7 个装饰花环；空角落视为坏构图。

1 · Cover（封面，身份）——底：饱和粉彩（如 turquoise）；焦点：1–2 行 Fredokadisplay，白色 + 3px 炭黑文字阴影，居中，位于 butter 徽章之下；装饰：雏菊 + 星星花环，越出边缘裁切；密度：饱满但不拥挤。

2 · Info Cards（信息卡，目录页）——底：cream；焦点：三张白色 3px 描边卡片（6px 阴影），圆形图标 + Fredoka 标题 + Quicksand 正文；标记：粉彩圆图标（turquoise / coral / lavender 轮换）；这是唯一的“密度例外”——装饰更少。

3 · Process Steps（流程步骤，序列）——底：peach 等粉彩；焦点：一行 90px 带描边步骤圆，填充按coral → mint → sky → lavender轮换，Fredoka 白色数字，Fredoka 箭头连接。

4 · Quote（引言）——底：soft-pink；焦点：白底引言卡（28px 圆角、6px 阴影）+ 超大 soft-pink 引号锚 + Fredoka 引言 + Quicksand 700 出处。

5 · Framed Section（框式章节，特性展示）——底：cream；焦点：framed-header（粉彩顶带 + 白底主体），主体内是 butter 圆点列表；一条连续 3px 边框 + 一个阴影。

6 · Closing（结尾）——底：饱和粉彩（如 lavender）；焦点：白色display签名 + 炭黑文字阴影，居中；装饰花环填满四角；密度：full。

构图规则：Do 与 Don't

Do：

• Fredoka One 标题 + Quicksand 正文，严格按角色配对。
• 每个形状 3px 炭黑描边 + 硬偏移阴影（6/4px、无模糊）；任何表面上白卡填充。
• 饱和表面上 Fredoka 标题加 3px 炭黑文字阴影 + 白字；cream 上平铺炭黑。
• 使用带描边的 butter 圆盘项目符号（绝不用字形）；每帧聚集 3–7 个手绘装饰（角落、越出边缘）。
• 每帧保持一个内容容器；标记色轮换（coral → mint → sky → lavender → butter）；coral 只留给小标记。
• 多数帧居中；内容密集帧偏 cream，封面/结尾/引言用饱和色。

Don't：

• 不要方角；不要模糊或rgba阴影（软文本阴影除外）。
• 不要彩色边框（只允许炭黑）；不要 coral 表面；不要第九种颜色。
• 不要第三字体；不要 Quicksand 标题或 Fredoka 正文；不要 Fredoka 斜体/下划线；不要大写 Quicksand 正文。
• 不要字形项目符号；不要空角落（用装饰填充）；不要两个竞争的内容面板。
• 不要让标题通栏——按长度配字号（fit to measure）。

多宽高比行为

pad-slide（约 3cqw）锚定在短边；窄比例下把展示字号重新提升到 1.4cqw 下限以上；比例越窄，装饰数量越要取上限（5–7 个）以保证角落不显空。

帧工艺条（Craft Bar）与容器法则

任何结构检查之前，先用三个“眯眼测试”把关每一帧：

• Squint（眯眼）——一个 Fredoka 标题或内容卡片以 3–6 倍于邻居的体量主导画面。
• Silence（安静）——每帧一个内容容器，周围是装饰花环；信息卡网格是唯一密集例外。空角落视为坏构图。
• Restraint（克制）——cream 或一种粉彩表面；coral 只作小标记点缀（绝不作表面）；只允许炭黑边框 + 硬偏移阴影；没有第九种颜色。
• Reference（参照）——目标是“儿童绘本 / 贴纸 kawaii 杂志”；失败形态是“扁平、方角、模糊阴影的幻灯片式企业稿”。

容器法则（承重结构）：每个帧地面都设置container-type: size；所有帧相对单位都使用基于它的cqw/cqh，绝不使用vw。边框保持 3px/2px；圆角保持 20/28/50px；阴影偏移量用cqw缩放以让贴纸偏移按比例成立。帧规格：主画布 1920×1080（16:9），展示字号以cqw编写（px ÷ 1920 × 100 = cqw）；竖版 1080×1920（9:16）；方形 1080×1080（1:1）；安全区pad-slide约 3cqw，装饰刻意越出边缘出血。

在 frame-showcase.html 中可以亲眼看到这套法则的落地：.frame类即container-type: size+aspect-ratio: 16/9，其内部全部以cqw计（如.df1 h3的font-size: 9cqw、text-shadow: 0.4cqw 0.4cqw 0 var(--text-dark)），甚至雏菊（.daisy）和星星（.star）装饰也用cqw定位出血。这也印证了video-composition.md的消费契约：设计规格是品牌、不是布局——品牌（hex、字体、约束）严格继承，布局自由发挥。

实战落地：字幕皮肤与卡拉OK三态机制

预设的 caption-skin.html 是把 Daisy Days 视觉延续到“底部三分之一卡拉OK字幕”的模板。它定义了严格的令牌契约——只引用这组固定词汇（captions.mjs会从项目的frame.md注入，所以 Step-2 品牌叠加可以穿透）：

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

每个变量都带 daisy-days 字面量回退值（如--cap-canvas回退#f5f0e6、--cap-accent回退#f8635f），便于独立预览。

其视觉正是本预设的贴纸签名：cream 表面 + 3px 炭黑描边 + 6px 硬炭黑偏移阴影（无模糊）+ 24px 大圆角的卡片。卡拉OK三态为：

• 即将朗读（upcoming）——弱化炭黑，无糖果块。
• 当前词（active）——弹入一个粉彩糖果块：coral 填充、3px 炭黑描边 + 3px 硬偏移阴影、12px 圆角，带back.out(2.6)弹跳缩放。
• 已朗读（spoken）——沉淀为实心炭黑，糖果块清除。

皮肤还预留了三个可选词类钩子：.cap-brand（butter 糖果芯片，第二个明媚粉彩）、.cap-num（数字改用 Quicksand 700、轻微内缩）、.cap-cta（butter 3px 下划线强调）。@media (max-aspect-ratio: 9/16)下会自动加宽药丸并缩小字号。

实现层面有三个关键约定（源码注释中明确）：

1. 三个保留注入孔：空的GROUPS数组（引擎的场景感知词组分）、0的 duration + width/height（真实总时长与画布尺寸）、空的data-brand-tokens样式（由 frame.md 派生的:root令牌）——由captions.mjs填充后写出compositions/captions.html。
2. 钩子名不可改：.caption-group/.caption-word+ 状态类.is-active/.is-spoken、根节点data-composition-id="captions"、时间线挂在window.__timelines["captions"]。
3. 必须用gsap.set({className})切状态（在引擎逐帧 seek 上应用），绝不使用tl.call()回调——因为 seek 不会触发 call 回调，会导致渲染时状态错误。

数字与声明：硬规则

原文档明确规定：帧级永不发明数字、日期或计数。渲染槽位一律使用占位符——— figure —、{metric}、N。步骤编号与任何图表数值在脚本提供前保持占位；幻灯片计数器只是装饰性 chrome。真实实体（客户、Logo、厂商）在源码中未定义任何具体对象，遇到此类标记一律渲染为占位符；装饰与粉彩与内容无关，计数器/徽章承载每套文稿自己的文本。

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

• Squint——每帧一个 Fredoka 标题或内容卡片主导。
• Silence——每帧一个容器被装饰花环环绕；只有信息卡网格可以密集。
• Color——cream 或一种粉彩表面；coral 仅作标记；炭黑边框/阴影；无第九种色调。
• Type——Fredoka 标题（饱和面上白字 + 文字阴影，cream 上平铺炭黑）、Quicksand 正文；≥1.4cqw 下限。
• Depth——3px 描边 + 硬偏移（无模糊、无rgba除软文字阴影）；只用圆角。
• Ornaments——每帧 3–7 个，越出边缘出血；无空角落。Bullets——带描边圆盘，绝不用字形。
• Fabrication——每个数字都能追溯到脚本，否则用占位符。

已知缺口与使用边界

• 动效明确不在范围内：FRAME.md只规定构图；源码使用 scroll-snap 导航，无转场规范。动效模式应交给hyperframes-animation技能。
• 字体：如前述，Google 现在提供 Fredoka 变量字族，加载请求Fredoka:wght@500;600;700并把展示字重设为 600。
• 9:16 / 1:1 属于指导性建议：按比例保持高装饰数量以填满角落。
• 装饰与组件均为纯 CSS/SVG：重着色 SVG 装饰需要直接编辑其描边值。
• 对比度：text-muted不要用在粉彩表面上（只在 cream/白卡上）；饱和地面上的小文字应为炭黑或白色。

综上，Daisy Days 是 HyperFrames 开源仓库为“温暖、童趣、插画感”视频项目提供的一整套可直接落地的帧级设计规格：令牌层严格、布局层自由、数字层诚实。将其FRAME.md复制为项目frame.md，配合frame-showcase.html检查视觉、caption-skin.html继承字幕皮肤，即可在 HyperFrames 创作链路中稳定产出风格统一的绘本感视频帧。

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