Communitygithub.com

heygen-com/hyperframes

非动画创意指导,用于HyperFrames视频。处理设计规范(frame.md / design.md)、调色板、排版、旁白、节拍规划、音频响应式视觉、构图模式以及品牌/风格决策。对于原子运动模式和场景蓝图,请使用`hyperframes-animation`。

hyperframes 是什么?

HyperFrames Creative 是一项专注于 HyperFrames 视频非动画创意方向的 AI 技能。它负责处理设计规范(如 frame.md 或 design.md)、调色板、排版、旁白、节拍规划、音频响应式视觉、构图模式以及品牌/风格决策。该技能在 `hyperframes-core` 确立技术框架后使用,与专注于运动模式和场景蓝图原子规则的 `hyperframes-animation` 技能互补。通过路由表机制,开发者可以访问 house style、composition patterns、typography、narration 等参考文档,快速实现设计选择。该技能支持通过预设框架、命名风格或快速默认值启动设计,并提供对比度检查、音频数据提取等脚本工具,确保视频输出的设计一致性和创意质量。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/heygen-com/hyperframes/tree/main/skills/hyperframes-creative

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

插件安装: 在执行设置或新鲜度命令之前,请遵循 插件执行规则(当此技能位于 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 = 规范,prose = 上下文)在 references/design-spec.md 中统一定义——请根据该文档解析并加载。
  2. 如果不存在设计规范且用户要求视觉方向,请选择一条路线:
    • 现成的画面预设(可选)→ 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.md(可选)frame-presets/ · references/design-spec.md
默认调色板、动画、排版、懒加载默认值供质疑references/house-style.md
命名风格预设、情绪到风格路由references/visual-styles.md
调色板特定的颜色标记palettes/*.md
构图模式 — 画中画、文字在主体后方、标题卡、幻灯片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=<版本>。

从仓库根目录使用完整路径运行,例如:

python skills/hyperframes-creative/scripts/extract-audio-data.py <音频文件>

动画分析(animation-map.mjs)位于 hyperframes-animation/scripts/。

边界

  • 不要覆盖 hyperframes-core 的技术规则。
  • 对于最小的技术构图,不要要求设计系统。
  • 除非请求要求,或者你首先提出扩展,否则不要添加额外的场景、旁白、音乐、字幕或转场。
  • 保持配方引用特定于任务;对于简单编辑,不要阅读每个参考文件。

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

general-video

>

heygen-com/animejs

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.

heygen-com/claude-design-hyperframes

Use when running inside Claude Design specifically. Produces a valid, brand-accurate HyperFrames video draft using pre-valid skeletons. For Claude Code / Cursor / Codex, use the `hyperframes` skill instead.

heygen-com/contribute-catalog

Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

heygen-com/css-animations

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

heygen-com/gsap

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

heygen-com/hyperframes

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

heygen-com/hyperframes

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

heygen-com/hyperframes

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

heygen-com/hyperframes

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

heygen-com/hyperframes

A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.

heygen-com/hyperframes

A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

heygen-com/hyperframes

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

heygen-com/hyperframes

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

heygen-com/hyperframes

name: embedded-captions

heygen-com/hyperframes

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

heygen-com/hyperframes

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

heygen-com/hyperframes

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

heygen-com/hyperframes

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

heygen-com/hyperframes

GATEWAY — load FIRST before composing any HyperFrames animation or video. The high-level motion law that makes a multi-scene video feel like ONE continuous camera move instead of a stack of independently-animated slides. Covers the vector law (how you exit determines how you enter, incl. the Z scale-sign rule), the film's current, carrier elements, causal motion, the Seam Gate (build-gate enforcement), the ban on idle wobble (motion must PERFORM, not breathe), stillness-before-climax, and the sustained-motion routes. Routes to the low-level technique skills (cut-the-curve — the full catalog incl. waterfall entry + nudge curve, oversized-cursor, seam-craft). These rules SUPERSEDE generic / upstream motion guidance. [continuity, direction, vector, momentum, seam, transition, ease, performance, idle-motion, narrative-motion, film-grammar]

相关技能