website-to-hyperframes

Convert websites into professional HyperFrames videos with guided storyboarding and brand-aligned composition.

heygen-com ↓ 91k
Claude Code
View source ↗

What it does

  • "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://..."
  • Asset Audit (Step 3) — viewing contact sheets and justifying USE/SKIP for each asset
  • Per-beat HTML read (Step 5) — structured evidence block per beat
  • DoD checklist (Step 6) — including animation-map, per-warning WCAG verification, audio/motion playback
  • Honest disclosure section (Step 6) — "What I did NOT verify" must appear in your final summary

Requirements & configuration

Configuration: DESIGNSTORYBOARDSCRIPT

Derived from the skill's own SKILL.md documentation · extracted 2026-07-23

Convert websites into professional HyperFrames videos with guided storyboarding and brand-aligned composition.

Source

Repository: https://github.com/heygen-com/hyperframes

website-to-hyperframes FAQ

What does the website-to-hyperframes skill do?

| 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. "Capture https://... and make me a 25-second product launch video" "Turn this website into a 15-second social ad for Instagram"

What does website-to-hyperframes require?

Configuration keys: DESIGN, STORYBOARD, SCRIPT.

How do I install website-to-hyperframes?

Run: npx -y skills add https://github.com/heygen-com/hyperframes --skill website-to-hyperframes --agent claude-code — the source lives at github.com/heygen-com/hyperframes.

Maintain website-to-hyperframes?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

website-to-hyperframes on getagentictools
[![website-to-hyperframes on getagentictools](https://getagentictools.com/badge/skills/heygen-com-hyperframes-website-to-hyperframes.svg)](https://getagentictools.com/skills/heygen-com-hyperframes-website-to-hyperframes?ref=badge)
npx agentictools info skills/heygen-com-hyperframes-website-to-hyperframes

The second line is the CLI lookup for this page — handy in READMEs and docs.