HyperFrames Dark / Premium 深色高级配色指南Tech / Finance / Luxury / Cinematic 场景的调色板实战【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes导读本文围绕 HyperFrames 创意技能库中的 Dark / Premium 调色板系统讲解面向科技、金融、奢侈品与影视感内容的 8 组深色配色方案包括每组色板的角色拆解背景 / 前景 / 强调色、如何接入design.md/frame.md设计规范、如何与house-style与visual-styles等创意参考配合以及如何通过hyperframes check与 contrast-report.mjs 保证 WCAG AA 对比度达标。读完本文你将能直接在 HyperFrames 项目中声明并落地一套专业、可校验的深色高级配色体系。一、Dark / Premium深色高级感定位在 HyperFrames 创意技能库中调色板是具名色板体系的一部分。每个色板文件对应一类明确的情绪与内容场景house-style.md 的调色板路由表将其定位为Dark / Premium— Tech, finance, luxury, cinematic content科技、金融、奢侈品、影视感内容与之形成对照的相邻色板包括 Bold / Energetic产品发布、社媒、高能内容、Warm / Editorial叙事、纪录片、案例研究、Clean / Corporate解说、教程、演示等。Dark / Premium 的定位要点在于科技感深色底减少视觉噪声突出数据与界面元素金融感深蓝、藏青与金色/琥珀的搭配传递稳重、可信与财富暗示奢侈品感黑金、深蓝金、近黑底 克制强调色的组合是高级腕表、酒类、高端消费品广告的经典范式影视感接近电影胶片调色的低明度底色与高反差天然适配开场片头、氛围段落与叙事性镜头。从源码路由看SKILL.md 将palettes/*.md定义为 Palette-specific color tokens色板专属颜色令牌的唯一来源当创作流程需要选取色板时直接读取对应文件即可。二、8 组配色方案完整解析40 个色值全量收录Dark / Premium 色板文件 dark-premium.md 共给出 8 组配色每组 5 个十六进制色值。按照 HyperFrames 的用法约定见下文第三节每组通常按背景 → 前景 → 强调色的次序使用但具体角色需结合内容裁定。以下逐组拆解其色系构成与适用气质1. 纯黑 × 藏青 × 琥珀金经典科技金融黑#000000 #14213D #FCA311 #E5E5E5 #FFFFFF#000000纯黑背景#14213D深藏青navy#FCA311琥珀金强调色#E5E5E5/#FFFFFF两级亮灰前景。气质高对比黑金组合是金融数据大屏、加密/科技产品发布、奢华品牌宣传的默认正确答案。琥珀金在纯黑底上对比度极高适合做 CTA、关键数字与进度指示。2. 深空蓝 × 金黄的金融层级体系#000814 #001D3D #003566 #FFC300 #FFD60A#000814极暗蓝黑#001D3D、#003566逐级提亮的藏青层级#FFC300/#FFD60A金黄与亮黄。气质比第 1 组更蓝——底色是带冷调的蓝黑而非纯黑适合需要暗示科技深度的金融产品、投资报告可视化与财报动画。三级深蓝可承担背景/卡片/描边的层次递进。3. 冷调蓝灰的优雅商务体系#0D1B2A #1B263B #415A77 #778DA9 #E0E1DD#0D1B2A深海军蓝#1B263B次深蓝#415A77中蓝#778DA9蓝灰#E0E1DD冷调浅灰。气质整套是同一蓝灰系内的明度渐变天然适合需要多层级卡片 文字阶梯的界面式构图。注意本组没有高饱和强调色强调效果应通过最浅的#E0E1DD与最深底色的强反差实现或与第 1 组的琥珀金搭配使用。4. 蓝调 暖米白的编辑式高级感#0D1321 #1D2D44 #3E5C76 #748CAB #F0EBD8#0D1321深蓝黑#1D2D44、#3E5C76递进蓝#748CAB中浅蓝#F0EBD8暖米白。气质前三档蓝负责结构层次#F0EBD8暖米白作为前景文字比纯白更柔和、更纸张感适合奢侈品目录、品牌故事片头与 editorial 风格的金融叙事。5. 青绿 绯红 橙的科技高对比组合#011627 #FDFFFC #2EC4B6 #E71D36 #FF9F1C#011627深蓝绿黑背景#FDFFFC近白前景#2EC4B6青绿teal强调#E71D36绯红警示/次强调#FF9F1C橙色第三强调。气质罕见的一深一白 三强调色结构适合科技 SaaS 仪表盘、数据分析视频中需要多色编码的场景如收益/亏损/中性三态。深底上青绿与绯红并存时注意控制面积避免视觉打架。6. 黑红戏剧性的电影感体系#0B090A #161A1D #660708 #A4161A #E5383B#0B090A近黑#161A1D深炭灰#660708暗酒红#A4161A深红#E5383B亮绯红。气质整套围绕黑 红构建是五组中戏剧张力最强的一组对应 Security 产品、警示类内容、悬疑叙事与影视片头。暗红三档可承担背景光晕、边框与强调色#E5383B适合在近黑底上做小型高亮元素。7. 墨绿 × 暗金的复古奢华体系#001427 #708D81 #F4D58D #BF0603 #8D0801#001427极深蓝黑#708D81鼠尾草绿sage#F4D58D暗金#BF0603/#8D0801深红两档。气质深蓝黑 暗金 深红是古典徽章式的奢华配色适合高端腕表、威士忌、珠宝等传统奢侈品类也适合old money气质的金融品牌。8. 深青 × 陶土橙的暖性深色体系#001524 #15616D #FFECD1 #FF7D00 #78290F#001524深青黑#15616D深青绿#FFECD1奶油白#FF7D00陶土橙强调#78290F深棕。气质深色系中偏暖的一组——青绿底 奶油白前景 陶土橙强调兼具科技冷静与人文温度适合温暖感科技品牌、生活方式类产品与影视化的品牌故事。选板建议纯科技/金融演示优先 1、2、3 组需要多色数据编码选第 5 组影视叙事、戏剧性场景选第 6 组传统奢侈品选第 4、7 组想在同为深色的前提下传递暖意选第 8 组。三、色板接入 HyperFrames 工作流Dark / Premium 色板不是孤立的色值列表而是 hyperframes-creative 创意管线中的一个可消费模块。完整接入路径如下1. 在创作路由中定位色板SKILL.md 的路由表规定Palette-specific color tokens → 读取palettes/*.md。也就是说当项目没有现成frame.md/design.md设计规范、需要自主选择视觉方向时Dark / Premium 就是深色高级感这一路由的落点之一。2. 声明背景 / 前景 / 强调色三元组house-style.md 要求在写任何 HTML 之前先声明背景bg、前景fg、强调色accent。以第 1 组为例的声明范式/* 推荐范式bg / fg / accent */ :root { --bg: #000000; /* 背景 */ --surface: #14213D; /* 卡片/次级背景 */ --fg: #E5E5E5; /* 正文前景 */ --fg-strong: #FFFFFF; /* 标题/关键数字 */ --accent: #FCA311; /* 强调色CTA、进度条、关键数字 */ }对应规则同样来自 house-style.md一个强调色同一支视频所有场景共用同一背景与同一强调色禁止逐元素即兴发明颜色中性色向强调色偏转即使使用灰阶也应向强调色的色相轻微偏转例如第 3 组的冷蓝灰避免死灰深浅匹配内容Tech、cinema、finance 类内容用深色系——这正是 Dark / Premium 的用武之地。3. 落进设计规范文件若有更完整的品牌规范需求可将色板写入design.md或视频优先的frame.md的 YAML frontmatter作为机器可读的规范层。参考 design-spec.md 的解析约定frontmatter 是规范层须逐字引用精确 hex、字体族、字重不得改写或四舍五入。基于第 1 组的示例name: Dark Premium colors: primary: #000000 on-primary: #E5E5E5 surface: #14213D accent: #FCA311 highlight: #FFFFFF前端执行顺序为frame.md → design.md → DESIGN.md取首个存在的文件frame.md是视频 / HyperFrames 项目的首选规范文件色板则始终以palettes/*.md为色值真相来源。4. 与 Visual Style Library 的Shadow Cut呼应visual-styles.md 中的Shadow Cut风格Hans Hillmann 风格与 Dark / Premium 高度同源近单色——深黑、冷灰、亮白 一个血红强调色primary: #0a0a0a、accent: #C1121F适合安全产品、戏剧性揭示、调查类内容。当你选择第 6 组黑红体系时可进一步套用 Shadow Cut 的完整 YAML 令牌含 typography、rounded、spacing、motion直接生成规范文件再按第 1 组的深蓝黑或第 6 组的黑红替换 colors 段即可。四、对比度与可访问性深色方案的硬约束深色系 金色/红色强调色的组合最容易在强调色文字 深色背景上触犯对比度红线例如#FFC300上的白字、#E5383B上的深字。HyperFrames 对此有两道强制关卡1.hyperframes checkWCAG AA 强制校验house-style.md 明确规定对比度由hyperframes check强制WCAG AA。即移除所有装饰元素后文字必须仍然可读——背景光晕、渐变、玻璃拟态都不能帮文字达标。Dark / Premium 的深底天然有利于前景对比但应重点自查#FCA311琥珀金上叠加深色文字还是深底上使用#FCA311文字后者深底 亮金文字对比更稳第 5 组的#2EC4B6青绿文字在#011627深底上对比良好但#E71D36绯红文字需用较深底或加粗字重第 6 组的#660708暗酒红只适合做背景装饰与边框不适合承载正文文字。2.contrast-report.mjs渲染帧级对比度审计仓库提供脚本 contrast-report.mjs538 行用于对合成画面做所见即所得的对比度审计node skills/hyperframes-creative/scripts/contrast-report.mjs composition-dir \ [--samples N] [--out dir] [--width W] [--height H] [--fps N]其原理源码注释可见对画面取 N 个采样时间点遍历 DOM 中所有文本元素将元素自身的文字绘制设为透明后再截屏一次得到文字背后真实合成像素再从元素自身 bbox 直接采样——而非取 bbox 外围 4px 环后者在玻璃拟态、半透明装饰、紧贴文字的相邻面板场景下会失准按 WCAG 2.1 计算声明前景色与实际背景像素的对比度输出contrast-report.json与contrast-overlay.png洋红 AA 不通过黄 仅通过 AA绿 AAA任一文本元素未达 WCAG AA 即以退出码 1 结束。该脚本刻意绕过captureFrameToBuffer其静态帧去重缓存无法感知 DOM 突变直接使用page.screenshot()与 packages/cli/src/commands/contrast-audit.browser.js 中验证过的技术同源。用 Dark / Premium 色板创作后建议按 design-adherence.md 的检查清单逐项核对色值是否全部来自色板禁止发明新色、字族字重是否与规范一致、圆角/间距/阴影是否符合声明的层级最后跑一次对比度审计收尾。五、实战落地小结在 HyperFrames 项目中落地 Dark / Premium 的推荐流程选板按内容气质从本文第二节 8 组方案中选定一组科技/金融 → 1、2、3多色数据 → 5影视戏剧 → 6传统奢华 → 4、7暖性深色 → 8声明三元组在写 HTML 前声明--bg / --fg / --accent全片统一禁止逐元素发明颜色写入规范将色板作为colors段写入design.md/frame.md的 frontmatter精确 hex逐字引用需要完整风格时可套用 visual-styles.md 的 Shadow Cut 等 YAML 模板构建与校验完成 HTML 创作后运行hyperframes checkWCAG AA 强制并用 contrast-report.mjs 对渲染帧做像素级对比度审计按 design-adherence.md 清单修复所有违规项后再进入预览与渲染。Dark / Premium 的价值不在于深色本身而在于它把科技、金融、奢华与影视四个高价值内容场景沉淀为 8 组可直接引用、可机器校验的色值集合——配合 HyperFrames 的规范文件机制与对比度审计管线你可以在保持品牌克制感的同时获得完全可复现、可验证的高质量深色视频画面。参考资源仓库相对路径色板主文件Dark / Premium 全部 8 组色值同目录其他色板Bold / Energetic、Clean / Corporate、Neon / Electric 等 9 个具名色板house-style.md色板路由表、bg/fg/accent 声明规则、Lazy Defaults 清单design-spec.mdframe.md/design.md规范文件格式与解析优先级visual-styles.mdShadow Cut 等 8 种具名视觉风格含完整 YAML 令牌design-adherence.md创作后规范核对清单颜色/字体/圆角/间距/深度contrast-report.mjs渲染帧级 WCAG 2.1 对比度审计脚本SKILL.mdhyperframes-creative 技能总览与创作路由表【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 HyperFrames Dark / Premium 深色高级配色指南：Tech / Finance / Luxury / Cinematic 场景的调色板实战
HyperFrames Dark / Premium 深色高级配色指南Tech / Finance / Luxury / Cinematic 场景的调色板实战【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes导读本文围绕 HyperFrames 创意技能库中的 Dark / Premium 调色板系统讲解面向科技、金融、奢侈品与影视感内容的 8 组深色配色方案包括每组色板的角色拆解背景 / 前景 / 强调色、如何接入design.md/frame.md设计规范、如何与house-style与visual-styles等创意参考配合以及如何通过hyperframes check与 contrast-report.mjs 保证 WCAG AA 对比度达标。读完本文你将能直接在 HyperFrames 项目中声明并落地一套专业、可校验的深色高级配色体系。一、Dark / Premium深色高级感定位在 HyperFrames 创意技能库中调色板是具名色板体系的一部分。每个色板文件对应一类明确的情绪与内容场景house-style.md 的调色板路由表将其定位为Dark / Premium— Tech, finance, luxury, cinematic content科技、金融、奢侈品、影视感内容与之形成对照的相邻色板包括 Bold / Energetic产品发布、社媒、高能内容、Warm / Editorial叙事、纪录片、案例研究、Clean / Corporate解说、教程、演示等。Dark / Premium 的定位要点在于科技感深色底减少视觉噪声突出数据与界面元素金融感深蓝、藏青与金色/琥珀的搭配传递稳重、可信与财富暗示奢侈品感黑金、深蓝金、近黑底 克制强调色的组合是高级腕表、酒类、高端消费品广告的经典范式影视感接近电影胶片调色的低明度底色与高反差天然适配开场片头、氛围段落与叙事性镜头。从源码路由看SKILL.md 将palettes/*.md定义为 Palette-specific color tokens色板专属颜色令牌的唯一来源当创作流程需要选取色板时直接读取对应文件即可。二、8 组配色方案完整解析40 个色值全量收录Dark / Premium 色板文件 dark-premium.md 共给出 8 组配色每组 5 个十六进制色值。按照 HyperFrames 的用法约定见下文第三节每组通常按背景 → 前景 → 强调色的次序使用但具体角色需结合内容裁定。以下逐组拆解其色系构成与适用气质1. 纯黑 × 藏青 × 琥珀金经典科技金融黑#000000 #14213D #FCA311 #E5E5E5 #FFFFFF#000000纯黑背景#14213D深藏青navy#FCA311琥珀金强调色#E5E5E5/#FFFFFF两级亮灰前景。气质高对比黑金组合是金融数据大屏、加密/科技产品发布、奢华品牌宣传的默认正确答案。琥珀金在纯黑底上对比度极高适合做 CTA、关键数字与进度指示。2. 深空蓝 × 金黄的金融层级体系#000814 #001D3D #003566 #FFC300 #FFD60A#000814极暗蓝黑#001D3D、#003566逐级提亮的藏青层级#FFC300/#FFD60A金黄与亮黄。气质比第 1 组更蓝——底色是带冷调的蓝黑而非纯黑适合需要暗示科技深度的金融产品、投资报告可视化与财报动画。三级深蓝可承担背景/卡片/描边的层次递进。3. 冷调蓝灰的优雅商务体系#0D1B2A #1B263B #415A77 #778DA9 #E0E1DD#0D1B2A深海军蓝#1B263B次深蓝#415A77中蓝#778DA9蓝灰#E0E1DD冷调浅灰。气质整套是同一蓝灰系内的明度渐变天然适合需要多层级卡片 文字阶梯的界面式构图。注意本组没有高饱和强调色强调效果应通过最浅的#E0E1DD与最深底色的强反差实现或与第 1 组的琥珀金搭配使用。4. 蓝调 暖米白的编辑式高级感#0D1321 #1D2D44 #3E5C76 #748CAB #F0EBD8#0D1321深蓝黑#1D2D44、#3E5C76递进蓝#748CAB中浅蓝#F0EBD8暖米白。气质前三档蓝负责结构层次#F0EBD8暖米白作为前景文字比纯白更柔和、更纸张感适合奢侈品目录、品牌故事片头与 editorial 风格的金融叙事。5. 青绿 绯红 橙的科技高对比组合#011627 #FDFFFC #2EC4B6 #E71D36 #FF9F1C#011627深蓝绿黑背景#FDFFFC近白前景#2EC4B6青绿teal强调#E71D36绯红警示/次强调#FF9F1C橙色第三强调。气质罕见的一深一白 三强调色结构适合科技 SaaS 仪表盘、数据分析视频中需要多色编码的场景如收益/亏损/中性三态。深底上青绿与绯红并存时注意控制面积避免视觉打架。6. 黑红戏剧性的电影感体系#0B090A #161A1D #660708 #A4161A #E5383B#0B090A近黑#161A1D深炭灰#660708暗酒红#A4161A深红#E5383B亮绯红。气质整套围绕黑 红构建是五组中戏剧张力最强的一组对应 Security 产品、警示类内容、悬疑叙事与影视片头。暗红三档可承担背景光晕、边框与强调色#E5383B适合在近黑底上做小型高亮元素。7. 墨绿 × 暗金的复古奢华体系#001427 #708D81 #F4D58D #BF0603 #8D0801#001427极深蓝黑#708D81鼠尾草绿sage#F4D58D暗金#BF0603/#8D0801深红两档。气质深蓝黑 暗金 深红是古典徽章式的奢华配色适合高端腕表、威士忌、珠宝等传统奢侈品类也适合old money气质的金融品牌。8. 深青 × 陶土橙的暖性深色体系#001524 #15616D #FFECD1 #FF7D00 #78290F#001524深青黑#15616D深青绿#FFECD1奶油白#FF7D00陶土橙强调#78290F深棕。气质深色系中偏暖的一组——青绿底 奶油白前景 陶土橙强调兼具科技冷静与人文温度适合温暖感科技品牌、生活方式类产品与影视化的品牌故事。选板建议纯科技/金融演示优先 1、2、3 组需要多色数据编码选第 5 组影视叙事、戏剧性场景选第 6 组传统奢侈品选第 4、7 组想在同为深色的前提下传递暖意选第 8 组。三、色板接入 HyperFrames 工作流Dark / Premium 色板不是孤立的色值列表而是 hyperframes-creative 创意管线中的一个可消费模块。完整接入路径如下1. 在创作路由中定位色板SKILL.md 的路由表规定Palette-specific color tokens → 读取palettes/*.md。也就是说当项目没有现成frame.md/design.md设计规范、需要自主选择视觉方向时Dark / Premium 就是深色高级感这一路由的落点之一。2. 声明背景 / 前景 / 强调色三元组house-style.md 要求在写任何 HTML 之前先声明背景bg、前景fg、强调色accent。以第 1 组为例的声明范式/* 推荐范式bg / fg / accent */ :root { --bg: #000000; /* 背景 */ --surface: #14213D; /* 卡片/次级背景 */ --fg: #E5E5E5; /* 正文前景 */ --fg-strong: #FFFFFF; /* 标题/关键数字 */ --accent: #FCA311; /* 强调色CTA、进度条、关键数字 */ }对应规则同样来自 house-style.md一个强调色同一支视频所有场景共用同一背景与同一强调色禁止逐元素即兴发明颜色中性色向强调色偏转即使使用灰阶也应向强调色的色相轻微偏转例如第 3 组的冷蓝灰避免死灰深浅匹配内容Tech、cinema、finance 类内容用深色系——这正是 Dark / Premium 的用武之地。3. 落进设计规范文件若有更完整的品牌规范需求可将色板写入design.md或视频优先的frame.md的 YAML frontmatter作为机器可读的规范层。参考 design-spec.md 的解析约定frontmatter 是规范层须逐字引用精确 hex、字体族、字重不得改写或四舍五入。基于第 1 组的示例name: Dark Premium colors: primary: #000000 on-primary: #E5E5E5 surface: #14213D accent: #FCA311 highlight: #FFFFFF前端执行顺序为frame.md → design.md → DESIGN.md取首个存在的文件frame.md是视频 / HyperFrames 项目的首选规范文件色板则始终以palettes/*.md为色值真相来源。4. 与 Visual Style Library 的Shadow Cut呼应visual-styles.md 中的Shadow Cut风格Hans Hillmann 风格与 Dark / Premium 高度同源近单色——深黑、冷灰、亮白 一个血红强调色primary: #0a0a0a、accent: #C1121F适合安全产品、戏剧性揭示、调查类内容。当你选择第 6 组黑红体系时可进一步套用 Shadow Cut 的完整 YAML 令牌含 typography、rounded、spacing、motion直接生成规范文件再按第 1 组的深蓝黑或第 6 组的黑红替换 colors 段即可。四、对比度与可访问性深色方案的硬约束深色系 金色/红色强调色的组合最容易在强调色文字 深色背景上触犯对比度红线例如#FFC300上的白字、#E5383B上的深字。HyperFrames 对此有两道强制关卡1.hyperframes checkWCAG AA 强制校验house-style.md 明确规定对比度由hyperframes check强制WCAG AA。即移除所有装饰元素后文字必须仍然可读——背景光晕、渐变、玻璃拟态都不能帮文字达标。Dark / Premium 的深底天然有利于前景对比但应重点自查#FCA311琥珀金上叠加深色文字还是深底上使用#FCA311文字后者深底 亮金文字对比更稳第 5 组的#2EC4B6青绿文字在#011627深底上对比良好但#E71D36绯红文字需用较深底或加粗字重第 6 组的#660708暗酒红只适合做背景装饰与边框不适合承载正文文字。2.contrast-report.mjs渲染帧级对比度审计仓库提供脚本 contrast-report.mjs538 行用于对合成画面做所见即所得的对比度审计node skills/hyperframes-creative/scripts/contrast-report.mjs composition-dir \ [--samples N] [--out dir] [--width W] [--height H] [--fps N]其原理源码注释可见对画面取 N 个采样时间点遍历 DOM 中所有文本元素将元素自身的文字绘制设为透明后再截屏一次得到文字背后真实合成像素再从元素自身 bbox 直接采样——而非取 bbox 外围 4px 环后者在玻璃拟态、半透明装饰、紧贴文字的相邻面板场景下会失准按 WCAG 2.1 计算声明前景色与实际背景像素的对比度输出contrast-report.json与contrast-overlay.png洋红 AA 不通过黄 仅通过 AA绿 AAA任一文本元素未达 WCAG AA 即以退出码 1 结束。该脚本刻意绕过captureFrameToBuffer其静态帧去重缓存无法感知 DOM 突变直接使用page.screenshot()与 packages/cli/src/commands/contrast-audit.browser.js 中验证过的技术同源。用 Dark / Premium 色板创作后建议按 design-adherence.md 的检查清单逐项核对色值是否全部来自色板禁止发明新色、字族字重是否与规范一致、圆角/间距/阴影是否符合声明的层级最后跑一次对比度审计收尾。五、实战落地小结在 HyperFrames 项目中落地 Dark / Premium 的推荐流程选板按内容气质从本文第二节 8 组方案中选定一组科技/金融 → 1、2、3多色数据 → 5影视戏剧 → 6传统奢华 → 4、7暖性深色 → 8声明三元组在写 HTML 前声明--bg / --fg / --accent全片统一禁止逐元素发明颜色写入规范将色板作为colors段写入design.md/frame.md的 frontmatter精确 hex逐字引用需要完整风格时可套用 visual-styles.md 的 Shadow Cut 等 YAML 模板构建与校验完成 HTML 创作后运行hyperframes checkWCAG AA 强制并用 contrast-report.mjs 对渲染帧做像素级对比度审计按 design-adherence.md 清单修复所有违规项后再进入预览与渲染。Dark / Premium 的价值不在于深色本身而在于它把科技、金融、奢华与影视四个高价值内容场景沉淀为 8 组可直接引用、可机器校验的色值集合——配合 HyperFrames 的规范文件机制与对比度审计管线你可以在保持品牌克制感的同时获得完全可复现、可验证的高质量深色视频画面。参考资源仓库相对路径色板主文件Dark / Premium 全部 8 组色值同目录其他色板Bold / Energetic、Clean / Corporate、Neon / Electric 等 9 个具名色板house-style.md色板路由表、bg/fg/accent 声明规则、Lazy Defaults 清单design-spec.mdframe.md/design.md规范文件格式与解析优先级visual-styles.mdShadow Cut 等 8 种具名视觉风格含完整 YAML 令牌design-adherence.md创作后规范核对清单颜色/字体/圆角/间距/深度contrast-report.mjs渲染帧级 WCAG 2.1 对比度审计脚本SKILL.mdhyperframes-creative 技能总览与创作路由表【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考