# Website To Hyperframes

Capture a website and create a HyperFrames video from it.

- Repository: https://github.com/nateherkai/herk-edit-kit (2482 stars)
- Category: Media
- License: see repository
- Last updated: 2026-10-14
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add nateherkai/herk-edit-kit --skill website-to-hyperframes -g -a claude-code -y`
Codex: `npx skills add nateherkai/herk-edit-kit --skill website-to-hyperframes -g -a codex -y`
Cursor: `npx skills add nateherkai/herk-edit-kit --skill website-to-hyperframes -g -a cursor -y`
Gemini CLI: `npx skills add nateherkai/herk-edit-kit --skill website-to-hyperframes -g -a gemini-cli -y`

## Description

Capture a website and create a HyperFrames video from it. Use when: (1) a user provides a URL and wants a video, (2) someone says "capture this site", "turn this into a video", "make a promo from my site", (3) the user wants a social ad, product tour, or any video based on an existing website, (4) the user shares a link and asks for any kind of video content. Even if the user just pastes a URL, this is the skill to use.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Website to HyperFrames

Capture a website, then produce a professional video from it.

Users say things like:

- "Capture https://... and make me a 25-second product launch video"
- "Turn this website into a 15-second social ad for Instagram"
- "Create a 30-second product tour from https://..."

The workflow has 7 steps. Each produces an artifact that gates the next.

---

## Step 1: Capture & Understand

**Read:** [references/step-1-capture.md](references/step-1-capture.md)

Run the capture, read the extracted data, and build a working summary using the write-down-and-forget method.

**Gate:** Print your site summary (name, top colors, fonts, key assets, one-sentence vibe).

---

## Step 2: Write DESIGN.md

**Read:** [references/step-2-design.md](references/step-2-design.md)

Write a simple brand reference for the captured website. 6 sections, ~90 lines. This is a cheat sheet, not the creative plan, that comes in Step 4.

**Gate:** `DESIGN.md` exists in the project directory.

---

## Step 3: Write SCRIPT

**Read:** [references/step-3-script.md](references/step-3-script.md)

Write the narration script. The story backbone. Scene durations come from the narration, not from guessing.

**Gate:** `SCRIPT.md` exists in the project directory.

---

## Step 4: Write STORYBOARD

**Read:** [references/step-4-storyboard.md](references/step-4-storyboard.md)

Write per-beat creative direction: mood, camera, animations, transitions, assets, depth layers, SFX. This is the creative north star, the document the engineer follows to build each composition.

**Gate:** `STORYBOARD.md` exists with beat-by-beat direction and an asset audit table.

---

## Step 5: Generate VO + Map Timing

**Read:** [references/step-5-vo.md](references/step-5-vo.md)

Generate TTS audio, transcribe for word-level timestamps, and map timestamps to beats. Update STORYBOARD.md with real durations.

**Gate:** `narration.wav` (or .mp3) + `transcript.json` exist. Beat timings in STORYBOARD.md updated.

---

The rest: https://github.com/nateherkai/herk-edit-kit/blob/HEAD/.agents/skills/website-to-hyperframes/SKILL.md