aakashmehra/superbrag

/superbrag

Website-URL rein → fertiges Promo-Video raus: ein kurzes, poliertes Video über eine Website, mit Voiceover, wortsynchroner Animation und einem Design, das von der Website selbst übernommen wird. Farben, Schriftarten, Karten, Hintergrund und Avatar stammen von der beworbenen Seite. Jedes Bild und jede Behauptung stammt von der Website. Die „Screens“ sind UI-Mockups, die mit Remotion gerendert werden, keine KI-generierten Pixel.

<skill-dir> = der Ordner, der diese Datei enthält. <ws> = der aktuelle Projektordner des Benutzers. Einmalige Einrichtung (überspringen, wenn <skill-dir>/.venv und <skill-dir>/template/node_modules existieren): Benötigt Node.js 22+, FFmpeg, Python 3 und espeak-ng. Führe dann bash <skill-dir>/scripts/setup.sh aus. Es installiert Remotion und Playwright, eine Python-Umgebung mit Kokoro (kostenlose lokale Stimme) und faster-whisper (Wortzeitsteuerung) und schreibt deren Pfade in <skill-dir>/.env.

Aufruf

/superbrag https://example.com
/superbrag https://example.com --focus „restaurants“        # Welcher Kunde/Service soll hervorgehoben werden?
/superbrag https://example.com --voice minimax|elevenlabs|kokoro --voice-id <id>

Standard: Die Stimme ist Kokoro af_heart (kostenlos, lokal). Wenn MINIMAX_API_KEY oder ELEVENLABS_API_KEY in <skill-dir>/.env gesetzt ist, wird stattdessen dieser Anbieter verwendet. Die Ausgabe erfolgt nach <ws>/superbrag-output/<domain-slug>/, mit einem Suffix -2, -3, wenn der Ordner bereits existiert.

Schritt 1: Die Website erfassen

export PATH="/opt/homebrew/bin:$PATH"   # macOS Homebrew; harmlos anderswo
node <skill-dir>/scripts/capture.mjs <url> <run>

Dies schreibt <run>/site.json (Titel, Meta, Überschriften, CTAs, vollständiger Text, Schriftarten, Google Fonts-Links, Farben, CSS-Variablen und die Bildliste mit Alternativtext und Kontext) und <run>/public/site/* (jedes Bild plus screenshot-hero.png und screenshot-full.png).

Dann betrachte die Bilder (lies sie). Details, die in Screenshots gedruckt sind (Bewertungen, Orte, Lieferzeiten), sind der beste Beweis. Lies sie, nicht nur das HTML. Wenn der Startseite ein Personenphoto oder Produktscreenshots fehlen, erfasse eine oder zwei verlinkte Seiten (Über uns, Projekte) im selben Verzeichnis.

Gate: Du kannst die Person oder das Unternehmen nennen, wo sie sind, die 2–4 Dienstleistungen, den besten Beweis (Bewertung, Kunde, Zahlen), das Angebot oder die Garantie, den CTA-Text, die URL und welches Bild das Personenphoto, der Avatar oder das Logo, der Produktscreenshot und das Beweisbild ist.

Schritt 2: Die Geschichte schreiben (<run>/story.json)

Wähle einen Kundentyp und ein konkretes Szenario. Eine klare Geschichte schlägt drei halbe Geschichten. Lass daher die anderen Dienstleistungen weg. Wähle die Dienstleistung mit den stärksten Bildern und Beweisen, es sei denn, --focus sagt etwas anderes. Fülle dann die 9-Takt-Formel aus. Ein kurzer gesprochener Satz pro Takt, insgesamt etwa 75–85 Wörter, was ungefähr 30 Sekunden ergibt.

#	Typ	Aufgabe	Beispielzeile (posflexgrowth.com)
1	search	Hook: Der Kunde sucht genau jetzt	„Ihr nächster Patient sucht genau jetzt.“
2	results	Problem: Du bist unsichtbar (dunkel)	„Aber eine andere Praxis erscheint zuerst.“
3	cost (enter: slide)	Kosten des Problems (dunkle Quittung, Balken schrumpft)	„Und jeder verpasste Anruf geht an den, der als nächstes antwortet.“
4	meet	Die Person oder Marke: Foto + Avatar, Name, Rolle, Orts-Pill, Slogan	„Lernen Sie Sajal Kumar kennen, Gründer von PosFlex in Neuseeland.“
5	browser	Zeige das echte Produkt (Site-Screenshot) mit einem Panel, das die Arbeit erledigt	„Jeder verpasste Anruf wird per SMS zurückgeschickt und gebucht. Keiner bleibt unbeantwortet.“
6	answer (enter: blur)	Beweis: Platz #1 + eine KI-Antwort empfiehlt es	„Top drei bei Google Maps und wird genannt, wenn Leute KI fragen.“
7	quote	Das Angebot oder die Garantie auf Papier, gestempelt und unterschrieben	„Und unser Null-Risiko-Versprechen, schriftlich, mit einem 12-Wochen-Ziel.“
8	payoff	Slogan + hervorgehobenes Wort; die anfängliche Suche wird zum Ergebnis	„Drei Aufgaben: gefunden werden, empfohlen werden, gebucht werden.“
9	end	Name + CTA-Button geklickt + URL	„Holen Sie sich Ihren kostenlosen Wachstumsplan von PosFlex Growth.“

Regeln:

• Der Text stammt von der Website. Verwende ihre eigenen Phrasen (Meta-Beschreibung, Dienstleistungszeilen, Funktionsweise, FAQ). Erfinde nur Szenariodetails, die es konkret machen: die Suchanfrage, Gerichte und Preise, eine Buchungszeit. Halte erfundene Details für den Ort plausibel: lokale Währung, lokale Namen.
• Wiederhole die Suchanfrage. Dieselbe Suchanfrage erscheint in den Takten 1, 2, 6 und 8. Die Geschichte kehrt zu sich selbst zurück, und das macht sie durchdacht.
• Sage die Stichwörter. Effekte werden ausgelöst, wenn ihr Wort gesprochen wird. Daher müssen place, das erste Wort von name/role/tagline, jeder chips-Eintrag, highlight.cue, price und highlight (payoff) im say dieser Szene vorkommen.
• Das Design stammt von der Website. Verwende nie das Aussehen einer anderen Marke wieder: Jedes Video muss wie die eingegebene Website aussehen. Lese site.json → design (Seitenfarbe, Kartenradius, Rand und Schatten, Buttons, h1-Schriftart, Größe, Gewicht und Laufweite, Hervorhebungsfarbe der Überschrift, Marker) und lese die Screenshots public/site/section-*.png, setze dann:
  • primary = die Hauptmarkenfarbe (Buttons und Links); ink = die Textfarbe der Website; paper = design.pageBackground; dark = der dunkelste Ton der Website (ihre Tinte oder Dark-Mode-Hintergrund) für die Problemszenen.
  • highlight = ein Pastellton, den die Website tatsächlich verwendet (eine Markerfarbe oder eine CSS-Variable wie --bg: #DFFAAA); accent = eine zweite Markenfarbe, die für Pillen und Zahlen verwendet wird.
  • style: radius = der häufigste Kartenradius in px; border = die Kartenrandfarbe (weglassen, wenn Karten randlos sind); shadow = flat (kein), soft (schwach getönt) oder lifted (stark); tracking = h1-Laufweite ÷ Schriftgröße (z. B. -1,2px/60px = -0,02); headWeight = h1-Gewicht; emphasis = design.headlineEmphasisColors[0].
  • Schriftarten: head = h1-Schriftart, ui = Textkörperschriftart, script = die Handschriftschriftart der Website oder Caveat. Alle müssen Google Fonts sein.
  • Wenn die Website Überschriften in zwei Tönen schreibt („Füllen Sie Ihren Kalender“), markiere dieselben Wörter mit *Sternchen* in title, headline und name (z. B. „PosFlex*.*“ für einen Logo-Punkt). Sie werden in der Hervorhebungsfarbe gerendert.
• background: light (die Seitenfarbe der Website, flach) für helle Websites, was die meisten sind. sky (schwebende Cartoon-Wolken auf einer flachen Markenfarbe) nur, wenn die Website selbst ein Himmels- oder Wolkenmotiv hat. soft (flache Markenfarbe mit weißem Text) für kräftige, gesättigte Marken. Keine Farbverläufe: nur flache Farben.
• Avatar: build.py verwendet automatisch das Apple Touch Icon der Website für das Meet-Abzeichen und die Endkarte, wenn eines erfasst wurde. Setze avatar nur selbst, wenn die Website keines hat, oder wenn diese Szene von jemand anderem handelt (z. B. eine Fallstudie, die mit dem Macher endet): Füge dann "keepAvatar": true hinzu.
• Photo: Verwende für meet eine echte Person: den Gründer oder Inhaber von der Über-uns- oder Team-Seite, wenn die Startseite keines hat (erfasse diese Seite in einen temporären Ordner und kopiere das Bild). Schneide alle auf dem Bild aufgedruckten Namen oder Bildunterschriften aus (ffmpeg -vf crop=...).
• Keine Person? Verwende in meet das Logo oder die Ladenfront als photo und das Maskottchen oder Logo als avatar, mit kicker: "Meet" und dem Markennamen.
• Anpassung an andere Unternehmen: Eine Handwerker-Seite könnte search „Not-Klempner in meiner Nähe“ → results Wettbewerber/Anzeigen → cost „Verpasste Anrufe diese Woche“ → browser Angebotsformular + Klick-zu-Anruf → answer → quote „Festpreis“ → payoff „Auftrag gebucht“ sein. SaaS: Die Suche wird zur Aufgabe, die Kosten sind verlorene Stunden, und der Browser zeigt die App.
• Aussprache: Überprüfe Marken- und Personennamen. Lasse TTS eine Zeile pro möglicher Schreibweise vorlesen, transkribiere jede mit $WHISPER_PYTHON und behalte die Schreibweise, die als richtiger Name zurückkommt. Für PosFlex wurde „Pos Flex“ als „Poe's Flex“ gehört und „Poss Flex“ als „POSFLEX“. Füge den Gewinner in voice.pronounce ein, z. B. {"PosFlex": "Poss Flex"}. Der auf dem Bildschirm angezeigte Text bleibt korrekt.

Schema: Kopiere <skill-dir>/examples/posflexgrowth.story.json (eine helle Website mit vollständigen style-Tokens) oder snapshare.story.json (eine App, Sky-Thema, mit Telefonszenen) und ändere die Werte. Diese Props existieren pro Szenentyp (alle optional, sofern nicht mit * gekennzeichnet):

• search: query*, title, suggestions[]
• results: query*, results[{title, sub}], title, pill
• cost: title*, label, items[{name, price}], totalLabel, total*, keep*, cut*, cutCue (Das Wort, das das Schrumpfen des Balkens startet, Standard „Prozision“)
• meet: photo*, avatar, kicker, name*, role, place, tagline
• browser: screenshot*, tab, panel{title*, items[{name, price}], chips[], extra{image, title, sub}, highlight{label, value, cue}, button}
• answer: query*, result{image*, rank, name*, meta, rating, ratingLabel}, below, aiLabel, answer, source{icon, label}
• quote: title*, forLabel, checks[], priceLabel, price, stamp, signature, signNote, signCue (Standard „writing“)
• payoff: headline*, highlight, query*, toast{title*, sub, meta}*
• end: name*, button*, avatar, url
• phone (Apps und mobile Produkte): phone* (ein gerahmtes Telefon-PNG mit transparentem Hintergrund, z. B. von der Website oder App Store-Screenshots), title*, kicker, big (eine große Zahl wie "*0*"), points[] (Chips, die erscheinen, wenn ihr erstes Wort gesprochen wird), icon (App-Symbol), side (left | right), bg (brand | paper | dark). Für eine App-Anzeige ersetze die Takte 4–6 durch 3–5 Telefonszenen, jede ein Feature. Siehe examples/snapshare.story.json.

Jede Szene kann auch say, enter (cut | slide | blur, Standard cut) und hold (extrasekunden) annehmen. Bildpfade sind relativ zu <run>/public (site/...).

Gate: story.json hat 9 Takte in dieser Reihenfolge. Jedes Stichwort erscheint in seinem say. Jeder Text lässt sich auf site.json oder die Bilder zurückführen, abgesehen von den Szenariodetails.

Schritt 3: Stimme + Zeitachse erstellen

python3 <skill-dir>/scripts/build.py <run>

Dies führt TTS für jede Zeile aus (zwischengespeichert nach Text), entfernt Stille, platziert jede Zeile 0,18 s nach dem Schnitt ihrer Szene, ermittelt Wortzeiten mit faster-whisper und schreibt <run>/props.json und <run>/public/voice.wav. Es gibt die Zeitachse aus, die insgesamt 28–34 s betragen sollte. Wenn sie zu lang ist, kürze die Zeilen; beschleunige nicht die Stimme. Führe es nach jeder Story-Änderung erneut aus; rein visuelle Änderungen rufen TTS nicht noch einmal auf.

Schritt 4: Vorschau, dann rendern

bash <skill-dir>/scripts/render.sh <run> stills "40,120,200,300,450,560,680,780,880"   # Wähle Frames innerhalb jeder Szene aus der Build-Ausgabe
bash <skill-dir>/scripts/render.sh <run>                                                # Vollständiger Render, etwa 30 s

Lese stills/sheet.jpg vor dem vollständigen Rendern. Überprüfe, dass Text nicht über Karten überläuft, dass lange Namen passen (kürze Text anstatt Schriftarten zu verkleinern), dass Bilder das richtige Motiv zeigen und dass Farben auf dem Hintergrund lesbar sind. Nach dem vollständigen Rendern lies qa-sheet.jpg (ein Frame pro Sekunde).

Gate: <run>/superbrag.mp4 existiert bei ungefähr -14 LUFS (ausgegeben). Das QA-Sheet zeigt alle 9 Takte, ohne dass etwas abgeschnitten ist.

Schritt 5: Ausliefern

Teile dem Benutzer den Pfad zu superbrag.mp4, seine Länge, welche Kundengeschichte du gewählt hast und warum, und welche Details erfunden wurden (die Suchanfrage, Preise) mit. Biete einen Stimmtausch (MiniMax oder ElevenLabs) an, falls die Kokoro-Stimme flach klingt. Credit-Zeile zum Posten: „Music: Sascha Ende, ende.app (CC BY 4.0)“.

Hinweise

• Remotion ist kostenlos für Einzelpersonen und Unternehmen mit bis zu 3 Personen; größere Unternehmen benötigen eine Lizenz (remotion.dev/license).
• Um das Aussehen jedes Videos zu ändern, bearbeite template/src/scenes.tsx (Layouts) und template/src/ui.tsx (Bewegung, Hintergrund, Schriftarten). Vorschau mit cd template && npx remotion studio src/index.ts --props=<run>/props.json --public-dir=<run>/public.
• Nur Querformat 1920x1080 vorerst. Hochformat benötigt eigene Layouts in scenes.tsx.