Home / All Skills / Content & Media Creation / hyperframes-creative
English (EN)简体中文 (ZH)日本語 (JA)
Content & Media Creation · 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`.

L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandInstall DepsNetwork AccessWrite FileDual-pass Audit
Author heygen-comGitHub heygen-com/hyperframes ↗Stars 48297License Apache-2.0（仓库根 LICENSE；GitHub API spdx Apache-2.0）Commit b8328f9573
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

SKILL.md serves solely as a routing table/workflow skeleton; all creative knowledge is offloaded to references/ knowledge cards, palettes/, and frame-presets/ assets loaded on demand—the agent determines which card to read first based on task type, avoiding bulk loading.

skills/hyperframes-creative/SKILL.md
| Palette-specific color tokens | `palettes/*.md` |
The routing table lists ~17 topics (house-style/visual-styles/composition-patterns/video-composition/beat-direction/narration/typography/audio-reactive…), each pointing to a file; the Workflow section prescribes what to 'read it first'.

Combating a 'webpage feel' is the core methodology: any non-trivial composition mandates reading both house-style and video-composition cards first, where the former defines 'interpret the prompt, generate real content' alongside background/foreground layer recipes.

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.
What happens here: replacing 'literal restyle' with 'concept generation'—the explanatory prose from house-style.md ('This is what turns a literal restyle into a _concept_') is directly integrated into the SKILL.md introduction.

Design-spec parsing follows strict precedence: frame.md → design.md → DESIGN.md, where frontmatter tokens serve as normative 'brand truth' and prose only provides contextual nuance.

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).
Backed by 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.'

Provides 'ready-to-use' brand starting assets: 12 frame-presets (each containing FRAME.md + caption-skin.html + frame-showcase.html) and 9 palettes; the workflow allows adopting FRAME.md in its entirety as 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 inspections reveal frame-presets directories including biennale-yellow/blockframe/blue-professional/bold-poster/broadside/capsule/cartesian/cobalt-grid/code-editorial (bundled with woff2 fonts and OFL licenses)/coral/creative-mode/daisy-days/editorial-forest, etc.

Verifiable outputs are backed by 3 scripts: contrast-report.mjs runs contrast auditing against rendered frames (bootstrapping @hyperframes/producer + sharp to headless-capture sampled frames); extract-audio-data.py uses numpy/ffmpeg to pre-extract audio bands for audio-reactive compositions.

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 actually executes importPackagesOrBootstrap([@hyperframes/producer, @hyperframes/core, @hyperframes/core/compiler, sharp]) and calls createCaptureSession/captureFrameToBuffer—driving a real render-capture pipeline to inspect frames rather than running prompt-based checks.

Boundary discipline is strictly hardcoded in SKILL.md: this skill does not handle animations (delegate to hyperframes-animation), does not override hyperframes-core technical rules, avoids unnecessary embellishments for minor edits, and never reads all cards at once.

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.
'This skill is intentionally non-animation'—forming a complementary division of labor with hyperframes-animation (rules/blueprints/transitions/adapters) to prevent knowledge overlaps and motion rule inconsistencies.

2Core Capabilities

01Design specification (frame.md/design.md/DESIGN.md) loading, precedence resolution, and frontmatter parsing
02Selecting/adopting 12 ready-to-use frame-presets and 9 palette sets (brand implementation)
03Composition pattern library: PiP, text-behind-subject, title card, slide show, data-in-motion, etc.
04Narrative and pacing: story doctrine, narration script pacing, per-beat creative direction, and transition timing
05Data preparation for audio-reactive visuals: pre-extracting audio frequency bands for motion binding
06Post-rendering contrast and design adherence review (contrast-report, design-adherence)

3External Dependencies

KindDependency / Endpoint
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 自身外发）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Graded/per-use authorization, sandbox recommended
For Administrators
Approval workflow, rollback support, full audit
Evidence & Triggers (File Paths & Excerpts)
  • scripts/: Executes local script or command: node skills/hyperframes-creative/scripts/contrast-report.mjs (captures and analyzes rendered frames locally; handles missing dependencies)
  • scripts/ 或 SKILL.md: Declares dynamic installation of external language package dependencies
  • 网络端点: Declares external network access: fonts.google.com/metadata/fonts (optional curl guided by agent, saved locally to /tmp JSON)
  • 本地工作目录: File read/write and artifact output: creative deliverables: frame.md/design.md/DESIGN.md and composition HTML (agent writes project files per workflow)
Audit Notes: No credential reading or secret exposure, but contains two public outbound network paths: ① typography.md explicitly instructs the agent to run `curl -s 'https://fonts.google.com/metadata/fonts'` (public font metadata, optional execution); ② contrast-report.mjs installs @hyperframes/producer/@hyperframes/core/sharp from npm via package-loader upon user consent when dependencies are missing (official/public packages, --ignore-scripts suppresses lifecycle scripts). Outbound targets are predictable and contain no tokens, thus not reaching orange; rated yellow according to 'any network egress graded by destination'. Scripts routinely operate strictly by reading rendered frames/audio files and outputting locally.

5Second-Pass Verification

  • [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 管非动画方向，双向一致。

6Verdict & Scenarios

  • Deconstructs abstract aesthetics (avoiding webpage look, depth layering, foreground details) into actionable layered rules and a mandatory 'which two cards to read first' workflow
  • Routing-based knowledge architecture prevents context bloat: single-card reading for minor edits, topic-by-topic retrieval for complex creations
  • Concrete assets for brand implementation: full-bundle frame-preset adoption + palette tokens + bundled font licenses, ensuring cross-session reproducibility
  • Verification closed-loop: post-rendering contrast audits and design-adherence checks translate subjective aesthetics into measurable validation signals
    • Best for: Suitable for the visual, narrative, and branding stages of any non-trivial HyperFrames composition (multi-scene, design specs, branding requirements); acts as a required knowledge layer when creative workflows under hyperframes routing enter the design phase.
    Not for: Not suitable for animation implementation details (delegate to hyperframes-animation), HTML technical contracts (delegate to hyperframes-core), or asset sourcing (delegate to media-use); minimal technical compositions that do not require a design system should also bypass this skill and implement directly (SKILL.md: 'Do not require a design system for a minimal technical composition').
    Install Agent-Ready
    ① Verified Mirror 2026-09-09
    Option A · Direct DownloadDownload hyperframes-creative.tar.gz
    sha256: c11a1f80c92e6741…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit b8328f9573.