sui-motion-graphic-reel

sui-motion-graphic-reel · Mit Code designstarke Animationen erstellen

Autor: Sui Yang (IG @asksui.ai). Dieses Skill entstand aus sieben Iterationen eines 15-Sekunden-Animationsfilms: Hinter jedem Gedanken steckt eine verworfene Version, Vergleichsbilder in examples/, der vollständige Verlauf in references/case-0099.md.

In einem Satz: Ob eine Animation gut aussieht, hängt zu 90 % von der vor der Umsetzung festgelegten Designsprache und der Kameraführung ab, nicht von der Anzahl der Effekte. Dieses Skill regelt „wie man denkt, wie man es der KI erklärt und wie man selbst prüft“ – unabhängig von der verwendeten Engine.

Ein roter Faden: Designsystem finden (§1: vorhandenes des Nutzers verwenden, falls nicht, vom Design-Agenten mehrere Optionen erstellen lassen) → Skript & Ton (§2) → Storyboard zur Ansicht (§3) → Designsprache festlegen, Szene für Szene umsetzen (§4 mit neun Strategien) → Pre-Render-Review (§5) → Eigenkontrolle nach der Ausgabe (§6) → Auslieferung & Iteration (§7).

Zwei Dinge getrennt halten (Das wichtigste Design dieses Skills):

	Wo wohnen	Darf geändert werden?
Geschmack: Welche Farben, Verläufe ja/nein, Schriftarten, Sprechgeschwindigkeit, Charaktere	Designsystem (references/design-system.md, eines pro Projekt)	Der Nutzer bestimmt. Die Beispiele im Designsystem sind nur ein Startpunkt, das Ganze kann ausgetauscht werden
Handwerk: Konsistenz im ganzen Film, jede Szene eine andere Technik, vielschichtig, Kameragefühl, ein Fokus pro Moment, Selbstprüfung	Diese SKILL.md §§4–6	Unabhängig vom Geschmack: Funktioniert bei jedem Stil

Bei Konflikten zwischen Regeln und Nutzergeschmack: Geschmack folgt dem Nutzer, Handwerk bleibt bestehen. Beispiel: Der Nutzer möchte Neon-Verläufe – okay, dann wird der ganze Film mit dieser Neon-Sprache gestaltet (Handwerk: konsistent im ganzen Film), nicht erste Szene Neon, zweite Szene Schweizer Raster.

---

1. Vor Beginn: Designsystem finden

Ohne Designsystem (Farbe, Schrift, Layout-Rahmen, Signaturelemente, Bewegungscharakter, „Nicht-Liste“) fällt die KI in ihre Voreinstellungen zurück: Pink-lila Verläufe, Leuchten, jede Szene einblenden und vergrößern. Daher immer diesen Schritt zuerst, und zuerst suchen, dann fragen, zuletzt selbst erstellen.

Gibt es ein vorhandenes Designsystem?
├─ Ja → Nach den Vorgaben des Nutzers arbeiten (1A)
└─ Nein → Nutzer durch Fragen führen oder Referenzen geben lassen (1B) → Design-Agent übernimmt, erstellt mehrere Optionen zur Auswahl (1C) → Nutzer wählt aus → Danach arbeiten

1A. Zuerst suchen: Hat der Nutzer ein eigenes

• Im Projekt nachsehen: design-system.md, Markenrichtlinien, Design-Tokens, CSS-Variablen der Website, Figma-Exporte, Logos, frühere Filme oder Grafiken.
• Wenn nichts gefunden wird: „Hast du ein bestehendes Designsystem oder eine Markenrichtlinie? Wenn ja, gib es mir, ich arbeite danach.“
• Ja → Nach den Vorgaben des Nutzers arbeiten. Es in das projektspezifische design-system.md umschreiben (Felder siehe references/design-system.md). Keine der bestehenden Festlegungen ändern; die für den Film benötigten Felder, die nicht definiert sind (Bewegungscharakter, Signaturelemente, Plattform-Sicherheitsränder), ergänzen und jede Ergänzung mit „Von KI ergänzt“ kennzeichnen und den Nutzer um Bestätigung bitten.

1B. Nicht vorhanden: Nutzer zuerst durch Fragen führen oder Referenzen geben lassen

Zwei Wege, einer oder beide möglich:

• Fragebogen: Alles auf einmal fragen, maximal vier Fragen, mit Optionen.
  • Charakter: Ruhig & edel / Lebhaft / Technologisch / Handgemacht / Selbst beschreiben
  • Farbe: Gibt es Farben, die verwendet werden müssen? Wenn nicht, nur eine Akzentfarbe wählen
  • Charakter oder Maskottchen erwünscht? Sprachausgabe erwünscht?
  • Für wen ist der Film? Auf welcher Plattform?
• Referenzen: Ein Lieblingsfilm, eine Website, ein Poster, eine Marke – alles möglich. Bei jeder Referenz fragen: „Was gefällt dir daran?“ Die Sprache lernen (Farbe, Raster, Schrift, Bewegungsart), nicht das Bild kopieren.

1C. Design-Agent übernimmt: Mehrere Optionen zur Auswahl erstellen

Die Antworten und Referenzen aus 1B an einen anderen Agenten (Design-Agenten) übergeben. Dieser macht nur eines: Designsystem-Vorschläge erstellen. Arbeitsauftrag und Rückgabeformat in references/design-agent.md.

• 3 Richtungen erstellen, die sich deutlich voneinander unterscheiden (nicht nur eine andere Akzentfarbe).
• Jede Richtung mit einem echten gezeichneten Musterbild: Alle drei mit demselben Titel, demselben Bildinhalt, nebeneinander in einem Bild. Der Nutzer wählt mit den Augen, nicht durch Farbcodes.
• Der Nutzer kann eine gesamte Richtung wählen oder mischen („Farbe von A mit Schrift von B“). Gefällt keine: Nachfragen, was nicht passt, und eine weitere Runde starten.
• Die gewählte Richtung in das projektspezifische design-system.md schreiben. Danach darf jede Szene nur noch die Elemente daraus verwenden; Farben, Schriften, Techniken hinzufügen nur nach Änderung des Designsystems.

Warum ein anderer Agent? Der Film-Agent hat bereits Skript und Bilder im Kopf. Wenn er selbst Vorschläge macht, ähneln sich die drei Richtungen stark. Ein separater Agent, der nur die Anforderungen und Referenzen sieht, erzeugt unterschiedlichere Richtungen. Falls keine Umgebung für einen zweiten Agenten verfügbar ist, selbst nach dem gleichen Auftrag arbeiten – ebenfalls drei Richtungen plus Musterbilder abliefern.

Nutzer nicht anwesend

Bei geplanter Ausführung, Nachtschicht oder „Du entscheidest“: Nicht anhalten und warten. Der Design-Agent erstellt trotzdem drei Richtungen, die am besten passende auswählen, im design-system.md mit „Von KI ausgewählt“ kennzeichnen und die Musterbilder der anderen beiden beifügen. Bei Auslieferung um Bestätigung oder Änderung bitten.

Felder und vier Beispiele in references/design-system.md.

2. Skript & Ton: Ton zuerst

• Skript als gesprochenen Text schreiben, mit umgangssprachlichen Verknüpfungen („schau“, „und dann“, „außerdem“). Keine Substantivlisten schreiben. Es soll klingen, als würde man mit einem Freund sprechen, nicht als würde man Slogans aufsagen.
• Sprachaufnahme als gesamten Block generieren, nicht Satz für Satz getrennt und zusammensetzen – getrennte Sätze klingen alle wie Slogans, zusammengesetzt fehlt die Betonung. Bei der Generierung eine Zeitkarte für jedes Wort anfordern (die meisten TTS-Dienste haben Zeitstempel-Schnittstellen).
• Bild folgt dem Wort: Jede Szene, jedes Element erscheint genau in dem Moment, in dem das Wort gesprochen wird. Filmlänge = Länge der Sprachaufnahme + Abschluss, nicht auf eine gerade Sekundenzahl runden. Gleiches gilt für Bewegungen: Wenn das Wort „Kamera fliegt herein“ gesprochen wird, muss das Bild in diesem Moment fliegen. Wenn die Bewegung bereits im vorherigen Satz abgeschlossen ist und beim Aussprechen stillsteht, sehen die Zuschauer ein unbewegtes Bild zu einem Satz, der Bewegung beschreibt. Die Sekundenzahl des Wortes ausdrucken und abgleichen, nicht schätzen.
• Keine Pausen in die Sprachaufnahme einfügen, nur um auf ein Bild zu warten. Wenn das Bild nicht rechtzeitig fertig ist, das Bild vereinfachen.
• Für Filme ohne Sprachaufnahme: Zuerst eine Zeittabelle schreiben („in Sekunde X passiert was“), danach genauso umsetzen.
• Nach der Ausgabe die Tonspur des fertigen Films per Spracherkennung transkribieren, um sicherzustellen, dass jeder Satz vorhanden und kein halber Satz abgeschnitten ist (abgeschnittene Sprachaufnahmen sind im Bild unsichtbar).

Wie man Sprachaufnahmen anschließt, worauf bei kommerziellen Lizenzen zu achten ist: references/engines.md „Sprachaufnahme“.

3. Storyboard zuerst zeigen, erst nach Zustimmung animieren

Wenn die Animation erst nach Fertigstellung merkt, dass die Richtung falsch ist, ist das die teuerste Nacharbeit. Vor dem Animieren eine Storyboard-Tabelle erstellen, pro Takt eine Zeile:

Spalte	Inhalt
Zeit / Gesprochenes Wort	Von Sekunde X bis Sekunde Y, welche Wörter gesprochen werden
Fokus	Worauf soll das Auge des Zuschauers in diesem Takt schauen (nur eines)
Vier Ebenen	Hintergrund · Hauptmotiv · Vordergrund · Informationsebene (siehe §4, Punkt 4)
Technik	Welche Animationsmethode wird in dieser Szene verwendet (§4, Punkt 2); darf nicht dieselbe wie in der vorherigen Szene sein
Kamera	Kamera von wo nach wo, wie bewegt
Rhythmus	Dicht oder locker, hell oder dunkel in diesem Takt (§4, Punkt 9). Nachdem die gesamte Tabelle fertig ist, diese Spalte noch einmal einzeln durchgehen
Übergang zur nächsten Szene	Welche Übergangstechnik

Nach Möglichkeit zu jedem Takt einen statischen Keyframe zeichnen (wirklich nach Designsystem zeichnen) und als Kontaktbogen dem Nutzer zeigen. Erst nach Zustimmung des Nutzers mit der Animation beginnen.

Wenn der Nutzer nicht anwesend ist: Storyboard trotzdem erstellen und speichern, selbst nach §4 prüfen, bevor mit der Animation begonnen wird, bei Auslieferung beifügen.

4. Neun Gestaltungsstrategien

Jede Strategie enthält „Warum“ und „Wie sieht es aus, wenn es schlecht gemacht ist“. Die Namen und Erklärungen der Techniken in references/techniques.md.

① Zuerst eine Designsprache festlegen, den ganzen Film nur mit dieser

Vor dem Animieren diese Elemente festlegen und als gemeinsame Datei (Tokens) ablegen, aus der jede Szene schöpft: Farbpalette · Raster & Sicherheitsränder · Schriftarten & Schrifthierarchie · Position der Titelblöcke · Ein den ganzen Film durchziehendes „Signaturelement“ (z. B. Beispiel A verwendet Anmerkungen aus Designtools – Auswahlgriffe, Keyframe-Spuren, Shape-Name-Labels – und macht die Arbeit sichtbar).

• Warum: Der Zuschauer kann nicht sagen, was falsch ist, aber sieht sofort, dass „diese Szenen nicht aus demselben Film stammen“. Einheitlichkeit ist die günstigste Quelle für „Hochwertigkeit“.
• Wie sieht es aus, wenn es schlecht gemacht ist: Nur die bemängelte Szene ändern, die anderen mit eigenen Farben (Vergleich examples/v3-only-first-scene-fixed.jpg mit examples/v4-unified.jpg). Wenn eine Szene geändert wird, muss der ganze Film angeglichen werden.

② Jede Szene eine andere Technik, nicht andere Farbe

Reichtum entsteht aus „wie sich diese Szene bewegt“, nicht durch Wechsel des Farbschemas. Im Film verschiedene Methoden einsetzen:

Thema	Technik
Große Schrift	Federnde Verformung (beim Auftreffen zusammendrücken, beim Abheben strecken)
Pixel / Retro	Frame-Sprünge, ganzzahlige Pixelverschiebung, keine weichen Tweening
Partikel	Physikalische Simulation oder Strömungsfeld, zerstreuen und wieder zusammenziehen
Handschrift	Nach echtem Strichverlauf, Zug für Zug zeichnen
UI / Bildschirm	3D-Perspektive, Panels in der Tiefe versetzt, Kamera um sie herumbewegen
Zahlen	Rollender Zähler, bei jedem Sprung zusammendrücken

• Wie sieht es aus, wenn es schlecht gemacht ist: Jede Szene ist „Einblenden + Vergrößern“. Egal wie viele Szenen, nur eine Bewegung.

③ Schrift wirklich kinetisch machen

Wenn große Schrift die Hauptrolle spielt, muss sie Gewicht haben: Beim Fallen länger werden, beim Auftreffen zusammendrücken und zurückfedern, Zeichen versetzt einsetzen, gestreckt einfliegen, zu einer Linie zusammengedrückt abfliegen. Formeln und Schreibweise in references/techniques.md „Schrift“.

• Wie sieht es aus, wenn es schlecht gemacht ist: Schrift wird nur eingeblendet oder mit einer Maske gleichmäßig hereingeschoben.

④ Jede Szene aus vier Ebenen, ein Fokus pro Moment

Ebene	Funktion
Hintergrund	Bewegte Umgebung, zeigt „wo sind wir“, dunkel, langsam
Mittelgrund	Einziger Fokus: Hauptfigur oder Hauptobjekt, klar, groß, in der Bildmitte
Vordergrund	Dinge, die vor der Kamera vorbeiziehen, erzeugen Tiefe
Informationsebene	Beschriftungen, Zähler, kleine UI-Elemente, Untertitel

Gleichzeitig können viele Dinge in Bewegung sein, aber nur eines darf am hellsten, klarsten und auffälligsten sein. Reichhaltigkeit entsteht aus der Anzahl der Ebenen, nicht aus der Anzahl der gleichzeitig auffälligen Elemente.

• Wenn es stillsteht: Das Hauptmotiv (Fokus und zu lesender Text) muss vollständig stillstehen, damit man es lesen kann, während Hintergrund und umgebende Elemente sich langsam weiterbewegen: Kleine Zeichen im Hintergrund, große Schrift im Hintergrund, Vordergrundobjekte an den Seiten des Hauptmotivs, Atmen einer Figur. Wenn alles stillsteht, stirbt das Bild. Bewegung außerhalb des Hauptmotivs platzieren, nicht durch den zu lesenden Text.
• Ebenen müssen übereinander liegen, nicht nebeneinander: Hintergrund hinter dem Hauptmotiv, Vordergrund vor der Kante des Hauptmotivs. „Hintergrund“ und „Vordergrund“ einfach in den leeren Raum unter dem Hauptmotiv zu setzen, bedeutet nur zwei weitere Dinge, keine echten Ebenen; der Bereich unten im Hochformat wird oft von der Plattform-UI verdeckt.
• Wie sieht es aus, wenn es schlecht gemacht ist: Eine Karte auf einfarbigem Hintergrund (drei Ebenen fehlen, wirkt „trocken“); oder vier Dinge blinken gleichzeitig (kein Fokus, wirkt „chaotisch“).

⑤ Die Kamera muss sich bewegen

Alle Elemente in dieselbe Welt setzen (eine Leinwand, die viel größer als das Bild ist, oder einen 3D-Raum), die Kamera darin bewegen, anstatt das Bild vor Ort zu wechseln.

• Auftakt: Kamera von weit her einfliegen (Fly-in), durch mehrere Vordergrundebenen, in dem Moment, in dem sie ankommt, beginnt das Hauptmotiv seine Aktion.
• In den ersten 4 Sekunden zwei Wellen: Die erste große Verschiebung (0–1 Sekunde), 1,5 Sekunden später eine zweite Welle (Kamera noch einmal bewegen, in einen anderen Bereich wechseln oder die Schrift selbst stark verformen). Nur einmal fliegen und dann anhalten ist gleichbedeutend mit nur 1 Sekunde Auftakt.
• Szenenwechsel: Kamera in einen anderen Bereich der Welt verschieben, Hintergrund, Mittelgrund und Vordergrund bewegen sich mit unterschiedlicher Geschwindigkeit (Parallaxe). In den schnellen Frames Bewegungsunschärfe hinzufügen, Untertitel bleiben scharf.
• Auch bei ruhigen Filmen braucht es eine zweite Welle, nur auf andere Weise: Nicht unbedingt ein großer Kameraschwenk, sondern eine Verformung der Schrift (Strecken, Stauchen), eine Linie, die über das Bild streicht und die nächste Zeile hervorbringt, oder das Hauptobjekt führt eine Aktion aus. „Langsam“ bedeutet sanfte Bewegung, nicht Stillstand.
• Sobald sich die Kamera bewegt, die Sicherheitsränder neu berechnen: Nach Zoom oder Schwenk können kleine Buchstaben, die zuvor innerhalb der Sicherheitsränder waren, außerhalb des Bildes liegen. Bei Frames mit Kameralbewegung in Originalgröße die Ränder überprüfen.
• Wie sieht es aus, wenn es schlecht gemacht ist: Auftakt ist ein statisches Bild; Szenenwechsel erfolgt durch Ausblenden des gesamten Bildes und Einblenden des nächsten.

⑥ 3D: Echten 3D verwenden

Für 3D-Kamerabewegungen eine echte 3D-Szene und eine echte perspektivische Kamera aufbauen (three.js o. ä.): Auf einer Bogenlinie bewegen, mit Beschleunigung und Verzögerung, Seiten von Objekten sichtbar. Partikel müssen Volumen, Tiefenschärfe und Nachlauf haben.

• Wie sieht es aus, wenn es schlecht gemacht ist: Ein 2D-Bild vergrößern und als „Zoom“ bezeichnen; ein paar CSS-Blöcke zu einem 3D-Würfel zusammensetzen (zu wenig Flächen, Vorder-/Hintergrund passen nicht, bricht beim Drehen auseinander); Partikel sind nur Punkte auf einer Ebene.
• Echte 3D-Abschnitte müssen Frame für Frame vergrößert geprüft werden (§6), da sie am anfälligsten für Fehler sind, die in der Miniaturansicht nicht sichtbar sind.

⑦ Übergänge selbst ein Blickfang

Neben der Kamerabewegung können zwischen den Abschnitten verwendet werden: Durchquerung (Kamera zoomt in ein Objekt der vorherigen Szene hinein, dessen Inneres die nächste Szene ist) · Maske (die nächste Szene scheint durch Buchstaben oder Formen hindurch, Blende) · Form-Match-Cut (der Endpunkt der vorherigen Szene ist die Spitze eines Stifts in der nächsten) · Zurückziehen & Enthüllen (die vorherige Szene war nur ein kleiner Teil eines großen Bildschirms).

• Übergänge in die Pausen zwischen den Sätzen der Sprachaufnahme legen.
• Von jedem Übergang ein paar Frames als Serienaufnahme prüfen, ob es Unterbrechungen oder Sprünge gibt (examples/v4-transitions.jpg).

⑧ Alle Bilder aus der „Frame-Nummer“ berechnen

Egal welche Engine verwendet wird, die Ausgabe erfolgt Frame für Frame als Einzelbild. Daher müssen alle Positionen, Größen und Transparenzen eine Funktion der Frame-Nummer sein: Bei Frame 137 wird das Bild von Frame 137 gezeichnet. Keine automatisch laufenden Zeitsteuerungen verwenden (CSS-Animation / -Transition, selbstlaufende Timer, eigene Animationsschleifen einer 3D-Engine) – da sie beim Rendern nicht mit den Frames synchron sind, flackern, springen oder lassen Elemente aus.

• Vorteil: Jede Szene kann in das kleine Fenster für Übergänge und in den Rückblick am Ende des Films eingefügt werden und sich dort weiterbewegen, da nur eine Frame-Nummer übergeben werden muss.
• Zeitintensive Daten (Schrift-Sampling-Punkte, Partikel-Zielpositionen, Charakter-Pixel) zuerst berechnen und als Datei speichern, nicht erst beim Rendern berechnen.

⑨ Rhythmus wie Musik schreiben: Dichte & Helligkeit müssen Höhen und Tiefen haben

Wenn der gesamte Film die gleiche Dichte und den gleichen Grundton hat, ist jeder Takt für sich genommen in Ordnung, aber zusammenhängend wird es schnell langweilig. Den Film wie ein Musikstück behandeln: Es gibt dichte und lockere, helle und dunkle Passagen. Wo wird aufgebaut, wo abgebaut – vor dem Animieren festlegen.

• Eine Rhythmus-Partitur schreiben: Im Storyboard für jeden Takt zwei Kästchen markieren: dicht / locker, hell / dunkel. Die Abfolge sollte wie „dicht-dicht-locker, dicht-dicht-locker, dicht“ klingen; wenn mehr als vier oder fünf Takte „dicht, dunkel“ sind, einen lockeren Takt oder einen Grundtonwechsel einfügen.
• Locker = nur eine Sache im Bild: Ein Handy, eine große Zeile Schrift, eine Zahl, mit viel Leerraum. Eine schnelle Schnittcollage ist nicht locker, sie ist die dichteste Stelle des gesamten Films.
• Ein dichter Takt kann auch erst locker und dann dicht sein: Zuerst nur den Titel zeigen, wenn das Schlüsselwort gesprochen wird, die weiteren Elemente erscheinen.
• Helligkeit durch Wechsel des Hintergrundgrundtons: Wenn das Designsystem mehr als einen Hintergrundgrundton hat, den gesamten Takt mit einem anderen Grundton zu gestalten, ist der direkteste Weg, Höhen und Tiefen zu erzeugen. Dabei den gesamten Bildschirm wechseln, keinen Rand des alten Grundtons stehen lassen.
• Die intensivste Farbe nur als Aufblitzen verwenden: Den gesamten Bildschirm mit der Akzentfarbe füllen, kurz darüberstreichen, etwa eine Sekunde abdecken – sehr wirkungsvoll. Wenn sie als Grundton für einen Takt mit zu lesendem Text verwendet wird, blendet sie.
• Wie sieht es aus, wenn es schlecht gemacht ist: Jeder Takt besteht aus „gleicher Grundton + großer Titel + ein Kästchen in der Mitte“; oder der erste lockere Takt erscheint erst ganz am Ende.
• Wie selbst prüfen: Die Standbilder jedes Taktes stark verkleinert in einer Reihe anordnen, den Text ausblenden. Ob man Absätze erkennt, wo es hell und wo es dunkel ist, zeigt, ob ein Rhythmus vorhanden ist.

5. Pre-Render-Review: Vor der Ausgabe die Prüfung für den Nutzer übernehmen

Eine gesamte Filmausgabe dauert lange. Die meisten Mängel, die der Nutzer findet, sind bereits vor der Ausgabe anhand weniger statischer Screenshots erkennbar. Daher vor der Ausgabe nicht direkt rendern, sondern drei günstige Stufen durchlaufen:

Stufe	Worauf achten	Erkennt
① Papier-Prüfung	Storyboard gegen die Review-Gewohnheitstabelle Punkt für Punkt abgleichen	Doppelte Szenentechnik, fehlende Ebenen, mehr als ein Fokus, kein zweiter Impuls beim Auftakt, Abweichung vom zu vermittelnden Satz
② Maschinelle Messung	Einige statische Screenshots erstellen, scripts/preflight.py ausführen	Text außerhalb der Sicherheitsränder, zwei Takte fast identisch, Abschnitte, die sich bewegen sollten, bewegen sich nicht, Bild zu leer
③ Review-Agent	Ein anderer Agent sieht nur die Bilder und die Gewohnheitstabelle, prüft für die Augen des Nutzers	Hauptmotiv erkennbar? Zu klischeehaft? Zu trocken? Objekte zerfallen? Einheitlichkeit?

• Review-Gewohnheitstabelle (review-habits.md) ist der Kern dieses Schritts: Jeder vom Nutzer in der Vergangenheit bemängelte Punkt wird dort festgehalten. Zuerst im Projekt nachsehen, dann nach der persönlichen Datei des Nutzers suchen; falls keine vorhanden, eine Kopie der Starteinträge aus references/review-habits.md anlegen.
• Jedes Mal, wenn der Nutzer einen Mangel findet, einen Eintrag hinzufügen. Dabei fragen: Kann dieser Punkt beim nächsten Mal vor der Ausgabe gefunden werden? Wenn ja, notieren, wie. Diese Datei wird zunehmend zu seinen eigenen Augen.
• Erst nach Bestehen aller drei Stufen rendern. Bei zwingend zu ändernden Punkten ist keine Ausgabe erlaubt.
• Dieser Schritt erfasst keine Ton- und Abspielgefühle – dafür ist §6 zuständig.

Wie die drei Stufen jeweils durchgeführt werden, Arbeitsauftrag für den Review-Agenten: references/pre-render-review.md. Format der Gewohnheitstabelle, Starteinträge, wie sie wächst: references/review-habits.md.

6. Eigene Prüfung vor Auslieferung (zwingend, nicht auf den Nutzer warten)

Nach Fertigstellung nicht einfach „fertig“ sagen. In dieser Reihenfolge selbst prüfen, notieren „was ich sehe, was geändert wurde“:

1. Kontaktbogen: Alle 0,5 Sekunden ein Bild, um den Gesamtrhythmus zu prüfen und ob jedes Bild verständlich ist. python3 scripts/review.py sheet <fertiger Film>
2. Standbilder vergrößert ansehen: In dem Moment, in dem das Hauptmotiv jedes Taktes stillsteht, das Bild in Originalgröße einzeln ausgeben und eines nach dem anderen ansehen. Der verkleinerte Kontaktbogen zeigt nicht, ob Text am Rand klebt, Figuren auseinanderfallen oder Ebenen falsch übereinander liegen. python3 scripts/review.py frames <fertiger Film> 1.2 4.5 7.0 …
3. Bewegte Abschnitte dicht ansehen: Übergänge, 3D-Kamerabewegungen, Partikel, alle 0,1–0,2 Sekunden ein Bild. python3 scripts/review.py burst <fertiger Film> <Startsekunde> <Endsekunde>
4. Stillstands-Scan: Gibt es Abschnitte von mehr als 1 Sekunde, in denen nichts passiert (häufige Ursache: Ein Element hat die gesamte Szene eingefroren). python3 scripts/review.py freeze <fertiger Film>
5. Transkription: Die Tonspur des fertigen Films in Text umwandeln und mit dem Skript abgleichen.
6. Abgleich mit Designsystem: Gibt es in einer Szene Farben, Schriften oder Techniken, die nicht im Designsystem vorgesehen sind?
7. Vergleich mit vorheriger Version: Ist diese Version besser? Wenn sie nur „anders“ ist und nicht „besser“, dies festhalten.

Fragen, die bei jedem Frame zu stellen sind:

• Was ist der Fokus dieses Frames? Ist es innerhalb einer Sekunde erkennbar?
• Ist die Schrift groß genug, unscharf, am Rand, von anderen Elementen überdeckt?
• Sind alle vier Ebenen vorhanden? Ebene für Ebene zählen: Was ist der Hintergrund, was der Vordergrund, wie viele Elemente auf der Informationsebene? Wenn nur das Hauptmotiv zählbar ist, ist es dünn. Die Dichte mit einem beliebigen Frame aus examples/v7-near-final.jpg vergleichen.
• Ist die Technik dieser Szene anders als die der vorherigen?
• Gibt es Elemente aus der „Nicht“-Liste des Designsystems?
• Tun im selben Bild zwei Dinge dasselbe?

Selbstprüfungswerkzeuge können trügen: Wenn jeder Frame des Kontaktbogens korrekt ist, bedeutet das nicht, dass es keine Stillstandsabschnitte gibt (muss extra gescannt werden). Wenn die geprüften Frames korrekt sind, bedeutet das nicht, dass die Bewegung korrekt ist (3D und Übergänge müssen dicht geprüft werden). Spracherkennung kann Homophone und englische Markennamen falsch erkennen (das ist ein Problem der Transkription, die Sprachaufnahme muss nicht korrigiert werden).

Maximal drei eigene Iterationen. Eine Iteration = eine vollständige Filmausgabe + alle sieben Schritte einmal durchgeführt; Prüfungen vor der Ausgabe mit einzelnen Screenshots zählen nicht als Iteration. Mängel, die nach drei Iterationen noch vorhanden sind, dem Nutzer auflisten und nicht verheimlichen.

7. Auslieferung und wenn der Nutzer „unzufrieden“ sagt

Bei der Auslieferung drei Dinge nennen: Was in dieser Version gemacht wurde · was die Selbstprüfung ergeben hat und was geändert wurde · welche Mängel noch bestehen.

Das Feedback des Nutzers ist meist ein Gefühl. Dieses Gefühl zuerst in Bildsprache übersetzen, dann Änderungen vornehmen; wenn die Übersetzung nicht gelingt, nachfragen, nicht raten:

Nutzer sagt	Ursache meist	Zuerst prüfen
Zu klischeehaft / Zu KI-haft / Nicht hochwertig	Designsprache: zu viele Farben, Verläufe, Leuchteffekte, der Stil selbst dominiert	§4① und „Nicht“-Liste des Designsystems
Nur teilweise geändert / Nicht einheitlich	Andere Szenen nicht an die Sprache angepasst	§4①
Zu eintönig / Alles gleich	Jede Szene die gleiche Bewegungstechnik	§4②
Zu ermüdend / Keine Höhepunkte / Anstrengend durchzugucken	Keine Variation von Dichte und Helligkeit: Jeder Takt gleich voll, gesamter Film ein Grundton	§4⑨, zuerst Standbilder verkleinert anordnen und betrachten
Stillstehend wirkt tot	Während das Hauptmotiv stillsteht, sind auch Hintergrund und Umgebung völlig still	§4④ „Wenn es stillsteht“
Zu trocken / Zu leer / Keine Tiefe	Fehlender Hintergrund, Vordergrund, Informationsebene; oder Hauptmotiv zu klein	§4④
Zu chaotisch / Weiß nicht, wohin schauen	Zu viele gleichzeitig auffällige Elemente	§4④
Zu statisch / Keine Bewegung / Kein Raumgefühl	Kamera hat sich nicht bewegt oder nur einmal	§4⑤
Kamerabewegung wirkt unecht / 3D komisch	2D-Skalierung als Ersatz oder 3D-Objekte zerfallen	§4⑥
Schrift hat kein Gefühl	Schrift nur eingeblendet	§4③
Klingt wie Slogans / Rhythmus zu langsam	Sprachaufnahme unterbrochen, Pausen, Sprechgeschwindigkeit	§2
Text und Sprache nicht synchron	Elemente nicht an die Wort-für-Wort-Zeiten gebunden	§2
Erdrückend / Zu voll	Hauptmotiv füllt das gesamte Bild ohne Leerraum oder ohne Rahmung	Hauptmotiv verkleinern, Rahmen hinzufügen, Platz für Titel und Anmerkungen lassen

Zwei Disziplinen bei Änderungen:

• Änderung an einer Stelle, gesamten Film prüfen: Tritt dieser Mangel auch in anderen Szenen auf?
• Vom Nutzer benannte, gemochte Elemente nicht ändern. Nur ihre Farbe und ihr Raster anpassen, die Technik unverändert lassen.

Nach jeder Iteration zurück zur eigentlichen Aussage des Films gehen. Nach mehreren Iterationen passiert es am häufigsten, dass jede einzelne bemängelte Stelle verbessert wurde, der Film aber nicht mehr das ursprünglich zu vermittelnde Thema behandelt.

---

Anhang: Dateien

Datei	Beschreibung
references/design-system.md	Felder des Designsystems + vier Beispiele (Startvorlage, kann komplett ausgetauscht werden)
references/design-agent.md	Arbeitsauftrag und Rückgabeformat für den Design-Agenten (drei Designsystem-Vorschläge + Musterbilder)
references/pre-render-review.md	Wie die drei Pre-Render-Review-Stufen durchgeführt werden, Arbeitsauftrag für den Review-Agenten
references/review-habits.md	Review-Gewohnheitstabelle: Format, Starteinträge, wie jeder Nutzerfund zurückgetragen wird
references/techniques.md	Vokabelliste der Techniken: Name, Aussehen, wie man es der KI erklärt, häufige Fehler
references/engines.md	Anbindung der Engines (HyperFrames · Remotion · andere), echter 3D, Sprachaufnahme, Soundeffekte, Lizenzen
references/case-0099.md	Vollständiger Verlauf eines 15-Sekunden-Films von v1 bis v7: Was bei jeder Version bemängelt wurde, Ursache, Behebung
examples/	Kontaktbögen jeder Version des oben genannten Fallbeispiels (positive und negative Beispiele); zusätzlich ein Testfilm mit einem anderen Stil (siehe Designsystem-Beispiel C)
scripts/preflight.py	Pre-Render-Prüfung: Arbeitet nur mit statischen Screenshots, erzeugt aneinandergereihte Standbilder (mit Sicherheitsrändern), Serienaufnahmen, Erinnerungsliste (benötigt Pillow)
scripts/review.py	Selbstprüfungsskript: Kontaktbogen, Frames in Originalgröße, dichte Serienaufnahmen, Stillstands-Scan (benötigt nur ffmpeg; Ausgabe erfolgt im Ordner review/<Filmname>/ neben dem Film, eine Version pro Unterordner, für einfachen Vergleich mit vorheriger Version)