--- title: Prompt Guide description: "How to prompt AI agents to author HyperFrames videos — setup, the two prompt shapes, and the map of this guide." --- import { DocsVideo } from "/snippets/docs-video.jsx"; *By the end of this guide, you can build this with a prompt.* HyperFrames is built for AI agents — compositions are plain HTML, the CLI is non-interactive, and the framework ships [skills](https://github.com/vercel-labs/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. ## 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: | Level | What you can do after it | | --- | --- | | **1 — [Your first video](/prompting/product-launch)** | Get a finished video from one prompt — the agent fills the gaps (palette, pacing, structure) for you. | | **2 — [Control](/prompting/anatomy)** | Name the parts yourself: route, spec, beats, copy, technique, negatives — the skeleton that removes the decisions agents get wrong. | | **3 — [Life](/prompting/motion)** | Motion and transitions that read premium instead of like a slideshow. | | **4 — [Substance](/prompting/code-blocks)** | Add real capabilities: code animation, data-viz, overlays, captions, generated artwork, VFX, 3D. | | **5 — [Voice & sound](/prompting/media-and-audio)** | Narration, music, and any footage you supply, scored and mixed correctly. | | **6 — [Scale](/prompting/design-systems)** | Design systems, variables, storyboards, editing, iterating, matching references, and export — a video as a system, not a one-off. | | **7 — [Capstone](/prompting/capstone)** | Everything above, composed into one real prompt. Each chapter on the way up shows its own region of this film cut out in isolation; the capstone prompt is the glue that binds them into one continuous camera journey, rendered twice from one template. | ## One-time setup Install the skills in your project (or globally for your agent): ```bash 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**. Make any video by asking for it; the `/hyperframes` skill carries the contract and the references (each kind of film, story, motion, look, sound, review, captions, overlays). **Core skills — install all of these** | Slash command | What it loads | | ----------------------- | -------------------------------------------------------------------------- | | `/hyperframes` | **Read first.** The render contract and work loop, plus references for format, motion, look, captions, whole films (website, topic, PR, music, short motion piece), talking-head overlays, and storyboards | | `/hyperframes-cli` | The CLI by job — scaffold, check, look at frames, edit the timeline, preview, render, publish, project history | | `/hyperframes-registry` | About 450 ready-made blocks and components — search before hand-building a look; install via `hyperframes add` | | `/media-use` | Music, sound effects, images, voiceover, avatar and generated video, transcripts, cutouts, colour grades — HeyGen (the `heygen` CLI; OAuth sign-in carries a free allowance) or free local tools (Kokoro TTS, Parakeet/whisper, background removal, bundled SFX) — and mixing placed audio | **Optional skills — add the ones that match your inputs** | Slash command | Input → output | | ------------------------ | --------------------------------------------------------------------------- | | `/slideshow` | A deck outline or slides → navigable presentation with presenter mode (not a rendered MP4) | | `/remotion-to-hyperframes` | Import Remotion or other video code and renders, verified frame by frame | | `/figma` | A Figma file / frame / URL → imported assets, brand tokens, and reconstructed motion | To skip the picker and install everything in one shot, run `npx hyperframes skills`. And start HyperFrames prompts with `/hyperframes` (or invoke the skill another way for non-Claude agents) — it loads the composition rules explicitly so the agent gets them right the first time. ## Claude Design Claude Design uses a different setup. Download [`claude-design-hyperframes.md`](https://github.com/heygen-com/hyperframes/blob/main/docs/guides/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): ```text 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](/guides/design-tools) 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](/prompting/examples). ## Before the build The agent builds what you asked for and fills the gaps itself. A question, a hold, or a loose idea gets an answer or a proposal first, not an edit. Say what must be exact (a claim, a name, a length) and leave the rest. Want to review the plan before anything is built? Ask for a storyboard: the agent writes `STORYBOARD.md` in the project root, one section per frame, and builds each frame against it once you approve. In a hurry, skip any questions by saying so: > Just build it — don't ask me anything. ## Recommended workflow 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 lint && npx hyperframes check` — the gate: structure, runtime errors, layout collisions, motion, and contrast. Both must pass before you render 7. `npx hyperframes render --output final.mp4` when 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 warm start from a URL, one registry-block piece, one dense freeform spec: > /hyperframes 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.* > /hyperframes 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](/prompting/specification-dial), a full visual+motion spec one-shots a broadcast-style animated globe — see [Recreating something you saw](/prompting/recreating-references) for the spec: *One-shot render from the distilled spec, no iteration.* ## Explore the guide The six-part skeleton every one-shot prompt shares Copy-paste prompts, each one-shots a finished video How much to specify, and what density buys Words that map to specific framework settings The eight-rule grammar that keeps video from feeling cheap Match something you saw, from text alone The film above, dissected frame by frame *Next: [Your first video](/prompting/product-launch) — one URL, one prompt, a finished launch video.*