vibe-video — KI-gestützter Kurzvideo-Generator (Code → MP4)
Verwandle jede Idee in ein kurzes, atmosphärisches Video, nur mit Code. Der AI schreibt Canvas/JS-Animationen, rendert sie Frame für Frame und komponiert sie mit optionalem BGM zu einer MP4.
Wann verwenden
Verwende diesen Skill, wenn der Benutzer ein kurzes Video (15s–60s) erstellen möchte, das Folgendem entspricht:
- Wissenserklärer — Nobel-Fakten, Wissenschaftsprinzipien, Psychologie-Einblicke
- Emotionale Metapher — Bindung, Angst, Loslassen, Erinnerung
- Produkt-Promo — App-Funktionen, Markengeschichte, Launch-Ankündigung
- Soziale Beobachtung — Verhaltensmuster, kulturelle Phänomene
- Abstrakte Konzeptkunst — reine visuelle Poesie, Loop-Animationen
Workflow (5 Schritte, nicht überspringen)
Schritt 1: Klärung (maximal 3 Fragen stellen)
Bestätige diese Punkte mit dem Benutzer:
- Dauer — 15s / 30s / 45s / 60s (Standard 30s)
- Seitenverhältnis — 9:16 (Hochformat) / 16:9 (Querformat) / 1:1 (Quadrat) (Standard 9:16)
- Stil — siehe Style-Presets in
style-presets.md - Thema & emotionaler Bogen — was ist die Kernbotschaft? Welches Gefühl soll bleiben?
Schritt 2: Storyboard ausgeben
Erstelle eine Storyboard-Tabelle bevor Code geschrieben wird:
| Zeit | Visuelle Beschreibung | Beschriftung (≤20 Zeichen) | Visueller/Audio-Hinweis |
|------|-----------------------|----------------------------|--------------------------|
| 0-3s | ... | ... | ... |
Regeln:
- Jede Beschriftung bleibt ≥2s; Schlussfolgerung ≥3s
- Hook in den ersten 3 Sekunden (kontraintuitive Tatsache / emotionaler Opener / Kernproblem)
- 5–8 Einstellungen insgesamt, Tempo langsam→schnell→langsam
- Visuelle Beschreibungen müssen angeben: Form, Farbe, Bewegungsrichtung, Kamerabewegung
WARTE auf Benutzerbestätigung, bevor du fortfährst. Wenn der Benutzer Änderungen wünscht, ändere nur die angegebenen Einstellungen. Wenn >3 Einstellungen geändert werden, gib das vollständige Storyboard erneut aus.
Schritt 3: Rendering-Code schreiben
Kopiere assets/templates/animation.js + animation.html als Ausgangspunkt — sie implementieren das Layer-System, Beschriftungs-Einblendungen, einen gesäten PRNG-Hintergrund und den window.seek(t)-Vertrag, inklusive Live-Browser-Vorschau. Bearbeite STORYBOARD und die draw*()-Funktionen.
Siehe rendering-guide.md für die vollständige technische Spezifikation. Kurzreferenz:
// Zeitgesteuerte Animation – jede visuelle Darstellung ist eine reine Funktion von t
// (kein Math.random(), kein Date.now() – verwende bei Bedarf einen gesäten PRNG,
// sodass jeder Frame für Standbilder und fortgesetzte Renderings identisch neu gerendert wird)
function seek(t) {
// t = aktuelle Zeit (Sekunden)
// Gib den visuellen Zustand für diesen Frame zurück
// Verwende lineare Interpolation für Position/Deckkraft/Skalierung
}
// Layer-System
// Layer 0: Hintergrund (Verlauf / Partikel)
// Layer 1: Hauptmotiv
// Layer 2: Dynamische Dekoration (Lichtfäden / Partikel / Linien)
// Layer 3: Beschriftungs-Overlay
// Export
// Playwright Headless → Screenshot jedes Frames → ffmpeg-Composite
Schritt 3.5: Storyboard → H3-Prompt (Pre-Flight)
Füge dies zwischen dem bestätigten Storyboard und der ersten Zeile des Rendering-Codes ein. Storyboards sind für Menschen geschrieben; H3 benötigt eine andere Grammatik. Dieses Übersetzen im Vorfeld verhindert den einen nicht behebbaren Fehler in dieser Pipeline – eine KI-Einstellung, die eine Figur neu zeichnet, die on-model benötigt wird.
# Lint zuerst: Timeline-Lücken, H3-Fenster (4–15s), Engine-Zuweisung, Credit-Schätzung
node assets/templates/lint-storyboard.js examples/storyboard-sample.txt
Dann pro H3-Einstellung einen sechs Abschnitte umfassenden Prompt-Block ausgeben und dessen Kameranummern und Schnittmarken zurück in den Animationscode kopieren, sodass sich die beiden Layer zusammen bewegen.
Vollständige Prozedur, Feldregeln, Checkliste und die Lint-Tabelle: storyboard-to-h3.md.
Schritt 4: Rendern & Compositing
Erst Standbilder überprüfen – das Überprüfen eines Frames dauert ~1s, ein vollständiges Rendern Minuten:
# Look-Check bei t=0 / 4 / 10s (verwendet automatisch installierten Edge oder Chrome)
node assets/templates/still.js --html animation.html --times 0,4,10
# Frames rendern (12–15fps reicht normalerweise; flüssige Bewegungen profitieren von 24–30)
node assets/templates/render-playwright.js --html animation.html --out ./frames --fps 30 --duration 15
# Compositing (setze FFMPEG=/path/to/ffmpeg, wenn nicht im PATH)
bash assets/templates/composite.sh ./frames output.mp4 30
# Mit BGM
bash assets/templates/composite.sh ./frames output.mp4 30 bgm.mp3
# Hybrid: Canvas-Layer über einer AI-Atmosphärenplatte (transparente Frames, kein Keying)
node assets/templates/render-playwright.js --html animation.html --out ./frames --fps 30 --duration 56 --alpha true
bash assets/templates/composite.sh --overlay plate.mp4 ./frames output.mp4 30
Windows-Falle: Wenn bash composite.sh falsch funktioniert (Git Bash-Shim / abgeschnittener PATH) – ffmpeg direkt von Node mit child_process.spawn starten – siehe rendering-guide.md Fehlerbehebung.
Legacy-Manual-Befehle:
# Frames rendern
node render.js # gibt frames/frame_0001.png ... aus
# Compositing mit ffmpeg
ffmpeg -framerate 30 -i frames/frame_%04d.png -c:v libx264 -pix_fmt yuv420p output.mp4
# Mit BGM
ffmpeg -framerate 30 -i frames/frame_%04d.png -i bgm.mp3 -c:v libx264 -c:a aac -pix_fmt yuv420p -shortest output.mp4
Schritt 5: Ausliefern
Ausliefern: MP4-Datei + Storyboard + Quellcode. Dateigröße-Ziel: <50MB für 30s.
Dateien in diesem Skill
| Datei | Zweck |
|---|---|
SKILL.md | Diese Datei – Hauptdefinition des Skills |
style-presets.md | 6 visuelle Style-Presets mit Farbpaletten und Rendering-Tipps |
rendering-guide.md | Technische Spezifikation: Canvas-Rendering, Easing, Determinismus-Regeln, Fehlerbehebung |
metaphor-library.md | Visuelle Metapher-Zuordnungen für abstrakte Konzepte |
caption-guide.md | Beschriftungs-Typografie, Timing und Ton-Regeln |
bgm-guide.md | BGM-Auswahlhilfe nach Videotyp |
storyboard-to-h3.md | Pre-Flight: Storyboard-Lint + H3-Sechs-Abschnitte-Prompt-Blöcke, bevor du Code schreibst |
../assets/templates/lint-storyboard.js | Storyboard-Linter: Timeline-Lücken, H3-4–15s-Fenster, Engine-Zuweisung, Credit-Schätzung |
../assets/templates/animation.js + animation.html | Sofort bearbeitbares Grundgerüst (Layer, Beschriftungen, gesäter Hintergrund, Live-Vorschau) |
../assets/templates/render-playwright.js | Frame-Renderer: Browser-Autodetektion (Edge/Chrome/Chromium), paint-synchronisierte Screenshots |
../assets/templates/still.js | Einzelbild-Renderer für günstige Look-Checks |
../assets/templates/composite.sh | ffmpeg-Compositor (Video / Video+BGM, FFMPEG=-Override) |
../assets/templates/render-template.js | Node-Canvas-Variante (kein Browser nötig; eingeschränkte CSS/Schriftarten) |
Beispiel-Prompts
Wissenserklärer
Erstelle ein 30s 16:9 Wissensvideo darüber, warum Zwiebelschneiden einen zum Weinen bringt.
Stil: tech-blueprint. Bogen: Phänomen → Mechanismus → Lösung.
Emotionale Metapher
Erstelle ein 30s 9:16 emotionales Video über Besitzergreifung.
Stil: soft-glow. Visuelle Metapher: Lichtfäden, die sich wickeln → lösen → Glühwürmchen.
Produkt-Promo
Erstelle eine 15s 9:16 Produkt-Promo für eine Fokus-App.
Stil: minimal-line. Bogen: Problem → Lösung → Ergebnis.
Lizenz
MIT – siehe LICENSE-Datei. Kostenlos für private und kommerzielle Nutzung.