Communitygithub.com

heygen-com/hyperframes

HyperFrames 影片的非動畫創意指導。用於處理設計規格(frame.md / design.md)、調色板、字體、旁白、節奏規劃、音頻可視化、構圖模式以及品牌/風格決策。如需原子動畫模式和場景藍圖,請使用 `hyperframes-animation`。

hyperframes 是什麼?

此技能專注於 HyperFrames 影片的非動畫創意方向,在技術合約(來自 `hyperframes-core`)就緒後使用。它處理設計規格(`frame.md` / `design.md`)、調色板、字體、旁白、節奏規劃、音頻可視化反應、構圖模式以及品牌與風格決策。此技能特別強調遵循 `references/house-style.md` 和 `references/video-composition.md` 中的指導方針,以避免產生類似普通網頁的輸出。它支援多種平台,包括 Claude Code、Cursor 和 Codex,並提供一個結構化的工作流程,用於讀取設計規格、選擇視覺風格、規劃場景節奏以及確保設計一致性。此外,它還包含用於對比度檢查、音頻數據提取和套件載入的實用腳本。

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

在你喜歡的 AI 中提問

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

說明文件

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

HyperFrames 創意

品牌、節奏、風格、旁白和構圖指導。在用於 hyperframes-core 的技術合約就緒後使用。

如需動畫模式、場景藍圖、轉場和 CSS 標記效果,請使用 hyperframes-animation — 此技能刻意不包含動畫。

對於任何非平凡的構圖,請先閱讀以下兩個文件 — 它們會覆蓋網頁直覺:

  • references/house-style.md — 「解讀提示,生成真實內容」,懶人預設清單,以及背景/前景圖層配方。這是將字面意義的重新樣式轉變為 概念 的關鍵。
  • references/video-composition.md — 影片媒介的尺度、深度和前景細節。它解釋了如何避免空洞的網頁佈局,同時不強加通用的元素數量。

跳過這兩者是導致輸出看起來像普通網頁的最大原因。它們並非下方路由表中的可選項目 — 對於任何超過一行編輯的工作,請在選擇顏色或編寫 HTML 之前,先打開這兩個文件。

工作流程

  1. 如果專案有設計規格,請先閱讀它,並將其 frontmatter 標記視為品牌真理(顏色、字型、間距、色調、限制)。要讀取哪個檔案(優先級 frame.md → design.md → DESIGN.md)以及如何解析它(frontmatter = 規範性,散文 = 上下文)在 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
構圖模式 — PiP、文字置於主體後方、標題卡、幻燈片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]

相關技能