Plugin-Installationen: Bevor Setup- oder Aktualisierungsbefehle ausgeführt werden, folgen Sie den Plugin-Installationsregeln, wenn sich dieses Skill innerhalb eines HyperFrames-Plugins befindet. Bei eigenständigen Installationen gelten die nachstehenden Update-Anweisungen.
Halten Sie dieses Skill zuerst aktuell – bestätigen Sie mit dem Benutzer vor der Ausführung:
npx hyperframes skills update product-launch-video. Ein schneller No-Op, wenn alles aktuell ist; andernfalls aktualisiert es dieses Skill und die Kern-Domain-Skills, von denen es abhängt, bevor Sie sich auf sie verlassen.
media-use: Bevor Sie Audio/Bilder/Logos beschaffen, rufen Sie
/media-useauf, um BGM/SFX/Bilder aus dem HeyGen-Katalog und Markenlogos aus ihren offiziellen Quellen zu beziehen. Führen Sie zuerst--adoptaus, um vorhandene Assets zu registrieren. Siehe/media-useSkill.
figma-Quelle: Wenn die Quelle eine figma.com-URL ist, führen Sie zuerst
/figmaaus – Asset-Export, Marken-Tokens und Komponenten/Storyboard-Rekonstruktion bei Bedarf – und bauen Sie dann diesen Workflow aus dessen Ausgabe. Steuern Sie Figma nicht direkt über rohe MCP-Tools: Das überspringt die SVG-Bereinigung, die.media/manifest.jsonl-Herkunft und die Marken-Token-var()-Bindung, sodass eine spätere Markenänderung nicht ohne einen vollständigen Neuimport propagiert werden kann.
Produkteinführung zu HyperFrames
Verwenden Sie dieses Skill, um ein Produkt zu erfassen, seine Marke zu verstehen, ein Launch-Video zu planen und es Frame für Frame in HyperFrames zu erstellen.
Der Einstiegspunkt ist
/hyperframes. Sie sind der Orchestrator. Führen Sie jeden Schritt aus, überprüfen Sie sein Gate, und fahren Sie erst dann mit dem nächsten Schritt fort. Dieses Skill ist für ein Produkt, das vermarktet, gelauncht, beworben oder vorgestellt wird, einschließlich Anfragen wie „Promo für unsere Seite“, wenn der Zweck werblich ist. Eine Site-Tour / -Präsentation bleibt auch hier:BRIEF.mdträgt die Show-it-as-is-Absicht, und die erfassten Screenshots werden zu den Assets, die das Video zeigt. Bei jeder anderen Absicht, einem bloßen „Mach ein Video“ oder bei Unsicherheit → lesen Sie zuerst/hyperframes– die Intent-Ebene trifft jede Routenentscheidung, und eine neue Erstellung, die hier ohneBRIEF.mdankommt, durchläuft sie ohnehin (Setups Eröffnungsregel).
Sie sind der Orchestrator. Arbeiten Sie in videos/<project>/. Führen Sie die Schritte der Reihe nach aus und passieren Sie jedes Gate, 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 Gate-Typen und wie BRIEF.mds flow/storyboard den Modus ableiten, der die Gates von Schritt 3/4/6 bestimmt. Führen Sie jeden Schritt selbst aus, außer Schritt 5, bei dem Sie einen Unter-Agenten pro Frame einsetzen. Legen Sie hier keine Design- oder Bewegungsregeln fest; diese leben im Frame-Worker-Unter-Agenten, in den lokalen ../hyperframes-animation/rules/ + ../hyperframes-animation/blueprints/ dieses Skills und in hyperframes-creative.
Workflow: Schritt 0 Setup -> hyperframes.json; Schritt 1 Erfassung -> capture/; Schritt 2 Designsystem -> frame.md; Schritt 3 Storyboard/Drehbuch -> STORYBOARD.md und SCRIPT.md; Schritt 3.1 Audio -> audio_meta.json; Schritt 4 Visuelles Design -> angereicherte STORYBOARD.md; Schritt 5 Frames -> compositions/frames/NN-*.html und index.html; Schritt 6 Finaler Render -> renders/video.mp4.
Schritt 0: Setup
Ziel: Mit einem bestätigten Brief eintreten, das HyperFrames-Projekt erstellen und den Brief dauerhaft machen.
Der Brief wird von der Intent-Ebene bestätigt, nicht durch hier gestellte Fragen. Eröffnungsregel, in Reihenfolge: (1) BRIEF.md existiert → lesen und nichts fragen – der Brief ist abgeschlossen, und sein flow/storyboard leiten den Modus ab (Briefvertrag § 1). (2) Kein BRIEF.md, aber das Projekt existiert (hyperframes.json / STORYBOARD.md auf der Festplatte) → vom Frontmatter des Storyboards und den aufgezeichneten Präferenzen fortsetzen; nie ein halbfertiges Projekt neu abfragen. (3) Weder noch – eine frische Erstellungsanfrage, die direkt hier ankam → /hyperframes lesen und dessen Intent-Ebene ausführen (references/intent-interview.md): es prüft Rezepte und gespeicherte Standardeinstellungen, führt die Fragen dieser Route durch (../hyperframes/references/routes/product-launch-video.md) und gibt den gesperrten Brief zurück. Bearbeitungsanfragen überspringen all dies – führen Sie die Bearbeitung durch.
Nur initialisieren, wenn hyperframes.json fehlt. Benennen Sie <project> nach der Marke oder Domain im Kebab-Case, z. B. acme-promo; verwenden Sie niemals den Arbeitsbereichsnamen oder einen Zeitstempel.
npx hyperframes init "videos/<project>" --non-interactive --example=blank --skill=product-launch-video – init prüft die installierten Skills gegen die neuesten auf GitHub und aktualisiert die globale Menge, wenn welche veraltet sind.
Nach der Initialisierung sei <PROJECT_ROOT> gleich 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 Aufruferverzeichnis.
Schreiben Sie BRIEF.md unmittelbar nach der Initialisierung (niemals davor – init lehnt ein nicht leeres Verzeichnis ab): den gesperrten Brief der Intent-Ebene, Format gemäß ../hyperframes/references/brief-format.md. Lösen Sie <MEDIA_DIR> als das installierte /media-use Skill-Verzeichnis 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 Intent-Ebene ein Rezept übernommen hat, führen Sie node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes . --name <name> aus; es kopiert sein frame.md in das Projekt (Schritt 2 wird dann übersprungen) und gibt die Gerüste zurück, von denen Schritt 3 Entwürfe erstellt. Ein Rezept füllt Antworten, keine Genehmigungen; die Überprüfungsgates laufen trotzdem.
Zeigen Sie den Anmeldestatus an, bevor Sie mit dem Setup fortfahren – führen Sie npx hyperframes auth status aus und geben Sie seine Ausgabe wörtlich weiter. Es meldet, ob Sprach-/BGM-Ausgabe die HeyGen- oder lokale Engines verwendet und, wenn abgemeldet, wie man sich anmeldet. Beachten Sie den Exit-Code-Vertrag: auth status beendet sich mit 1, wenn nicht angemeldet (und wenn die gespeicherte Anmeldeinformation abgelehnt wird) – dieser Nicht-Null-Exit ist der normale abgemeldete Zustand, kein Befehlsfehler. Behandeln Sie ihn nicht als Fehler, wiederholen Sie ihn nicht und verketten Sie ihn nicht mit &&/set -e auf eine Weise, die den Workflow abbrechen würde. Wenden Sie einen Zweig an:
- Kollaborativ: Warten Sie, bis der Benutzer sich anmeldet oder explizit
offline/gowä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 das Hindernis sichtbar. Falten Sie diese Entscheidung nicht in eine andere Frage und schreiben Sie keine Schlüssel in ein Repo-lokales .env. Authentifizierungsbesitz und Offline-Fallbacks: /media-use references/setup-providers.md § Anbieter.
Gate: hyperframes.json und BRIEF.md existieren; die präferenzgestützten Antworten wurden aufgezeichnet (Briefvertrag § 2); der Anmeldestatus wurde angezeigt (angemeldet oder offline fortfahrend).
Schritt 1: Assets erfassen
Ziel: Das Quellmaterial, Markensignale und nutzbare Assets für das Video sammeln.
Klassifizieren Sie die Eingabe und wählen Sie den Pfad. Explizite URL -> erfassen und die Website für Erzählung und Assets verwenden. Eingefügtes Skript/Brief -> wörtlich als user_script.txt speichern; VO_MODE (wörtlich oder umstrukturiert) stammt aus BRIEF.md – die Intent-Ebene fragt danach, wenn ein Skript ankommt (hier nur einmal fragen, wenn der Brief es irgendwie vermissen lässt). Dann Erfassungsziel auflösen: URL im Text -> verwenden; nur Markenname -> WebSearch, URL in einer Zeile bestätigen, dann crawlen; keine URL/Website (oder der Brief sagt, nicht scrapen) -> No-Capture-Pfad.
Erfassung ausführen mit: npx hyperframes capture "<URL>" -o ./capture --json. Behalten Sie das Standard-Budget für die Post-Navigation bei, es sei denn, der Auftraggeber hat ein kleineres Dead-line; dann übergeben Sie ein positives --capture-budget <Millisekunden>, das Zeit für nachgelagerte Arbeit lässt. --timeout steuert nur die Seitennavigation. Verwenden Sie --skip-vision nur, wenn die optionale Bildbeschriftung absichtlich deaktiviert ist.
Überprüfen Sie das Befehlsergebnis und das Ausgabeverzeichnis sofort. Ein Exit ungleich Null, JSON ok: false oder capture/BLOCKED.md ist ein harter Stopp für den Erfassungspfad: Melden Sie den aufgezeichneten Grund und konsumieren Sie keine teilweisen Screenshots, DOM, Tokens oder Assets. Erzeugen Sie keinen synthetischen No-Capture-Fallback nach einer fehlgeschlagenen URL-Erfassung. Fahren Sie nur dann mit dem No-Capture-Pfad fort, wenn der ursprüngliche Brief das Quellmaterial geliefert hat oder der Benutzer nach dem Fehlschlag explizit zu einem bereitgestellten Screenshot oder Brief wechselt.
Warnungen wie „sehr wenig Textinhalt“ zusammen mit einem leeren Asset-Katalog sind kein Beweis für eine nutzbare Seite. Verlangen Sie für eine Site-Tour oder ein Show-it-as-is-Brief eine vertrauenswürdige erfasste Struktur oder einen bereitgestellten Screenshot; wenn keines existiert, stoppen Sie. Erfinden oder bauen Sie die Seite nicht nur deshalb neu, weil die Erfassung unbrauchbar ist.
Für eine Site-Tour oder ein Show-it-as-is-Brief ist die erfasste Seite die visuelle Quelle der Wahrheit. Verwenden Sie den echten Screenshot, anstatt die gesamte Website in HTML neu zu erstellen. Wenn der Schuss interne Bewegung benötigt, behalten Sie den Screenshot als Basis und überlagern Sie echte erfasste Assets an gemessenen Positionen, oder bauen Sie nur die eine Komponente neu auf, die sich bewegt. Verwenden Sie für einen Scroll-Schuss die Animation des Viewports über capture/screenshots/full-page.png – die 1x-Platte des gesamten Dokuments, pixelgenau für einen 1920 breiten Viewport, der daran entlangfährt. Sie fehlt, wenn die Seite zu hoch war, um in einem Stück erfasst zu werden; fallen Sie auf die überlappenden Scroll-Positionsaufnahmen im selben Verzeichnis zurück. Ein Hineinzoomen über 1:1 hinaus erfordert eine eigene 2x-Erfassung dieser Region, da die Platte keinen Spielraum über 1x hat. Bauen Sie die gesamte Seite nur dann neu auf, wenn der Benutzer explizit nach einer stilisierten Interpretation fragt; eine unbrauchbare Erfassung allein ist keine Autorisierung.
Wenn GEMINI_API_KEY, GOOGLE_API_KEY oder ein OpenRouter-Schlüssel existiert, beschriftet die Erfassung Assets automatisch in capture/extracted/asset-descriptions.md. Dies ist kein Überprüfungs-Gate. Ohne einen Vision-Schlüssel verwenden Sie den DOM-Kontext und fahren fort.
No-Capture-Pfad: Erstellen Sie 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üllen Sie Titel/Beschreibung nach Möglichkeit aus dem Brief. visible-text.txt enthält den vollständigen Brief oder das Skript. asset-descriptions.md sollte besagen, dass keine Assets erfasst wurden, es sei denn, der Benutzer hat Asset-Notizen gemacht.
Gate: Die Erfassungs-JSON meldete ok: true; capture/BLOCKED.md existiert nicht; capture/extracted/tokens.json, capture/extracted/visible-text.txt, capture/extracted/asset-descriptions.md und capture/assets/ existieren; und Sie können die Marke in einem klaren Satz benennen. Behandeln Sie asset-descriptions.md als das Haupt-Asset-Inventar. Wenn es nach der echten Erfassung fehlt, stoppen Sie und melden Sie die Erfassung als unvollständig. Warnungen über eine degradierte optionale Phase sind nur akzeptabel, wenn dieses strukturelle Gate dennoch bestanden wird.
Schritt 2: Designsystem
Ziel: Ein ausgeliefertes Frame-Preset auswählen; ein Skript wandelt es in das frame.md + Bildunterschriften-Skin dieses Videos um.
Wenn BRIEF.md einen style_preset nennt – der Benutzer hat es mit den Augen aus den Showcases in der Intent-Ebene ausgewählt – verwenden Sie es; das Urteil liegt nur bei Ihnen, wenn der Brief schweigt. Dann treffen Sie die eine Entscheidung – welches Preset: Lesen Sie ../hyperframes-creative/references/design-spec.md und wählen Sie das Preset, dessen Aussehen am besten zur Marke und zum Brief passt. Führen Sie 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 mit den Marken-Tokens in capture/extracted/tokens.json (Markenfarben auf die Farb-Schlüssel des Presets nach Rolle abgebildet – Tinte, Leinwand, Akzente – wobei Schlüssel/Struktur/Komponenten erhalten bleiben; die Display-+ Textschriften des Presets durch die der Marke ersetzt), kopiert das Bildunterschriften-Skin des Presets zu .hyperframes/caption-skin.html und validiert sich selbst (beendet sich mit 1 bei einer fehlerhaften Abbildung). Fahren Sie mit dem nächsten Schritt fort, sobald es mit 0 beendet wird – keine manuelle Bearbeitung der Spezifikation.
tokens.json ohne Markenfarben/-schriften (z. B. keine Erfassung) → das Skript behält die eigene Palette des Presets, ein vollständig versandfähiges Design. Wenn der Brief Markenfarben/-schriften nennt, die die Erfassung verpasst hat, fügen Sie sie zu capture/extracted/tokens.json hinzu, bevor Sie es ausführen (oder verwenden Sie das design.md des Benutzers, um es zu befüllen); passen Sie frame.md nur danach von Hand an, wenn eine Abbildung dies wirklich erfordert.
Gate: build-frame.mjs wurde mit 0 beendet – frame.md existiert von einem benannten Preset, und (wenn das Preset eines liefert) existiert .hyperframes/caption-skin.html als Quelle des Bildunterschriften-Skins; das gewählte Preset wurde als Präferenz aufgezeichnet (--key style_preset --workflow <this workflow>, Briefvertrag § 2).
Schritt 3: Storyboard und Drehbuch
Ziel: Den Brief und das erfasste Material in einen genehmigten, Frame-für-Frame-Geschichtenplan verwandeln.
Lesen Sie ../hyperframes-creative/references/story-spine.md (Aufhängersprache, Wert-vor-Beweis, Storyboard-als-Vorschlag, quellnachvollziehbare Visuals), 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 Montage berichtet, wo der Schnitt im Vergleich dazu landet.
Verwenden Sie story-design.md für den Geschichtenentwurf, Aufhänger, Überzeugungslogik, Beats, VO_MODE und Asset-Wahl. Als weiche Anleitung konsultieren Sie das Rollen→Blaupausen-Menü in ../hyperframes-animation/blueprints-index.md: Notieren Sie für jeden Beat eine Kandidaten-Blaupausen-ID, wenn eine passt. Die Geschichtenwahrheit entscheidet dennoch, welche Beats existieren – erzwingen Sie niemals einen Beat, um in eine Blaupause zu passen, und erfinden Sie niemals einen Beat nur, weil eine bewährte Form verfügbar ist. Wählen Sie die asset_candidates jedes visuellen Frames aus capture/extracted/asset-descriptions.md (dem kanonischen Inventar) – stöbern Sie nicht in rohen capture/assets/. Bitten Sie den Benutzer nicht, Assets auszuwählen, es sei denn, dieses Inventar fehlt oder ist unbrauchbar. Verwenden Sie die genauen erforderlichen Felder aus den Storyboard- und Drehbuch-Referenzen.
Nach dem Entwurf führen Sie den Plan-Durchlauf der Überprüfungsschleife durch – ../hyperframes/references/review-loop.md § 1: Präsentieren Sie den Plan als Vorschlag und stellen Sie die zwei Fragen – genehmigen oder ändern, und Skizzen zuerst (empfohlen) oder überspringen. Feedback kommt als Chat-Antwort; wiederholen, bis genehmigt. Dies ist ein Kontrollpunkt-Gate (Briefvertrag § 1): Im autonomen Modus…
…[gekürzt für Übersetzung]