How to Use HyperFrames with Claude Code: A Step-by-Step Guide (2026)
HyperFrames was designed for exactly this: point an AI coding agent at it and let the agent write the HTML that becomes video. Claude Code is the agent it pairs with most often, and the workflow is genuinely slick when it works. It is also code underneath, which means it can break in ways a finished template never does. Here is the real step-by-step, including the part most tutorials skip.
TL;DR — HyperFrames + Claude Code
| Step | What happens |
|---|---|
| Install the skill | HyperFrames registers as Claude Code slash commands |
/hyperframes | The agent authors the HTML scene |
/hyperframes-cli | Scaffold, lint, preview, render |
/hyperframes-media | TTS, transcription, background removal |
| Render | Headless Chrome captures frames, FFmpeg encodes MP4 |
| Fix | When a render is off, you read or re-prompt the code |
One myth to retire up front: HyperFrames does not generate video with AI. Claude writes the HTML; HyperFrames renders what a browser can draw. The "AI" is the author, not the pixels.
What you need first
Before Claude Code can render anything, the machine needs the HyperFrames toolchain. That means Node.js 22 or newer, FFmpeg, and a headless Chrome through Puppeteer, plus the HyperFrames package itself. This is the first reality check: HyperFrames is a developer tool, so even with an agent doing the authoring, you are working in a coding environment, not a browser tab. If that toolchain is already part of how you work, you are set. If it is not, this is the step where a non-developer usually stalls, and it is worth reading HyperFrames for marketers before going further.
Step 1: Install the HyperFrames skill
HeyGen publishes HyperFrames skills for Claude Code, Cursor, Gemini CLI, and Codex. Once installed, they register as slash commands inside the agent, which is what lets Claude both write the scene and drive the build. The three you will use:
/hyperframes— authoring: the agent writes and edits the HTML composition./hyperframes-cli— the build steps: initialize a project, lint, preview, and render./hyperframes-media— media helpers: text-to-speech, transcription, and background removal.