🎨 hyperframes-creative插件简介

HyperFrames 是 HeyGen 开源的一套“写 HTML、渲染视频”框架，而 hyperframes-creative 是其中专门负责非动画创意方向的技能。它不处理动效规则，那些由 hyperframes-animation 负责。它管的是视频“看起来像什么、听起来像什么”。

具体能力包括以下几块：

  • 设计规范解析：读取并执行项目中的 frame.md 或 design.md，把颜色、字体、间距、圆角、深度等设计令牌当作“品牌真理”来对待。
  • 调色板与排版决策：从内置的帧预设（如 Monochrome、Coral、Blue Professional、Editorial Forest 等）中选择合适的色阶和字体系统，或根据品牌要求生成新的配色方案。
  • 叙事脚本与旁白规划：为视频撰写旁白文本，规划信息在时间轴上的释放节奏，确保观众不会在一秒内被塞太多东西。
  • 节拍规划与音频响应：根据背景音乐或旁白的节拍点，安排画面元素的出场时机，让视觉和音频形成呼应。
  • 设计合规校验：视频构建完成后、预览之前，逐项核对成品是否遵循了设计规格——颜色对不对、字体是不是指定的那个、间距有没有跑偏。如果项目没有设计规格，就核对调色板一致性和“惰性默认值”。

它有一条明确的边界：不碰动效。场景蓝图、转场、CSS 标记效果这些交给 hyperframes-animation，两者配合使用才能出完整作品。

📦 第一次怎么安装

hyperframes-creative 是 HyperFrames 技能集中的一个，安装走的是 skills 注册表。前提是你已经装好了 Node.js 环境，并且有一个支持技能的 AI 编码代理（后面会列出具体工具）。

方式一：只装这一个技能

如果你只想先试试 creative 这个技能，运行：

npx skills add heygen-com/hyperframes --skill hyperframes-creative

这是最轻量的安装方式，只拉取 hyperframes-creative 本身。

方式二：装核心技能集

更推荐的做法是把核心技能一起装上，这样 AI 才知道怎么路由不同类型的视频请求：

npx hyperframes skills update

这个命令安装的是核心集，包括 /hyperframes 路由、hyperframes-core（组合契约）、hyperframes-creative（创意方向）、hyperframes-animation（动画）和 media-use（媒体预处理）。装完之后在 Claude Code 中需要重启会话，技能才会注册为斜杠命令。

如果安装后发现命令没生效，可以试一下 npx hyperframes skills update 的变体——它直接从 main 分支拉取最新版本，比 skills add 走的注册表缓存更新更快。

🚀 装好之后怎么用

hyperframes-creative 不是那种“点一下按钮就出结果”的工具。它的使用方式是在对话中让 AI 加载这个技能，然后由 AI 调用它来做创意决策。

在 Claude Code / Cursor 等代理中使用

安装完成后，直接向 AI 描述你要的视频，让它以 /hyperframes 开头来触发路由。例如：

Using /hyperframes, create a 15-second vertical product intro for a meditation app. Audience: people who have trouble falling asleep. Style: quiet, spacious, warm.

这时候 AI 会先走 router 判断这是什么样的视频任务，然后按需加载 hyperframes-creative 来处理创意方向部分。你不需要显式地说“请加载 creative 技能”，router 会在需要的时候自己拉取。

直接调用 creative 技能

如果你已经明确知道只需要创意方向层面的工作（比如已经有了 HTML 结构，只想调品牌视觉），可以直接引用：

/hyperframes-creative 帮我为这个视频项目确定配色和字体系统，设计规范在 frame.md 里。

MCP 托管连接器方式

如果你不想在本地装 CLI，也可以用 HyperFrames 的托管 MCP 连接器。MCP 地址是：

https://mcp.heygen.com/mcp/hyperframes/

在 Claude、ChatGPT 或 Grok 的设置里找到 Connectors，添加自定义连接器，填入上面的地址，完成 HeyGen 登录授权，然后在对话中启用即可。这种方式下你在对话里描述视频需求，MCP 连接器会调用 HyperFrames 的创建和渲染工具，创意方向的决策同样由 creative 技能在后端处理。需要注意，托管路径目前是 beta 状态，功能和额度可能变动。

🎯 主要应用场景

品牌一致性维护。 如果一个团队有统一的设计规范（frame.md / design.md），hyperframes-creative 会确保每个视频都严格遵循这套规范来选色、排版、控制节奏。它把设计文件里的 frontmatter 令牌当作硬约束，而不是“建议”。适合品牌团队批量产出视频时保持视觉统一。

无设计规范的快速起步。 项目里没有设计文件的时候，creative 技能会引导 AI 从内置的帧预设中选择一套。比如做严肃内容选 Monochrome（单色阶、排版驱动），做咨询类内容选 Blue Professional，做编辑风格选 Editorial Forest。这些预设自带完整的色阶和对比度审计脚本，可以验证 WCAG 可读性。

旁白脚本与节奏设计。 对于需要旁白的产品介绍、教程类视频，creative 技能负责写 narration 文本并规划“信息什么时候出现”。它关注的不是“画面上有什么”，而是“观众在哪个时间点应该理解什么”。

音频反应视觉的节拍对齐。 如果你有一段背景音乐，想让画面元素跟着节拍跳动或切换，creative 技能负责把音乐的时间轴映射到画面的出场节奏上。实际的关键帧和过渡实现由 animation 技能完成，但“在哪一拍做什么”的规划属于 creative 的职责。

💡 使用技巧与快捷键

先读设计文件，再动笔。 如果项目里有 frame.md 或 design.md，AI 应该在做出任何创意决策之前先读它。frontmatter 里的颜色、字体、间距令牌是品牌真理，不是参考。在提示词里加一句“先读 frame.md 再开始设计”能避免 AI 凭感觉选色。

creative 和 animation 不要混着用。 这两个技能的职责边界很清晰。你让 creative 去处理转场效果，它不会给你好结果——那是 animation 的地盘。反过来，让 animation 去决定字体和配色，也不是它的强项。正确的分工是：先用 creative 定好视觉框架，再用 animation 填充动效。

Studio 中的常用快捷键。 如果你在 HyperFrames Studio 中手动调整创意方向相关的元素（比如检查排版间距、颜色对比度），这几个快捷键会用到：

  • Space：播放/暂停
  • G：切换画布网格，对齐元素时很有用
  • Command/Ctrl + 1：打开 Compositions 面板
  • Command/Ctrl + 2：打开 Assets 面板
  • Option/Alt + drag：移动整条动画路径
  • Shift + drag 缩放柄：等比例缩放

配合 design adherence 做发布前检查。 视频构建完成后、正式预览或渲染之前，让 AI 跑一遍设计合规校验。有 design spec 的项目就逐项核对颜色、字体、圆角、间距；没有 spec 的项目就检查调色板一致性，并排查“惰性默认值”——那些 AI 在没有明确指令时随手填的通用颜色和字体。

利用内置帧预设节省时间。 HyperFrames 仓库里的 frame-presets 目录包含多套即用型设计系统，每套都有完整的 FRAME.md 规范文档。让 AI 先看看有哪些预设可用，比从零开始调配色快得多。这些预设的规格文档本身就是给 agent 读的，逐字段可解析。

🧩 适合哪些 AI 工具

hyperframes-creative 通过 vercel-labs/skills 注册表分发，任何支持 Agent Skills 的编码工具都可以安装使用。官方明确验证过的工具包括：

  • Claude Code：安装后技能注册为斜杠命令，重启会话即可使用。可以用 /hyperframes-creative 直接引用。
  • Cursor：在 Cursor 的 Agent 模式中可用，skills 会自动加载。
  • Gemini CLI：支持 skills 注册表的命令行代理。
  • Codex：HyperFrames 专门提供了 Codex 插件打包流程（bun run package:codex-plugin），生成可上传的插件压缩包。
  • Google Antigravity：支持 skills 的 AI 编码环境。
  • GitHub Copilot CLI：同样在支持列表中。

另外，如果不使用本地技能，也可以通过 HyperFrames MCP 托管连接器在 Claude、ChatGPT、Grok 的对话中使用。这种方式下 creative 技能在服务端被调用，用户侧只需要 HeyGen 账号和连接器授权。托管路径目前是 beta，额度、功能和计划要求可能变化，正式使用前建议确认账号额度。