> ## Documentation Index > Fetch the complete documentation index at: https://hyperframes-fix-prompt-guide-validation-bugs.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Prompt Guide > How to prompt AI agents to author HyperFrames videos — setup, the two prompt shapes, and the map of this guide. 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. ## One-time setup Install the skills in your project (or globally for your agent): ```bash theme={null} 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 command | What it loads | | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- | | `/hyperframes` | **Read first.** The entry skill — capability map + video router; sends "make me a video" intent to the right workflow | | `/hyperframes-core` | Composition contract — HTML structure, `data-*` attributes, clips, tracks | | `/hyperframes-animation` | All animation — motion rules, scene blueprints, transitions, and the runtime adapters (GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI, TypeGPU) | | `/hyperframes-creative` | Creative direction — design spec, palettes, typography, narration, beats | | `/hyperframes-cli` | Dev-loop CLI — `init`, `lint`, `inspect`, `preview`, `render`, `doctor` | | `/media-use` | Media OS — TTS voiceover (`tts`), `transcribe`, `remove-background`, plus BGM / SFX / image resolution | | `/hyperframes-registry` | Block and component installation via `hyperframes add` | | `/general-video` | The 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 command | Input → output | | -------------------------- | ------------------------------------------------------------------------------------------ | | `/product-launch-video` | A product URL / brief / script → launch or promo video | | `/website-to-video` | A general website / URL → a video of the site (tour / showcase / social clip) | | `/faceless-explainer` | Arbitrary text (no URL) → faceless explainer with its own TTS narration | | `/pr-to-video` | A GitHub PR → code-change explainer | | `/embedded-captions` | An existing talking-head video → the same footage with captions / subtitles | | `/talking-head-recut` | An existing talking-head video → footage packaged with designed graphic cards | | `/motion-graphics` | A short, unnarrated, design-led motion graphic (logo sting, kinetic type, stat / chart) | | `/music-to-video` | A music track + your images → beat-synced video (lyric / slideshow / kinetic promo) | | `/slideshow` | A deck outline or slides → navigable presentation with presenter mode (not a rendered MP4) | | `/remotion-to-hyperframes` | Port 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`](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 theme={null} 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/claude-design) 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](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. ## 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 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](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.