Communitygithub.com

HyperFrames Studio 慣例

此技能定義了 HyperFrames Studio 專案的結構與編輯慣例,確保時間軸清晰可讀、可供編輯,並遵循標準化的工作流程。

HyperFrames Studio 慣例 是什麼?

這份技能文件定義了 HyperFrames Studio 專案的結構與編輯慣例,專為 HeyGen 的 HyperFrames 生態系統設計。其主要目的是確保以 HyperFrames 格式建立的影片時間軸保持簡短、可讀且可編輯,防止出現難以管理的「無標籤行牆」。技能規定了嚴格的項目結構規則:每個場景都必須是獨立的子合成,所有字幕都集中在單一軌道上,且每條軌道只能包含一種元素類型(影片、圖形、字幕或音訊)。它還定義了安全區域(90% 動作安全、80% 標題安全)以及與使用者輸入互動的精確對話協定,區分實際編輯、創意討論、提問和新專案創作。技能整合了多個參考文件,包括用於初始規劃的 `intent-interview.md`、用於方向探索的 `pitch-round.md`、用於分鏡的 `storyboard-recipe.md` 以及用於審查循環的 `review-loop.md`。它支援 HeyGen Launch 影片的特定慣例,例如使用真實產品錄製畫面、保持同一世界的一致性,以及處理游標和滾動內容。工作流程以 `hyperframes lint` 驗證結尾,確保在 Studio 中開啟前符合所有結構規則。

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

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

插件安裝: 在執行設定或更新命令之前,當此技能位於 HyperFrames 插件內部時,請遵循插件執行規則。獨立安裝則保留下列更新說明。

HyperFrames Studio 慣例 是做什麼的?

Studio 會為每個頂層元素繪製一條時間軸行。遵循以下規則的專案會以簡短、可讀的時間軸開啟;不符合規則的專案則會以一大片無法編輯的無標籤行牆開啟。以下是有關建構內容的慣例。如需了解如何更改片段,請遵循 /hyperframes-core 的 references/creator-editing-recipes.md,切勿發明同一編輯的不同形式。

0. 先溝通,再建構

在開啟檔案前,請先閱讀訊息。判斷對方要求的是什麼:

對方您
提出一個變更要求,無論多客氣(「把標題放大」、「可以剪掉第三幕嗎?」)執行它。
對已完成的影片給予感覺上的反饋(「開場感覺很突兀」、「時間不夠長」)找出原因,改變可衡量的東西,說明反饋的意涵以及改動了什麼,並根據 /hyperframes-creative 的 references/storyboard-recipe.md § 4 記錄下來。
提出問題但沒有指明要變更什麼(「為什麼標題會跳動?」)回答問題。不更改任何內容。
說不要更改任何東西、保持現狀、「只是想想」、「我們談談」不要更改任何檔案,即使是你發現的錯誤也不要改。用言語提出建議。
為這部影片帶來一個想法,但沒有具體的變更方案(「我希望結局感覺更盛大」)提出變更方案並將其加入計畫中(見下方)。不要更改任何合成檔案。
要求製作一部新影片進行規劃(§ 5)。
批准一個計畫(「開始建構」、「去做吧」)建構被批准的內容。

一條既提出問題又指明變更的訊息,會同時得到答案和變更。只有當你無法判斷對方是否有任何要求時,它才是一場對話:一次錯誤的回答只會浪費一條訊息;一次錯誤的建構則會浪費一次長時間的執行和一輪反饋。

對話回覆:

  • 先用簡潔的幾句話回答問題。
  • 只問那些答案會改變影片方向的問題,並為每個問題附上建議答案及其取捨(「30 秒適合動態消息;60 秒則為展示留下空間」)。
  • 當需要構思一個想法時:對於新影片,請遵循 /hyperframes 的 references/pitch-round.md 中的方向指引;對於關於當下這部影片的想法,則針對所提及的部分提供兩到三個選項。推薦其中一個。
  • 以下一步驟和一個能啟動該步驟的詞彙作結(例如「說『開始建構』,我就會開始」)。

將計畫保留在專案中,而不僅僅是在對話中:下一條訊息可能開啟一個無法看到當前對話紀錄的新工作階段。將計畫加入 STORYBOARD.md,方式如同 /hyperframes-creative 的 references/storyboard-recipe.md § 4 記錄一輪反饋;切勿覆蓋已鎖定的影格。如果對方要求你完全不要更改任何東西,就不要寫入任何內容:在回覆中提出計畫,並提議將其儲存。

1. 每個場景都是一個子合成

根合成只能容納計時主機、媒體和音訊。任何具有巢狀結構的場景(包含子元素的 div、帶有副標題的標題、圖表)都應是其獨立的檔案,透過 data-composition-src 載入,並參考 references/sub-compositions.md 中的接線方式。

留在根合成內部的巢狀標記並不會自成一行。它會隱藏在一個無法單獨修剪或移動的不透明行內。

撰寫時應假設存在一個結構檢查工具,會拒絕任何違反此規則的內容。

2. 單一字幕軌道

  • 所有字幕都位於同一條軌道上:一個單一的子合成主機(一個 data-track-index),標記為 data-track-kind="captions",並按順序承載所有字幕組。
  • 切勿每個字幕組使用一行,也不要將字幕與其他類型的內容混合在同一條軌道上。
  • 時間碼規則保持不變:請參閱 /embedded-captions 和 caption_* 檢查規則。

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

以下是 Launch 影片為產品發佈所增加的慣例。若工作流程選擇的敘事弧線有不同規定,則以工作流程為準。

  • 使用發佈產品的真實畫面。 在簡報中要求對方提供螢幕錄製,除非工作流程本身可以自動擷取(例如從 URL 擷取網站),並先以標記過的佔位符保留其位置,直到收到素材為止。切勿近似描繪發佈產品的 UI。作為上下文顯示的第三方工具(例如聊天應用程式、編輯器)則應根據錄製畫面忠實重建。
  • 同一世界。 同一個視窗或畫布應在不同節拍間持續存在。仔細檢查每一個剪輯點:任何持續出現的元素都不能跳動。
  • 游標和滾動內容。 游標,或視窗本身會滾動出去的內容,應從視窗或影格邊緣離開,而不是在畫面中間淡出。元素和文字切換應遵循工作流程的 cut-catalog.md(如果有的話)。
  • 以命令或網址作為結尾, 而 Logo 應落在仍在移動的畫面中。
  • 在每一個版本中註明執行時間。 執行時間超過目標時間是由對方決定,而非由您決定。

檢查您的工作

執行 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]

相關技能