mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-10-30 09:16:55 +00:00
110 lines
3.4 KiB
Plaintext
110 lines
3.4 KiB
Plaintext
---
|
|
title: "Make videos with Claude Code"
|
|
sidebarTitle: "Claude Code"
|
|
description: "Install the HyperFrames plugin in Claude Code, ask for a video in plain words, then preview and render it to MP4 on your computer."
|
|
---
|
|
|
|
Install the HyperFrames plugin, then ask Claude Code for a video. Claude Code
|
|
writes an HTML project in your folder, opens a live preview, and renders the MP4
|
|
on your computer.
|
|
|
|
```bash
|
|
claude plugin marketplace add heygen-com/hyperframes
|
|
claude plugin install hyperframes@hyperframes
|
|
```
|
|
|
|
## Before you start
|
|
|
|
- [Claude Code](https://code.claude.com/docs), signed in with your Claude account
|
|
or an Anthropic Console account. Its usage bills to that account.
|
|
- Node.js 22 or newer, and npm.
|
|
- FFmpeg, for rendering MP4 files. Run `npx hyperframes doctor` to check.
|
|
|
|
## Install
|
|
|
|
<Tabs>
|
|
<Tab title="Plugin (recommended)">
|
|
Run the two commands above in your terminal. Then start a new Claude Code
|
|
session, or run `/reload-plugins` in the current one.
|
|
|
|
To get updates on their own, run `/plugin`, open **Marketplaces**, select
|
|
**hyperframes**, and choose **Enable auto-update**. See
|
|
[Install the HyperFrames plugin](/guides/plugins#claude-code) for manual updates and
|
|
removal.
|
|
</Tab>
|
|
<Tab title="Standalone skills">
|
|
Run this in your project folder and choose **Core Skills**:
|
|
|
|
```bash
|
|
npx skills add heygen-com/hyperframes
|
|
```
|
|
|
|
Or install the core set for your user, with no picker:
|
|
|
|
```bash
|
|
npx hyperframes skills update
|
|
```
|
|
|
|
Start a new Claude Code session afterwards. See
|
|
[Install and update agent skills](/guides/skills).
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
## Ask for your first video
|
|
|
|
Open Claude Code in an empty folder and paste:
|
|
|
|
```text
|
|
Using /hyperframes:hyperframes, make a 10-second product intro for https://example.com.
|
|
```
|
|
|
|
With standalone skills, the skill is `/hyperframes` instead of
|
|
`/hyperframes:hyperframes`. Replace the URL with the page you want the video to
|
|
show.
|
|
|
|
## What happens
|
|
|
|
1. Claude Code reads the HyperFrames guide for your kind of video, such as a product
|
|
launch or an explainer, and builds the project in your folder. For a longer
|
|
film that tells a story, it first offers three storylines to pick from.
|
|
2. It checks the project and opens a local preview.
|
|
|
|
Watch the first version and say what to change, in the same conversation.
|
|
|
|
## Preview and render
|
|
|
|
To reopen the preview later, run this inside the project folder:
|
|
|
|
```bash
|
|
npx hyperframes preview
|
|
```
|
|
|
|
The preview opens in the browser editor, where you can also edit the video by
|
|
hand. To make the MP4 yourself:
|
|
|
|
```bash
|
|
npx hyperframes render --output final.mp4
|
|
```
|
|
|
|
You can also ask Claude Code to render it.
|
|
|
|
## Prefer an app?
|
|
|
|
The [HyperFrames Studio app](/studio-app) for Mac, Windows and Linux can use Claude Code
|
|
as its agent. It installs Claude Code for you and gives you a chat, a preview,
|
|
and an editor in one window. To create inside the Claude chat app instead, with
|
|
nothing installed, use the [hosted connector](/guides/mcp).
|
|
|
|
## If something goes wrong
|
|
|
|
- **Claude Code does not see the skill.** Start a new session or run
|
|
`/reload-plugins`. For standalone skills, run `npx hyperframes skills check`.
|
|
- **The render fails.** Run `npx hyperframes doctor` and fix what it reports.
|
|
- **Anything else.** See [Troubleshooting](/help).
|
|
|
|
## Related topics
|
|
|
|
- [Make your first video](/quickstart)
|
|
- [Choose what to make](/workflows)
|
|
- [Write better prompts](/prompting/overview)
|