98.8K+Download
Skip to the usage guide
hyperframes-creativeby HeyGen

HyperFrames Creative Skill.

A Claude Code and Codex skill for motion and video: creative direction for HyperFrames videos: palette, type, composition, voice-over, pacing.

  • Motion & Video
  • Video
Download OpenDesignView usage guide
heygen-com/hyperframes · skills/hyperframes-creative/SKILL.mdSKILL.md
--- name: hyperframes-creative description: 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`. --- ## Workflow ## Routing ## Scripts ## Boundaries
Front matter and section headings read from the upstream file on 2026-09-14 · 6,317 characters in full

01 What it does

What the hyperframes-creative Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

Non-animation creative direction for HyperFrames videos, used after the technical contract from hyperframes-core is in place. Handles design spec parsing (frame.md / design.md with frontmatter as brand truth), palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand decisions.

Two references override web instincts for non-trivial work: house-style.md explains how to interpret prompts and generate real content with background/foreground layer recipes, while video-composition.md defines video-medium scale, depth, and foreground detail to avoid empty web-page layouts. For atomic motion patterns, scene blueprints, transitions, and CSS marker effects, use hyperframes-animation instead.

What it produces

  • HTML composition using video-medium scale, depth patterns, and brand-consistent colors and typography
  • Contrast report from contrast-report.mjs inspecting rendered frame accessibility
  • Audio bands data file from extract-audio-data.py for audio-reactive compositions
See the example prompt ↗

How It Works

  1. 01
    Read the Design Spec First

    If a project has frame.md, design.md, or DESIGN.md, read it first and treat frontmatter tokens as brand truth for colors, fonts, spacing, tone, and constraints.

  2. 02
    Choose a Visual Direction Route

    If no design spec exists, adopt a ready-made frame-preset from frame-presets/, choose a named style from visual-styles.md, use fast defaults from house-style.md, or run an interactive selection via design-picker.md.

  3. 03
    Plan Beats Before Writing HTML

    For multi-scene work, consult beat-direction.md to plan rhythm and timing before writing HTML. For scene transitions, jump to hyperframes-animation/transitions/.

  4. 04
    Apply Motion Guardrails

    For motion-heavy work, read motion-principles.md for high-level guardrails, then move to hyperframes-animation for atomic motion rules.

02 Find your fit

When to Use the hyperframes-creative Skill

Use the hyperframes-creative skill in Claude Code or Codex when the job is motion and video of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • Design spec handling for frame.md or design.md files with frontmatter tokens defining brand direction
  • Palette selection, typography choices, and brand or style decisions for HyperFrames videos
  • Composition patterns like picture-in-picture, text-behind-subject, title cards, and slide shows
  • Audio-reactive visuals using precomputed audio bands mapped to motion

Know the Boundaries

  • Atomic motion patterns, which belong in hyperframes-animation instead
  • Scene blueprints, transitions, and CSS marker effects—use hyperframes-animation for those

What to Provide

  • User prompt for visual directionWhen no design spec exists, provide a request for named style, mood, or open-ended prompt to route through visual-styles.md or prompt-expansion.md.

03 Inside the skill

Rules the hyperframes-creative Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Read house-style.md and video-composition.md First

    For any non-trivial composition, read references/house-style.md and references/video-composition.md before choosing colors or writing HTML.

  2. Frontmatter Tokens Are Brand Truth

    In design specs, treat frontmatter as normative and prose as context. Frontmatter tokens for colors, fonts, spacing, tone, and constraints override other defaults.

  3. Never Override hyperframes-core Technical Rules

    Do not override the technical contract established by hyperframes-core, which defines the foundational structure and constraints.

  4. No Unsolicited Content Expansion

    Do not add extra scenes, narration, music, captions, or transitions unless the request explicitly calls for them or you first propose the expansion to the user.

  5. Keep Recipe References task-specific

    Do not read every reference file for simple edits. Load only the references relevant to the specific task at hand.

  6. Design Spec Precedence Order

    When resolving which design spec to read, follow this precedence: frame.md first, then design.md, then DESIGN.md.

  7. Run Scripts from Repo Root

    Execute all scripts with explicit paths from the repository root, for example: python skills/hyperframes-creative/scripts/extract-audio-data.py <audio-file>.

  8. No Design System Required for Minimal Work

    Do not require a full design system for a minimal technical composition. The skill scales to the task complexity.

04 Put it to work

Install hyperframes-creative in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add hyperframes-creative to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal
npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-creative

Generic skills CLI form for skills/hyperframes-creative/SKILL.md; the repository may document its own path.

Give the Skill a First Motion and Video Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt
Create a 45-second product announcement video for [product name] using a cyberpunk visual style with fast pacing and high-contrast palette. Plan the beats to open with a hook about [customer pain point], then reveal three key features with audio-reactive text reveals. Use the brutalist frame-preset from frame-presets/ and generate voice-over narration that matches the technical tone from our existing design.md.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Verify design adherence for colors, type, corners, spacing, and depth per design-adherence.md
  • Check that video-composition.md density and scale rules are followed to avoid web-page layouts

In OpenDesign import hyperframes-creative from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
HeyGen
Repository
github.com/heygen-com/hyperframes Branch main
Skill file
skills/hyperframes-creative/SKILL.md Content checksum recorded at verification; commit 558c11b
License
Apache-2.0 From LICENSE.
Repository stars
49,761 GitHub snapshot taken 2026-09-14 for the whole heygen-com/hyperframes repository, which contains 9 skills in this catalog. Not a rating or usage count for hyperframes-creative.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. HyperFrames CreativeBrand, pacing, style, narration, and composition direction for use after hyperframes-core technical contract
  2. WorkflowFour-step process: read design spec, choose visual route, plan beats, apply motion guardrails
  3. RoutingTable mapping topics to reference files for palettes, composition, narration, audio-reactive, and style presets
  4. Scriptscontrast-report.mjs, extract-audio-data.py, package-loader.mjs; run from repo root with explicit paths
  5. BoundariesDon't override core rules, require design systems, add unsolicited content, or read every reference
The Skill's Own Description
“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`.”

Front-matter description from SKILL.md. The full file is about 6,317 characters. Read the full file on GitHub.

HyperFrames Creative

Run hyperframes-creative on a Real Motion and Video Task.

Download OpenDesign, import hyperframes-creative from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-creative

OpenDesign Desktop

One design system. Every output unmistakably your brand

Inside the full Vibe Design Workspace, use the same brand rules across websites, slide decks, interactive prototypes, dashboards, images, and HTML video. Connect Codex, Claude Code, Cursor, and other coding agents already on your computer, then create locally for free.

  • Web, slides, prototypes, dashboards, images, and video
  • 140+ design systems, plus the full template and skill library
  • Connect local Codex and 21+ coding agents · Free to use
Download free

Available for macOS and Windows