全部技能 / 内容创作 / hyperframes-creative
内容创作 · heygen-com/hyperframes

hyperframes-creative

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

风险提醒：黄色 · 留意使用AI 侦查报告
作者 heygen-comGitHub heygen-com/hyperframes ↗Stars 48297许可 Apache-2.0（仓库根 LICENSE；GitHub API spdx Apache-2.0）commit b8328f9573
agent 宿主通常会约束 skill 执行权限；风险提醒为 AI 侦查观点，不构成质量或安全保证。第三方 skill 仅作拆解与展示，安装使用风险自负，版权归原作者。

1实现原理 · 为什么它能做到

SKILL.md 本身只是路由表/工作流骨架，创作知识全部下沉到 references/ 知识卡、palettes/ 与 frame-presets/ 资产里按需加载——agent 先读哪张卡由任务类型决定，避免一次读全。

skills/hyperframes-creative/SKILL.md
| Palette-specific color tokens | `palettes/*.md` |
注：Routing 表列出约 17 个主题（house-style/visual-styles/composition-patterns/video-composition/beat-direction/narration/typography/audio-reactive…），每个指向一个文件；Workflow 节规定 'read it first' 的对象。

对抗『网页感』是核心方法论：任何非平凡 composition 强制先读 house-style 与 video-composition 两张卡，前者定义『interpret the prompt, generate real content』与背景/前景层配方。

skills/hyperframes-creative/SKILL.md
Skipping these is the single biggest cause of generic, web-page-looking output. They are not optional rows in the routing table below — for anything beyond a one-line edit, open both before you choose colors or write HTML.
注：这里在做什么：用『概念生成』替代『字面 restyle』——house-style.md 的说明文本（'This is what turns a literal restyle into a _concept_'）直接写进了 SKILL.md 引言。

design-spec 解析有明确规范：frame.md → design.md → DESIGN.md 优先级，frontmatter token 是规范性的『品牌真值』，prose 只作判断上下文。

skills/hyperframes-creative/SKILL.md
If a project has a design spec, **read it first** and treat its frontmatter tokens as brand truth (colors, fonts, spacing, tone, constraints).
注：配套 references/design-spec.md：'Prose is context — the `##` sections (Overview, The Frame, Composition Rules, …) carry intent, when-to-use, and constraints the tokens can't hold.'

提供『拿来即用』的品牌起点资产：12 个 frame-presets（每个 FRAME.md + caption-skin.html + frame-showcase.html）与 9 个 palettes，工作流可把 FRAME.md 整份 adopt 为 frame.md。

skills/hyperframes-creative/SKILL.md
- Ready-made frame-preset (optional) → `frame-presets/` (adopt a `FRAME.md` as `frame.md`; see `references/design-spec.md`)
注：manifest 实测 frame-presets 含 biennale-yellow/blockframe/blue-professional/bold-poster/broadside/capsule/cartesian/cobalt-grid/code-editorial（自带 woff2 字体与 OFL 许可）/coral/creative-mode/daisy-days/editorial-forest 等目录。

可验证产出由 3 个脚本支撑：contrast-report.mjs 对渲染帧跑对比度审查（bootstrap @hyperframes/producer + sharp，headless 捕获采样帧）；extract-audio-data.py 用 numpy/ffmpeg 预抽音频 band 供 audio-reactive 构图。

skills/hyperframes-creative/SKILL.md
- `scripts/contrast-report.mjs` — inspect contrast warnings from rendered frames. - `scripts/extract-audio-data.py` — pre-extract audio bands for audio-reactive compositions. - `scripts/package-loader.mjs` — support script for bundled creative tooling.
注：contrast-report.mjs 实测 importPackagesOrBootstrap([@hyperframes/producer, @hyperframes/core, @hyperframes/core/compiler, sharp]) 并 createCaptureSession/captureFrameToBuffer——即真的驱动渲染捕获管道读帧，非提示词检查。

边界纪律写死在 SKILL.md：本技能不做动画（转 hyperframes-animation）、不覆盖 hyperframes-core 技术规则、不为小改动加戏、不一次性读所有卡。

skills/hyperframes-creative/SKILL.md
Do not override `hyperframes-core` technical rules. Do not require a design system for a minimal technical composition. Do not add extra scenes, narration, music, captions, or transitions unless the request calls for them or you first propose the expansion.
注：『本 skill 是刻意 non-animation』——与 hyperframes-animation（rules/blueprints/transitions/adapters）形成互补分工，防止知识越界导致 motion 规则不一致。

2核心能力

01设计规范（frame.md/design.md/DESIGN.md）读取、优先级裁决与 frontmatter 解析
0212 套即用 frame-preset 与 9 组 palette 的选用/adopt（品牌落地）
03构图模式库：PiP、text-behind-subject、title card、slide show、data-in-motion 等
04叙事与节拍：story doctrine、narration 脚本节奏、per-beat 方向与转场时机
05音频响应视觉的数据准备：预抽取音频 band 供运动绑定
06渲染后对比度/设计一致性审查（contrast-report、design-adherence）

3外部依赖

类型依赖
package@hyperframes/producer / @hyperframes/core / sharp（contrast-report.mjs 经 package-loader 按需 bootstrap）
clipython3 + numpy + ffmpeg（extract-audio-data.py 解码与频段分析）
networkGoogle Fonts metadata API（找字体时 agent 被指引 curl 查询）
networkGSAP CDN（frame-showcase/design-picker 预览 HTML 引 jsdelivr gsap；属产物运行依赖而非 skill 自身外发）

4风险提醒 风险提醒：黄色 · 留意使用

风险提醒：黄色 · 留意使用
  • 质量完全依赖宿主模型审美：知识卡是风格指导不是判定器，仍有产出平庸/过度设计的空间 — SKILL.md 用大量 'never/do not' 约束（不加戏、不默认设计系统）缓解，但最终判断在 agent。
  • 字体检索指引会向 fonts.google.com 发请求并写 /tmp 文件 — 内容公开、本地解析，无凭证；但在离线/受限环境会失败，agent 应回退到随包 woff2。
  • CDN 依赖进产物：composition 运行期拉 jsdelivr gsap，渲染需联网或本地 vendor — 属 hyperframes 生态常规做法（core minimal-composition 亦如此），离线渲染环境需预置。
风险提醒：黄色，留意使用。无凭证读取、无密钥接触，但存在两处公开网络外发：① typography.md 明确指引 agent `curl -s 'https://fonts.google.com/metadata/fonts'`（公开字体元数据，可选执行）；② contrast-report.mjs 缺依赖时经 package-loader 征求同意后从 npm 装 @hyperframes/producer/@hyperframes/core/sharp（官方/公开包，--ignore-scripts 抑制依赖生命周期脚本）。外发对象均可预期、不含 token，故未达 orange；按『有网络外发即按对象分级』取 yellow。脚本平时只读渲染帧/音频文件并本地输出。

5第二遍独立确认

  • [ok] 『脚本目录无网络外发』 — 对 hyperframes-creative 全部 .mjs/.py/.md 做 http(s) 扫描：命中仅 design-picker/showcase 的 jsdelivr gsap、caption-skin 的 gsap、typography.md 的 fonts.google metadata、design-picker.md 的 localhost 提示——无脚本级外发。
  • [ok] contrast-report.mjs 能力真实存在（非提示词） — 源码确认 bootstrap @hyperframes/producer/@hyperframes/core/sharp@0.34.5 并调用 createCaptureSession/captureFrameToBuffer/closeCaptureSession，输出 .hyperframes/contrast。
  • [ok] frame-presets/palettes 资产计数 — find 实测：frame-presets 含 12+ preset（每套 FRAME.md/caption-skin/frame-showcase，code-editorial 附字体与 OFL）、palettes 9 个 md、references 17 个 md，与 SKILL.md 路由表指向一致。
  • [discrepancy] 安全结论有无漏网（CDN 是否被误当无外发） — 第一遍初判『无网络』需修正：产物/预览 HTML 引用 jsdelivr gsap、字体检索指引 curl fonts.google.com——均非 skill 脚本自身外发而是 agent/运行时行为，已如实列入 external_deps 并据以定级 yellow（统一分档：存在公开网络外发即不低于 yellow）。
  • [ok] 与动画技能分工声称 — SKILL.md 引言与 Boundaries 两处声明 non-animation 并指向 hyperframes-animation；animation SKILL.md 亦反向声明 creative 管非动画方向，双向一致。

6结论

  • 把抽象审美（避免网页感、纵深、前景细节）拆成可照做的分层规则与『先读哪两张卡』的强制流程
  • 路由式知识库防止上下文爆炸，简单编辑只读一卡、复杂创作逐主题取用
  • 品牌落地有真实资产：frame-preset 整包 adopt + palette token + 自带字体许可文件，跨会话可复现
  • 验证闭环：渲染后对比度审查与 design-adherence 自检，把『好不好看』部分转成可测信号
    • 适合：适合 HyperFrames 任何非平凡 composition 的视觉/叙事/品牌阶段（multi-scene、有设计规范、有品牌要求）；是 hyperframes 路由下各创作工作流进入设计阶段时的必读知识层。
    不适合：不适合动画实现细节（转 hyperframes-animation）、HTML 技术契约（转 hyperframes-core）、素材获取（转 media-use）；不需要设计系统的最小技术 composition 也应跳过本技能直接写（SKILL.md 'Do not require a design system for a minimal technical composition'）。
    安装 agent 直装可复制
    ① 本站镜像 更新 2026-09-09
    方式 A · 人下载镜像包下载 hyperframes-creative.tar.gz
    sha256: c11a1f80c92e6741…
    方式 B · JSON 格式安装指南，复制给 agent
    安装指南
    agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
    ② 上游 GitHub · 原始来源
    能访问 GitHub？直接去上游安装（实时版，可能已更新）GitHub 原始 ↗
    本页镜像锁定 commit b8328f9573；上游为实时仓库。
    来源信息 GitHub 原始
    作者 / 仓库heygen-com / heygen-com/hyperframes
    原始 GitHubheygen-com/hyperframes ↗
    Stars48297
    最近推送2026-09-09
    本 skill commitb8328f9573
    许可Apache-2.0（仓库根 LICENSE；GitHub API spdx Apache-2.0）
    本站信息
    收录日期2026-09-06
    分类内容创作
    侦查报告2026-09-06 · 2 遍
    本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。