Communitygithub.com

hozanBaydu/animated-explainer-shorts

Regeln für das Schreiben und Animieren von kurzen Erklärvideos (YouTube Shorts, Reels, TikTok und längere Erklärvideos), die Leute tatsächlich anschauen. Verwende dies bei der Planung, beim Schreiben von Drehbüchern, Storyboarding, Animieren oder Überprüfen eines animierten Erklärvideos, seines Hooks, Tempos, Kameraführung, Charaktere, Untertitel oder Voiceovers.

Was ist animated-explainer-shorts?

Dieser Skill definiert einen umfassenden Satz von Regeln und einer Vorlage, um ansprechende animierte Erklärvideos zu erstellen, die von Plattformen wie YouTube Shorts, Reels und TikTok bis hin zu längeren Formaten reichen. Er priorisiert Storytelling über reine Fakten und führt den Benutzer durch Scripting, Storyboarding, Animation und Überprüfung, mit besonderem Fokus auf Hook, Tempo und Charakteranimation. Der Skill bietet eine technische Pipeline mit Remotion (und Three.js für 3D) zur Videoproduktion, einschließlich Voiceover-Generierung mit Kokoro (frei, Englisch), automatischer Untertitelung und Szenenkomposition. Er ist auf Entwickler und Kreative zugeschnitten, die KI-gesteuerte Tools wie Claude Code, Cursor oder Codex verwenden, um den Videoproduktionsprozess zu automatisieren, und stellt sicher, dass jedes Video eine klare Geschichte, visuelles Storytelling und produktionstechnische Best Practices befolgt.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/hozanBaydu/animated-explainer-shorts/tree/HEAD/plugins/animated-explainer-shorts/skills/animated-explainer-shorts

In Ihrer bevorzugten KI fragen

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

Dokumentation

Animierte Erklärvideos

Wende diese Regeln an, wenn du ein Video planst, schreibst, animierst oder überprüfst. Die Story-Regeln kommen zuerst: Ein schönes Video mit einem flachen Drehbuch scheitert trotzdem.

Video erstellen

Wenn der Benutzer eine tatsächliche Videodatei möchte, baue es mit Remotion (und Three.js für 3D) aus der Vorlage in diesem Skill.

  1. Story zuerst. Schreibe das Drehbuch als Beats (eine Idee pro Beat) mithilfe der Story-Regeln unten. Überprüfe den ersten Satz und die ersten Sekunden, bevor du etwas anderes tust.
  2. Projekt. Kopiere template/ in einen neuen Ordner, führe npm install aus. Lies reference/remotion.md bevor du Code schreibst, und reference/threejs.md vor jeder 3D-Szene.
  3. Sprache. Wenn der Benutzer einen Voiceover (seine Aufnahme oder eine Text-to-Speech-Datei) bereitstellt, lege ihn in public/ ab und setze "voice" in public/plan.json. Wenn nicht, setze jede Zeile in den "text" ihrer Szene und führe npm run voice aus (kostenlose Kokoro-Stimme, Englisch): es erstellt public/voice.wav und setzt Start und Ende jeder Szene. Wähle eine Stimme mit node scripts/voice.mjs am_michael (männlich) oder der Standardeinstellung af_heart (weiblich).
  4. Timing. Führe npm run captions für Wortzeitstempel aus. Mit deiner eigenen Sprachdatei beginne jede Szene mit dem ersten Wort der angezeigten Zeile; mit npm run voice ist dies bereits erledigt.
  5. Szenen. Schreibe eine Komponente pro Szene in src/scenes/, registriere sie und liste die Szenen in plan.json auf. Jede gesprochene Zeile bekommt ihre eigene visuelle Darstellung.
  6. Überprüfen. Rendere Standbilder (npx remotion still Main out/still.png --frame=N) am Anfang, in der Mitte und am Ende jeder Szene, betrachte sie und korrigiere alles, was gegen die folgenden Regeln verstößt.
  7. Rendern. npm run render erstellt out/video.mp4. Betrachte die ersten 3 Sekunden noch einmal, bevor du es als fertig betrachtest.

Voraussetzungen: Node.js 18+ und ffmpeg. Remotion lädt beim ersten Rendern sein eigenes headless Chrome herunter.

Story

  1. Jedes Video ist eine kleine Geschichte: Eine Figur will etwas, etwas blockiert es, es passiert eine Wendung, es gibt eine Auszahlung. Eine Liste von Fakten ist keine Geschichte.
  2. Der erste Satz ist eine kühne Behauptung, ein Widerspruch zu etwas, das die Leute glauben, oder eine Figur mit einem Problem.
    • Gut: „Etwas in deiner Küche bringt dich um.“ / „Ich dachte immer, Computer wären besser in Mathe als Menschen.“ / „Das ist Onkel Don, und er hat ein riesiges Problem.“
    • Schlecht: „Wie funktioniert X?“ / „Hier sind 3 Tools, die …“ / „Heute schauen wir uns … an“. Wenn das Video eine „Wie“-Frage beantwortet, verschiebe diese Frage in den zweiten Satz.
  3. Eröffne eine Frage oder eine Spannung in den ersten 3 Sekunden und behalte die Antwort für später. Verwende die Wendung nicht im Hook.
  4. Wähle breite oder aktuelle Themen. Ein Nischenthema braucht eine alltägliche Perspektive, die jeder nachfühlen kann.
  5. Ein starker Opener rettet kein schwaches Thema. Entscheide zuerst das Thema, dann schreibe den Hook.
  6. Jedes Video steht für sich allein. Kein „Teil 2“, keine Opener, die ein früheres Video fortsetzen, keine generischen Nutzlisten.
  7. Zeigen, nicht erzählen: Jede gesprochene Zeile hat ihre eigene visuelle Darstellung. Wenn das Video stumm Sinn ergibt, funktionieren die Szenen.
  8. Eine Idee pro Szene. Wenn eine Zeile zwei Ideen enthält, teile sie in zwei Szenen auf.
  9. Steigere dich: Jeder Beat erhöht die Einsätze oder die Überraschung ein wenig mehr als der vorherige.
  10. Beende mit einer Zeile, die der Zuschauer wiederholen oder verwenden kann (eine Frage, die man stellen kann, eine Faustregel), nicht mit einer Zusammenfassung.
  11. Die Länge ist eine freie Wahl: Verwende die Länge, die die Geschichte braucht. Gib bei langen Videos mindestens alle 60-90 Sekunden eine kleine Auszahlung.

Bildausschnitt (vertikal 1080x1920, sofern nicht anders angegeben)

  1. Halte das Hauptmotiv im oberen mittleren Bereich, etwa y = 500-1100.
  2. Die unteren ~20 % (y > 1500) liegen unter der Benutzeroberfläche der Plattform: keine wichtigen Grafiken dort. Setze Untertitel knapp darüber.
  3. Halte etwa 60 px Seitenränder ein. Halte den rechten Rand (x > 960, y 900-1700) frei von wichtigen Informationen, da sich dort die Like- und Kommentar-Buttons befinden.
  4. Zentrierter Bildausschnitt funktioniert bei vertikalen Videos meist am besten. Verwende Drittel für Szenen mit zwei Subjekten.
  5. Ein dominantes Element pro Bild. Alles andere ist kleiner, dunkler oder weniger gesättigt.
  6. Das Gesicht einer Figur sollte in Schlüsselmomenten mindestens ~15 % der Bildbreite einnehmen.

Eröffnungssekunden

  1. Beginne zu sprechen bei Frame 0. Keine stille Einleitung, kein Logo.
  2. Innerhalb der ersten 1-2 Sekunden ändert sich sichtbar etwas: ein neues Objekt, eine Bewegung, eine Verwandlung. Keine statische Titelcard.
  3. Großer Text im ersten Bild ist optional. Wenn du ihn verwendest, drückt er die Behauptung aus; er ist keine Dekoration.
  4. Ein Gesicht im ersten Bild ist optional. Ein starker Charakter oder ein starkes Bild funktioniert genauso gut.

Kamera (2D und 3D)

  1. Jede Kamerabewegung hat ein Motiv: Sie folgt einer Figur, enthüllt Informationen oder verstärkt die Betonung. Keine dekorative Bewegung.
  2. Niemals linear bewegen: immer mit Ein- und Auslaufen.
  3. Enthüllung = langsames Heranzoomen (Scale 1.0 auf 1.1-1.25 über 1-3 s). Schock = schnelles Heranzoomen (0.15-0.25 s) mit einem kleinen Ruck.
  4. Neuer Ort: zuerst eine Totale, dann näher.
  5. Tiefe Kameraperspektive = Macht oder Bedrohung, hohe Perspektive = klein oder hilflos, Augenhöhe = neutral.
  6. Wenn zwei Figuren sich gegenüberstehen, behalte jede für die gesamte Szene auf ihrer eigenen Seite.
  7. In 3D: FOV 35-50 Grad, Tiefe durch Vordergrund-, Mittel- und Hintergrundebenen. Bewege die Kamera (Dolly) anstatt das FOV zu ändern (Zoom).
  8. In 3D-Cartoon-Szenen verwende lineares Tonemapping und eine leichte Sättigungserhöhung; filmisches Tonemapping wäscht Cartoon-Farben aus.

Schnitt und Tempo

  1. Nach der Eröffnung folgt das Tempo dem Stil. Ein schneller erster Moment ist wichtiger als ein schnelles ganzes Video.
  2. Blickführung: Der interessanteste Punkt einer neuen Einstellung beginnt dort, wo er in der vorherigen Einstellung war.
  3. Match Cuts: Eine Form oder Farbe vom Ende einer Szene wird zum Anfang der nächsten.
  4. Nach einem Witz oder einer Pointe halte 0.3-0.6 s inne, bevor du schneidest.
  5. Verlangsame vor dem Schlüsselmoment, beschleunige danach.
  6. Schneide während einer Aktion: Wechsle die Einstellung mitten in einer Bewegung, nicht nachdem sie stoppt.
  7. Keine weißen Blitze oder Stroboskop-Übergänge. Verwende Peitschenschwenks, Match Cuts und Wischblenden.

Charakteranimation

  1. Quetschen und Strecken bei jedem Aufprall und Sprung (Scale 0.8-1.25, Volumen ungefähr beibehalten).
  2. Antizipation: Eine kleine Bewegung in die entgegengesetzte Richtung vor einer großen Bewegung (0.1-0.2 s).
  3. Nachlauf: Haare, Antennen und Arme bewegen sich weiter und beruhigen sich, nachdem der Körper stoppt.
  4. Gliedmaßen und geworfene Objekte bewegen sich auf Bögen, niemals auf geraden Linien.
  5. Blinzeln, Atmen und leichtes Wanken hören niemals auf, auch nicht, während eine Szene wartet.
  6. Timing verkauft Gewicht: Schwere Dinge bewegen sich langsam und landen hart, leichte Dinge bewegen sich schnell.
  7. Übertreibe Emotionen: Riesige Augen, große Mundformen, ein fliegender Schweißtropfen.
  8. Eine klare Silhouette pro Pose. Wenn die Pose nicht als schwarze Form erkennbar ist, ändere sie.

Text und Untertitel

  1. Untertitel: 2-5 Wörter pro Abschnitt, synchron zur Stimme, einblendend, hoher Kontrast (weiß mit dunklem Rand).
  2. Große kinetische Wörter nur in Pointen-Momenten, und immer nur eine große Wortgruppe gleichzeitig auf dem Bildschirm.
  3. Zahlen auf dem Bildschirm stimmen genau mit der Erzählung und der Quelle überein.

Stimme

  1. Kurze Sätze, ein gesprochener Rhythmus, Verschmelzungen („ist's“, „hat nicht“).
  2. Etwa 170-200 Wörter pro Minute.
  3. 0.2-0.4 s Stille zwischen Beats, 0.6-1.0 s vor der letzten Zeile.

Ehrlichkeit

  1. Jede Zahl auf dem Bildschirm hat eine echte Quelle und stimmt mit ihr überein.
  2. Niemals Behauptungen in der Ich-Perspektive in die Erzählung einfügen, die der Ersteller nicht tatsächlich getan hat.
  3. Parodie-Überschriften verwenden eindeutig erfundene Namen, niemals Nachahmungen echter Medien.

Verwandte Skills