Communitygithub.com

m2promario-afk/hyperframes-M2PRO

Verwandeln Sie beliebigen Text – einen Artikel, Notizen, ein Thema oder eine Kurzbeschreibung – in ein erklärendes Video ohne Gesicht: Es gibt keine Website oder Footage zum Aufnehmen, die visuellen Elemente werden pro Szene erfunden (Typografie, abstrakte Grafiken, Diagramme, Datenvisualisierung). Verwenden Sie es für Themen-Erklärvideos, Konzeptaufschlüsselungen, Anleitungen und Listen. Kein Video, das von einer Website erstellt wird (/product-launch-video – Werbung oder Tour). Unsicher → /hyperframes.

Was ist hyperframes-M2PRO?

Dieses Skill verwandelt eine Textquelle (Artikel, Notizen, Thema) in ein fachliches Erklärvideo ohne echte Aufnahmen oder Assets. Es ist für Entwickler und AI-Agenten konzipiert, die HyperFrames verwenden, um ansprechende, gesichtslose Erklärinhalte zu erstellen. Der Skill orchestriert einen vollständigen Arbeitsablauf: Einrichten des Projekts, Verarbeiten des Benutzertexts, Auswählen eines Designsystems aus vorgegebenen Vorlagen, Erstellen eines Storyboards und Skripts sowie Generieren von Audio (Sprachausgabe, Musik) und animierten Einzelbildern (HTML). Es unterstützt sowohl Online- (HeyGen) als auch Offline-Engines (Kokoro) für Text-to-Speech und Musik und erfordert aufgrund der Erstellungslogik für visuelle Elemente keine Erfassung von Websites oder realen Aufnahmen. Der Skill legt Wert auf eine erzählerische Neugestaltung des Eingabetexts, nicht auf eine wörtliche Wiedergabe, und integriert Testschleifen für Storyboard und finale Vorschau.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/m2promario-afk/hyperframes-M2PRO/tree/HEAD/skills/faceless-explainer

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Plugin-Installationen: Führen Sie vor dem Setup oder den Aktualisierungsbefehlen die Plugin-Installationsregeln aus, wenn sich dieses Skill in einem HyperFrames-Plugin befindet. Bei eigenständigen Installationen gelten die unten stehenden Aktualisierungshinweise.

Halten Sie dieses Skill zuerst aktuell – Bestätigen Sie mit dem Benutzer, bevor Sie Folgendes ausführen: npx hyperframes skills update faceless-explainer. Ein schneller No-op, wenn alles auf dem neuesten Stand ist; andernfalls wird dieses Skill zusammen mit den Kernbereich-Skills, von denen es abhängt, aktualisiert, bevor Sie sich darauf verlassen.

media-use: Bevor Sie Audio/Bilder/Logos beziehen, rufen Sie /media-use auf, um BGM/SFX/Bilder aus dem HeyGen-Katalog und Markenlogos aus ihren offiziellen Quellen abzurufen. Führen Sie zuerst --adopt aus, um vorhandene Assets zu registrieren. Siehe Skill /media-use. Wenn die Host-App eigene Musik- oder Soundeffekt-Tools bereitstellt, verwenden Sie diese für Musik und Soundeffekte.

Gesichtsloses Erklärvideo zu HyperFrames

Verwenden Sie dieses Skill, um einen Textkörper in ein Erklärvideo zu verwandeln: Wählen Sie ein Designsystem, planen Sie eine lehrreiche Geschichte und bauen Sie es Bild für Bild in HyperFrames auf. Gesichtslos bedeutet, dass jedes visuelle Element nachgelagert erfunden wird – es gibt keinen Aufnahmeschritt und kein reales Asset-Inventar.

Der Einstieg erfolgt über /hyperframes. Sie sind der Orchestrator. Führen Sie jeden Schritt aus, überprüfen Sie sein Tor, und fahren Sie erst dann fort. Dieses Skill dient zum Erklären eines Themas aus Text, ohne Produkt und ohne zu erfassende Website. Bei jeder anderen Absicht, einem bloßen „Video erstellen" oder bei Unsicherheit → lesen Sie zuerst /hyperframes – die Absichtsebene besitzt jede Routenentscheidung, und eine neue Erstellung, die ohne BRIEF.md hier ankommt, durchläuft sie trotzdem (Eröffnungsregel des Setups).

Sie sind der Orchestrator. Arbeiten Sie in videos/<project>/. Führen Sie die Schritte der Reihe nach aus und passieren Sie jedes Tor, bevor Sie fortfahren. Benutzergesteuerte Schritte sind Schritt 0, Schritt 3 und Schritt 6. Lesen Sie ../hyperframes/references/brief-contract.md vor Schritt 0 – es definiert die Tortypen und wie flow/storyboard der BRIEF.md den Modus ableiten, der die Tore von Schritt 3/4/6 regelt. Führen Sie jeden Schritt selbst durch, außer Schritt 5, wo Sie einen Unter-Agenten pro Bild entsenden. Legen Sie hier keine Design- oder Bewegungsregeln fest; diese leben im Bildarbeiter-Unter-Agenten, den lokalen ../hyperframes-animation/rules/ + ../hyperframes-animation/blueprints/ dieses Skills und hyperframes-creative.

Workflow: Schritt 0 Setup → hyperframes.json; Schritt 1 Brief → capture/extracted/; Schritt 2 Designsystem → frame.md; Schritt 3 Storyboard/Skript → STORYBOARD.md und SCRIPT.md; Schritt 3.1 Audio → audio_meta.json; Schritt 4 Visuelles Design → angereicherte STORYBOARD.md; Schritt 5 Bilder → compositions/frames/NN-*.html und index.html; Schritt 6 Finaler Render → renders/video.mp4.


Schritt 0: Setup

Ziel: Mit einem bestätigten Brief einsteigen, das HyperFrames-Projekt erstellen und den Brief dauerhaft machen.

Der Brief wird von der Absichtsebene bestätigt, nicht durch hier gestellte Fragen. Eröffnungsregel, in der Reihenfolge: (1) BRIEF.md existiert → lesen Sie sie und fragen Sie nichts – der Brief ist abgeschlossen, und sein flow/storyboard leiten den Modus ab (Briefvertrag § 1). (2) Keine BRIEF.md, aber das Projekt existiert (hyperframes.json / STORYBOARD.md auf der Festplatte) → setzen Sie vom Frontmatter des Storyboards und den aufgezeichneten Präferenzen fort; befragen Sie ein halbfertiges Projekt niemals erneut. (3) Weder noch – eine neue Erstellungsanfrage, die direkt hier eingetroffen ist → lesen Sie /hyperframes und führen Sie seine Absichtsebene aus (references/intent-interview.md): sie prüft Rezepte und gespeicherte Standardeinstellungen, führt die Fragen dieser Route durch (../hyperframes/references/routes/faceless-explainer.md) und gibt den gesperrten Brief zurück. Bearbeitungsanfragen überspringen all dies – führen Sie die Bearbeitung durch.

Initialisieren Sie nur, wenn hyperframes.json fehlt. Benennen Sie <project> nach dem Thema in Kebab-Schreibweise, z. B. compound-interest-explained; verwenden Sie niemals den Arbeitsbereichsnamen oder einen Zeitstempel.

npx hyperframes init "videos/<project>" --non-interactive --example=blank --skill=faceless-explainer – init prüft die installierten Skills gegen die neuesten auf GitHub und aktualisiert den globalen Satz, wenn welche veraltet sind.

Nach der Initialisierung sei <PROJECT_ROOT> = videos/<project> und führen Sie jeden nachfolgenden relativen Pfadbefehl mit diesem Verzeichnis als Arbeitsverzeichnis aus. In den folgenden Befehlen bedeutet . <PROJECT_ROOT>; schreiben Sie niemals .media, capture oder Ausgabedateien in das aufrufende Verzeichnis.

Schreiben Sie BRIEF.md sofort nach der Initialisierung (niemals davor – init lehnt ein nicht leeres Verzeichnis ab): der gesperrte Brief der Absichtsebene, Format gemäß ../hyperframes/references/brief-format.md. Lösen Sie <MEDIA_DIR> als das installierte Skill-Verzeichnis /media-use auf. Zeichnen Sie dann jede präferenzgestützte Antwort mit node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes . auf (brief-format.md nennt die Teilmenge). Wenn die Absichtsebene ein Rezept übernommen hat, führen Sie node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes . --name <name> aus; es kopiert seine frame.md in das Projekt (Schritt 2 wird dann übersprungen) und gibt die Skelett-Entwürfe von Schritt 3 zurück. Ein Rezept füllt Antworten, keine Genehmigungen; die Überprüfungstore laufen trotzdem.

Zeigen Sie den Anmeldestatus an, bevor Sie über das Setup hinausgehen – führen Sie npx hyperframes auth status aus und geben Sie die Ausgabe wörtlich weiter. Es meldet, ob Sprach-/BGM-Ausgabe HeyGen oder lokale Engines verwendet und, falls abgemeldet, wie man sich anmeldet. Wenden Sie einen Zweig an:

  • Kollaborativ: Warten Sie, bis der Benutzer sich anmeldet oder explizit offline / go wählt.
  • Autonom: Geben Sie den Status an und fahren Sie mit den verfügbaren lokalen Engines fort.

Übersehen Sie nicht stillschweigend eine erforderliche Fähigkeit, wenn kein Offline-Anbieter existiert; machen Sie den Hinderungsgrund sichtbar. Falten Sie diese Entscheidung nicht in eine andere Frage und schreiben Sie keine Schlüssel in ein pro-Repository .env. Eigentumsrechte an der Authentifizierung und Offline-Ausweichmöglichkeiten: /media-use references/setup-providers.md § Anbieter.

Tor: hyperframes.json und BRIEF.md existieren; die präferenzgestützten Antworten wurden aufgezeichnet (Briefvertrag § 2); der Anmeldestatus wurde angezeigt (angemeldet oder im Offline-Modus fortgesetzt).


Schritt 1: Brief (keine Erfassung)

Ziel: Den Text des Benutzers als Informationsquelle in das Projekt einbinden. Es gibt keine Website-Erfassung und keine echten Assets – dies ist ein gesichtsloses Erklärvideo.

Speichern Sie die vollständige Eingabe des Benutzers wörtlich und erstellen Sie dann das synthetische Erfassungspaket von Hand:

  • capture/extracted/visible-text.txt – der vollständige Artikel / Notizen / Thema / Brief, wörtlich. Dies ist die Quelle der Information, keine Vorlage für die Geschichte (Schritt 3 formt sie neu).
  • capture/extracted/tokens.json – { "title": "", "description": "", "colors": [], "fonts": [] }. Füllen Sie title/description aus dem Brief. Lassen Sie colors/fonts leer, es sei denn, der Benutzer hat explizit Markenfarben oder -schriftarten angegeben – dann fügen Sie sie hinzu (die Designvoreinstellung liefert trotzdem eine vollständige Palette).

Wenn der Benutzer ein Skript eingefügt hat oder seine Formulierung beibehalten werden soll, speichern Sie es wörtlich als user_script.txt; VO_MODE (wörtlich oder neu strukturiert) stammt aus BRIEF.md – die Absichtsebene fragt danach, wenn ein Skript eintrifft. Fragen Sie hier nur einmal, falls der Brief es dennoch nicht enthält, und speichern Sie die Antwort für Schritt 3.

Führen Sie kein npx hyperframes capture aus (es gibt keine URL). Erstellen Sie keine asset-descriptions.md oder füllen Sie capture/assets/ – gesichtslose visuelle Elemente werden in den Schritten 4-5 erfunden, nicht erfasst. Die einzige Ausnahme: Wenn der Benutzer ein echtes Bild bereitgestellt hat, legen Sie es unter public/<basename> ab und notieren Sie es für Schritt 3.

Tor: capture/extracted/visible-text.txt und capture/extracted/tokens.json existieren; Sie können das Thema und die Zielgruppe des Erklärvideos in einem klaren Satz nennen.


Schritt 2: Designsystem

Ziel: Eine ausgelieferte Bildvorlage auswählen; ein Skript verwandelt sie in die frame.md + Beschriftungs-Skin des Videos.

Wenn BRIEF.md einen style_preset nennt – der Benutzer hat ihn nach Augenschein aus den Vorschauen in der Absichtsebene ausgewählt – verwenden Sie ihn; die Entscheidung liegt nur bei Ihnen, wenn der Brief dazu schweigt. Dann treffen Sie die eine Entscheidung – welche Vorlage: Lesen Sie ../hyperframes-creative/references/design-spec.md und durchsuchen Sie ../hyperframes-creative/frame-presets/; wählen Sie die Vorlage, deren Aussehen am besten zu Thema, Ton und Zielgruppe passt. Führen Sie dann Folgendes aus:

node <SKILL_DIR>/scripts/build-frame.mjs --preset <name> --hyperframes .

Das Skript erledigt den Rest deterministisch: kopiert die FRAME.md der Vorlage → frame.md und remixt sie auf alle Marken-Token in capture/extracted/tokens.json (Markenfarben auf die Farbschlüssel der Vorlage nach Rolle abgebildet; die Anzeige- und Textschriftarten der Vorlage durch die der Marke ersetzt), kopiert den Beschriftungs-Skin der Vorlage nach .hyperframes/caption-skin.html und validiert sich selbst (beendet mit Exit 1 bei einer fehlerhaften Zuordnung). Fahren Sie fort, sobald es mit Exit 0 endet – keine manuellen Änderungen an der Spezifikation.

Ein gesichtsloses Erklärvideo hat normalerweise keine Markenfarben/-schriftarten (tokens.json Farben/Schriftarten leer) → das Skript behält die eigene Palette der Vorlage, ein vollständiges auslieferungsfähiges Design. Nur wenn der Benutzer Markenfarben/-schriftarten genannt hat, fügen Sie sie vor der Ausführung zu tokens.json hinzu und passen Sie frame.md nur dann von Hand an, wenn eine Zuordnung es wirklich erfordert.

Tor: build-frame.mjs wurde mit Exit 0 beendet – frame.md existiert von einer benannten Vorlage, und (wenn die Vorlage eine mitliefert) .hyperframes/caption-skin.html existiert als Quelle des Beschriftungs-Skins; die gewählte Vorlage wurde als Präferenz aufgezeichnet (--key style_preset --workflow <dieser Workflow>, Briefvertrag § 2).


Schritt 3: Storyboard und Skript

Ziel: Den Text in einen genehmigten bildweisen Lehrplan verwandeln.

Lesen Sie ../hyperframes-creative/references/story-spine.md (Aufhängersprache, Wert-vor-Beweis, Storyboard-als-Vorschlag, quellnachvollziehbare visuelle Elemente), references/story-design.md, ../hyperframes-animation/blueprints-index.md, ../hyperframes/references/storyboard-format.md und ../hyperframes/references/script-format.md. Verwenden Sie sie, um STORYBOARD.md und, wenn eine Erzählung benötigt wird, SCRIPT.md zu schreiben. Setzen Sie die duration: im Frontmatter aus der length des Briefs – eine grobe Erwartung; die Zusammenstellung berichtet, wo der Schnitt im Vergleich dazu landet.

Verwenden Sie story-design.md für die Erklärstruktur (Konzept / Anleitung / Liste / Geschichte), Aufhängerstrategie, Klarheitstechniken, emotionale Akzente, die Typ-Enum-Zuordnung und VO_MODE. Die Reihenfolge des Videos ergibt sich aus dem narrativen Design, nicht der Absatzreihenfolge des Eingabetextes – neu anordnen, zusammenführen, weglassen, komprimieren. Als weiche Richtlinie konsultieren Sie das Rollen→Blueprint-Menü in ../hyperframes-animation/blueprints-index.md: Schreiben Sie für jeden Beat das Voiceover in der Form, die sein Kandidat-Blueprint impliziert, und taggen Sie diesen Kandidaten mit der blueprint: ID, wenn eine passt. Die Lehrwahrheit entscheidet dennoch, welche Beats existieren – erzwingen Sie niemals einen Beat, um in ein Blueprint zu passen, und erfinden Sie niemals einen Beat, nur weil eine bewährte Form verfügbar ist. Gesichtslose visuelle Elemente werden nachgelagert erfunden, daher führen Bilder kein Asset-Inventar: lassen Sie asset_candidates leer, es sei denn, der Benutzer hat ein echtes public/<basename>-Bild bereitgestellt. Verwenden Sie die genauen erforderlichen Felder aus den Storyboard- und Skript-Referenzen.

Führen Sie nach dem Entwurf den Prüfungsdurchlauf der Überprüfungsschleife durch – ../hyperframes/references/review-loop.md § 1: präsentieren Sie den Plan als Vorschlag und stellen Sie die beiden Fragen – genehmigen oder ändern, und Skizzen zuerst (empfohlen) oder überspringen. Feedback kommt als Chat-Antwort; wiederholen Sie die Schleife bis zur Genehmigung. Dies ist ein Kontrollpunkt-Tor (Briefvertrag § 1): Im autonomen Modus gibt es nichts zu fragen – posten Sie dieselbe Zusammenfassung als Hinweis und fahren Sie fort; Skizzen fließen in den Build ein, und die endgültige Vorschau mit ihrer einen Frage erscheint in Schritt 6.

Tor: STORYBOARD.md existiert, jedes Bild hat die erforderlichen narrativen Felder, SCRIPT.md existiert, wenn eine Erzählung benötigt wird, und der Benutzer hat den bildweisen Plan genehmigt (autonom: die Zusammenfassung wurde als Hinweis gepostet).


Schritt 3.1: Audio

Ziel: Erzählung, Wort-Zeitsteuerungen, Musik und Audio-Metadaten aus dem genehmigten Skript generieren.

Starten Sie Audio nach der Genehmigung von Schritt 3. Führen Sie es im Hintergrund aus und fahren Sie dann mit Schritt 4 fort. (Der Anmeldestatus wurde bereits in Schritt 0 angezeigt; die Engine fällt automatisch zurück.)

Wählen Sie die Erzählstimme basierend auf der Anfrage des Benutzers aus, bevor Sie sie aufrufen. Wenn die Anfrage eine Stimme, ein Geschlecht oder einen Ton genannt hat, wählen Sie eine passende Stimmen-ID und übergeben Sie sie mit --voice <id>. Die Standardeinstellung der Pipeline ist ansonsten Marcia (weiblich) auf HeyGen / am_michael auf Kokoro – daher wird eine Anfrage wie „eine männliche Stimme“ stillschweigend ignoriert, es sei denn, Sie übergeben das Flag. Stimmen-IDs sind anbieterabhängig; klären Sie gegen den Anbieter auf, den der Anmeldestatus von Schritt 0 ausgewählt hat: HeyGen (angemeldet) über node <MEDIA_DIR>/audio/scripts/heygen-tts.mjs --list (oder GET /v3/voices?engine=starfish); Kokoro (offline) über die Stimmentabelle in <MEDIA_DIR>/audio/references/tts.md (Präfixe am_/bm_ männlich, af_/bf_ weiblich). Wenn der Benutzer keine Präferenz geäußert hat, fallen Sie auf die gespeicherte Stimme zurück (Briefvertrag § 2), bevor Sie auf die Pipeline-Standardeinstellung zurückgreifen, und sagen Sie, welche Sie verwendet haben; lassen Sie --voice nur weg, wenn keines eine nennt. Wenn der Benutzer in diesem Durchlauf explizit eine Stimme ausgewählt hat, zeichnen Sie sie auf (prefs.mjs record --key voice).

node <SKILL_DIR>/scripts/audio.mjs --script ./SCRIPT.md --storyboard ./STORYBOARD.md --hyperframes . --out ./audio_meta.json --voice <voice-id> &

Das Audio-Skript übernimmt Erzählung, Wort-Zeitsteuerungen, BGM-Suche aus der HeyGen-Musikbibliothek und Zeitsteuerungs-Metadaten. Die BGM-Stimmung stammt aus dem music:-Feld des Storyboards. Dies verwendet die HeyGen-Audio-API zum Abrufen, nicht zur Generierung, und dieselbe ~/.heygen-Anmeldeinformation wie TTS. Lesen Sie für Anbieterdetails ../media-use/audio/references/tts.md. Wenn die eigenen Tools der Host-App die Musik oder einen Soundeffekt erstellen, legen Sie die Datei unter assets/ ab und listen Sie sie in der audio_meta.json Datei mit der Markierung "source": "host" auf: Musik als bgm { "path": "assets/…", "source": "host" } mit music: none im Storyboard; ein Sound als sfx-Eintrag { "frame": <n>, "file": "assets/…", "offset_s": 0, "duration_s": <seine Länge>, "source": "host" }. Jeder Audio-Durchlauf behält diese, und ein Bild mit einem Host-Sound erhält keinen nachgeschlagenen Hinweis.

Wenn es keine Erzählung und keine SCRIPT.md gibt, überspringen Sie die Sprachgenerierung. BGM kann trotzdem laufen, wenn das Storyboard eine Musikstimmung hat.

Der kanonische vollständig stille Marker (gemeinsam von den Workflows verwendet, die dieses Audio-Modell wiederverwenden): music: none im oberen YAML-Block der STORYBOARD.md, keine SCRIPT.md, und keine sfx:-Hinweise oder Host-Audio. Diese Kombination markiert das Projekt als still – die Render-Pipeline überspringt dann die Audiokodierung; ein Aufruf von audio.mjs mit diesem Marker endet sofort, ohne Audiodateien auszugeben, und schreibt ein leeres audio_meta.json nur mit dem "silent": true-Flag. Kaskadieren Sie keine stillen Flags in einen Teil des Projekts, der andere Felder unvollständig macht.

Tor: audio_meta.json existiert und enthält unterte Narrative, Audiodatei-Pfade, Wortzeitsteuerungen und BGM-Metadaten; oder der stille Marker ist gesetzt; der Hintergrundprozess läuft noch oder ist abgeschlossen.


Schritt 4: Visuelles Design

Ziel: Jedes Bild des genehmigten Storyboards mit einer Beschreibung seiner visuellen Komposition anreichern – Layout, Schlüsselelemente, Animationseffekte, technische Hinweise.

Lesen Sie ../hyperframes-creative/references/visual-explorer.md (mentaler Model-„designten“ Raum), ../hyperframes-creative/references/visual-language.md (wiedererkennbare und wiederholbare visuelle Sprache, kognitive Hierarchie, narrative Muster) und ../hyperframes-animation/rules/ + ../hyperframes-animation/blueprints/ für bewegungsbezogene Regeln. Verwenden Sie dann die Visualisierungs-Pipeline gemäß ../hyperframes-creative/references/visual-pipeline.md.

Die visuelle Pipeline läuft Bild für Bild und schreibt ihre Ausgabe in das Array scene_design der Storyboard-Datei – fügen Sie das Feld scene_design zu jedem Bildeintrag in STORYBOARD.md hinzu, wenn es noch nicht vorhanden ist, oder überschreiben Sie es, wenn es existiert. Für jedes Bild: Beschreiben Sie das visuelle Layout, die Schlüsselelemente, Animationseffekte (Ein-/Ausblenden, Bewegung, Timing), alle relevanten Parameter aus frame.md (Farben, Schriftarten, Layout-Raster), technische Hinweise (Überblendung, Overlays) und browsertechnische Varianten. Das Feld scene_design in der Ausgabe muss die genaue Validierungsstruktur für Bilddesign-Informationen haben, die in den Regeln definiert ist.

Keine Asset-Quellen erfinden: Lassen Sie asset_urls leer, es sei denn, der Benutzer hat ein Bild in public/ bereitgestellt – dann referenzieren Sie es mit <MEDIA_URL>/public/<basename>. Für alle anderen Bilder verwenden Sie generische Platzhalter-Beschreibungen wie „abstraktes Netzwerkdiagramm (zu generieren)".

Kein Bild wird bereits auf seine visuelle Spezifikation überprüft. Dieses Tor ist ein reines Arbeitstor – es gibt keine Benutzerüberprüfung; fahren Sie sofort mit Schritt 5 fort.

Tor: Jeder Eintrag in STORYBOARD.md enthält ein scene_design-Feld mit den erforderlichen Schlüsseln. Validieren Sie gegen das Schema in den Anhängen, wenn vorhanden.


Schritt 5: Bilder (parallel)

Ziel: Für jedes Bild eine HTML-Datei generieren, die seine visuelle Szene rendert.

Lesen Sie ../hyperframes-animation/rules/ und ../hyperframes-creative/ für Bewegungs- und Designregeln; sie definieren, wie scene_design in Markup übersetzt wird.

Führen Sie den Bild-Builder für jedes Bild parallel aus:

node <SKILL_DIR>/scripts/frame-builder.mjs \
  --storyboard ./STORYBOARD.md \
  --frame <NN> \
  --frame-md ./frame.md \
  --hyperframes .

<SKILL_DIR> ist das Installationsverzeichnis dieses Skills. Das Skript erzeugt:

  • compositions/frames/<NN>-<slug>.html – die HTML-Datei eines einzelnen Bildes mit CSS-Stil aus der Vorlage und Animationskeyframes aus den Blueprints.
  • Es hängt seine Metadaten (Breite, Höhe, Dauer, Anker) an compositions/frames/index.json an.

Nachdem alle Bild-Builder-Prozesse abgeschlossen sind, generieren Sie die Indexseite:

node <SKILL_DIR>/scripts/compose-index.mjs --hyperframes .

dies erzeugt:

  • compositions/frames/index.json – falls noch nicht vom letzten Durchlauf vorhanden.
  • index.html – eine einfache lineare Vorschau der gesamten Sequenz.

Tor: index.html existiert in <PROJECT_ROOT>, jedes compositions/frames/NN-*.html ist gültiges HTML (kann im Browser geöffnet werden).


Schritt 6: Finaler Render und Lieferung

Ziel: Das Video rendern, die Ergebnisse überprüfen und an den Benutzer liefern.

Nach Schritt 5, sammeln Sie die Audio-Metadaten und führen Sie den finalen Render-Befehl aus – erstellen Sie die Datei renders/video.mp4. Der Befehl erwartet eine vollständige audio_meta.json (das Hintergrundskript von Schritt 3.1 muss abgeschlossen sein). Überwachen Sie den Prozess auf Timeout und starten Sie ihn bei Bedarf neu.

Video-Render:

npx hyperframes render --hyperframes . --audio ./audio_meta.json --out ./renders/video.mp4

Dies ist das letzte benutzergesteuerte Tor. Nachdem der Render abgeschlossen ist, holen Sie die endgültige Vorschau ein: Spielen Sie das Video (renders/video.mp4) im Terminal mit einem Befehl wie ffplay renders/video.mp4 -autoexit ab (oder wählen Sie den am besten geeigneten verfügbaren Player). Prüfen Sie dann die endgültige Videoausgabe auf erwähnte Probleme und zeigen Sie die Dauer aus den Render-Metadaten an. Bitten Sie den Benutzer um endgültige Genehmigung: ein Bild, wie die Vorschau?

  • Wenn der Benutzer ablehnt, dokumentieren Sie die genauen Probleme, fragen Sie, ob ein erneuter Render ausreicht oder ob Bilder / Audio angepasst werden müssen, und durchlaufen Sie die Schritte 5-6 nach Bedarf.
  • Wenn der Benutzer genehmigt oder im autonomen Modus: Bestätigen Sie „Video geliefert an renders/video.mp4" und fragen Sie nach dem nächsten Schritt (neues Video / Bearbeitung).

Tor: renders/video.mp4 existiert, die Wiedergabeprüfung bestätigt Inhalt und Dauer, und der Benutzer hat genehmigt (autonom: die Lieferbestätigung wurde gepostet).


Referenzen

Verwandte Skills