> ## Documentation Index
> Fetch the complete documentation index at: https://hyperframes-codex-docs-human-first-refactor.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Make your first video

> Install the HyperFrames skills, make one short request, and continue with your agent, Studio, or the CLI.

export const QuickstartContinuationGrid = () => {
  const CDN = "https://static.heygen.ai/hyperframes-oss/docs/images/showcase";
  const paths = [{
    title: "Ask the agent",
    detail: "Revise the project or render it in the same chat.",
    instruction: "Make the title larger, then render another version."
  }, {
    title: "Open Studio",
    detail: "Point at the same project and make a visible edit.",
    instruction: "npx hyperframes preview"
  }, {
    title: "Use the CLI",
    detail: "Preview or render directly from the project folder.",
    instruction: "npx hyperframes render --output video.mp4"
  }];
  return <div style={{
    margin: "1.5rem 0"
  }}>
      <img src={`${CDN}/journey-quickstart-v4-paths.jpg`} alt="The same HyperFrames project ready to continue with an agent, Studio, or the CLI." loading="lazy" style={{
    display: "block",
    width: "100%",
    aspectRatio: "16 / 9",
    objectFit: "cover",
    background: "#111",
    borderRadius: "12px",
    margin: 0
  }} />
      <div style={{
    display: "grid",
    gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 190px), 1fr))",
    gap: "0.75rem",
    marginTop: "0.75rem"
  }}>
        {paths.map(path => <article key={path.title} style={{
    padding: "0.8rem 0.85rem 0.9rem",
    border: "1px solid var(--border-color, rgba(128, 128, 128, 0.22))",
    borderRadius: "10px"
  }}>
            <strong style={{
    display: "block",
    fontSize: "0.95rem",
    lineHeight: 1.35
  }}>
              {path.title}
            </strong>
            <span style={{
    display: "block",
    marginTop: "0.3rem",
    minHeight: "2.7em",
    fontSize: "0.825rem",
    lineHeight: 1.45,
    opacity: 0.72
  }}>
              {path.detail}
            </span>
            <code style={{
    display: "block",
    marginTop: "0.65rem",
    padding: "0.55rem 0.65rem",
    overflowWrap: "anywhere",
    whiteSpace: "normal",
    fontSize: "0.72rem",
    lineHeight: 1.45,
    borderRadius: "8px",
    background: "var(--code-block-background, rgba(128, 128, 128, 0.1))"
  }}>
              {path.instruction}
            </code>
          </article>)}
      </div>
    </div>;
};

<Frame>
  <video className="w-full aspect-video bg-zinc-950" src="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/journey-quickstart-v4.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/showcase/journey-quickstart-v4.jpg" controls playsInline />
</Frame>

## 1. Install the skills

Run this in your project folder:

```bash theme={null}
npx skills add heygen-com/hyperframes --full-depth
```

Choose **Core Skills** in the picker. Then open or restart your coding agent in that folder.

## 2. Ask for the video

```text theme={null}
Using /hyperframes, make a 10-second product intro for https://example.com.
```

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

All three paths work with the same project.

<QuickstartContinuationGrid />

## 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>