Zur Nutzungsanleitung springen
HyperFramesvon HeyGen

HyperFrames Skill.

Beginne mit dem Video, das du brauchst, nicht mit einem Haufen Animations-Tools. HyperFrames ist der Einstiegs-Skill, der den Projektstatus liest, den passenden Produktions-Workflow auswählt und die Fähigkeiten einbindet, die nötig sind, um HTML-Kompositionen in Video zu verwandeln.

  • HTML-to-Video
  • Workflow-Routing
  • Videoproduktion
Quellenprüfung · hyperframesSKILL.md
Aufgabe Videoproduktion Ergebnis • Ein ausgewählter Workflow und ein Briefing für Neuproduktionen • Eine HTML-Komposition und eine Vorschau über diesen Workflow • Gerendertes Video, wenn das Rendern angefordert und abgeschlossen wurde Vor dem Start Die CLI benötigt Node.js 22+ und FFmpeg. Beginne mit den Kern-Skills; Erstellungs-Workflows werden bei Bedarf installiert. Mediendienste und Cloud-Rendering können zusätzliche Anforderungen mit sich bringen.
Redaktionelle Zusammenfassung · Quelle geprüft 2026-10-12 · kein generiertes Beispiel

01 Was er leistet

Ein Einstiegspunkt, verschiedene Produktions-Workflows

Der Haupt-Skill entscheidet, wie die Arbeit abläuft. Der gewählte Workflow und die Fach-Skills übernehmen die eigentliche Komposition, die Medien und das Rendern.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Die Arbeitsweise

Ein Produktlaunch, ein Untertitel-Durchgang und ein interaktives Deck sind unterschiedliche Ergebnisse, auch wenn alle Bewegung enthalten. HyperFrames routet nach dem gewünschten Ergebnis: Ein website-basierter Promo, schlichte Untertitel auf vorhandenem Material, beat-synchrone Musik, eine kurze Motion-Grafik oder eine individuelle Komposition haben jeweils einen eigenen Pfad. Die Quelle bietet außerdem einen ausdrücklichen Pfad zum Portieren von Remotion-Quellmaterial.

Bestehende Projekte werden nicht wie leere Starts behandelt. Der Router prüft das Briefing und die Projektartefakte, setzt den aufgezeichneten Workflow fort oder führt nur die angeforderte Operation aus. Bei Neuproduktionen hält er die Absicht in BRIEF.md fest, installiert den gewählten Workflow und lädt Spezial-Fähigkeiten nur bei Bedarf.

Erwartete Ergebnisse

  • Eine Workflow-Auswahl und BRIEF.md für Neuproduktionen
  • Eine bearbeitbare HTML-Komposition, mit Vorschau und unterstützenden Projektdateien, soweit der Workflow sie erfordert
  • Ein gerendertes Video, wenn angefordert; ein navigierbares Deck oder ein geprüftes Storyboard kann ein anderer Endpunkt sein
Beispiel-Briefing ansehen

Von der Anfrage zur Produktion

  1. 01
    Projektstatus erkennen

    Unterscheide Neuproduktion von einer Bearbeitung, einer reinen Render-Operation oder einem Projekt mit vorhandenem Briefing. Nutze aufgezeichnete Präferenzen weiter, statt das Interview neu zu beginnen.

  2. 02
    Nach Ergebnis auswählen

    Ordne das gewünschte Ergebnis dem Workflow-Vertrag zu. Vorhandenes Material mit Untertiteln ist kein neues Erklärvideo, und Hintergrundmusik allein macht ein Projekt nicht musikgeführt.

  3. 03
    Benötigte Fähigkeiten laden

    Installiere den gewählten Erstellungs-Workflow bei Bedarf. Binde Hinweise zu Komposition, Motion, Medien, Audio oder CLI für die tatsächlich nötige Arbeit ein, statt standardmäßig jeden Workflow zu installieren.

  4. 04
    Bewusst prüfen und rendern

    Nutze die Vorschau und Prüfungen des Workflows und rendere dann das vereinbarte Ergebnis. HTML-Validierung ersetzt nicht, sich das Ergebnis anzusehen; eine ausdrückliche reine Render-Anfrage bleibt genau diese Operation.

02 Wann er sinnvoll ist

Wann er sinnvoll ist

Nutze den Router, wenn eine Videoanfrage den richtigen Produktionspfad braucht oder wenn du ein bestehendes HyperFrames-Projekt fortsetzen willst, ohne seinen Kontext zu verlieren.

Gut geeignet

  • Ein neues Video mit klarem ThemaBring eine Website, einen PR, ein Thema, Material oder einen Musiktitel mit und beschreibe das gewünschte Ergebnis. Der Router entscheidet, welcher spezialisierte oder allgemeine Workflow zutrifft.
  • Rückkehr zu einem bestehenden ProjektEin gespeichertes Briefing, die Projektkonfiguration und ein Storyboard erlauben es dem Agenten, die etablierte Richtung fortzuführen, statt dieselben Fragen erneut zu stellen.
  • Mehrere Produktionsebenen kombinierenEin Stück kann HTML-Timing, anspringbare (seekable) Motion, Medien und Audio benötigen. Der Router verbindet diese Fähigkeiten, ohne eine einzelne Animationstechnik für die gesamte Aufgabe zu halten.

Grenzen, die du prüfen solltest

  • Kein eigenständiges Animations-PresetDieser Skill ist ein Orchestrierungs-Einstiegspunkt. Die Installation seiner Anweisungen ersetzt weder den gewählten Workflow noch die CLI, Render-Abhängigkeiten oder Medien-Assets.
  • Nicht jede Anfrage endet in MP4Eine navigierbare Präsentation, ein freigegebenes Storyboard oder eine reine Vorschau-Aufgabe hat einen anderen Endpunkt. Lege fest, ob tatsächlich eine gerenderte Datei benötigt wird.
  • Externe Dienste haben eigene AnforderungenDie Quelle prüft die Nutzung während der Erstellung. Mediengenerierung und gehostete Dienste können Konten, verfügbares Kontingent oder zusätzliche Autorisierung erfordern; eine Open-Source-Lizenz macht nicht jeden Dienst unbegrenzt nutzbar.

Diese Eingaben mitbringen

  • Das gewünschte ErgebnisNenne Zielgruppe, Thema, Seitenverhältnis, ungefähre Dauer und Endformat. Mach deutlich, ob es ein Promo, ein Untertitel-Durchgang, ein Deck, ein Erklärvideo oder ein individueller Schnitt sein soll.
  • Verwendbares QuellmaterialLiefere freigegebene Texte, Material, Produkt-Screenshots, Musik oder Quell-URLs. Kennzeichne Aussagen und Asset-Rechte; generierte Medien ersetzen keine sachlichen Produktbelege.
  • Bestehendes Projekt und PrüfgrenzenTeile BRIEF.md und relevante Projektdateien, wenn du die Arbeit fortsetzt. Lege Freigabepunkte und rein lokale Einschränkungen fest und gib an, ob Rendern oder Veröffentlichen erlaubt ist.

03 Entscheidungen, auf die es ankommt

Entscheidungen, auf die es ankommt

  1. Das Briefing trägt die Route weiter

    Bei Neuproduktionen endet der Intent-Prozess in BRIEF.md. Die spätere Produktion sollte dieser festgehaltenen Entscheidung folgen, statt die ursprüngliche Anfrage immer wieder neu zu deuten.

  2. HTML-Timing muss anspringbar sein

    Das Framework rendert einzelne Frames aus einer zeitgesteuerten Komposition. Motion und Medien müssen seinem Authoring-Vertrag folgen und nicht nur bei normaler Browser-Wiedergabe korrekt aussehen.

  3. Die Workflow-Installation bleibt schlank

    Das dokumentierte Standalone-Setup installiert das Kernset und ergänzt Erstellungs-Workflows, wenn sie ausgewählt werden. Ein Plugin-Paket hat einen eigenen mitgelieferten Katalog und Update-Manager; die beiden Installationswege sind nicht austauschbar.

04 Ein fokussiertes Briefing ausprobieren

Ein fokussiertes Briefing ausprobieren

Das folgende Beispiel-Briefing wurde nicht getestet. Prüfe vor der Verwendung das Setup des Skills.

Die Kern-Skills installieren

Der folgende Befehl ist der Installationsweg des Kernsets aus der README für Agenten und nicht-interaktive Nutzung.

Dokumentierte Installation des Kernsets
npx hyperframes skills update

Die CLI benötigt Node.js 22+ und FFmpeg. Die interaktive Alternative ist npx skills add heygen-com/hyperframes, dann „Core Skills“ auswählen. Claude Code hat außerdem eine separat dokumentierte Plugin-Installation. Erstellungs-Workflows werden bei Bedarf geladen; diese Seite behauptet keinen Installationstest.

Mit einer klar begrenzten Videoanfrage beginnen

Nutze das untenstehende, ungetestete Briefing, um Thema, Assets, Ausgabe und Endpunkt ausdrücklich festzulegen. Ein bestehendes Projekt sollte sein aktuelles Briefing und seine Konfiguration enthalten.

Beispiel-Briefing
Nutze den HyperFrames-Einstiegspunkt, um ein 20-sekündiges 16:9-Produktvorstellungsvideo aus den von mir bereitgestellten, freigegebenen Screenshots und Texten zu planen. Verwende nur diese Assets und Aussagen; erzeuge keine Musik, keinen Sprechertext und keine zusätzlichen Medien. Prüfe zuerst, ob dieser Ordner bereits BRIEF.md oder hyperframes.json enthält, und bewahre alle festgehaltenen Entscheidungen. Bestätige bei Neuproduktionen Zielgruppe und Workflow, schreibe das Briefing und bereite dann eine HTML-Komposition samt lokaler Vorschau vor. Halte das Projekt lokal. Zeige die Vorschau und berichte vor dem Rendern, welche Prüfungen tatsächlich gelaufen sind; veröffentliche nichts und nutze keine kostenpflichtigen Dienste. Falls ein erforderlicher Workflow, eine Abhängigkeit oder eine Nutzungsprüfung nicht verfügbar ist, erkläre die Einschränkung, statt so zu tun, als sei sie abgeschlossen.

Vor dem finalen Rendern prüfen

Prüfe die gewählte Route, die Nutzung der Assets, die Vorschau und die gemeldeten Prüfungen. Sieh dir die gerenderte Datei an, wenn eine entsteht, und trenne Rendern vom Veröffentlichen.

  • Der gewählte Workflow entspricht dem gewünschten Ergebnis und bewahrt bestehende Projektentscheidungen.
  • Die Vorschau nutzt die bereitgestellten Aussagen und Assets, mit lesbarem Text und Timing, das beim Anspringen von Zeitpunkten funktioniert.
  • Ergebnisse zu Abhängigkeiten, Nutzung und Rendern sind ausdrücklich genannt; eine lokale Vorschau wird nicht als veröffentlichtes oder gerendertes Video beschrieben.

OpenDesign bietet einen lokalen Design-Arbeitsbereich für Coding-Agenten. Dieser Eintrag bedeutet nicht, dass der Skill mitgeliefert wird oder dass seine externen Tools, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte fixierte Quellrevision. Verhalten und Anforderungen im Upstream können sich ändern.

Quellen-Inhaber
HeyGen
Geprüfter Snapshot
2026-10-12 · 2905162d925f
Redaktionelle Quellenzusammenfassung
HyperFrames ist der Routing- und Projektfortsetzungs-Einstiegspunkt für eine Familie HTML-nativer Video-Workflows. Er wählt Produktionspfade aus und lädt Fachfähigkeiten; er ist weder ein einzelner Animationseffekt noch ein aufgezeichnetes Ergebnis.

Originalzusammenfassung von OpenDesign auf Basis der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, keine Skill-Nutzung und keine Qualitätsbewertung.

06 Fragen vor dem Start

Fragen vor dem Start

Worin unterscheidet sich der Haupt-Skill von hyperframes-animation?

Der Haupt-Skill erkennt den Projektstatus und wählt den Produktions-Workflow. Der Animations-Skill liefert Motion-Regeln und Laufzeit-Hinweise, wenn der Workflow sie braucht. Beginne bei einer durchgängigen Videoanfrage mit dem Haupteinstiegspunkt.

Brauche ich React oder jeden veröffentlichten Skill?

React ist nicht erforderlich: HyperFrames erstellt Kompositionen in HTML mit anspringbarer (seekable) Animation. Die Standalone-README empfiehlt zuerst das Kernset, wobei Erstellungs-Workflows bei Bedarf installiert werden; Plugin-Installationen bringen ihren eigenen Katalog mit.

Kann er ein bestehendes Projekt einfach nur rendern?

Ja. Die Quelle behandelt eine konkrete Anfrage zum Rendern, Inspizieren, Validieren oder für eine Vorschau als begrenzte Operation, ohne das Interview für Neuproduktionen neu zu starten. Das Projekt benötigt trotzdem die erforderliche CLI und Render-Umgebung.

HyperFrames

Beginne mit dem Video, das du brauchst

Bring ein klar begrenztes Briefing oder ein bestehendes Projekt mit. Wähle den passenden Workflow, prüfe die Vorschau und entscheide ausdrücklich, wann gerendert oder veröffentlicht wird.

Dokumentierte Installation des Kernsets
npx hyperframes skills update