AI导哈

设计与多媒体

website-to-hyperframes

heygen-com/hyperframes

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.

  • 8.9万 次安装
  • 7.5万 星标
  • 收录于

安装命令

npx skills add https://github.com/heygen-com/hyperframes --skill website-to-hyperframes

要点

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

  • Captures website content and brand identity, then guides you through a 7-step workflow: brand analysis, messaging strategy, storyboard approval, voice-over generation, composition building, and validation
  • Supports multiple video types (social ads, product demos, feature announcements, brand reels) with flexible duration and format (landscape, portrait, square)
  • Includes collaborative gates at storyboarding, voice/caption preferences, and composition review; autonomous mode skips preference questions but enforces all quality-verification checkpoints
  • Integrates with HyperFrames for HTML-in-Canvas animations, timing synchronization with narration, and multi-beat composition validation before delivery

SKILL.md

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. By default it's collaborative — gates marked 💬 stop and ask the user. If the user signals autonomous mode ("decide for me", "surprise me"), 💬 user-preference gates are skipped; see step-2-brief.md for how that propagates.

Autonomous mode is NOT "skip all gates." Auto mode covers user-preference questions (TTS provider, voice, color emphasis, beat count, music yes/no, captions yes/no — where the agent decides on the user's behalf). It does NOT cover quality-verification gates. The following remain non-skippable in auto mode:

  • 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

相关 Skills

hyperframes-cliheygen-com/hyperframesThe HyperFrames CLI by job - scaffold, check, look at frames, edit the timeline, preview, render locally or in the cloud, publish, project history - plus reading its JSON and recovering from build or render failures.设计与多媒体132.4万hyperframesheygen-com/hyperframesRead first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.设计与多媒体129.1万media-useheygen-com/hyperframesGet or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.设计与多媒体119.6万hyperframes-registryheygen-com/hyperframesAbout 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.数据与研究108.7万hyperframes-animationheygen-com/hyperframesAll animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.设计与多媒体100.5万hyperframes-coreheygen-com/hyperframesThe HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.设计与多媒体93.1万