HyperFrames Creative

品牌调性、节奏把控、视觉风格、旁白设计与画面构图指导。需在 hyperframes-core 的技术契约就绪后使用。

如涉及运动模式、场景蓝图、转场方式及 CSS 标记特效，请使用 hyperframes-animation —— 本技能明确不负责动画实现。

任何非简单构图任务，请务必优先阅读以下两份文档 —— 它们将覆盖你固有的网页设计直觉：

• references/house-style.md —— “理解提示词，生成真实内容”原则、懒加载默认项列表，以及背景/前景分层方案。正是这些规则，将一次字面意义的样式重写，升华为一个完整的 创意概念。
• references/video-composition.md —— 面向视频媒介的尺度控制、纵深营造与前景细节处理。它说明了如何避免空洞的网页式布局，同时又不强加统一的元素数量限制。

跳过这两份文档是导致输出流于平庸、呈现“网页截图感”的最主要原因。它们并非下方路由表中可选的条目——对于任何超过单行修改的任务，在选定配色或编写 HTML 前，请务必先打开并通读这两份文档。

工作流程

1. 若项目已提供设计规范（design spec），请首先通读全文，并将其中 frontmatter 中定义的字段（如颜色、字体、间距、语气、约束条件等）视为品牌事实。应读取哪个文件（优先级为 frame.md → design.md → DESIGN.md），以及如何解析该文件（frontmatter 内容为规范性定义，正文为上下文补充），均在 references/design-spec.md 中统一定义——请依据该文档完成解析与加载。
2. 若无现成设计规范，且用户明确要求视觉方向指导，则按以下路径择一执行：
   • 采用预制的 frame-preset（可选）→ 查阅 frame-presets/（将其中某份 FRAME.md 采纳为项目级 frame.md；详见 references/design-spec.md）
   • 按命名风格或情绪关键词匹配 → 查阅 references/visual-styles.md
   • 启用快速默认配置 → 查阅 references/house-style.md
   • 交互式风格选择 → 查阅 references/design-picker.md
3. 针对多场景内容，应在编写 HTML 前完成节拍（beat）规划与节奏设计 → 参考 references/beat-direction.md；如需设计场景间转场，请直接查阅 hyperframes-animation/transitions/。
4. 针对高动态密度内容，应先阅读 references/motion-principles.md（高层级运动守则），再进入 hyperframes-animation 获取原子级运动规则。

文档路由表

脚本工具

• scripts/contrast-report.mjs —— 检查已渲染帧中的对比度警告。
• scripts/extract-audio-data.py —— 为音频响应式构图预先提取音频频段数据。
• scripts/package-loader.mjs —— 支持打包版创意工具链运行的辅助脚本。

contrast-report.mjs 优先从当前项目解析辅助依赖包，随后可回退至已打包的 HyperFrames 包版本。仅当在打包版 CLI/skill 安装环境之外运行本技能、且需显式锁定引导所用 HyperFrames 版本时，才需设置环境变量 HYPERFRAMES_SKILL_PKG_VERSION=。

请从仓库根目录下以显式路径方式运行，例如：

python skills/hyperframes-creative/scripts/extract-audio-data.py 

动画分析脚本（animation-map.mjs）位于 hyperframes-animation/scripts/ 目录中。

职责边界

• 不得覆盖 hyperframes-core 所定义的技术规则。
• 最小化技术构图无需依赖完整设计系统。
• 除非用户明确要求，或你已先行提出扩展建议并获确认，否则不得擅自添加额外场景、旁白、配乐、字幕或转场效果。
• 引用构图方案时应聚焦具体任务需求；对简单编辑无需通读全部参考文档。