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.mdframe.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-showcase.html六种帧处理与组件、规则的字面预览caption-skin.html预设专属的“底部三分之一卡拉OK”字幕皮肤源码FRAME.md 的结构frontmatter 是规范层正文是语境层FRAME.md采用“YAML frontmatter Markdown 正文”双层结构两层地位不同依据 design-spec.mdFrontmatter 是规范层normativecolors、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段令牌Hex角色cream#F5F0E6默认画布turquoise#7ECDC0饱和表面之一soft-pink#F7C8D4饱和表面之一butter#FDE68A饱和表面 / 徽章 / 圆点填充mint#A8E6CF饱和表面之一lavender#D4A5E8饱和表面之一peach#FFCBA4饱和表面之一sky#A8D8F0饱和表面之一coral#F8635F唯一高饱和点缀色只用于小标记text-dark#2D2D2D炭黑文字 / 边框 / 阴影text-muted#6B6B6B弱化文字white#FFFFFF卡片填充使用规则原文档核心约束必须遵守默认底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——承载正文与元信息令牌字重字号行高body5000.95cqw1.6body-strong6000.95cqw1.5meta6000.78cqw1.45展示梯度Fredoka One单字重、永不斜体——承载所有标题、引言、引用与标记数字令牌字号行高字距badge0.9cqw—0.02emlabel-display1.3cqw1.30.02emsubtitle1.8cqw1.20.02emquote2.6cqw1.35—title3.0cqw1.150.02emheadline4.5cqw1.10.02emdisplay6.5cqw1.10.02em排印硬规则可读性下限任何承重文本行 ≥1.4cqwmeta只是“chrome”装饰性元信息。按长度配字号fit-to-measure标题按其文本长度定级。块宽上限≤ 78cqw≤3 词用display4–6 词用headline7 词以上用title。角色严格不跨界Fredoka One 管所有展示、Quicksand 管所有正文永不互换。Fredoka 单字重无斜体、无下划线、无替代字重Quicksand 保持 500/600/700Fredoka 字距 0.02emQuicksand 正文永不大写。字体加载有个现实注意事项见原文档“Known Gaps”源文件命名的是Fredoka One但 Google Fonts 现在提供Fredoka 变量字族——实际加载应请求Fredoka:wght500;600;700并把展示字重设为 600视觉上等于 Fredoka One同时把Fredoka One保留在字体栈首位以兼容仍提供它的环境。frame-showcase.html的加载正是这种双栈写法--disp: Fredoka, Fredoka One, Baloo 2, sans-serif。中文场景则使用 ZCOOL XiaoWei展示/ Yozai正文。深度与表面贴纸式 2D 图形深度深度是纯 2D、图形化的——粗描边 硬偏移 贴纸贴在纸上。阴影一律实色炭黑、零模糊、指向右下shadows.default6px卡片、帧容器、徽章、图表容器。shadows.small4px小卡片、步骤圆、头像。文本标题阴影饱和表面上 Fredoka 标题加 3px 炭黑文字阴影粉/薄荷上用 20% 软变体rgba(0,0,0,0.2)cream 上的标题平铺炭黑不加阴影。天花板约束不允许模糊阴影、不允许rgba除软文本阴影、不允许渐变、不允许辉光一个元素要么投射硬炭黑偏移阴影要么不投。形状与圆角体系20px卡片、28px特色容器featured、50px药丸徽章、计数器、50%所有圆形、4px图例色块。零方角——每个区域都必须圆角。组件库七个可复用原子组件规格说明card白底、3px 炭黑描边、20px 圆角、6px 阴影通用容器白底 粉彩表面是标准组合framed-header粉彩顶带 白底主体、3px 连续描边、28px 圆角、6px 阴影一条连续的边框、一个阴影视觉上是一个整体badge-pillbutter 底、3px 描边、50px 药丸、4px 阴影章节标签white-space: nowrapcircle-marker任意粉彩底、白字butter 上深字、3px 描边、50% 圆尺寸分级bullet 20 / icon 44 / dot 48 / step 90Fredoka 数字步骤圆带小阴影bullet-dotbutter 底、2px 描边、20px 圆列表圆点::before距行首 4px列表绝不使用字形符号ornament手绘 SVG雏菊、星星、太阳、云、彩虹、2.1px 炭黑描边置于内容之下内容 z-index 更高可越出帧边缘裁切每帧 3–7 个聚集在角落/边缘quote-mark超大 Fredoka 引号、soft-pink 色 炭黑描边置于引言主体上方text-headline-shadow不是独立组件而是标题处理3px 炭黑文字阴影粉/薄荷上 20% 软变体只应用于饱和表面上的 Fredoka 标题——让标题读起来像形状一样“带描边”。六种帧处理Frame Treatments配方每种处理遵循统一配方recipeground · 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 与 DontDoFredoka One 标题 Quicksand 正文严格按角色配对。每个形状 3px 炭黑描边 硬偏移阴影6/4px、无模糊任何表面上白卡填充。饱和表面上 Fredoka 标题加 3px 炭黑文字阴影 白字cream 上平铺炭黑。使用带描边的 butter 圆盘项目符号绝不用字形每帧聚集 3–7 个手绘装饰角落、越出边缘。每帧保持一个内容容器标记色轮换coral → mint → sky → lavender → buttercoral 只留给小标记。多数帧居中内容密集帧偏 cream封面/结尾/引言用饱和色。Dont不要方角不要模糊或rgba阴影软文本阴影除外。不要彩色边框只允许炭黑不要 coral 表面不要第九种颜色。不要第三字体不要 Quicksand 标题或 Fredoka 正文不要 Fredoka 斜体/下划线不要大写 Quicksand 正文。不要字形项目符号不要空角落用装饰填充不要两个竞争的内容面板。不要让标题通栏——按长度配字号fit to measure。多宽高比行为处理16:99:161:1Cover居中角落装饰居中、更高、更多装饰居中Info Cards3 列纵向堆叠21Process Steps横向 箭头纵向箭头转向下2×2Quote居中卡片居中、更高居中Framed Section顶带 主体顶带 主体更高顶带 主体Closing居中 花环居中 花环居中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×108016:9展示字号以cqw编写px ÷ 1920 × 100 cqw竖版 1080×19209:16方形 1080×10801:1安全区pad-slide约 3cqw装饰刻意越出边缘出血。在 frame-showcase.html 中可以亲眼看到这套法则的落地.frame类即container-type: sizeaspect-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-brandbutter 糖果芯片第二个明媚粉彩、.cap-num数字改用 Quicksand 700、轻微内缩、.cap-ctabutter 3px 下划线强调。media (max-aspect-ratio: 9/16)下会自动加宽药丸并缩小字号。实现层面有三个关键约定源码注释中明确三个保留注入孔空的GROUPS数组引擎的场景感知词组分、0的 duration width/height真实总时长与画布尺寸、空的data-brand-tokens样式由 frame.md 派生的:root令牌——由captions.mjs填充后写出compositions/captions.html。钩子名不可改.caption-group/.caption-word 状态类.is-active/.is-spoken、根节点data-composition-idcaptions、时间线挂在window.__timelines[captions]。必须用gsap.set({className})切状态在引擎逐帧 seek 上应用绝不使用tl.call()回调——因为 seek 不会触发 call 回调会导致渲染时状态错误。数字与声明硬规则原文档明确规定帧级永不发明数字、日期或计数。渲染槽位一律使用占位符——— figure —、{metric}、N。步骤编号与任何图表数值在脚本提供前保持占位幻灯片计数器只是装饰性 chrome。真实实体客户、Logo、厂商在源码中未定义任何具体对象遇到此类标记一律渲染为占位符装饰与粉彩与内容无关计数器/徽章承载每套文稿自己的文本。渲染前自检清单Pre-Render Self-AuditSquint——每帧一个 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:wght500;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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考