media-use: Bevor Audio/Bilder beschafft werden, rufe
/media-useauf, um BGM/SFX/Bilder aus dem HeyGen-Katalog zu beziehen. Führe zuerst--adoptaus, um vorhandene Assets zu registrieren. Siehe/media-use-Skill.
Produkt-Launch zu HyperFrames
Nutze diesen Skill, um ein Produkt zu erfassen, seine Marke zu verstehen, ein Launch-Video zu planen und es Frame für Frame in HyperFrames zu bauen.
Bestätige den Pfad vor Schritt 0. Du bist der Orchestrator. Führe jeden Schritt aus, überprüfe sein Tor, und fahre erst dann mit dem nächsten Schritt fort. Dieser Skill ist für ein Produkt, das vermarktet, gelauncht, beworben oder enthüllt wird, einschließlich Anfragen wie „Werbung für unsere Seite“, wenn der Zweck werblich ist. Leite andere Absichten woanders hin: eine allgemeine Nicht-Launch-Website-Tour ->
/general-video; eine thematische Erklärung ohne Produkt ->/faceless-explainer; ein GitHub-PR ->/pr-to-video; Untertitel auf vorhandenem Material ->/embedded-captions; eine kurze, unkommentierte Motion-Grafik ->/motion-graphics. Wenn der Benutzer nur „ein Video erstellen“ sagt oder der Pfad unsicher ist, lies zuerst/hyperframes.
Du bist der Orchestrator. Arbeite in videos/<projekt>/. Führe die Schritte der Reihe nach aus und passiere jedes Tor, bevor du fortfährst. Benutzergesteuerte Schritte sind Schritt 0, Schritt 3 und Schritt 6. Führe jeden Schritt selbst aus, außer Schritt 5, wo du einen Unter-Agenten pro Frame entsendest. Lege hier keine Design- oder Bewegungsregeln fest; diese befinden sich im Frame-Worker-Unter-Agenten, in den lokalen ../hyperframes-animation/rules/ + ../hyperframes-animation/blueprints/ und in hyperframes-creative.
Workflow: Schritt 0 Einrichtung -> hyperframes.json; Schritt 1 Erfassung -> capture/; Schritt 2 Design-System -> frame.md; Schritt 3 Storyboard/Skript -> STORYBOARD.md und SCRIPT.md; Schritt 3.1 Audio -> audio_meta.json; Schritt 4 Visuelles Design -> angereichertes STORYBOARD.md; Schritt 5 Frames -> compositions/frames/NN-*.html und index.html; Schritt 6 Finales Rendern -> renders/video.mp4.
Schritt 0: Einrichtung und Briefing
Ziel: Das zentrale Video-Briefing festlegen und das HyperFrames-Projekt bei Bedarf erstellen.
Initialisiere nur, wenn hyperframes.json fehlt. Benenne <projekt> nach der Marke oder Domain in Kebab-Schreibweise, z. B. acme-promo; verwende niemals den Workspace-Namen oder den Zeitstempel.
npx hyperframes init "videos/<projekt>" --non-interactive --example=blank — init prüft die installierten Skills gegen die neuesten auf GitHub und aktualisiert das globale Set, falls eines veraltet ist.
Zeige den Anmeldestatus vor dem Briefing an — führe npx hyperframes auth status aus und gib seine Ausgabe wörtlich wieder (paraphrasiere oder schreibe sie nicht um). Es berichtet, ob Stimme/BGM die HeyGen- oder lokale Engines verwenden und, wenn nicht angemeldet, wie man sich anmeldet. Wenn nicht angemeldet, stoppe und warte auf die Wahl des Benutzers – anmelden, oder „go“/„offline“ sagen, um mit lokalen Engines fortzufahren – bevor du das Briefing oder irgendetwas anderes fragst. Behandle es als echten Entscheidungspunkt, nicht als Randbemerkung; falte die Wahl nicht in die Briefing-Frage ein, und schreibe Schlüssel nicht in ein pro-Repo .env. (Im autonomen Modus notiere den Status und fahre offline fort.) Siehe ../hyperframes-media → Preflight für die kanonische Anleitung.
Tor: hyperframes.json existiert, und Winkel, Länge, Seitenverhältnis und Sprache sind festgelegt; der Anmeldestatus wurde angezeigt (angemeldet, oder offline fortfahrend).
Schritt 1: Assets erfassen
Ziel: Das Quellmaterial, Markensignale und nutzbare Assets für das Video sammeln.
Klassifiziere die Eingabe und wähle den Pfad. Explizite URL -> erfasse sie und verwende die Site für Erzählung und Assets. Eingefügtes Skript/Briefing -> speichere es wörtlich als user_script.txt, frage einmal „wortwörtlich verwenden oder umstrukturieren?“, speichere die Antwort als VO_MODE, löse dann das Erfassungsziel auf: URL im Text -> verwende sie; nur Markenname -> WebSearch, bestätige die URL in einer Zeile, dann crawle; keine URL/Site -> kein-Erfassung-Pfad.
Führe die Erfassung aus mit: npx hyperframes capture "<URL>" -o ./capture
Wenn GEMINI_API_KEY, GOOGLE_API_KEY oder ein OpenRouter-Schlüssel existiert, erfasst capture automatisch Assets in capture/extracted/asset-descriptions.md. Dies ist kein Überprüfungstor. Ohne einen Vision-Schlüssel verwende den DOM-Kontext und fahre fort.
Pfad ohne Erfassung: Erstelle capture/extracted/tokens.json, capture/extracted/visible-text.txt, capture/extracted/asset-descriptions.md und capture/assets/ manuell. tokens.json sollte { "title": "", "description": "", "colors": [], "fonts": [] } sein; fülle Titel/Beschreibung aus dem Briefing, wenn möglich. visible-text.txt enthält das vollständige Briefing oder Skript. asset-descriptions.md sollte besagen, dass keine Assets erfasst wurden, es sei denn, der Benutzer hat Asset-Notizen gegeben.
Tor: capture/extracted/tokens.json, capture/extracted/visible-text.txt, capture/extracted/asset-descriptions.md und capture/assets/ existieren; du kannst die Marke in einem klaren Satz angeben. Behandle asset-descriptions.md als das Haupt-Asset-Inventar. Wenn es nach einer echten Erfassung fehlt, stoppe und melde die Erfassung als unvollständig. Wenn capture/BLOCKED.md existiert, folge ihm.
Schritt 2: Design-System
Ziel: Ein mitgeliefertes Frame-Preset auswählen; ein Skript wandelt es in frame.md + Untertitel-Skin dieses Videos um.
Du triffst die eine Beurteilung – welches Preset. Lies ../hyperframes-creative/references/design-spec.md und wähle das Preset, dessen Look am besten zur Marke und zum Briefing passt. Führe dann aus:
node <SKILL_DIR>/scripts/build-frame.mjs --preset <name> --hyperframes .
Das Skript erledigt den Rest deterministisch: kopiert das FRAME.md des Presets → frame.md und remixt es auf die Marken-Tokens in capture/extracted/tokens.json (Markenfarben werden auf die Farb-Schlüssel des Presets nach Rolle abgebildet – Tinte, Leinwand, Akzente – wobei Schlüssel/Struktur/Komponenten erhalten bleiben; die Display- und Textschriftarten des Presets werden durch die der Marke ersetzt), kopiert den Untertitel-Skin des Presets nach .hyperframes/caption-skin.html und validiert sich selbst (beendet mit 1 bei einer fehlerhaften Abbildung). Fahre mit dem nächsten Schritt fort, sobald es mit 0 beendet wird – keine manuelle Bearbeitung der Spezifikation.
tokens.json ohne Markenfarben/Schriftarten (z. B. keine Erfassung) → das Skript behält die eigene Palette des Presets bei, ein komplettes lieferbares Design. Wenn das Briefing Markenfarben/Schriftarten nennt, die die Erfassung übersehen hat, füge sie vor dem Ausführen zu capture/extracted/tokens.json hinzu (oder verwende das design.md des Benutzers, um es zu füllen); passe frame.md nur danach von Hand an, wenn eine Abbildung es wirklich erfordert.
Tor: build-frame.mjs wurde mit 0 beendet – frame.md existiert von einem benannten Preset, und (wenn das Preset einen mitliefert) .hyperframes/caption-skin.html existiert als Quelle für den Untertitel-Skin.
Schritt 3: Storyboard und Skript
Ziel: Das Briefing und das erfasste Material in einen genehmigten Frame-für-Frame-Geschichtsplan verwandeln.
Lies references/story-design.md, ../hyperframes-animation/blueprints-index.md, ../hyperframes-core/references/storyboard-format.md und ../hyperframes-core/references/script-format.md. Verwende sie, um STORYBOARD.md und, wenn eine Erzählung benötigt wird, SCRIPT.md zu schreiben.
Verwende story-design.md für den Story-Bauplan, den Aufhänger, die Überzeugungslogik, die Beats, VO_MODE und die Asset-Auswahl. Als weiche Richtlinie konsultiere das Rollen→Bauplan-Menü in ../hyperframes-animation/blueprints-index.md: notiere für jeden Beat einen Kandidaten-Bauplan-ID, wenn einer passt. Die Story-Wahrheit entscheidet dennoch, welche Beats existieren – erzwinge niemals einen Beat, um in einen Bauplan zu passen, und erfinde niemals einen Beat, nur weil eine bewährte Form verfügbar ist. Wähle für jeden visuellen Frame die asset_candidates aus capture/extracted/asset-descriptions.md (dem kanonischen Inventar) – durchsuche nicht rohes capture/assets/. Bitte den Benutzer nicht, Assets auszuwählen, es sei denn, dieses Inventar fehlt oder ist unbrauchbar. Verwende die genauen erforderlichen Felder aus den Storyboard- und Skript-Referenzen.
Nach dem Entwurf zeige eine Frame-für-Frame-Zusammenfassung. Frage den Benutzer in derselben Nachricht nach zwei Dingen: (a) ob er genehmigt oder Änderungen wünscht, und (b) ob er eine Live-Vorschau des Storyboard-Gerüsts möchte (npx hyperframes preview) – öffne es nur bei einem Ja. Iteriere, bis genehmigt, und trage die Vorschau-Auswahl zu Schritt 6.
Tor: STORYBOARD.md existiert, jeder visuelle Frame hat asset_candidates, SCRIPT.md existiert, wenn eine Erzählung benötigt wird, und der Benutzer hat den Frame-für-Frame-Plan genehmigt.
Schritt 3.1: Audio
Ziel: Erzählung, Wortzeitsteuerung, Musik und Audio-Metadaten aus dem genehmigten Skript generieren.
Starte Audio nach der Genehmigung von Schritt 3. Führe es im Hintergrund aus, fahre dann mit Schritt 4 fort.
node <SKILL_DIR>/scripts/audio.mjs --script ./SCRIPT.md --storyboard ./STORYBOARD.md --hyperframes . --out ./audio_meta.json &
Das Audio-Skript verwaltet Erzählung, Wortzeitsteuerung, BGM-Suche aus der HeyGen-Musikbibliothek und Timing-Metadaten. Die BGM-Stimmung stammt aus dem music:-Feld des Storyboards. Dies verwendet die HeyGen Audio API für den Abruf, nicht für die Generierung, und verwendet dieselbe ~/.heygen-Anmeldeinformation wie TTS. Für Anbieterdetails lies ../hyperframes-media/references/tts.md.
Wenn es keine Erzählung und kein SCRIPT.md gibt, überspringe die Spracherzeugung. BGM kann trotzdem laufen, wenn das Storyboard eine Musikstimmung hat.
Tor: Der Audio-Job wurde gestartet, oder das Projekt ist als stumm markiert.
Schritt 4: Visuelles Frame-Design
Ziel: Die visuelle Richtung, das Layout-Intent und die Bewegungsauswahl zu jedem Storyboard-Frame hinzufügen.
Bearbeite STORYBOARD.md direkt. Erstelle kein weiteres Storyboard. Verwende frame.md als Quelle der Wahrheit für Farbe, Schriftart, Layout-Gefühl und Stil.
Lies references/visual-design.md, ../hyperframes-animation/blueprints-index.md, references/motion-language.md und ../hyperframes-animation/rules-index.md. Verwende visual-design.md für die Methode (die zeitcodierte Aufnahme-Sequenz, das Inline-Layout-Vokabular und den erforderlichen ## Video direction-Block). Verwende ../hyperframes-animation/blueprints-index.md, um die Aufnahme-Form jedes Frames auszuwählen. Verwende motion-language.md (das Bewegungsvokabular + die Bewegungsdoktrin) und ../hyperframes-animation/rules-index.md (gültige Regelnamen) für Bewegung – erfinde keine Bewegungsnamen.
Für jeden visuellen Frame schreibe eine zeitcodierte Aufnahme-Sequenz in STORYBOARD.md gemäß der Methode von visual-design.md: wähle den Bauplan des Frames (oder komponiere), instanziiere ihn mit dem Inhalt DIESES Produkts, und takte die Enthüllung jeder Szene zum Voiceover, sodass sich der Frame über seine gesamte Dauer entwickelt, anstatt am Anfang vollständig zu laden und dann einzufrieren. Gib Layout und Bewegung inline pro Szene an (Vokabulare in visual-design.md und motion-language.md). Füge einen video-weiten ## Video direction-Block hinzu.
Ändere nicht die Geschichte, das Skript, die Asset-Auswahl, asset_candidates, transition_in oder erfasstes Quellmaterial. Schreibe in diesem Schritt kein HTML.
Stufe benannte Assets nach dem visuellen Design bereit:
node <SKILL_DIR>/scripts/stage-assets.mjs --storyboard ./STORYBOARD.md --hyperframes .
Tor: Jeder visuelle Frame hat eine zeitcodierte Aufnahme-Sequenz, deren Enthüllungen zum Voiceover getaktet sind (kein Frontloading); ## Video direction existiert; assets/ enthält die benannten Assets.
Schritt 5: Frames bauen
Ziel: Jeden Storyboard-Frame als HTML-Komposition bauen und das abspielbare Video zusammensetzen.
Warte, bis das Audio von Schritt 3.1 fertig ist, falls Audio gestartet wurde. Synchronisiere dann die Dauern und rufe SFX ab; überspringe beides, wenn stumm.
node <SKILL_DIR>/scripts/audio.mjs sync-durations --audio-meta ./audio_meta.json --storyboard ./STORYBOARD.md
node <SKILL_DIR>/scripts/audio.mjs fetch-sfx --storyboard ./STORYBOARD.md --hyperframes .
Dauernsynchronisation ist mechanisch: echte Sprachdauer gewinnt; stumme Frames behalten Schätzungen; editiere niemals synchronisierte Dauern von Hand.
Vor dem Entsenden lies sub-agents/frame-worker.md und ../hyperframes-core/references/subagent-dispatch.md. Entsende einen Unter-Agenten pro Frame, parallel wenn möglich; andernfalls führe Worker in Wellen aus. Jeder Worker erhält genau einen Frame.
Jeder Worker-Kontext muss PROJECT_DIR, frame_id, Leinwandgröße, Untertitel-Status und Sicherheitszone, wenn Untertitel aktiviert sind, und RULES_DIR als absoluten Pfad zum ../hyperframes-animation/rules/ dieses Skills enthalten. Jeder Worker liest frame.md, seinen eigenen ## Frame N-Block aus STORYBOARD.md, das lokale Regel-Rezept (../hyperframes-animation/rules/<id>.md) für jede zitierte Bewegung und die Bauplan-Vorlage des Frames (../hyperframes-animation/blueprints/<id>.md). Jeder Worker schreibt nur compositions/frames/NN-*.html. Worker dürfen niemals STORYBOARD.md bearbeiten.
Sobald ein Worker zurückkommt, markiert der Orchestrator diesen Frame als animated in STORYBOARD.md.
Nachdem Audio-Timings existieren, baue Untertitel im Hintergrund und stelle den Index zusammen:
node <SKILL_DIR>/scripts/captions.mjs build --storyboard ./STORYBOARD.md --audio-meta ./audio_meta.json --hyperframes . --out ./caption_groups.json &
node <SKILL_DIR>/scripts/assemble-index.mjs --storyboard ./STORYBOARD.md --hyperframes .
captions.mjs verwendet den .hyperframes/caption-skin.html des Projekts (in Schritt 2 kopiert) als Untertitel-Look und injiziert Marken-Tokens aus frame.md; wenn kein Skin vorhanden ist, rendert es die eingebaute Standard-Pille. captions: skipped (<grund>) ist gültig. Fahre ohne Untertitel fort, wenn explizit übersprungen.
Tor: Jeder Frame ist als animated markiert, index.html existiert, und Untertitel sind gebaut oder explizit übersprungen.
Schritt 6: Finalisieren
Ziel: Das zusammengesetzte Video überprüfen, die Benutzerfreigabe einholen und das endgültige MP4 rendern.
Übergänge injizieren, Prüfungen durchführen, für Überprüfung pausieren, dann rendern.
node <SKILL_DIR>/scripts/transitions.mjs inject --storyboard ./STORYBOARD.md --hyperframes .
node <SKILL_DIR>/scripts/transitions.mjs verify --storyboard ./STORYBOARD.md --index ./index.html
npx hyperframes lint
npx hyperframes validate
npx hyperframes inspect
npx hyperframes snapshot --at <rahmen-mittenpunkte>
snapshot setzt die erfassten Frames zu einem Kontaktbogen zusammen (snapshots/contact-sheet.jpg). Wirf einen Blick darauf; wenn nichts offensichtlich kaputt ist, mach weiter – verweile nicht hier.
Wenn ein Befehl fehlschlägt, zeige stderr an und stoppe – häufe keine Wiederherstellungsbefehle an. Behebe es selbst: die billigste sichere Bearbeitung von compositions/frames/NN-*.html, führe dann die fehlgeschlagene Prüfung erneut aus.
Nach bestandenen Prüfungen pausiere für die Benutzerüberprüfung. Das Video ist zusammengesetzt, anzeigbar und im Studio bearbeitbar. Verwalte die Vorschau nur einmal über Schritt 3 und Schritt 6 hinweg: öffne sie, wenn der Benutzer sie zuvor angefordert hat, biete sie an, wenn er sie zuvor abgelehnt hat, und frage nicht erneut, wenn er bereits im Studio überprüft.
Vorschau: npx hyperframes preview
Rendere nur, wenn der Benutzer explizit sagt, dass das Video fertig ist. Wenn er Änderungen möchte, führe sie direkt in den HTML-Kompositionen durch, ohne zum Storyboard zurückzukehren, es sei denn, die Änderungen erfordern strukturelle Anpassungen.
Rendere: npx hyperframes render -o ./renders/video.mp4
Tor: renders/video.mp4 existiert, ist abspielbar und der Benutzer hat die Lieferung bestätigt.