HyperFrames Creative
品牌、节奏、风格、旁白和构图指导。在 hyperframes-core 的技术合约就位后使用。
对于运动模式、场景蓝图、转场和 CSS 标记效果，请使用 hyperframes-animation —— 此技能特意不涉及动画。
在进行任何非平凡的构图之前，请先阅读以下两个文件 —— 它们将覆盖你的网页本能：
references/house-style.md—— “解释提示，生成真实内容”，懒加载默认列表，以及背景/前景层配方。这将使字面意义上的重新样式变成_概念_。references/video-composition.md—— 视频媒介的比例、深度和前景细节。它解释了如何避免空白的网页布局，而无需强制使用统一的元素数量。跳过这些是导致输出千篇一律的网页风格的最主要原因。它们在下方的路由表中不是可选项 —— 对于任何超过单行编辑的工作，在您选择颜色或编写 HTML 之前，请同时打开这两个文件。
工作流程
- 如果项目有设计规范，请先阅读它，并将其前置元数据令牌视为品牌真理（颜色、字体、间距、基调、约束条件）。应读取哪个文件（优先级
frame.md→design.md→DESIGN.md）以及如何解析它（前置元数据 = 规范性，正文 = 上下文）在references/design-spec.md中一次定义——根据该文档解析并加载。 - 如果没有设计规范且用户要求视觉指导，请选择一个路线：
- 现成的帧预设（可选）→
frame-presets/（采用FRAME.md作为frame.md；请参阅references/design-spec.md） - 命名风格或情绪 →
references/visual-styles.md - 快速默认值 →
references/house-style.md - 交互式选择 →
references/design-picker.md
- 现成的帧预设（可选）→
- 对于多场景工作，在编写 HTML 之前规划节拍和节奏 →
references/beat-direction.md。对于场景转场，跳转到hyperframes-animation/transitions/。 - 对于运动密集型工作，请阅读
references/motion-principles.md（高级别护栏），然后前往hyperframes-animation获取原子规则。
路由
| 主题 | 阅读 |
|---|---|
采用现成的帧预设作为 frame.md（可选） | frame-presets/ · references/design-spec.md |
| 默认调色板、运动、排版、待质疑的懒加载默认值 | references/house-style.md |
| 命名的风格预设，情绪到风格的路由 | references/visual-styles.md |
| 特定调色板的颜色令牌 | palettes/*.md |
| 构图模式 — PiP、文字后置主体、标题卡、幻灯片 | references/composition-patterns.md |
| 统计数据 / 信息图展示 | references/data-in-motion.md |
| 开放式提示的结构化扩展 | references/prompt-expansion.md |
| 视频媒介密度、比例、颜色、帧构图 | references/video-composition.md |
| 逐拍指导、节奏规划、转场时机 | references/beat-direction.md |
| 创作后的规范验证（颜色、字体、圆角、间距、深度） | references/design-adherence.md |
| 高级运动护栏和 GSAP 质量规则 | references/motion-principles.md |
| 字体选择、搭配、渲染视频类型的护栏 | references/typography.md |
| 故事原则 — 钩子语言、先价值后证据、以故事板作为提案、可溯源视觉元素 | references/story-spine.md |
| 脚本节奏、语调、开场白、数字发音 | references/narration.md |
| 预计算的音频频段映射到运动 | references/audio-reactive.md |
脚本
scripts/contrast-report.mjs—— 检查渲染帧中的对比度警告。scripts/extract-audio-data.py—— 为音频响应式构图预提取音频频段。scripts/package-loader.mjs—— 捆绑创意工具的支持脚本。
contrast-report.mjs 首先从当前项目解析辅助包，然后可以引导加载捆绑的 HyperFrames 包版本。仅在捆绑的 CLI/技能安装之外运行技能且需要显式固定引导版本时，设置 HYPERFRAMES_SKILL_PKG_VERSION=<version>。
从仓库根目录使用显式路径运行，例如：
python skills/hyperframes-creative/scripts/extract-audio-data.py <audio-file>
动画分析（animation-map.mjs）位于 hyperframes-animation/scripts/。
边界
- 不要覆盖
hyperframes-core的技术规则。 - 对于最小技术性构图，不需要设计系统。
- 除非请求要求或您首先提出扩展，否则不要添加额外的场景、旁白、音乐、字幕或转场。
- 保持配方引用针对特定任务；对于简单编辑，不要阅读每个引用。