hyperframes-creative

HyperFrames Creative

品牌、节奏、风格、旁白和构图指导。请在落实 hyperframes-core 的技术规范后使用。

如需了解动态模式、场景蓝图、转场和 CSS 标记效果，请使用 hyperframes-animation——此技能有意不涵盖动画。

对于任何非简单的构图，请先阅读以下两份文档——它们优先于网页设计直觉：

• references/house-style.md——“解读提示词，生成真实内容”、容易采用的默认设置列表，以及背景／前景图层方案。这能将照搬字面要求的改版转化为一个 概念。
• references/video-composition.md——视频媒介的内容密度、比例和前景元数据（体现“精心制作，而非自动生成”的细节：数据条、定位标记、等宽字体读数，每个场景包含 8-10 个元素）。

跳过这些文档是产出通用、像网页的设计的最大原因。它们并非下方路由表中的可选项——除单行编辑外，任何工作都应先打开这两份文档，再选择颜色或编写 HTML。

工作流

1. 如果项目有设计规范，请先阅读，并将其 frontmatter 中的标记视为品牌规范（颜色、字体、间距、语气、约束）。应读取哪个文件（优先级为 frame.md → design.md → DESIGN.md），以及如何解析（frontmatter = 规范性要求，正文 = 背景信息），均在 references/design-spec.md 中统一定义——请按该文档查找并加载。
2. 如果没有设计规范，且用户要求视觉指导，请选择一种方案：
   • 即用型 frame 预设（可选）→ frame-presets/（将 FRAME.md 作为 frame.md 使用；参见 references/design-spec.md）
   • 指定风格或氛围 → references/visual-styles.md
   • 快速默认方案 → references/house-style.md
   • 交互式选择 → references/design-picker.md
3. 对于多场景工作，请在编写 HTML 前规划节拍和节奏 → references/beat-direction.md。有关场景转场，请参阅 hyperframes-animation/transitions/。
4. 对于动态效果较多的工作，请阅读 references/motion-principles.md（高层指导原则），然后前往 hyperframes-animation 查看具体规则。

路由

主题	阅读
将现成的 frame-preset 用作 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/narration.md
映射到动效的预计算音频频段	references/audio-reactive.md

脚本

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

从仓库根目录运行，并使用明确的路径，例如：

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

动画分析（animation-map.mjs）位于 hyperframes-animation/scripts/。

边界

• 不要覆盖 hyperframes-core 的技术规则。
• 极简技术构图无需强制使用设计系统。
• 除非请求明确要求，或你先提出扩展方案，否则不要添加额外场景、旁白、音乐、字幕或转场。
• 配方参考应与任务相关；简单编辑时不要阅读所有参考资料。