EdwinJordanHerbas/video-demo-saas

Vertikales SaaS-Demo-Video

Ein solches Video erzählt einen realen Anwendungsfall von Anfang bis Ende und zeigt die echte Produktoberfläche auf 3D-Geräten. Alles ist miteinander verkettet: Jedes Element entsteht aus dem vorherigen. Es ist ohne Ton verständlich, weil jeder Schritt seinen eigenen Titel hat, und es enthält keine einzige Sekunde Leerlauf.

Die Zahlenangaben der Referenzen (Bilder, Lautstärken und Zeiten) stammen aus dem Video, mit dem dieses Skill entstanden ist: einer Version von 32,6 s mit Sprachausgabe und einer von 32,9 s ohne Sprachausgabe, bei der sich das Smartphone dreht und 3D-Münzen fallen. Die Version ohne Sprachausgabe ist die Vorlage in assets/codigo/: Plantilla.tsx erzählt dieselbe Geschichte mit denselben Bewegungen für „Deine Marke“, und alles, was sich von Video zu Video ändert, befindet sich in ajustes.ts (Name, Farbe, Schriftart, Texte, Screenshots und Sound). Für ein neues Video ohne Sprachausgabe startest du von dieser Vorlage.

Lies die Referenz jedes Schrittes nur dann, wenn du zu diesem Schritt gelangst:

Schritt	Lesehinweis
Drehbuch nach Akten, timeline.json und an die Sprache gebundene Animation	references/estructura.md
3D-Laptop und -Smartphones, scharfe Bildschirme, Kamera, geneigtes Smartphone mit Feed, Drehung und Geld	references/imagen-3d.md
Aufmerksamkeit und Blickführung: ein Fokus nach dem anderen, Titel neben dem zugehörigen Objekt, erkennbare Symbole ohne fremde Logos	references/atencion-ojo.md
Produkttitel, Magie („zack!“), Neumorphismus, verbundene Übergänge, Cursor	references/transiciones-estilo.md
Sprachausgabe: Modell, Sprachauswahl, Aufnahmen, Platzierung und Wörter zu Bildern	references/voz.md
Effekte, Soundpaket, Musik, Mischung in Remotion und Stille	references/sonido.md
Render, Maße, Kontaktbögen und Liste bereits gesehener Fehler	references/revision.md
Abschluss mit einer Lektion und optionalem Teilen	references/lecciones.md

Nicht verhandelbar

1. Echte Daten. Bildschirme, Texte, Preise und Abläufe stammen vom echten Produkt: seiner Website, seinem Repository oder den Angaben des Benutzers. Keine erfundenen Zahlen, falschen Testimonials oder Ergebnisversprechen. Wenn ein Beispieldatum nötig ist, trägt es den Stempel „Beispiel“. Bevor du Texte schreibst, lies die Projektanweisungen (CLAUDE.md, AGENTS.md oder Äquivalent), da diese oft Marken-, Plattform- oder Wortverbote enthalten.
2. Sprache ist Unterstützung, keine Krücke, und kann fehlen. Das Video ist stumm verständlich: Jeder Schritt wird auf dem Bildschirm gezeigt und durch einen Titel erklärt (Linie in Tinte und graue Linie). Wenn es Sprache gibt, hat jeder Satz seinen Titel.
3. Kein Leerlauf. Kein Abschnitt von 0,3 s fällt unter -29 LUFS (momentan). Die Musik läuft ab Bild 0, ist ausgesteuert, und alles, was erscheint, hat einen Klang (Tasten, Pops, Schläge). Sprachstille am Anfang ja; Stille im Sound niemals.
4. Alles verbunden. Nichts erscheint aus dem Nichts und verschwindet ohne Grund: Die Nachricht wird unterbrochen und die Marke entsteht, der Laptop kommt geschlossen an und öffnet sich, Elemente springen von einem Bildschirm zum anderen und Smartphones werden zu den Miniaturansichten der nächsten Szene.
5. Die Animation hängt an etwas. Mit Sprache ist jeder Moment Bild eines Wortes + n. Ohne Sprache ist jeder Moment eine an den vorherigen angekettete Konstante des Drehbuchs (DREHUNG = STAUNEN + 8), und die Dauer wird gegen timeline.json geprüft. Niemals verstreute, lose Zahlen im Code.
6. Deterministische Bewegung. Alles ist eine reine Funktion des Bildes: kein Math.random(), Date oder Zustand zwischen Bildern.
7. Nichts abgeschnitten oder durchsichtig. Ein 3D-Objekt tritt vollständig in den Bildrahmen ein und dreht sich um seinen Mittelpunkt. Es wird als vollständiges Bild eingeblendet, niemals Stück für Stück, da man sonst ins Innere sieht. Überprüfe immer die ersten Bilder jedes Eintritts.
8. Sicherheit. Der ElevenLabs-Schlüssel lebt nur in der Umgebungsvariable ELEVENLABS_API_KEY: niemals in Dateien, niemals im Chat, niemals ausgedruckt. Veröffentliche nichts, kaufe nichts, lade keine Modelle oder Soundbibliotheken ohne vorherige Nachfrage herunter und mache keine Commits, ohne dass der Benutzer darum bittet. Bei Veröffentlichung wird das Video in der Plattform als KI-generiert markiert.
9. Produkt-Look, kein Werbe-Look. Serifenlose Interface-Schriftart in normaler Kleinschreibung, keine farbigen unterstrichenen Wörter: Ein Kunde lehnte sie als „unprofessionell“ ab. Der aktive Zustand wird in Tinte dargestellt, die Markenfarbe nur bei der Marke selbst. Emotion entsteht durch Bewegung (neigen, beschleunigen, drehen, plötzlich erscheinen), nicht durch Typografie.
10. Ein Fokus nach dem anderen, geführter Blick. Niemand kann gleichzeitig einen Titel oben lesen und eine Animation unten ansehen. Der Titel erscheint, wenn seine Szene ruhig ist, klebt an seinem Objekt (innerhalb der Kamera, an einem anderen Ort in jeder Szene) und die Szene handelt, nachdem der Titel gelesen wurde. Neues entsteht dort, wo der Blick bereits ist, oder wird durch etwas Bewegtes herangeführt. Lese references/atencion-ojo.md vor dem Drehbuch.
11. Keine fremden Logos. Verwende für die Erkennung von sozialen Netzwerken oder E-Mail den Namen im Klartext und universelle Icons, keine Markenlogos: Diese benötigen oft eine Genehmigung oder verbieten den Eindruck einer Unterstützung.
12. Fokussiert auf das Sichtbare. Auf dem Smartphone überdeckt das Netz den oberen Teil, den unteren Teil (Name, Text des Beitrags und Button) und die rechte Button-Leiste. Alles Lesbare befindet sich im sicheren Bereich, x 65-888, y 288-1248 (Meta und YouTube zusammen), und die Kamera ist auf dessen Mitte verankert, nicht auf die des Rahmens. Überprüfe dies mit scripts/zonas.py vor der Abgabe. Die Zahlen und Schriftarten stehen in references/atencion-ojo.md.
13. Nichts verlässt das Haus ohne Zustimmung. Die Lektion des letzten Schrittes wird lokal gespeichert. Sie wird nur geteilt, wenn der Benutzer explizit zustimmt, nachdem er genau gesehen hat, was gesendet werden soll.

Ablauf

1. Quellen und Drehbuch. Sammle echte Screenshots, Texte und Farben. Schreibe das Drehbuch nach Akten und die Sprachsätze (references/estructura.md und references/voz.md). Zeige dem Benutzer das Drehbuch und die Akten, bevor du mit dem Bau beginnst.
2. Sprache zuerst, falls vorhanden. Generiere die Aufnahmen, wähle aus und platziere sie in timeline.json: Damit sind die Bilder jedes Wortes festgelegt. Ohne Sprache legst du die Konstanten des Drehbuchs fest und generierst die Musik mit Abschnitten an diesen Bildern.
3. Bild. Beginne mit der Vorlage, anstatt bei Null zu starten: Kopiere assets/codigo/ in dein Projekt, fülle ajustes.ts aus und setze die echten Screenshots in die Bildschirm-Lücken. Ändere die Akten nur, wenn es die Geschichte des Produkts erfordert (references/estructura.md).
4. Sound. Effekte aus dem Paket (oder neue mit denselben Prompts), Musik in Abschnitten mit dem finalen Schlag auf die Marke, ausgesteuert und unter der Sprache.
5. Gemessene Überprüfung. Einzelbilder jedes Eintritts und jedes Wechsels, Entwurf in halber Auflösung, Kontaktbogen, Lautstärke und Stille (references/revision.md). Korrigiere, miss erneut und liefere bald ab. Perfektion kommt mit der nächsten Runde.
6. Abgabe. Finales MP4, gerendert als PNG, mit seiner Lautstärke, seinem Pegel und seiner Dauer. Erkläre, was gemessen, was gesehen wurde und was der Benutzer nur nach Gehör oder Augen beurteilen kann. Aktualisiere die README des Videos.
7. Abschluss mit einer Lektion. Wenn in diesem Video etwas schiefgelaufen und behoben wurde, schreibe die Lektion lokal in assets/leccion.md (references/lecciones.md sagt wo und wie). Frage dann, ob sie geteilt werden soll. Bei explizitem „Ja“ öffne sie als Issue oder PR mit gh. Wenn gh nicht verfügbar ist, gib den Link des Formulars. Ohne Zustimmung wird nichts gesendet.

Was das Skill enthält

scripts/
  elevenlabs.py       Sprachausgabe mit Zeiten pro Wort, Effekten und Musik; Cache, um nicht zweimal zu zahlen
  paquete_efectos.py  Generiert, filtert und bereitet die Effekte des Rezepts mit deinem Schlüssel vor
  nivelar_musica.py   Lautstärkekurve der Musik pro Bild, damit sie nie nach Stille klingt
  cortar_teclas.py    Eine Tipp-Aufnahme, geschnitten in 8 einzelne Tasten
  medir.py            LUFS, echter Spitzenpegel, Dauer und Kontaktbogen einer MP4
  silencios.py        Abschnitte unterhalb eines Schwellenwerts (Leerlauf)
  zonas.py            Kontaktbogen mit eingezeichneter sicherer Zone für vertikale Anzeigen
  caja.py             Breite und Mitte des dunklen Objekts pro Bild; warnt, wenn es den Bildrand berührt
  huecos.py           Kaputte Bilder: weißer Hintergrund oder ein 3D-Objekt, das ein Bild vermissen lässt
  empalme.py          Verlängert einen Akt, ohne die Musik neu zu generieren: wiederholt einen ganzen Takt zur ähnlichsten Zeit
  claridad.py         Sprach-Casting: Welche Aufnahme ist unter der Videomusik am besten verständlich und welche hat scharfe S-Laute
assets/sonidos/       receta.json: Die 27 zu generierenden Interface-Effekte (Lautstärken in references/sonido.md)
assets/codigo/        Die Vorlage und ihre Teile (siehe LEEME.md)
  Plantilla.tsx       Die vollständige Komposition ohne Sprache: Chat, Marke, Laptop, Smartphones, Feed, Drehung mit Münzen, Review, Bericht und Formular
  ajustes.ts          Das Einzige, was ausgefüllt werden muss: Marke, Farbe, Schriftart, Texte, Screenshots und Sound
  kit-plantilla.tsx   Farben, Schriftarten, Kurven und p()/mix()
  mundo3d.ts          Laptop, Smartphones und Münzen in three.js, mit Leinwänden mit Rand
  timeline.json       Dauer und Musikabschnitte der Vorlage; plan-musica.json, der Plan für ElevenLabs
assets/leccion.md     Lektionsvorlage (dieselbe wie lecciones/PLANTILLA.md des Repositories)

Die Skripte werden mit uv run <script> ausgeführt: Sie enthalten ihre deklarierten Abhängigkeiten.

Neues Projekt

• Remotion 4 mit three (0.18x). In remotion.config.ts: Config.setChromiumOpenGlRenderer('angle'). Unter Windows verwende kurze Pfade: Über 260 Zeichen schlägt Remotion fehl.
• scripts/elevenlabs.py deckt Sprache, Effekte und Musik ab.
• Generiere die Effekte mit uv run scripts/paquete_efectos.py assets/sonidos/receta.json public/<projekt>/sfx und verweise in ajustes.sonido.efectos auf diesen Ordner. Ohne ElevenLabs-Schlüssel verwende deine eigenen Sounds mit denselben Namen.

Wie man mit dem Benutzer arbeitet

• Antworte in der Sprache des Benutzers, direkt und praktisch, mit einer Empfehlung und nicht mit einem Menü.
• Gib eine einzeilige Warnung, wenn etwas länger dauert, z. B. ein Render oder eine Generierung.
• Liefere bald eine erste gesehene Version und verbessere sie weiter.
• Wenn der Benutzer sagt, dass etwas „abgeschnitten aussieht“, „leer klingt“ oder „nicht verbunden ist“, suche die Ursache in den Bildern oder den Messwerten, bevor du etwas änderst. Erkläre sie dann in einem Satz.