hyperframes-creative

插件安装： 在运行设置或更新检查命令之前，如果此技能位于 HyperFrames 插件中，请遵循插件执行规则。独立安装请遵循下方的更新说明。

HyperFrames Creative

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

有关运动模式、场景蓝图、转场和 CSS 标记效果，请使用 hyperframes-animation —— 此技能有意不涉及动画。

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

• references/house-style.md ——“解读提示词，创作真实内容”、惯于偷懒时的默认做法列表，以及背景／前景图层方案。这能将照字面改版转变为一个 概念。
• references/video-composition.md ——视频媒介的尺度、深度和前景细节。它解释了如何避免空洞的网页布局，同时不强加统一的元素数量。

跳过这些是产出泛泛的网页风格内容的最主要原因。它们不是下方路由表中可有可无的条目——除了一行文字的编辑外，进行任何工作前，都要先打开这两份文档，再选择颜色或编写 HTML。

工作流

1. 如果项目有设计规范，请先阅读，并将其 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 → 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/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 <SKILL_DIR>/scripts/extract-audio-data.py <audio-file>

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

边界

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