Bewegungsgrafik für KI-Videos
Verwenden mit remotion-best-practices und cinematic-camera. Diese Fähigkeit verwaltet die Aufnahme, Recherche, authentische Assets, Referenzauswahl, visuelle Qualität und Lieferautorisierung.
Harte Ausführungsvereinbarung
Jeder Build muss scripts/promptible-gate.mjs passieren.
Häufige Pfade:
- Claude Code:
.claude/skills/motion-graphics/scripts/promptible-gate.mjs - Andere Agenten:
.agents/skills/motion-graphics/scripts/promptible-gate.mjs
Schreiben Sie keinen Kompositionscode, bis das Skript BUILD AUTHORIZED ausgibt. Liefern Sie keinen Render aus, bis das Skript DELIVERY AUTHORIZED ausgibt. Ein fehlgeschlagener Befehl ist ein harter Stopp.
Stufe 1 – Präzise Aufnahme
Fragen Sie nur nach fehlenden Auswahlmöglichkeiten:
- Format: 4:3 halbseitiger Instagram-Insert (1440×1080) oder 9:16 ganzseitiges Instagram (1080×1920). Verwenden Sie 16:9 nur, wenn explizit angefordert.
- Oberfläche: warmes Licht, sauberes Dunkel, helles Raster oder dunkles Raster.
- Exakter Skript-Takt, Dauer, benannte Produkte, verifizierte Behauptungen und bereitgestellte Assets.
Standardmäßig niemals auf Dunkel setzen. Wenn der Benutzer die Oberflächenauswahl delegiert, verwenden Sie warmes Licht.
Stufe 2 – Recherche und authentische Assets
Lesen Sie references/research-and-assets.md und references/logo-library.md.
Führen Sie den kleinstmöglichen, nützlichen Recherchedurchlauf vor der Konzepterstellung durch:
- Bereitgestellte Benutzer-Assets sind maßgeblich. Verwenden Sie sie exakt; zeichnen Sie sie niemals neu und ersetzen Sie sie nicht.
- Kopieren Sie für gängige Produkte ein passendes gebündeltes Logo aus
assets/logos/in das Projekt und behalten Sie seine Herkunft bei. - Falls nicht vorhanden, prüfen Sie 1–3 maßgebliche Seiten: offizielles Marken-Kit/Startseite, offizielle Dokumentation/Produktseite, dann eine seriöse kuratierte Icon-Quelle.
- Bevorzugen Sie transparentes SVG. Verwenden Sie niemals Screenshots von Logos, Suchergebnis-Thumbnails, eingebackene Schachbrett-/Grauhintergründe, inoffizielle Nachbildungen oder heiße, verlinkte Remote-Assets.
- Besorgen Sie für ein Dashboard/Produkt-UI einen echten bereitgestellten Screenshot/eine echte Aufnahme oder einen offiziellen öffentlichen Produkt-/Dokumentations-Screenshot. Wenn keines existiert, fragen Sie; erfinden Sie kein Dashboard.
- Recherchieren Sie sichtbare Struktur, Terminologie, Markenfarbe und den genauen für den Takt relevanten Zustand. Kopieren Sie keine nicht unterstützten Metriken, privaten Informationen oder Behauptungen.
- Zwischenspeichern Sie Assets und Notizen unter
.promptible/research/. Verwenden Sie einen Cache-Treffer wieder, wenn Produkt, Quellen, Asset-Hashes und Referenzmechanismus unverändert sind.
Wählen Sie nur den visuellen Modus, den der Takt benötigt: logo-system, product-ui, terminal, editorial oder abstract. Erzwingen Sie keinen Newsletter, kein Dashboard, kein Terminal oder keine aufwändige Kamerafahrt in jede Grafik.
Schreiben Sie .promptible/research-brief.md mit diesen Überschriften:
## Produkt oder Konzept
## Maßgebliche Quellen
## Echte visuelle Sprache
## Nächster genehmigter Mechanismus
## Bewegungsplan
## Vermeiden
Dann führen Sie aus:
node <skill-dir>/scripts/promptible-gate.mjs research \
--project . \
--research-mode authentic \
--visual-mode product-ui \
--product "Slack" \
--reference kickbacks-same-run-editor \
--brief .promptible/research-brief.md \
--source https://slack.com/ \
--logo public/research/slack.svg \
--surface public/research/slack-dashboard.png
Verwenden Sie für unbenannte konzeptionelle Arbeiten --research-mode abstract --visual-mode abstract; das Briefing und der Vergleich mit der genehmigten Referenz gelten weiterhin, aber unnötige Web-/Logo-Recherche entfällt.
Stufe 3 – Verifizierte Referenzvorkontrolle
Lesen Sie references/approved-references.md. Wählen Sie nach Story-Mechanismus aus, nicht nach Farbe. Ein neues Konzept ist erlaubt, wenn es spezifischer für die Anfrage ist, aber es muss explizit die Kamera-Grammatik, den Maßstab, die Zurückhaltung und die kausale Bewegung des nächstgelegenen genehmigten Mechanismus erben. Kombinieren Sie höchstens zwei Mechanismen.
Führen Sie aus:
node <skill-dir>/scripts/promptible-gate.mjs init \
--project . \
--research .promptible/research-manifest.json \
--format 9:16 \
--background warm-light \
--claim-source user \
--beat "Genaue visuelle Idee, die unterstützt wird" \
--duration 6
init validiert die Recherche/Assets erneut, überprüft das gebündelte genehmigte MP4/Kontaktblatt per SHA-256 und schreibt .promptible/render-brief.json.
Untersuchen Sie das eigentliche gebündelte MP4/Kontaktblatt und die recherchierten Produktbelege. Schreiben Sie .promptible/reference-observations.md mit:
## Komposition
## Kamera
## Identität
## Recherche-Übereinstimmung
## Anti-Pattern
Dann führen Sie aus:
node <skill-dir>/scripts/promptible-gate.mjs inspect \
--project . \
--observations .promptible/reference-observations.md
Nur wenn BUILD AUTHORIZED ausgegeben wird, ist die Implementierung erlaubt.
Stufe 4 – Bau
Verwenden Sie die recherchierte Identität und den kausalen Mechanismus der ausgewählten Referenz. Das Ergebnis sollte sich beim ersten Durchlauf spezifisch anfühlen, nicht wie eine Vorlage, die auf korrigierende Eingabeaufforderungen wartet.
Harte Regeln:
- Kein Neon, Glühen, Bloom, leuchtende Kanten, farbige Schatten, Verlaufs-Orbs/-Wäschen, Cyan-Verläufe, Glas-Morphismus, Cyberpunk-Beleuchtung oder KI-gestylte „Vibe-Codes“.
- Keine generischen Quittungen, Rechnungen, Dossiers, Klemmbretter, schwebenden Karten, Barcodes, Gummistempel, Zertifikate, Preiskarten, gefälschte Dashboards oder nicht zusammenhängende Karten-Raster-Fallbacks.
- Realistische Dashboards sind nur dann erwünscht, wenn sie auf bereitgestellten oder maßgeblichen Produktbelegen basieren. Bilden Sie die sichtbare Struktur originalgetreu nach; erfinden Sie niemals Metriken, Behauptungen, Steuerelemente oder Produktzustände.
- Keine erfundene Benutzeroberfläche, Logos, Preise, Ränge, Engagement, Seriennummern oder Nachweise.
- Kein redundanter Erzähltext. Echte Daten, Produkt-UI, Befehle, Code, Dateinamen und kurze strukturelle Bezeichnungen sind erlaubt.
- Bewegung muss Kausalität, Maßstab, Austausch, Navigation oder Zustandsänderung offenbaren. Sie kann zurückhaltend sein, wenn ein Logotausch oder eine authentische UI-Aktion den Takt klar vermittelt.
- Ein statisches, zentriertes Objekt mit erscheinenden Zeilen plus einer langsamen Zoomfahrt ist keine filmische Ausführung.
- Verwenden Sie weniger, aber größere Fokusobjekte. Halten Sie die aktuelle Aktion zentriert, vollständig sichtbar und in der Zielgröße lesbar.
- Dunkle Szenen sind optional. Dunkel bedeutet neutrales Anthrazit mit flachen Akzenten, niemals beleuchtete Paneele.
Lesen Sie references/rejected-patterns.md vor der Konzeptauswahl.
Stufe 5 – Kandidaten-Nachweis
Rendern Sie den Kandidaten. Erstellen Sie ein Dreirahmen-Kontaktblatt und ffprobe JSON. Beispiel für sechs Sekunden:
mkdir -p .promptible
ffmpeg -y -hide_banner -loglevel error -i out/candidate.mp4 \
-vf "fps=3/6,scale=480:-1,tile=3x1:padding=12:margin=12:color=white" \
-frames:v 1 .promptible/candidate-contact-sheet.jpg
ffprobe -v error -select_streams v:0 \
-show_entries stream=width,height:format=duration -of json \
out/candidate.mp4 > .promptible/candidate-probe.json
Dann führen Sie aus:
node <skill-dir>/scripts/promptible-gate.mjs candidate \
--project . \
--render out/candidate.mp4 \
--contact-sheet .promptible/candidate-contact-sheet.jpg \
--probe .promptible/candidate-probe.json
Stufe 6 – Unabhängiger visueller Kritiker
Der Ersteller kann seine eigene Arbeit nicht bewerten. Starten Sie einen separaten, sauberen Kritiker/Unteragenten mit:
references/visual-critic.md- Recherche-Briefing/Manifest und authentische Assets
- Ausgewähltes genehmigtes MP4/Kontaktblatt
- Kandidaten-MP4/Kontaktblatt
.promptible/render-brief.json
Der Kritiker prüft die tatsächlichen Medien und gibt ein JSON zurück, das templates/critic-output.example.json entspricht. Wenn die unabhängige Überprüfung nicht ausgeführt werden kann, stoppen Sie; genehmigen Sie niemals selbst.
Stufe 7 – Liefer-Gate
node <skill-dir>/scripts/promptible-gate.mjs qa \
--project . \
--critic .promptible/critic.json
Das Gate weist harte Fehler, jede Kategorie unter 8/10, einen Durchschnitt unter 8,5, modifizierte/fehlende Recherche oder Belege oder eine nicht unabhängige Überprüfung ab. Überarbeiten Sie, bis DELIVERY AUTHORIZED ausgegeben wird.
Technische und Lieferregeln
- Treiben Sie Bewegung mit
useCurrentFrame(),spring()undinterpolate()voran; keine CSS-Animation. - Verwenden Sie Halten → Bewegung → Halten, wenn Bewegung hilft. Die Aktion wird während des Haltens abgeschlossen.
- Beenden Sie mit einem stabilen Editor-Halt.
- Führen Sie einen Typtest oder die kleinste sinnvolle Build-Validierung durch.
- Liefern Sie MP4 mit genauen Abmessungen, Dauer, Render-Befehl und Editor-Platzierungshinweis nur nach Autorisierung.