mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
ukimsanov
f720eb75be
Two things a non-technical reader hits that the pages did not help with. **Quickstart made you do it by hand before you could ask.** Install through an interactive picker, choose the right group, restart the agent, then type a prompt — four manual terminal steps before anything happens. The copy-to-agent affordance existed but sat at the bottom of the page, after the step it would have replaced, and it copied only the prompt. It leads now, with the whole thing in one visible block: install, make, open the preview. It uses `hyperframes skills update` rather than the interactive `skills add`, which is the command the README already says agents should run — non-interactive, exactly the core set. The manual steps stay below for anyone who wants to see them. Plain code fence rather than the AgentAction component, deliberately: that component renders a Copy button and never shows the request, so a reader copies something they cannot read. Mintlify fences already carry a copy button and show the text. **Examples had four GitHub cards where one belongs.** Brief, Source, Revision, Checks — two of them pointing into a gate-output report. That is showing homework, not helping someone who came to see finished work. The render stays, with one link into the folder.
81 lines
2.9 KiB
Plaintext
81 lines
2.9 KiB
Plaintext
---
|
|
title: "Make your first video"
|
|
description: "Install the HyperFrames skills, make one short request, and continue with your agent, Studio, or the CLI."
|
|
---
|
|
|
|
import { QuickstartContinuationGrid } from "/snippets/quickstart-continuation-grid.jsx";
|
|
import { DocsVideo } from "/snippets/docs-video.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"
|
|
/>
|
|
</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>
|
|
|
|
## The short way: hand it to your agent
|
|
|
|
If you already have a coding agent open in a folder, paste this and skip the
|
|
rest of the page. It installs the skills, makes the video, and opens the
|
|
preview — you only change the URL.
|
|
|
|
```text
|
|
Set this folder up for HyperFrames and make me a video.
|
|
|
|
1. Run: npx hyperframes skills update
|
|
2. Then, using /hyperframes, make a 10-second product intro for https://example.com
|
|
3. Open the local preview when it is done and tell me the project folder.
|
|
```
|
|
|
|
Swap `https://example.com` for the page you want the video to show. Everything
|
|
below is the same thing done by hand, if you would rather see each step.
|
|
|
|
## 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 />
|
|
|
|
## Related topics
|
|
|
|
<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>
|