indfn/creatorforge

HyperFrames – hier starten

HyperFrames rendert Videos aus HTML – eine Komposition ist eine HTML-Datei, deren DOM das Timing mit data-*-Attributen deklariert, deren Animationen suchbar sind und deren Medienwiedergabe vom Framework verwaltet wird. Der vollständige Authoring-Vertrag befindet sich in /hyperframes-core; lesen Sie ihn, bevor Sie Kompositionen als HTML schreiben.

Nachfolgend finden Sie eine Fähigkeitskarte (die Domänenskills, die bei Bedarf geladen werden) und den Intent-Router (wählen Sie einen Workflow für jede „Mach mir ein …“-Anfrage – normalerweise ein Video, aber auch ein navigierbares Deck oder eine Kompositions-Portierung). Die Aufteilung erfolgt nach Besitz, nicht nach Ausgabetyp: Ein Workflow besitzt ein Ende-zu-Ende-Ergebnis (eigenes Projektverzeichnis, durchgate Schritte, Sub-Agenten, endgültiges Artefakt); ein Domänenskill ist eine Fähigkeitsebene, die ein Workflow während des Betriebs einbindet und niemals die Aufgabe besitzt.

Fähigkeitskarte – die Domänenskills

Atomare Fähigkeiten, die Sie bei Bedarf laden – keine vollständigen Workflows; sie besitzen nie die Ende-zu-Ende-Aufgabe. Für „Mach mir ein …“-Anfragen verwenden Sie den Intent-Router unten.

Sie möchten ...	Skill
Eine HTML-Komposition erstellen / bearbeiten – der data-*-Vertrag, Clips, Tracks, Unterkompositionen, Variablen	/hyperframes-core
Animieren – atomare Bewegung, Szenen-Blaupausen, Übergänge, Laufzeit-Adapter (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU)	/hyperframes-animation
Sicher suchbare Keyframes erstellen – GSAP-Timelines, CSS-Keyframes, Anime.js, WAAPI, FLIP, Pfade, Masken, SVG-Morph/Zeichnung, 3D-Tiefe, plus hyperframes keyframes-Diagnose	/hyperframes-keyframes
Kreative Richtung – frame.md / design.md, Paletten, Typografie, Erzählung, Beat-Planung, audio-reaktiv	/hyperframes-creative
Medien – Lösen/Generieren von BGM, SFX, Bild, Icon, Markenlogo, Stimme, Farbgradierung, LUT; TTS-Sprachausgabe, Transkription, Hintergrundentfernung, Untertitel; projektübergreifende Wiederverwendung	/media-use
CLI-Entwicklungsloop – init, lint, validieren, inspizieren, Vorschau, rendern, veröffentlichen, doctor	/hyperframes-cli
Registry-Blöcke / Komponenten installieren (hyperframes add)	/hyperframes-registry
Figma-Inhalte importieren – Assets, Tokens, Komponenten, Storyboards → rekonstruierte Bewegung (REST/CLI); Motion (MCP), Shader (MCP-Quelle / natives Export)	/figma

---

Intent-Routing – einen Workflow auswählen

Dieser Abschnitt kennt nur die Workflows der obersten Ebene; er lädt keine internen Referenzen oder die oben genannten Domänenskills.

Vor dem Routing – die Eingabe bestätigen, nicht die Spezifikation

Das Routing muss wissen, worum es in dem Video geht – seine Eingabe und sein Thema. Wenn dies nicht angegeben ist („Mach ein Video über unser Ding“ ohne URL, Produkt, Thema oder Asset), fragen Sie nach, bevor Sie einen Workflow betreten – die Entscheidung für einen Workflow IST die Routing-Entscheidung. Maximal zwei Fragen:

• Eingabe – ein Produkt (URL / Briefing), eine allgemeine Website, ein GitHub-PR, ein zu erklärendes Thema oder ein vorhandenes Talking-Head-Video?
• Figma-Quelle – wenn die Eingabe eine figma.com-URL ist, extrahiert /figma zuerst Assets/Tokens/(Komponenten/Storyboard), unabhängig davon, welcher Workflow unten für die Form des Videos gewählt wird; dieser Workflow baut dann auf der Ausgabe von /figma auf – niemals durch direkte Steuerung von Figma über rohe MCP-Tools (überspringt SVG-Bereinigung, Provenienz und Marken-Token-Bindung).

Modus – wenn die Anfrage ein fortlaufendes autonomes Signal trägt („Überrasch mich“, „Entscheide für mich“, „Bau es einfach“), notieren Sie es und übergeben Sie es an den Workflow: Der gesamte Durchlauf wird autonom und kein späterer Schritt fragt erneut. Ohne Signal fragt der Workflow den Modus als erste Briefing-Frage. Standard ist kollaborativ. (/motion-graphics ist von Natur aus autonom.) Semantik: hyperframes-core → references/brief-contract.md.

Spezifikationsstandards – angeben, nicht fragen (sie ändern nie die Route): Seitenverhältnis leitet sich vom Ziel ab – Social-Feed (X / LinkedIn / Instagram) → quadratisch 1:1, TikTok / Reels / Shorts → 9:16, YouTube / Einbettung / unbekannt → 16:9; Erzählungs-/Untertitel-Sprache = die des Benutzers. Der gewählte Workflow bestätigt seine eigenen Spezifikationen in seinem ersten Schritt (Feldsemantik: hyperframes-core → references/brief-contract.md).

Workflow-Spickzettel

Workflow	Verwenden für
/product-launch-video	Verkauf eines Produkts (SaaS, App, Unternehmen / Produkt-Website) – aus einer URL, einem Briefing oder einem Skript → eine Werbung. Standard für jede kommerzielle URL, selbst wenn nur die Website genannt wird.
/website-to-video	Die Website selbst zeigen – eine Tour / Präsentation, die aus den eigenen Screenshots der Website erstellt wurde. Für nicht-kommerzielle Websites (Portfolio, Blog, Doku, persönlich, Veranstaltung) oder wenn der Benutzer eine Tour, keine Werbung möchte.
/faceless-explainer	Ein Thema / Konzept aus Text erklären – kein Produkt, keine URL; jedes Bild wird vom LLM erfunden
/pr-to-video	Ein GitHub-PR / eine Code-Änderung → Erklärvideo für Changelog / Feature-Veröffentlichung / Fix / Refactoring
/embedded-captions	Hinzufügen von Untertiteln / Beschriftungen zu einem vorhandenen Talking-Head-Video (Bildmaterial unberührt)
/talking-head-recut	Verpacken eines vorhandenen Talking-Head-Videos mit designten grafischen Overlays – Lower Thirds, Daten-Highlights, kinetische Titel, Pull-Quotes
/motion-graphics	Ein kurzes (~unter 10s), unvertontes Stück, bei dem die Bewegung die Botschaft ist – kinetischer Text, ein Statistik-/Diagramm-Hit, ein Logo-Sting, eine animierte Karte, ein animierter Tweet / eine animierte Überschrift, ein eigenständiges Lower-Third / Overlay (MP4 oder transparentes Alpha)
/music-to-video	Ein Musiktitel → ein beat-synchronisiertes Video – Lyric-Video, Diashow oder kinetische Werbung; die Musik bestimmt das Tempo (optionale Benutzerbilder / -videos werden auf das Beat-Raster geschnitten)
/slideshow	Eine Präsentation / ein Pitch-Deck / ein interaktives Deck – diskrete Folien, Fragmente, Verzweigungen, Hotspots; Ausgabe ist ein navigierbares Deck, kein gerendertes Video
/general-video	Alles andere – längere oder mehrszenige Stücke, eine statische Schleife / ein Poster, eine benutzerdefinierte Komposition
/remotion-to-hyperframes	Portieren einer vorhandenen Remotion (React)-Komposition zu HyperFrames (Migration, keine Neuerstellung)

Disambiguierung (nur bei Verwechslungsgefahr):

• Bewegungsorientiert & unvertont (unter ~10s, die Bewegung ist die Botschaft) → /motion-graphics, unabhängig von der Eingabe.
• Eine URL oder ein Skript – eine Sache fragen: Verkauft die Website ein Produkt? Ja (SaaS / App / Produkt / Unternehmenswebsite) → /product-launch-video – eine Werbung, und Standard für jede kommerzielle URL, selbst wenn nur die Website genannt wird. Nein, oder der Benutzer möchte die Website nur so zeigen, wie sie ist (Portfolio / Blog / Doku / persönlich / Veranstaltung) → /website-to-video – eine Tour. Ein GitHub-PR-Link → /pr-to-video; ein Konzept ohne Produkt oder Website → /faceless-explainer.
• Vorhandenes Filmmaterial – einfache gesprochene Untertitel → /embedded-captions; designte Overlay-Karten → /talking-head-recut. Keines von beiden bearbeitet das Filmmaterial selbst (Neutiming / Neufärbung / Neurahmen / Neuanordnung / Audio ist NLE-Bearbeitung – außerhalb des Rahmens).
• Ein Musiktitel ist die Eingabe (eine Audiodatei oder ein Video, aus dem Audio extrahiert werden soll) mit keiner Erzählung → /music-to-video – die Beats / Energie der Musik treiben das Tempo. (Erzählte Stücke bleiben beim oben eingabeabgeglichenen Workflow; /motion-graphics ist für kurze unvertonte Bewegungen, die nicht von Musik angetrieben werden.)
• Eine Präsentation / ein Pitch-Deck / ein interaktives Deck (diskrete Folien, Navigation, Präsentatormodus) → /slideshow – Ausgabe ist ein navigierbares Deck, kein gerendertes Video. Eine explizite „Diashow“-Anfrage wird direkt verarbeitet; ein angrenzender Auslöser („Deck / Folien / Präsentation / diese Seite konvertieren“) lässt /slideshow vor dem Erstellen bestätigen, dass es sich um eine Diashow handelt, und wechselt andernfalls zum entsprechenden Nicht-Diashow-Workflow.
• Länge ist ein Leitfaden, kein Tor – der Intent wählt den Workflow; gehen Sie nur zu /general-video, wenn das Stück deutlich länger als ~3 Min. ist, oder es sich um ein statisches / Schleifen- / benutzerdefiniertes Format handelt.

Nach der Auswahl – garantieren, dass der Workflow installiert ist

Sobald Sie einen Workflow ausgewählt haben, führen Sie den Aktualisierungsschritt vor dem Lesen seines Skills aus – Workflow-Skills werden bei Bedarf installiert, daher ist der von Ihnen ausgewählte möglicherweise noch nicht auf diesem Rechner vorhanden (seine Auslösephrasen leben in diesem Router, genau damit Sie zu Skills routen können, die nicht installiert sind):

npx hyperframes skills update <workflow-name>

Reiner Name, ohne führendes / – z.B. npx hyperframes skills update pr-to-video. Das Benennen eines Skills garantiert, dass es plus die Kerndomänenskills, von denen jeder Workflow abhängt, installiert und aktuell sind: ein schnelles No-Op, wenn alles bereits vorhanden ist, eine gezielte Installation nur der fehlenden / veralteten Skills, wenn nicht – niemals die gesamte Menge. Lesen Sie dann das Skill des Workflows und fahren Sie fort. Der gleiche Befehl funktioniert für ein Domänenskill nach Bedarf aus der Fähigkeitskarte (z.B. npx hyperframes skills update figma).

Wenn der Befehl fehlschlägt, zeigen Sie den Fehler dem Benutzer an, anstatt den Workflow aus dem Gedächtnis zu improvisieren. Manuelles Fallback (keine HyperFrames-CLI verfügbar): npx skills add heygen-com/hyperframes --skill <workflow-name>; alles auf einmal: npx skills add heygen-com/hyperframes --all.

Skills aktuell halten

HyperFrames-Skills sind versioniert und werden lazy installiert: die Kernmenge eifrig, die Workflows bei der ersten Verwendung.

• Kernmenge – dieser Router, die hyperframes-*-Domänenskills und media-use. npx hyperframes init (das jeder Erstellungsworkflow beim Gerüstbau ausführt) überprüft GitHub und aktualisiert die Kernmenge sowie alles andere, was bereits installiert ist. Es erweitert die Installation niemals – Workflow-Skills, die Sie nicht verwendet haben, werden nicht gezogen. Ein erneutes Ausführen von init auf einem aktuellen Rechner ist ein No-Op; offline (oder ratenbegrenzt) verhält es sich anmutig und schlägt nie hart fehl. Das Flag --skip-skills ist derzeit neutralisiert (eine vorübergehende Maßnahme, während das skills.sh-Register aufholt); CI/Tests optieren über die Umgebungsvariable HYPERFRAMES_SKIP_SKILLS=1 ab.
• Workflow-Skills – werden zum Zeitpunkt der Auslösung durch den obigen Aktualisierungsschritt installiert und aktualisiert (skills update <workflow-name>).

Wenn sich eine Aufgabe unerwartet verhält oder vor einem langen Build, überprüfen Sie, ob die installierten Skills aktuell sind:

• Überprüfen: npx hyperframes skills check (fügen Sie --json für ein maschinenlesbares Urteil hinzu; beendet mit Nicht-Null, wenn etwas Installiertes veraltet ist oder die Kernmenge unvollständig ist – noch nicht installierte Workflow-Skills werden als auf Anfrage verfügbar gemeldet, nicht als Fehler).
• Aktualisieren: npx hyperframes skills update – aktualisiert die Kernmenge plus alles Installierte auf die neueste Version und entfernt Skills, die nicht mehr veröffentlicht werden. Ohne Namen installiert es niemals Workflows, die Sie nicht verwendet haben; das Benennen von Skills (skills update <name…>) installiert diese zusätzlich.
• Gesamte Menge, explizit: npx hyperframes skills (oder npx skills add heygen-com/hyperframes --all).

Die CLI zeigt zudem eine einzeilige Erinnerung an, wenn ein render / lint / validate-Lauf veraltete Skills erkennt.

Workflow-Details

/product-launch-video

• Eingabe: Ein Produkt, das vermarktet wird – (a) eine Produkt-URL (wird mit Headless-Chrome nach Assets + Markentokens gecrawlt), (b) ein Skript / Briefing, das die Website des Produkts benennt, auch ohne Link (PLV löst auf + crawlt sie, es sei denn der Benutzer widerspricht), oder (c) ein Skript ohne ableitbare Website / „nicht scrapen“ (No-Capture-Modus – wählen Sie eine Stilvorlage, die Palette + Designsystem liefert). Ein geliefertes Skript kann die wörtliche Sprachausgabe oder pro Szene umstrukturiert sein – PLV fragt nach.
• Ausgabe: eine Produkteinführungs-/SaaS-Werbung als HyperFrames-Komposition → MP4 (Sweetspot 30–90s) – der Wert des Produkts ist das Thema, kein Rundgang durch die Website. Für eine reine Tour der Website verwenden Sie /website-to-video.
• Auslöser: „Startvideo für X“, „Werbung für unsere Website“, „mein SaaS in einer Minute erklären“, „mein Skript in eine 60-Sekunden-Werbung verwandeln", "Text

…

[zur Übersetzung gekürzt]