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.The level ladder
The guide is one arc, novice to advanced. Each level is what you can do once you’ve read it — read them in order, or jump straight to whichever gap matches where you are:One-time setup
Install the skills in your project (or globally for your agent):/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
Optional workflows — add the ones that match your inputs (
/hyperframes routes to whichever you’ve installed)
Claude Design
Claude Design uses a different setup. Downloadclaude-design-hyperframes.md from GitHub (click the ↓ button), then attach it to your chat (don’t paste the URL — file attachments produce better output):
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 already 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.
Cold-start prompts work best when you specify duration (“10 seconds”, “5 scenes of 3s each”), aspect ratio (“16:9”, “9:16 vertical” — defaults to 1920x1080 otherwise), mood / style (“minimal Swiss grid”, “high-energy social”), and key elements (title, lower third, captions, 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.
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.
The four prompts above illustrate shape, not results — every prompt in this guide that ships with an embedded render was run exactly as written, and the gallery of those lives in Verified examples.
The interview: what the agent asks first
Either shape starts a short interview before anything is built. This isn’t the agent stalling — it’s the intent layer turning “make me a video” into a confirmed brief, so the build never has to guess the things you’d have corrected afterward. The agent confirms the route, then asks that workflow’s must-have questions (recommended answer first, so most are one-word confirmations). When the selected workflow supports both run shapes, it then closes with two questions that shape the run itself:
The two are independent — all four combinations are valid, and a companion run reviews on the live board too when you said yes to the storyboard. Four routes skip both questions because neither has anything to add:
/motion-graphics (the piece is seconds long), /slideshow (the deliverable is a navigable deck, not a rendered video), and /embedded-captions and /talking-head-recut (the footage is untouched, so there’s no storyboard to review).
In a hurry, skip the whole conversation by saying so:
Just build it — don’t ask me anything.That locks
automation with no storyboard wherever those apply, and every question the agent would have asked becomes a stated default in its heads-up instead.
Everything the interview settles is written to BRIEF.md in the project root — the brief is the artifact, not the chat. A later session (or a different agent) resumes from that file and asks nothing again; to change an answer, edit BRIEF.md rather than re-explaining yourself in the prompt.
Recommended workflow
npx hyperframes init my-video— scaffold a project (skills install automatically)- Open the project in Claude Code (or Cursor / Codex)
- Prompt with
/hyperframesand one of the shapes above npx hyperframes preview— watch in the browser as the agent edits- Iterate with small targeted prompts
npx hyperframes lint && npx hyperframes check— the gate: structure, runtime errors, layout collisions, motion, and contrast. Both must pass before you rendernpx hyperframes render --output final.mp4when you’re happy
check is the step people skip and regret. It runs the composition in a headless browser and reports what a still frame can’t tell you — an element overflowing its region, two text blocks colliding, a runtime error that only fires mid-timeline, contrast below WCAG AA. It is fast and it is not optional: a render that took ten minutes will happily contain a defect check would have named in seconds.
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
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 eight-rule grammar that keeps video from feeling cheap
Recreating references
Match something you saw, from text alone
Capstone
The film above, dissected frame by frame