xiaoxiao8096/code-motion-video-skill

Richtlinien zur Erstellung reiner Code-Animationsvideos

Bild, Animation, Übergang, Musik, Soundeffekte, Layout und Schriftart müssen vollständig durch Code erzeugt werden. Verwenden Sie keine Videogenerierungsmodelle und kein Sampling oder KI-generierte Musik. Lassen Sie die Ergebnisse jeder Phase vom Auftraggeber prüfen und bestätigen, bevor Sie mit dem nächsten Schritt fortfahren.

Empfohlener Tech-Stack: Remotion (React) für Bilder, Python mit NumPy/SciPy für Audio-Synthese und FFmpeg für die finale Komposition. Alternativ können Motion Canvas, Revideo, Manim, HyperFrames usw. verwendet werden; der Ablauf bleibt gleich.

1. Anforderungen klären

• Hauptfigur (Produkt, Marke, Person, Event), Zielgruppe sowie Namen oder Elemente, die im Video erscheinen dürfen oder nicht. Falls nicht klar, schreiben Sie so, als ob Sie mit einem beliebigen Zuschauer sprechen.
• Dauer (üblich 15–60 Sekunden), Bildformat (Querformat 1920×1080, Hochformat 1080×1920 oder quadratisch), Bildrate (empfohlen 60fps für die finale Version) und Verbreitungskanal.
• Lesen Sie offizielle Materialien der Hauptfigur (Website, Veröffentlichungen, Dokumentation) und extrahieren Sie Originalzitate: wie sie sich selbst beschreibt, Kernverkaufsargumente, Sprechweise. Fakten im Video dürfen nur aus diesen Quellen stammen.

2. Open-Source-Referenzen recherchieren

Jede Referenz muss tatsächlich existieren; notieren Sie Adresse, Lizenz und Relevanz. Nicht aufnehmen, was nicht gefunden wurde. Übliche Kategorien:

• Video-Frameworks und deren Beispiel-Repositories: Remotion, Motion Canvas, Revideo, Manim, HyperFrames, theatre.js, GSAP, Lottie.
• Designsysteme und Farbschemata: Radix Colors, Open Color, Tailwind, Catppuccin, IBM Carbon, Primer, Geist, awesome-design-systems.
• Verlaufs- und Shader-Hintergründe: shadergradient, whatamesh, three.js.
• Animationen: Motion, react-spring, anime.js, awesome-creative-coding.
• Audio: Tone.js, jsfxr, ZzFX, tonal.
• Schriftarten: Nur kommerziell nutzbare Lizenzen (z.B. SIL OFL). Chinesisch: Noto Sans SC, Noto Serif CJK SC, Smiley Sans (nur kursiv, für Überschriften geeignet), LXGW WenKai. Westlich: Inter, Space Grotesk, Unbounded, JetBrains Mono.
• Icons: Lucide, Tabler, Phosphor.
• Textstil: chinese-copywriting-guidelines, Humanizer-zh, humanizer, stop-slop.
• Bestimmtes Logo oder Material: Originaldatei finden, Lizenz prüfen und ob es ein eingetragenes Warenzeichen ist. Nicht lizenzierte Markengrafiken nur für interne Vorschauen verwenden; vor öffentlicher Veröffentlichung Genehmigung einholen.

3. Konzept schreiben (noch nicht rendern)

• Themensatz und Gesamtton.
• Einheitlicher Zeitstrahl: BPM festlegen (z.B. 120 BPM = 2 Sekunden pro Takt). Jeder Schnittpunkt fällt auf Takt- oder Schlagzeit. Alle Zeiten als Frames der finalen Bildrate notieren, in timeline.json speichern; Bild und Audio teilen diese Daten.
• Storyboard-Tabelle: Zeitcode und Frame-Intervalle jeder Szene, Bildschirmtext, Bild, Animation (Easing-Kurven oder Federparameter), Sound.
• Übergangstabelle: Jeden Übergang einzeln gestalten, inklusive Intro und Outro. Technik (Masken-Wipe, Morph, Match Cut, Durchfahrt, geteiltes Element vergrößern, Farbblock-Wipe, Flip usw.), Frame-Intervalle, Easing, mitgenommene Elemente, passender Sound und Schlag.
• Visuelles System: Farbpalette (hex), Raster und Abstände, Schriftkombinationen (Schriftgröße, -gewicht), Hintergrundbehandlung.
• Musik: Tonalität, Akkordfolge, Abschnittsstruktur, Synthesemethode für jedes Instrument, Korrespondenz mit Schnittpunkten.
• Soundeffekt-Liste: Welche Soundeffekte pro Szene, wie synthetisiert.
• 4 statische Stil-Frames mit HTML und Headless-Browser erfassen, plus 1–2 Übergangs-Dekompositionsbilder (Zwischenzustände zu einem Streifen zusammengesetzt).

4. Visuelle Richtungsalternativen

Bei unklarem Stil oder Einwänden des Auftraggebers 3–4 deutlich unterschiedliche Richtungen präsentieren (z.B. helles Magazin, warmer Farbverlauf mit Milchglas, bunter Pop-Aufkleber, Schweizer Raster, dunkles Tech). Jede mit Farbpalette, Hintergrund, Schriftart und Inspirationsquelle. Von jeder einen Stil-Frame der gleichen Szene erfassen und ein Vergleichsbild mit allen Richtungen erstellen. Storyboard und Übergänge bleiben gleich, nur die Optik ändert sich.

5. Produktion

• Bild: Schriftarten als lokale Dateien, nach vollständigem Laden rendern. Alle Animationen durch Frame-Nummern gesteuert; SVG/CSS/JS-Animationen, die im Browser in Echtzeit laufen, müssen frame-basiert umgeschrieben werden, sonst sind die Renderergebnisse undeterministisch.
• Animation: Lebendiger Stil: Federn mit Überschwingen plus Stretch & Squash; zurückhaltender Stil: glattes Easing. Feder-Rückprall kann negative Skalierungswerte erzeugen; abschneiden.
• Audio: Synthesizer selbst schreiben, z.B. verstimmte Sägezahnwelle für Pad, FM-Glockenspiel, Karplus-Strong-Zupfen, gleitende Sinus-Bassdrum, gefiltertes Rauschen für Becken und Händeklatschen, Sidechain-Kompression, Hall. Soundeffekte aus Rauschen, Sweep und Resonanz synthetisieren. Ein 2–3-töniges Brand-Sounddesign für Ein- und Ausblendungen möglich.
• Bei WAV-Export Bit-Tiefe und Normalisierung prüfen, sonst kann die Lautstärke um Dutzende dB abweichen. Mit FFmpeg Lautstärke auf Zielwert normalisieren (bei Online-Plattformen üblich -14 LUFS), Headroom lassen.
• Komposition: H.264 + AAC, faststart aktivieren.
• Bei Speicherengpässen Render-Parallelität reduzieren.

6. Vorschau

• Zuerst eine vollständige Vorschau in niedriger Auflösung rendern (z.B. 960×540, 30fps) mit finalem Mix, um das Timing zu bestätigen.
• Selbstprüfung: Mit ffprobe Dauer, Frame-Anzahl und Tonspur prüfen; in regelmäßigen Abständen Frames extrahieren und zu einem Kontaktbogen zusammensetzen, um überlappende Elemente, fehlende Zeichen und "Tofu-Blöcke" zu erkennen; Quellcode durchsuchen, um sicherzustellen, dass unerwünschte Inhalte nicht vorkommen.
• Bei der Abgabe der Vorschau bekannte Risiken kommunizieren, z.B. Übergänge, die zu schnell wirken könnten, oder Töne, die nur numerisch geprüft und nicht gehört wurden.

7. KI-Text vermeiden

• "Nicht ... sondern ..."-Konstruktionen, dreifache Parallelismen, leere Slogans, Werbesprache und abstrakte Nomenhäufungen entfernen.
• Konkrete Szenen und Zahlen beschreiben, im Sprechrhythmus, pro Satz nur eine Aussage, Länge muss in den Takt passen.
• Zwischen Chinesisch und Englisch sowie zwischen Chinesisch und Ziffern Leerzeichen einfügen.
• Pro Szene eine Vorher-Nachher-Vergleichstabelle bereitstellen.

8. Finale Version

• Inhalt identisch mit der bestätigten Vorschau, nur Spezifikationen erhöhen: z.B. 1920×1080, 60fps, CRF 16–18, yuv420p, AAC 320k.
• Mit ffprobe Spezifikationen prüfen, aus dem fertigen Video Keyframes auf Schärfe prüfen, korrigierte Probleme erneut kontrollieren.
• Bei großer Dateigröße eine komprimierte Sharing-Version erstellen.
• Bei Bedarf mit derselben Timeline im Hochformat oder anderen Formaten neu layouten und exportieren.

Dateistruktur

project/
  plan_v*.md        Konzept (jede Version als neue Datei)
  frames*/          Stil-Frames und HTML-Quelldateien
  fonts/  assets/
  timeline.json     Von Bild und Audio gemeinsam genutzter Zeitstrahl
  video/            Videoprojekt
  audio/compose.py  Audio-Synthese-Skript
  out/              Vorschau, finale Version, Screenshots