超级帧（Hyperframes）
v1.0.0在 HyperFrames HTML 中创建视频组合、动画、标题卡、叠加层、字幕、配音、音频反应视觉效果和场景过渡。使用时，构建任何基于 HTML 的视频内容、添加与音频同步的字幕或字幕、生成文本转语音的旁白、创建音频反应动画（节拍同步、发光、脉动由音乐驱动）、添加动画文本突出显示（标记扫描、手绘圆圈、爆发线、潦草、草图）、或在场景之间添加过渡（交叉渐入、擦除、揭示、着色器过渡）。涵盖组合创作、时序、媒体和完整的视频制作工作流程。有关开发循环 CLI 命令（init、lint、inspect、preview、render），请参阅 hyperframes-cli 技能；有关资产预处理命令（tts、transcribe、remove-background），请参阅 hyperframes-media 技能。
by 运行时依赖
安装命令
点击复制技能文档
HyperFrames HTML 是视频的真实来源。一个组合是一个带有数据-* 属性的 HTML 文件，用于计时，GSAP 时间线用于动画，CSS 用于外观。框架处理剪辑可见性、媒体播放和时间线同步。
方法发现（仅限探索性请求） 对于开放性请求（“为我制作一个产品发布视频”、“为我们的品牌创造一些东西”），用户尚未提交方向，在选择颜色之前了解意图： 受众 — 谁观看这个？开发人员？高管？普通消费者？ 平台 — 它在哪里播放？社交（15s）、网站英雄、产品演示、内部？ 优先级 — 什么最重要？动作质量？内容准确性？品牌忠诚度？速度？ 变化 — 用户是否想要选项，还是单个最佳拍摄？ 对于具体请求（“添加标题卡”、“修复场景 3 的计时”），跳过发现。 对于探索性请求，考虑提供 2-3 个有意义的变化 — 不仅仅是颜色交换，还有不同的节奏、能量水平或结构方法。一个安全/预期的，一个雄心勃勃的。不强制执行 — 这是一个在适当时机可用的工具。
步骤 1：设计系统 如果项目中存在 design.md 或 DESIGN.md 文件，请先阅读它（检查两种大小写 — 它们是 Linux 上的不同文件）。这是品牌颜色、字体和约束的真实来源。使用其确切值 — 不要发明颜色或替换字体。任何格式都可以（YAML 前置内容、散文、表格 — 只需提取值）。如果它命名了您无法在本地找到（没有 fonts/ 目录和 .woff2 文件，不是内置字体）的字体，请在写入 HTML 之前警告用户：“design.md 指定 [字体名称] 但找不到字体文件。请将 .woff2 文件添加到 fonts/ 或我将回退到 [最接近的内置替代品]。” 如果不存在 design.md 文件，请为用户提供选择： 用户命名了样式或情绪？→ 阅读 visual-styles.md 以获取 8 个命名预设。选择最接近的匹配。 想要浏览选项？→ 运行设计选择器：阅读 references/design-picker.md 以获取完整的工作流程。这将提供一个可视化的选择器页面。用户在浏览器中配置情绪、调色板、字体和动作，然后复制生成的 design.md 并将其粘贴回对话中。 想要跳过并快速完成？→ 询问：情绪、浅色或深色、任何品牌颜色/字体？然后从 house-style.md 中选择一个调色板。 design.md 定义了品牌。它不定义视频组合规则。这些规则来自 references/video-composition.md 和 house-style.md。以视频适当的比例使用品牌颜色 — 不是网页 UI 不透明度。
步骤 2：提示扩展 始终对每个组合运行（除了单场景作品和琐碎的编辑）。此步骤将用户的意图与 design.md 和 house-style.md 相结合，并生成每个下游代理以相同方式读取的中间结果。阅读 references/prompt-expansion.md 以获取完整的过程和输出格式。
步骤 3：计划 在编写 HTML 之前，高层次思考： 什么 — 观众应该体验什么？确定叙事弧、关键时刻和情感节拍。 结构 — 有多少组合，哪些是子组合，哪些是内联组合，哪些轨道承载什么（视频、音频、叠加层、字幕）。 节奏 — 在实施之前声明场景节奏。哪些场景是快速击中，哪些是保持，着色器在哪里着陆，能量在哪里达到峰值。命名模式：快速-快速-缓慢-快速-着色器-保持。 阅读 references/beat-direction.md 以获取节奏模板。 计时 — 哪些剪辑驱动持续时间，过渡在哪里着陆，节奏是什么。 布局 — 先构建最终状态。请参阅下面的“布局在动画之前”。 动画 — 然后使用以下规则添加动作。构建所请求的内容。请求“标题卡”不是请求“标题卡 + 3 个支持场景 + 环境音乐 + 字幕”。 每个场景、每个元素、每个补间动画都应获得其位置。如果其他场景或元素真正改善了作品，请提出它们 — 不要添加它们。 对于小的编辑（修复颜色、调整计时、添加一个元素），跳过到规则。
在编写任何组合 HTML 之前 — 验证您是否从步骤 1 中获得了视觉身份。如果您正在尝试 #333、#3b82f6 或 Roboto，则跳过了它。
布局在动画之前 将每个元素放置在其最可见时刻的位置 — 完全进入、正确放置且尚未退出的帧。首先将其写为静态 HTML+CSS。没有 GSAP。 为什么这很重要：如果您将元素放置在其动画开始状态（屏幕外、缩放到 0、不透明度 0），并将其调整到您认为它应该着陆的位置，您正在猜测最终布局。在视频渲染之前，重叠是不可见的。通过首先构建最终状态，您可以在添加任何动作之前看到和修复布局问题。
该过程 确定每个场景的英雄帧 — 最多元素同时可见的时刻。这是您要构建的布局。 为该帧编写静态 CSS。 .scene-content...