Communitygithub.com

HyperFrames Studio 约定

定义 HyperFrames Studio 项目中构图、轨道布局和安全区域的规则,确保时间线清晰可编辑。同时包含新影片的策划、故事板和构建流程。

HyperFrames Studio 约定 是什么?

HyperFrames Studio 约定是一套专为 HyperFrames Studio 设计的技能,用于指导 AI 代理(如 Claude Code、Cursor 或 Codex)如何高效地协作构建视频项目。该技能的核心价值在于,通过严格的构图和轨道组织规则,确保每个项目在 Studio 中打开时,时间线简洁、可读且易于编辑。 它要求每个场景作为独立子构图存在,防止嵌套标记隐藏为无法编辑的单一轨道;所有字幕必须集中在一条轨道上,避免时间线被字幕组行填满;并且每个轨道只能包含一种元素类型(视频、图形、字幕、音频),方便用户按组选择和操作。此外,技能还规定了 90% 操作安全框和 80% 字幕安全框的安全区域标准。 在协作流程上,该技能定义了从解读用户意图、避免不必要的构建,到新影片的策划、故事板和构建的完整工作流。它特别强调:在不确定用户需求时,先对话再构建;将计划保存在项目文件(STORYBOARD.md)中,而非仅依赖聊天记录。最后,技能要求每次修改后运行 `hyperframes lint` 检查,并手动在 Studio 中验证时间线结构。该技能支持所有主要 AI 编辑代理和 CLI 环境。

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

在你喜欢的 AI 中提问

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

文档

插件安装: 在执行 setup 或 freshness 命令之前,如果此技能位于 HyperFrames 插件内部,请遵循插件执行规则。独立安装则保留下面的更新说明。

HyperFrames Studio 约定 是做什么的?

Studio 会为每个顶级元素绘制一个时间线行。遵循以下规则的项目会以简短、可读的时间线打开;不遵循的项目则会显示为一堆无法编辑的未标记行。以下是关于构建内容的约定。关于如何修改片段,请遵循 /hyperframes-core references/creator-editing-recipes.md,切勿为同一编辑发明不同的形式。

0. 先对话,再构建

在打开文件之前,先阅读消息。判断消息要求什么:

用户你
提出修改请求,无论多礼貌(“把标题放大”、“能删掉第三场吗?”)执行它。
对已完成的影片给出感受性反馈(“开场感觉不顺畅”、“时间不够长”)找出原因,修改可测量的值,说明反馈的含义以及修改的内容,并根据 /hyperframes-creative references/storyboard-recipe.md § 4 记录。
提出一个问题并且没有要求修改(“为什么标题会跳动?”)回答它。不修改任何内容。
说不要修改任何内容、保持现状、“只是想想”、“我们谈谈”不修改任何文件,即使是你注意到的修复。仅口头提供建议。
为这部影片带来一个想法但没有具体修改(“我希望结局更宏大”)提出修改方案并将其添加到计划中(见下文)。不修改任何构图文件。
要求制作一部新影片策划它(§ 5)。
批准一个计划(“开始构建”、“开始”)构建已批准的内容。

一条既提问又要求修改的消息,应同时给出答案和修改。只有当你无法判断它是否要求任何内容时,才进行对话:错误的答案浪费一条消息;错误的构建浪费一次长运行和一轮反馈。

对话回复:

  • 首先用简单的语言,用几句话直接回答。
  • 只问那些答案会改变影片的问题,每个问题附带一个推荐答案及其权衡(“30 秒适合 feed;60 秒为演示留出空间”)。
  • 当需要塑造一个想法时:对于新影片,请参考 /hyperframes references/pitch-round.md 中的方向;对于关于当前影片的想法,针对所述部分提供两个或三个选项。推荐其中一个。
  • 以下一步骤和启动步骤的词语结尾(“说‘开始构建’,我就开始”)。

将计划保留在项目中,而不仅仅是聊天记录中:下一条消息可能来自一个看不到此次会话的新 session。将计划添加到 STORYBOARD.md,方式与 /hyperframes-creative references/storyboard-recipe.md § 4 记录一轮反馈相同;切勿覆盖已锁定的帧。如果用户要求你完全不修改任何内容,则什么也不写:将计划放在回复中并提供保存。

1. 每个场景都是一个子构图

根构图只包含定时主机、媒体和音频。任何具有嵌套结构的场景(包含子元素的 div、带有副标题的标题、图表)都作为单独的文件,使用 data-composition-src 加载,连线方式见 references/sub-compositions.md。

留在根构图内部的嵌套标记不会成为自己的行。它会隐藏在一个无法分别裁剪或移动的单一不透明行中。

编码时,应假设存在一个结构检查器,会拒绝任何违反此规则的情况。

2. 一个字幕轨道

  • 所有字幕都位于一个轨道上:一个标记为 data-track-kind="captions" 的单一子构图主机(一个 data-track-index),按顺序承载所有字幕组。
  • 绝不为每个字幕组使用单独的行,也绝不将字幕与其他类型的轨道混合。
  • 字词计时规则不变:请参阅 /embedded-captions 和 caption_* 的 lint 规则。

3. 每个轨道一种元素类型

按类型分组,使每行成为一个用户可以整体选择、静音或拖动的单一元素。

类型data-track-kind
基础视频 / A-rollvideo(来自标签)
场景、覆盖层、图形graphics
字幕captions
音频(旁白、音乐、音效)audio(来自标签)

将 data-track-kind 放在子构图主机上。视频和音频类型来自标签,因此 <video> 和 <audio> 不需要该属性。为每种类型分配独立的 data-track-index;该数字仅用于显示,不会改变渲染的层叠顺序。请使用 CSS 进行分层。

4. 安全区域

任何标尺或安全框覆盖层都位于预览窗格中,永远不在构图内部,因此不要向 HTML 添加引导元素。 两种画幅(宽屏和竖屏)使用相同的两个安全框,即 Premiere 的默认值。预览切换开关会在每条边的中点绘制一个刻度标记以显示它们。来源:packages/studio/src/utils/previewSafeMargins.ts 中的 ACTION_SAFE_PERCENT 和 TITLE_SAFE_PERCENT。

框占帧的百分比每边内缩
操作安全框90%5%
字幕安全框80%10%
  • 安全边距:所有可见内容保持在操作安全框(90%)内,字幕和关键内容保持在字幕安全框(80%)内。
  • 双画面和 50/50 布局应使每半部分内容位于字幕安全框内。

5. 新影片:计划、故事板、构建

hyperframes-launches 中的影片是按此顺序制作的。每个步骤都有负责人;请遵循它,不要在此处重复。

步骤负责人
1. 简报/hyperframes references/intent-interview.md。在现有项目内部,只有同一影片的后续内容才保留:新版本或精简版,相同的工作流程和宽高比。询问其必须回答的问题,跳过 hyperframes init,切勿覆盖 BRIEF.md 或 STORYBOARD.md,为每个文件添加新的带日期部分,并在回复中说明。对于不同工作流程或宽高比的影片,则启动一个新项目,并在回复中说明。
2. 方向/hyperframes references/pitch-round.md
3. 故事板/hyperframes-creative references/storyboard-recipe.md
4. 构建简报路由到的工作流(/hyperframes § 2)及其自有参考
5. 反馈/hyperframes references/review-loop.md

以下内容是发布影片补充的,针对产品发布。当工作流选择的叙事弧另有规定时,以叙事弧为准。

  • 发布产品的真实素材。 在简报中要求屏幕录制,除非工作流本身能捕获它(例如通过 URL 录制网站),并在素材到达前用带标签的占位符保留其插槽。切勿近似模拟已发布产品的 UI。作为上下文展示的第三方工具(如聊天应用、编辑器),应从录屏中忠实重建。
  • 同一个世界。 相同的窗口或画布在节拍之间保持连续。逐帧检查每个切换:任何持续存在的元素不得跳动。
  • 光标和滚动内容。 光标或窗口本身滚动出去的内容,应从窗口或框架边缘离开,而不是在帧中间淡出。元素和文本交换应遵循工作流的 cut-catalog.md(如果有)。
  • 在命令或地址处特写结束, 使得标志落在仍在运动的素材中。
  • 在每次版本迭代中注明运行时长。 超出目标时长由用户决定,而非你。

检查你的工作

运行 hyperframes lint 并修复所有发现的问题。然后在 Studio 中打开项目,检查时间线是否显示一个基础行、每个场景主机对应一个行、一个字幕行以及音频行。

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]

相关技能