---
title: "Make your first video"
description: "Install the HyperFrames skills, make one short request, and continue with your agent, Studio, or the CLI."
related:
  - /workflows
  - /go-further
  - /help
---

import { QuickstartContinuationGrid } from "/snippets/quickstart-continuation-grid.jsx";
import { DocsVideo } from "/snippets/docs-video.jsx";
import { AgentAction } from "/snippets/agent-action.jsx";

<div className="hf-docs-video-frame">
  <DocsVideo
    title="A beginner creates a first HyperFrames video from one short request, then continues with an agent, Studio, or the CLI."
    src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/journey-quickstart-v5.mp4"
    poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/journey-quickstart-v5.jpg"
    chapters={[
      { time: 0, label: "Make the request" },
      { time: 8.4, label: "Confirm the intent" },
      { time: 17, label: "Get a real project" },
      { time: 22.8, label: "Watch the first version" },
      { time: 27.8, label: "Choose how to continue" },
      { time: 35.6, label: "The result" },
    ]}
    transcript={[
      { time: 0.2, text: "Let's make one." },
      { time: 2.2, text: "This is the whole request." },
      { time: 5.55, text: "One sentence, and a link." },
      { time: 9.2, text: "Your agent reads it back," },
      {
        time: 10.75,
        text: "confirms what matters, and asks what's missing.",
      },
      { time: 14.55, text: "You never had to write a specification." },
      { time: 17.6, text: "Then it becomes a real project." },
      { time: 19.85, text: "Scenes, media, timing. Files you own." },
      { time: 23.5, text: "And a first version you can watch." },
      { time: 28.45, text: "From here, three doors into the same project." },
      {
        time: 31.3,
        text: "Ask the agent. Open Studio. Or use the command line.",
      },
      { time: 36.55, text: "Ten seconds, from one sentence." },
      { time: 40.1, text: "Now make yours." },
    ]}
  />
</div>

<Note>
  HyperFrames is free and open-source, and local rendering does not use HeyGen credits. Your coding
  agent and any optional hosted, voice, avatar, or generated-media services may have their own
  costs.
</Note>

## 1. Install the skills

Run this in your project folder:

```bash
npx skills add heygen-com/hyperframes --full-depth
```

Choose **Core Skills** in the picker. Keep `--full-depth` so the installer uses the current repository version. Then open or restart your coding agent in that folder.

## 2. Ask for the video

```text
Using /hyperframes, make a 10-second product intro for https://example.com.
```

Replace `https://example.com` with the real page you want the video to show. The agent will propose
a direction and ask for anything important that is missing. You do not need to write a production
specification.

## 3. Continue from the first version

The agent leaves you with an editable project folder and opens its local preview.
To reopen that preview later, run `npx hyperframes preview` inside the project
folder. Watch the first version once and check the story, facts, readable text,
and sound; it is not a guaranteed final cut. All three paths below work with
the same project.

<QuickstartContinuationGrid />

<AgentAction request="Using /hyperframes, make a 10-second product intro for https://example.com." />

## What next?

<CardGroup cols={2}>
  <Card title="Choose a specific workflow" icon="route" href="/workflows">
    Product launch, explainer, captions, recut, pull request, music, motion graphic, or
    presentation.
  </Card>
  <Card title="Go further" icon="arrow-right" href="/go-further">
    Direct the agent, edit in Studio, build richer projects, and finish with confidence.
  </Card>
</CardGroup>