Communitygithub.com

rundum-kreativ-mit-ki/brag-slim

Verwandle ein Projektverzeichnis oder eine Website-URL in ein kurzes, teilbares Launch-Video mit Musik, Bewegung und Teilen-Text. Eine einzige Datei, keine gebündelten Assets – vollständig vom Modell mit den bereits auf dem Rechner vorhandenen Werkzeugen erstellt.

Was ist brag-slim?

Die Fähigkeit `/brag-slim` erstellt automatisch ein kurzes, professionelles Launch-Video (15–25 Sekunden) aus einem lokalen Projektverzeichnis oder einer öffentlichen Website. Der Workflow umfasst Inspektion (Code-Analyse oder gerenderten Seitenabruf), kreative Planung (Storyboard, Drehbuch, visuelle Identität) und die vollständige Videoproduktion (Animation, Musik/Sounddesign, Rendering) – alles allein mit den auf dem Benutzerrechner verfügbaren Tools. Das Ergebnis ist eine MP4-Datei, ein Posterbild, eine Teilen-Kopie und ein detaillierter Plan. Die Fähigkeit legt Wert auf Authentizität (echte UI/Assets wiederverwenden), Lesbarkeit, einen starken Einstieg und einen zum Projekt passenden Ton. Sie kann über Befehle wie `/brag-slim`, „lass uns /brag machen“ oder „erstell ein Launch-Video“ ausgelöst werden und delegiert bei Installation der `/brag`-Fähigkeit an diese (außer wenn speziell die Slim-Variante gewünscht ist).

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/rundum-kreativ-mit-ki/gratis-paket/tree/main/skills/brag/brag-slim

In Ihrer bevorzugten KI fragen

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

Dokumentation

/brag-slim

Du hast es gebaut. Jetzt gib an. Du erstellst das gesamte Video selbst – Geschichte, Bilder, Audio, Rendering – mit den Werkzeugen, die auf dem Rechner sind.

Ganz gleich, welcher Ton: Es sollte sich wie ein modernes, slickes, poliertes Launch-Video anfühlen: Nichts auf dem Bildschirm oder im Soundtrack, das seinen Platz nicht verdient.

Verwendung: /brag-slim [Eingabe] [Optionen]. Optionen (Flaggen oder in Klartext):

OptionStandard
--tone <Vorgabe oder frei>abgeleitet; default, wenn nichts klar passt
--format landscape|vertical|squarelandscape (1920×1080; vertical 1080×1920, square 1080×1080), 30fps
--duration <s>ca. 20s

Schreibe die Ergebnisse in das aktuelle Verzeichnis unter brag-output/ (mit Zeitstempel brag-output-YYYY-MM-DD-HHmmss/, falls es bereits existiert). Behalte jede Zwischendatei (Frames, Downloads, Skripte, Stems) in einem work/-Unterordner darin.

1. Untersuchen

Entscheide zuerst, um welche Art von Eingabe es sich handelt, und sammle dann Material daraus. Nur die Quelle ändert sich; alles ab den folgenden Fragen ist für jede Eingabe gleich.

EingabeWoran man sie erkenntWoher das Material kommt
ProjektKeine Eingabe und das aktuelle Verzeichnis ist ein ProjektDer Code
WebsiteEine http(s)://-URL oder eine bloße Domain wie example.comDie Live-Site

Wenn die Eingabe zu keinem Typ passt oder keine Eingabe vorhanden ist und das aktuelle Verzeichnis kein Projekt ist, frage den Benutzer, wofür er Werbung machen möchte.

Projekt

Lies den Code: die Hauptseite, Styles (exakte Farben und Schriften), README, Routen und Schlüsselkomponenten. Das beste Material ist das Produkt in Benutzung – finde seine 2–3 Schritte: Einstieg → Schlüsselaktion → Ergebnis.

Du hast den Quellcode, also verwende ihn direkt: importiere oder rendere die echten Komponenten, Stylesheets, Schriften, Bilder und Animationen des Projekts im Video, anstatt sie neu zu erstellen.

Website

Hole die Website so, wie ein Besucher sie sieht. Viele Websites bauen ihre Seite mit JavaScript auf, daher kann ein einfacher Download als fast leere Hülle zurückkommen. Wenn das passiert, lade die Seite in einem Headless-Browser, um das gerenderte Ergebnis zu erhalten. Blende Cookie-Banner und andere Overlays aus und scrolle Abschnitt für Abschnitt, da Inhalte, die beim Scrollen animieren, bei einer einzelnen Vollbildaufnahme leer bleiben.

  • Kopie: Überschrift, Slogan, Abschnittsüberschriften, Feature-Namen, Call-to-Actions, Testimonials. Überprüfe auch Titel, Meta-Beschreibung und Social-Preview-Tags.
  • Identität: exakte Farben aus dem CSS der Website und die Schriftarten, die sie lädt.
  • Visuelles: das Logo, Produkt-Screenshots, Hero-Bilder, Demo-Videos. Lade diejenigen herunter, die du verwenden wirst, in work/.
  • Screenshots: erfasse die Seite im Seitenverhältnis des Videos, um das Layout zu verstehen. Verwende im Video das echte Markup, CSS und Assets der Website wieder und animiere diese, anstatt über flache Screenshots zu schwenken.
  • Das Produkt in Benutzung: überprüfe die Demo-Videos, How-it-works-Abschnitte und verlinkten Dokumente auf den Ablauf Einstieg → Schlüsselaktion → Ergebnis.

Dann, für jede Eingabe

Beantworte vor der Planung: Was ist es (ein Satz)? Für wen ist es und was tut es für sie? Was zeichnet es aus? Was ist die beeindruckendste oder lustigste Behauptung? Was ist der visuelle Haken? Welche echte Benutzeroberfläche oder welcher Ablauf sollte gezeigt werden? Welcher Ton passt? Was ist die einzeilige Teilen-Bildunterschrift?

2. Planen

Schreibe brag-plan.md: den Blickwinkel, den Haken, 2–3 Highlights, den Höhepunkt, den Ton, die visuelle Identität und ein szenenbasiertes Storyboard mit Dauern, die in der Summe das Ziel ergeben.

Wenn der Benutzer auf einen Teil zeigt – eine neue Version, eine neue Funktion, einen Blickwinkel – mache diesen zum Fokus des Videos.

Form: Haken (2–3s) → Enthüllung (2–4s) → 2–3 scharfe Highlights → Höhepunkt/Outro (2–4s). Eine Ausgangsform, keine Vorlage.

Kreative Gesetze

  • Kurz. 15–25 Sekunden; 18–22 ist der Sweet Spot.
  • Klar für einen Fremden. Nach einmaligem Ansehen weiß jemand, der noch nie davon gehört hat, was es tut, für wen es ist und wie man es bekommt. Beginne damit, nicht damit, wie es gebaut ist.
  • Der Haken ist alles. Die ersten 2 Sekunden entscheiden, ob jemand weiter zusieht. Plane ihn zuerst.
  • Zeige das Ding. Verwende das Echte aus der Quelle wieder – seine Benutzeroberfläche, Komponenten, Texte, Bilder, Videos und Animationen – anstatt es neu zu erstellen. Baue nur das neu, was du nicht wiederverwenden kannst. Bevorzuge die funktionierende App, die ihre Arbeit erledigt, gegenüber einer Landing Page, die sie beschreibt. Kleine illustrative UI-Texte sind in Ordnung, wenn das Produkt in Benutzung gezeigt wird (ein Dateiname, ein „Exportiert“-Toast); erfundene Behauptungen, Zahlen oder Testimonials sind es nicht. Keine abstrakten Füllstoffe.
  • Spezifisch. Es muss sich anfühlen, als wäre es für genau dieses Projekt gemacht. Verwende seine eigenen Texte und Behauptungen; keine generische SaaS-Sprache („optimieren Sie Ihren Workflow“ ist verboten).
  • Lesbar. Das Tempo kommt von Bewegung und Schnitten, nicht davon, Text früh wegzuziehen. Jede Zeile, die der Zuschauer lesen soll, bleibt vollständig sichtbar und ruhig stehen, lange genug, um sie zu lesen (ungefähr 0,3s pro Wort), gezählt ab dem Moment, in dem die gesamte Zeile auf dem Bildschirm ist. Text, der nur Textur ist, muss nicht gelesen werden.
  • Mach es lebendig. Dinge, die nacheinander erscheinen, simulierte Klicks, Wischbewegungen und Tippen schlagen statische Folien.
  • Witz verdient seinen Platz. Humor kommt aus der eigenen Absurdität des Projekts, nicht aus dem Versuch.
  • Jeder Frame postbar. Jeder eingefrorene Frame sollte es wert sein, geteilt zu werden.

Töne

Vorgaben sind Standard; freie Anweisungen („fake Series A Launch von 2016“) verfeinern oder überschreiben sie.

TonGefühlTempo / Übergänge
defaultKnackig, verspielt, sauber4–5 Szenen; sanfte Übergänge
polishedErnst, elegant, zurückhaltend3–4 Szenen, lange Halter; weiche Überblendungen
yc-parodyTotenstill, Startup-Launch, ernst gespielt4–5 Szenen, eine Behauptung pro Szene; harte Schnitte
chaoticSCHNELL, LAUT, ALLES IN GROSSBUCHSTABEN6–8 Szenen, einige unter 2s; Blitz-/Zoom-Schnitte
deadpanRuhig, trocken, nichts ist ein Witz3–4 Szenen, viel Leerraum; langsame Überblendungen
cinematicTrailer-Format, epische Behauptungen4–5 Szenen, große Schrift; dramatische Wipes
app-storeSaubere Feature-Karten4–6 Szenen; sanfte Folien

Sound

Schreibe die Musik und Soundeffekte als ein Stück: Effekte in derselben Tonart und demselben Raum wie die Musik, eingemischt statt darübergelegt. Gib ihm einen grundlegenden, anständigen Mix, so wie ein echter Track gemischt wird: Effekte liegen leise unter der Musik, nichts Hartes oder Spitzes, und wiederholte kleine Geräusche bleiben im Hintergrund.

3. Bauen, prüfen, rendern

Baue es mit dem, was auf diesem Rechner funktioniert. Wenn du das Video in einem Browser zeichnest, mache jeden Frame zu einer reinen Funktion der Zeit und warte darauf, dass Schriften und Bilder geladen sind, bevor du jeden einzelnen erfasst.

Vor dem vollständigen Rendern sieh dir Standbilder von jeder Szene und aus der Mitte der Übergänge an und behebe Überläufe, Kollisionen und geringen Kontrast. Eine einfache Kreuzblende zwischen zwei überladenen Layouts ergibt eine matschige Doppelbelichtung; staffele sie (alte Inhalte raus, dann neue Inhalte rein) oder tauche durch den Hintergrund. Dann rendere brag.mp4.

4. Ausliefern

  • Poster: Ziehe den stärksten ruhigen Frame (Text vollständig sichtbar, nicht im Übergang) nach brag.jpg und backe ihn als Frame 0 in brag.mp4 ein, damit das Thumbnail jeder Plattform es zeigt. Ersetze Frame 0, anstatt einen Frame hinzuzufügen, damit Dauer und Audio-Synchronisation gleich bleiben.
  • share-copy.txt: 1–3 Sätze, sofort teilbar, spezifisch, dem Ton entsprechend. Kein „freut mich, zu teilen.“
  • Sage dem Benutzer, wo das Video und der Text sind, gib einen Satz zum kreativen Ansatz und biete an, eine Szene neu zu machen oder einen anderen Ton zu versuchen.

Verwandte Skills