Skip to main content
HyperFrames is built for AI agents — compositions are plain HTML, the CLI is non-interactive, and the framework ships skills that teach agents the patterns docs alone don’t cover. This guide shows how to prompt agents effectively once skills are installed — the vocabulary that changes output, the iteration patterns that save time, and the rules that prevent breakage.
Before you prompt, have three things in place: the skills installed (below), a scaffolded project (npx hyperframes init my-video), and the live preview running (npx hyperframes preview) so you can judge each render the moment it lands. Prompting without the preview open turns every iteration into a blind guess.

​
One-time setup

Install the skills in your project (or globally for your agent): 
npx skills add heygen-com/hyperframes
The installer shows a picker. Select the core skills below — every project needs them. In Claude Code, restart the session after installing; the skills register as slash commands. Start at /hyperframes: it orients you to the whole surface and routes “make me a video” requests to the right workflow. Core skills — install all of these
Slash commandWhat it loads
/hyperframesRead first. The entry skill — capability map + video router; sends “make me a video” intent to the right workflow
/hyperframes-coreComposition contract — HTML structure, data-* attributes, clips, tracks
/hyperframes-animationAll animation — motion rules, scene blueprints, transitions, and the runtime adapters (GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI, TypeGPU)
/hyperframes-creativeCreative direction — design spec, palettes, typography, narration, beats
/hyperframes-cliDev-loop CLI — init, lint, inspect, preview, render, doctor
/media-useMedia OS — TTS voiceover (tts), transcribe, remove-background, plus BGM / SFX / image resolution
/hyperframes-registryBlock and component installation via hyperframes add
/general-videoThe general authoring workflow — fallback for any video that doesn’t match a specific workflow below
Optional workflows — add the ones that match your inputs (/hyperframes routes to whichever you’ve installed)
Slash commandInput → output
/product-launch-videoA product URL / brief / script → launch or promo video
/website-to-videoA general website / URL → a video of the site (tour / showcase / social clip)
/faceless-explainerArbitrary text (no URL) → faceless explainer with its own TTS narration
/pr-to-videoA GitHub PR → code-change explainer
/embedded-captionsAn existing talking-head video → the same footage with captions / subtitles
/talking-head-recutAn existing talking-head video → footage packaged with designed graphic cards
/motion-graphicsA short, unnarrated, design-led motion graphic (logo sting, kinetic type, stat / chart)
/music-to-videoA music track + your images → beat-synced video (lyric / slideshow / kinetic promo)
/slideshowA deck outline or slides → navigable presentation with presenter mode (not a rendered MP4)
/remotion-to-hyperframesPort an existing Remotion (React) composition to HyperFrames HTML
To skip the picker and install everything (core + every workflow) in one shot, run npx skills add heygen-com/hyperframes --all. And start HyperFrames prompts with /hyperframes (or invoke the skill another way for non-Claude agents) — it loads the routing + composition context explicitly so the agent picks the right workflow and gets the rules right the first time.

​
Claude Design

Claude Design uses a different setup. Download claude-design-hyperframes.md from GitHub (click the ↓ button), then attach it to your chat (don’t paste the URL — file attachments produce better output): 
Use the attached skill. 25-second LinkedIn video for my startup.

Problem: Sales teams waste 3 hours/day on manual CRM updates.
Solution: AutoCRM — AI that logs every call, email, and meeting.
Traction: 200+ teams, $1.2M ARR, 18% MoM growth.
CTA: autocrmhq.com
Claude Design produces a valid first draft (brand identity, scene content, animations, transitions). Download the ZIP and refine in any AI coding agent with npx hyperframes preview running. See the Claude Design guide for the full workflow.

​
The two prompt shapes

Most successful HyperFrames prompts fall into one of two shapes.

​
Cold start — describe the video

You tell the agent what you want from scratch. Best for greenfield work where you have the creative direction in your head.
Using /hyperframes, create a 10-second product intro with a fade-in title over a dark background and subtle background music.
Make a 9:16 TikTok-style hook video about [topic] using /hyperframes, with bouncy captions synced to a TTS narration.
Cold-start prompts work best when you specify:
  • Duration (e.g. “10 seconds”, ”30s”, “5 scenes of 3s each”)
  • Aspect ratio (“16:9”, “9:16 vertical”, “1:1 square”) — defaults to 1920x1080 otherwise
  • Mood / style (“minimal Swiss grid”, “warm grain analog”, “high-energy social”)
  • Key elements (title, lower third, captions, background video, music)

​
Warm start — turn context into a video

You give the agent something to work with — a URL, a doc, a CSV, a transcript — and ask it to synthesize that into a video. This is where HyperFrames shines because the agent does the research/summarization step and the production step in one flow.
Take a look at this GitHub repo https://github.com/heygen-com/hyperframes and explain its uses and architecture to me using /hyperframes.
Summarize the attached PDF into a 45-second pitch video using /hyperframes.
Read this changelog and turn the top three changes into a 30-second release announcement video using /hyperframes.
Turn this CSV into an animated bar chart race using /hyperframes.
Warm-start prompts produce richer, more grounded videos because the agent is writing about something specific instead of inventing copy.
  1. npx hyperframes init my-video — scaffold a project (skills install automatically)
  2. Open the project in Claude Code (or Cursor / Codex)
  3. Prompt with /hyperframes and one of the shapes above
  4. npx hyperframes preview — watch in the browser as the agent edits
  5. Iterate with small targeted prompts
  6. npx hyperframes render --output final.mp4 when you’re happy

​
What a prompt buys you

Three prompts from this guide and their unedited renders — one workflow warm start, one registry-block piece, one dense freeform spec:
/product-launch-video Make a 45-second 1920x1080 launch video for https://linear.app. Energetic but minimal, use the site’s own palette and screenshots. Structure: hook stating the problem, 3 feature beats with UI captures and one-line captions, end card with logo + “Try it free”. Female TTS voice, confident tone, subtle electronic BGM under -18dB.
Rendered from the prompt above, unedited.
/motion-graphics 6-second 1920x1080 video, dark navy background. Beat 1 (0-1s): label “ARR” fades up small, top-center. Beat 2 (1-4s): a giant number counts up to $4.2M with an odometer roll, easing out as it lands. Beat 3 (4-6s): “+312% YoY” stamps in below in green, then everything settles into a gentle ambient idle. Use the apple-money-count registry block as base. No narration.
Rendered from the prompt above, unedited. And at the far end of the specification dial, a full visual+motion spec one-shots a broadcast-style animated globe — see Recreating something you saw for the spec: One-shot render from the distilled spec, no iteration.

​
Explore the guide

Prompt anatomy

The six-part skeleton every one-shot prompt shares

Verified examples

18 copy-paste prompts, each one-shots a finished video

The specification dial

How much to specify, and what density buys

Vocabulary

Words that map to specific framework settings

Premium motion

The six-rule grammar that keeps video from feeling cheap

Recreating references

Match something you saw, from text alone