Communitygithub.com

emrecv/motion-graphics-director

Erstelle und verfeinere schnelle, saubere Remotion-Motion-Grafiken und visuelle Erklärvideos mit starken Einstiegshooks, zurückhaltender Optik, bezogenen Icons und Logos, ElevenLabs-Erzählung und präziser frame-basierter Animation. Für code-generierte Videos, nicht für interaktive Webanimationen.

Was ist motion-graphics-director?

Motion Graphics Director ist ein KI-Agenten-Skill für Remotion, der die Erstellung von code-generierten Bewegtgrafiken und visuellen Erklärungen fokussiert. Der Skill ist für Entwickler und Designer gedacht, die mit Claude Code, Cursor oder Codex hochwertige, narrativ getriebene Videos produzieren möchten. Er bietet Standardwerte für eine markante kreative Richtung, die jedoch durch ein explizites Projekt-Briefing des Nutzers überschrieben werden kann. Die wichtigsten Prinzipien umfassen einen visuellen Hook innerhalb der ersten drei Sekunden, schnelle und saubere Bewegungen mit bewusstem Easing, einen klaren Fokuspunkt mit viel Negativraum und eine englische ElevenLabs-Sprachausgabe, die die Erklärung trägt. Der Skill betont die Nutzung kuratierter Icons und Logos aus echten Quellen, vermeidet Hintergrundmusik und arbeitet strikt auf Frame-Basis statt mit autonomen CSS-Animationen oder zeitbasierten Timern. Der Workflow ist in Schritte von der Zielgruppenanalyse über Skripterstellung und Asset-Beschaffung bis hin zu Review und Auslieferung gegliedert, mit Verweisen auf detaillierte Referenzdokumente. Der Skill zielt darauf ab, technisch und visuell überzeugende Ergebnisse zu liefern, indem er beobachtete Fehler zur Verbesserung der Regeln nutzt, anstatt eine garantierte Qualität zu versprechen.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/emrecv/motion-graphics-director/tree/HEAD/skills/motion-graphics-director

In Ihrer bevorzugten KI fragen

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

Dokumentation

Motion Graphics Director

Machen Sie den Mechanismus oder die Idee sofort interessant. Das unten stehende kreative Standardprofil spiegelt die Vorlieben des Erstellers wider; ein explizites Projekt-Briefing des Nutzers kann es überschreiben. Technischer Erfolg allein ist kein visueller Erfolg.

Kreative Standardwerte

  • Hook innerhalb der ersten drei Sekunden. Eröffnen Sie mit einem überraschenden visuellen Kontrast, einem erkennbaren Problem, einer Transformation oder einem konkreten Nutzen. Beginnen Sie sofort mit der Handlung. Keine einleitende Titelcard, kein Logo-Pre-Roll und keine langsame Erklärung vor dem Hook. Testen Sie die ersten 90 Frames bei 30 fps für sich allein.
  • Schnelle, saubere Bewegung mit bewusstem Easing. Beginnen Sie mit visuellen Takten von 1–3 Sekunden und Hauptbewegungen von 8–18 Frames bei 30 fps; passen Sie sich an Erzählung und Verständnis an. Dies sind Startbereiche, keine zwingenden Schnitte. Führen Sie den Gedanken weiter, anstatt eine fertige Szene zu halten. Halten Sie kausale Abläufe verständlich.
  • Ein Brennpunkt und großzügiger Negativraum. Weißraum bedeutet Atemfreiheit, auch auf dunklen Hintergründen. Verwenden Sie zurückhaltende neutrale oder gedämpfte Farben, kein Neon oder Glühen, keine dekorativen Ränder oder umrandeten Karten. Verwenden Sie bescheidene Eckenradien, etwa 12–24 px bei mittleren Panels mit 1080 px Breite; halten Sie sie proportional.
  • Die Erzählung trägt die Erklärung. Standardmäßig Englisch, mit ElevenLabs-Sprachausgabe. Vermeiden Sie große Überschriften, Absätze, routinemäßige Untertitel, Schritt-Zähler, Kapitel-Labels, Fortschrittsbalken, dekorative Marken-Header sowie Warn-/Haftungsausschluss-Overlays. Ein kurzer 1–4-Wort-Header oder ein kurzes Label ist erlaubt, wenn es hilft, das sich bewegende Objekt zu identifizieren. Halten Sie Quellen, Vorbehalte und Implementierungshinweise in den Lieferdokumenten; machen Sie die Erzählung korrekt, ohne das Bild zu überladen. Liefern Sie separate Untertitel nur auf Anfrage.
  • Verwenden Sie gestaltete Assets. Beziehen Sie saubere, moderne Icons aus einem kohärenten Paket und echte, relevante Produktlogos aus offiziellen Markenressourcen. Erfinden Sie keine generischen Platzhalter-SVG-Icons oder gefälschte Logos. Passen Sie optische Größe, Strichstärke und Stil an. Folgen Sie icons-and-logos.md.
  • Keine Hintergrundmusik. Verwenden Sie Stimme plus selektive Soundeffekte. Effekte markieren bedeutende Ereignisse und müssen leiser als die Sprache bleiben. Bencho ist keine Abhängigkeit und seine Assets sind nicht enthalten.

Arbeiten Sie vom Projekt aus

Überprüfen Sie vorhandene Quellen, Assets, Skripte, gesperrte Abhängigkeiten und frühere Entscheidungen. Führen Sie für ein neues Remotion-Projekt python3 <skill>/scripts/new_project.py <new-directory> und dann npm ci in diesem Verzeichnis aus. Das gebündelte Projekt liefert getestete Rendering- und Media-Helfer. Seine FORM- und CDN-Kompositionen sind Legacy-Technikbeispiele, keine aktuellen Beispiele für Art Direction: kopieren Sie deren lange Einstellungen, Überschriften, Labels, Farben oder Icon-Zeichnungen nicht in neue Filme.

Halten Sie Inhalt, visuelle Tokens, Erzählung, Assets und Timing getrennt editierbar. Verwenden Sie lokale Medien und geladene Schriften für das finale Rendering. Konsultieren Sie die offiziellen Remotion-Skills für unbekannte APIs und passen Sie die installierte Version an, anstatt stillschweigend zu aktualisieren.

Produktion

  1. Extrahieren Sie Zielgruppe, eine Kernaussage, Plattform, Dauer, Referenzen, Assets, Sprache und Stimme. Standard: 1080 × 1920, 30 fps, etwa 20 Sekunden. Fragen Sie nur nach fehlenden Informationen.
  2. Schreiben Sie die erste visuelle Einstellung und den ersten gesprochenen Satz zusammen. Planen Sie eine kurze kausale Shot-Liste mit variablen Längen-Takten. Lesen Sie art-direction.md; lesen Sie für Prozesserklärungen auch technical-explainers.md. Überprüfen Sie technische Behauptungen anhand von Primärquellen.
  3. Wenn der Stil offen ist, zeigen Sie zwei wirklich unterschiedliche Richtungen mit repräsentativen Styleframes. Wenn der Nutzer den Look bereits gewählt hat, fahren Sie fort. Führen Sie keine routinemäßigen Genehmigungs-Zwischenschritte ein.
  4. Schreiben Sie ein prägnantes Sprachskript, beschaffen Sie Assets und folgen Sie audio.md. Generieren oder importieren Sie die genehmigte ElevenLabs-Erzählung, bevor Sie den Schnitt festlegen. Falls Zugriff oder Stimmenauswahl fehlen, bereiten Sie das Skript und das Animatic vor; identifizieren Sie Platzhalter-Timing klar und erfinden Sie keine fertige Erzählung.
  5. Bauen Sie die ersten 3 Sekunden und einen repräsentativen Übergang. Verwenden Sie motion-and-remotion.md. Erweitern Sie den Film, sobald Hook und Bewegung funktionieren. Korrigieren Sie betroffene Szenen, anstatt wiederholt alles zu rendern.
  6. Überprüfen Sie mit review.md: Eröffnungs-Hook, Tempo, kausale Klarheit, zurückhaltende Komposition, Sprachausrichtung, selektive Effekte, keine Musik. Rendern Sie eine Vorschau mit voller Bildrate vor dem finalen MP4.

Implementierungs-Invarianten

Leiten Sie Animationen aus Frame-Zahlen ab, einschließlich Easing und Audio-Hüllkurven. Keine autonomen CSS-Animationen, keine Wanduhr-Timer und kein ungesäter Zufall. Unabhängiges Frame-Rendering und Scrubbing müssen übereinstimmen. Warten Sie auf tatsächliche Schriften und Assets. Messen Sie Text mit geladenen Schriften; komponieren Sie langen Text um, anstatt ihn wahllos zu verkleinern.

Schnell bedeutet nicht abrupt, und Easing bedeutet nicht Hüpfen. Verwenden Sie kontrollierte Beschleunigung und Beruhigung, koordinierte Überlappungen und direkte Schnitte, wo nützlich. Geben Sie niemals vor, einen Export basierend auf Standbildern oder Spitzenmesswerten allein gesehen oder gehört zu haben.

Liefern und verbessern

Liefern Sie abspielbares Video, editierbares Projekt, Asset-Herkunft und einen präzisen Nachweis der tatsächlichen Prüfungen. Halten Sie die Dokumentation aus dem Video selbst heraus. Verwenden Sie für Skill-Änderungen evaluation.md; verbessern Sie Regeln aus beobachteten Fehlern, anstatt eine garantierte Qualität oder Geschwindigkeit zu beanspruchen.

Verwandte Skills