HyperFrames 设计
品牌、节奏、风格和构图指导。在 /hyperframes/core 的技术合同就绪后使用。
如需动效模式、场景蓝图、过渡效果和 CSS 标记效果，请使用 hyperframes-motion —— 此技能有意不涉及动画。
对于任何非平凡的构图，请先阅读以下两份内容——它们会覆盖网络直觉：
references/house-style.md—— “解读提示，生成真实内容”，懒惰默认列表，以及背景/前景层配方。这将文字上的重新样式转化为一个 概念。references/video-composition.md—— 视频媒体密度、比例、前景元数据（“制作而非生成”的细节：数据条、注册标记、等宽字体读数、每场景 8-10 个元素）。跳过这些是导致输出泛泛、网页风格的最主要原因。它们在下方的路由表中不是可选项——对于任何超过单行修改的任务，在选择颜色或编写 HTML 之前，请同时打开这两份文件。
工作流程
- 如果项目有设计规格，请先阅读它，并将它的 frontmatter 标记视为品牌真实来源（颜色、字体、间距、语气、约束）。要读取哪个文件（优先级
frame.md→design.md→DESIGN.md）以及如何解析（frontmatter = 规范，prose = 上下文）在references/design-spec.md中定义——请按照该文档解析并加载。 - 如果没有设计规格且用户要求视觉指导，请选择一条路线：
- 现成的帧预设（可选）→
frame-presets/（采用FRAME.md作为frame.md；参见references/design-spec.md） - 命名风格或氛围 →
references/visual-styles.md - 快速默认值 →
references/house-style.md
- 现成的帧预设（可选）→
- 对于多场景作品，在编写 HTML 之前规划节拍和节奏 →
references/beat-direction.md。对于场景过渡，跳转到hyperframes-motion/transitions/。 - 对于动效密集型作品，请阅读
references/motion-principles.md（高级护栏），然后前往hyperframes-motion了解原子规则。
路由
| 主题 | 读取 |
|---|---|
采用现成的帧预设作为 frame.md（可选） | frame-presets/ · references/design-spec.md |
| 默认调色板、动效、排版、懒惰默认值以质疑 | references/house-style.md |
| 命名风格预设、氛围到风格路由 | references/visual-styles.md |
| 调色板特定的颜色标记 | palettes/*.md |
| 构图模式——画中画、文字后置、标题卡、幻灯片 | 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 |
脚本
scripts/contrast-report.mjs—— 检查渲染帧中的对比度警告。scripts/package-loader.mjs—— 创意工具包的辅助脚本。
从仓库根目录运行，使用显式路径。
动画分析（animation-map.mjs）位于 hyperframes-motion/scripts/。
边界
- 请勿覆盖
/hyperframes/core的技术规则。 - 对于最小技术构图，不要要求设计系统。
- 除非请求要求或你首先提出扩展，否则不要添加额外场景、字幕或过渡效果。
- 保持配方引用针对特定任务；不要为简单编辑读取每个参考文件。