Stil: Werbeanzeige
Die eine Regel: Der obere Bereich (oder der Brustbereich) ZEIGT den Mechanismus des Gesagten; nie den Satz neu schreiben – die Untertitel sagen es bereits. Jede gesprochene Idee wird zu einem Schema, das beim Wort wechselt.
Lies vor dem Start ../perfil-criadora.md und lade (oder erstelle) das profil.json im Stammverzeichnis. Frage außerdem in einer einzigen Nachricht, was fehlt: Name des Produkts/Angebots, der finale Call-to-Action (CTA: „kommentiere X“ oder „klicke auf den Link“) und die echten Bilder, die sie zeigen möchte (Produktcover, Ergebnis-Screenshots mit Zahlen, Video-Frames von ihr). Speichere die Bilder im Projektverzeichnis unter assets/img/. Erfinde niemals Logos, Cover, Zahlen, Preise oder Ergebnisse.
src/index.template.html (kopiert von template/index.template.html) ist ein Katalog mit 15 fertigen Schemata, jeweils mit Beispiellängen. Behalte das CSS und die Helfer; überschreibe die Headline und wähle/takte die Schemata auf ihre Rede ab; entferne die Blöcke, die du nicht verwendest. Das alte Modell (nur Text) liegt unter src/classico.template.html (verwende es nur, wenn sie dieses visuelle Design wünscht: kopiere es über index.template.html).
Struktur: Headline, dann Schemata (obligatorisch)
- 0 → ca. 5 Sek.: Nur die Headline. Ein großer Titel (weiße Zeile + Zeile in der Akzentfarbe, ca. 90–125 px, optionales Unterstreichen des Keywords). Kein Schema, kein App-Bildschirm, kein Bild.
- Nach der Headline: ein Schema pro gesprochener Idee, wechselnd beim Wort. Text innerhalb des Schemas nur als kurze Labels (1–3 Wörter: „vorher“, „mit KI“, „Ihr Unternehmen“).
- Wenn das Produkt einen Prozess verkauft, zeige die Komplexität der alten Methode neben der Einfachheit der neuen (überfüllte Zeitleiste + Uhr + ✕ neben einer Bestellung + ✓).
Schemata aus dem Katalog (wiederverwenden und Zeiten anpassen):
| Gesprochene Idee | Schema | Block |
|---|---|---|
| „hab X gemacht → bin durch Y → wurde zu Z“ | Handy-Card (echtes Bild) → gestrichelter Pfeil + wandernder Punkt → runder Knoten → Pfeil → Ergebnis-Card | B2 |
| Fehler/Pausen entfernen | Audiowelle: Problembereiche werden blau/rot mit Label und verschwinden; Uhr wird kleiner | B3 |
| passiert von selbst | Handy, in dem die Elemente von selbst erscheinen + Zähler „0 Klicks“ | B4 |
| alte Methode × neue Methode | zwei Tafeln: überfüllte Zeitleiste + Uhr + ✕ neben einer Bestellung + ✓ | B5 |
| Einwände („keine Zeit“, „kann ich nicht“) | Nicht ✕ / Ja ✓: Problemkarten führen zu ✕ → Pfeil → Lösungskarte mit ✓ | B6 |
| Zweifel → Beweis | Sprechblase mit dem Zweifel → Testkarte mit ✓ | B7 |
| „muss richtig erklärt werden“ | generische Anfrage → graues Ergebnis ✕ × detaillierte Anweisung wird getippt ✓ | B8 |
| Liste der Leistungen | gestrichelte Slots, die sich mit echten Bildern oder Icons füllen, einer pro genanntem Punkt | B9 |
| Kurs / Produkt | echtes Cover + Chips, die hineinfliegen + steigende Grafik | B10 |
| Social Proof | echte Screenshots mit steigendem Aufrufzähler (Zähler direkt aus dem Screenshot ausschneiden) | B11 |
| einen Stil kopieren | Referenz → Knoten → ihr Frame, der denselben Stil erhält + „= gleicher Stil“ | B12 |
| Angebot / Launch | Etikett + Stempel → Beitrag mit Versandbalken → „✓ veröffentlicht“ | B13 |
| drei Schritte („aufnehmen, bearbeiten, posten“) | drei Knoten leuchten bei jedem Wort auf | B14 |
| CTA zum Kommentieren | Kommentarfeld, das das Wort tippt („ICH WILL“) + Direct-Karte | B15 |
| CTA zum Link | weiße Leiste „Mehr erfahren ›“ pulsiert | B16 |
Lies vor dem Rendern jeden Block und frage: „Zeigt der Bereich die Idee oder wiederholt er nur die Untertitel?“
Zahlen: Die Zähler von B3, B5 und B11 kommen mit Platzhaltern (__B3_SEG_ANTES__, __B5_SEG_NOVO__, __VIEWS_PRINT_1__…). Das Skript montar.mjs stoppt mit einem Fehler, solange noch Platzhalter vorhanden sind. Ersetze sie durch die ECHTE Zahl (von ihr genannt oder aus dem Screenshot abgelesen) oder entferne den Zähler.
Bilder: bruto.jpg wird automatisch aus dem Video extrahiert (novo-anuncio.mjs). Alles andere (Cover, Screenshots, Frames aus anderen Videos, Referenz) nur, wenn die Creatorin es schickt. Fehlt ein Bild → entferne das Schema oder zeichne es neu (SVG-Icon, Textkarte); lasse niemals einen Beispiel-Platzhalter stehen. Name/@ und Avatar kommen aus profil.json (montar.mjs ersetzt __USUARIO__, __NOME__ und fügt den Avatar ein; ohne Foto wird ein Kreis mit dem Anfangsbuchstaben gezeichnet.
Sicherheitszonen (Meta-Anzeige im Reels – obligatorisch)
Halte 14 % oben, 35 % unten und 6 % auf jeder Seite frei. Bei 1080×1920 ist der sichere Bereich x 65–1015, y 270–1248: Jedes Wort, jede Zahl, jeder Stempel, CTA, Untertitel und jedes Schema-Label liegt darin (auch beim Höhepunkt von Skalierung/Rotation der Animationen). Nur Dekoration (dunkle Leiste, Panelschatten) darf hinausragen. Überprüfe mit $K --em video-projects/<slug> node ../../$E/scripts/zonas-seguras.mjs renders/<datei>.mp4 assets/seguras.jpg t1 t2 … (roter Rahmen auf jedem Frame).
Bereich der Schemata (reel.json im Projekt-Stamm)
Die Blöcke werden in einer Fläche von 1080×340 gezeichnet und montar.mjs positioniert und skaliert diese Fläche:
| Rahmung | reel.json |
|---|---|
| Kopf tiefer, Platz oben (Kopfoberkante unter y ≈ 450) | {"faixa":"topo","zonaTop":280,"zonaAltura":<Kopfoberkante − 290>,"capTop":<Kinn + 20, max. 1165>} |
| Kopf hoch im Bild (Selfie von nahem, Auto) | {"faixa":"peito","zonaTop":<Kinn + 20>,"zonaAltura":<≈ 1150 − zonaTop>,"capTop":<zonaTop + zonaAltura + 10, max. 1165>} |
Im Modus peito bedeckt eine dunkle Leiste vom Kinn bis zum Ende des sicheren Bereichs, und Schemata + Untertitel liegen darüber. Die Untertitel (80 px Höhe) müssen spätestens bei y 1248 enden.
Visuelle Gestaltung
| Element | Regel |
|---|---|
| Dunkle Leiste | topo: Verlauf rgba(0,0,0,.66) → transparent von oben herab. peito: dunkle Leiste vom Kinn bis ca. y 1300. |
| Schema-Kit | Panels rgba(16,16,19,.92) Radius 22 mit hellem 1 px Rand; Handy-Cards 160×284 (9:16) mit echten Bildern; runder KI-Knoten in Farbe cor_ia; gestrichelte Pfeile mit Punkt in der Akzentfarbe; runde Stempel ✕ rot #ff453a und ✓ grün #30d158, die beim Wort aufploppen; Interface-Texte in Inter. Wiederholte Dekoration (Wellenbalken, Zeitleisten-Clips) verwendet rnd() mit Template-Seed – niemals Math.random oder from:"random" von GSAP. |
| Typografie | Titel-Schriftart (Archivo Black oder fonte_titulo aus dem Profil) für Headline, Labels und Untertitel. Weiß; Akzent in Farbe cor_destaque (Standard gelb #FFD21F). |
| Bewegung | kurze Einblendungen: hoch + erscheint in 0,45–0,6 s (power3.out / expo.out); Stempel mit back.out; Zähler laufen; Balken füllen sich; Pfeile wachsen. Ausblendungen in 0,28 s. Schemata wechseln beim gesprochenen Wort. |
| Untertitel | ein Wort pro Mal, 46 px, weiß mit weichem Schatten (nie Kontur), direkt unter dem Kinn (capTop in reel.json). |
| CTA | Kommentarfeld, das das Wort tippt + Direct-Karte, oder weiße Leiste „Mehr erfahren ›“. |
Farben, Größen und Verbote: template/DESIGN.md (wird in jedes Projekt kopiert).
Schnittregeln
- Entferne jede Pause (−30 dB / 0,15 s) und jede Wiederholung; möglichst ≤ 90 s. Wird ein Satz zweimal gesagt: behalte den LETZTEN (den korrigierten). Betonungswiederholung („gilt, gilt“) ist kein Fehler.
- Werbeanzeige schneidet ohne J/L (
cortar.mjs --no-jl): Das Bild folgt exakt der Sprache. - Nach dem Schnitt transkribiere die
clean.mp4neu und suche nach doppelten Sätzen und abgeschnittenen Wörtern. Die gesamte Transkription VERSTECKT Wiederholungen: Scanne auch das gesamte Video in kurzen Fenstern, in einem einzigen Aufruf:$K --em video-projects/<slug> node ../../$M/transcrever.mjs assets/clean.mp4 --janelas 1,3,5,7,…(alle 2 s bis zum Ende) und vergleiche.
Geschwindigkeitsregeln (der PC der Creatorin kann langsam sein – sie gelten zusätzlich zu den obigen Schritten)
- Die Transkription von
novo-anuncio.mjsist bereits--rapido(nur für die Schnittauswahl). Die Neu-Transkription derclean.mp4(für die Untertitel) verwendet das präzise Modell – einmal pro Schnittversion. - Überprüfe Schnittfehler und Wiederholungen in EINEM Aufruf mit
--janelas. Niemals ein Fenster nach dem anderen. - Rendere keinen vollständigen Entwurf nur zum Anschauen von Einzelbildern. Verwende
$K --em video-projects/<slug> hyperframes snapshot --at t1,t2,… -o snapshots(eine Zeit pro Schema) und schaue die PNGs an. Rendere EIN Mal, wenn die Snapshots stimmen. - Der Encoder für raw.mp4 / clean.mp4 wird automatisch gewählt. Nicht ändern.
- Vor jedem langsamen Schritt gebe eine kurze Zeile auf Deutsch aus, was gerade läuft (z. B. „Rendere die Anzeige – das kann ein paar Minuten dauern.“), damit die Wartezeit nie nach einem Absturz aussieht.
Ablauf (jeder Befehl über den Starter $K)
E=.claude/skills/estilo-anuncio · M=.claude/skills/_motor · K = der Starter des Skills videos-opus: "<VO>\bin\node.exe" "<VO>\scripts\video.mjs" kit, wobei <VO> der Ordner des Skills videos-opus ist (der, der die SKILL.md enthält, die dich an diese Anleitung verwiesen hat). Er fügt die portablen Programme zum Pfad hinzu und arbeitet im Arbeitsverzeichnis des Kits ($K pasta zeigt, wo das ist; Projekte liegen unter <pasta>\video-projects\<slug>). $K --em <unterordner> … führt den Befehl innerhalb dieses Ordners aus. Kein npx, Python oder bloßes node: alles läuft über $K.
- Projekt + schnelle Transkription:
$K node $E/scripts/novo-anuncio.mjs "<video>" <slug>→video-projects/<slug>/mit raw.mp4, raw.json,assets/palavras.txt, den beiden Vorlagen,assets/img/bruto.jpgundreel.json. - Rahmung: Kontaktbogen mit Raster (
$K --em video-projects/<slug> ffmpeg -i assets/raw.mp4 -vf "fps=1/5,drawbox=x=65:y=270:w=950:h=979:color=red:t=6,drawgrid=w=1080:h=100:[email protected]:t=2,scale=270:-1,tile=7x2" -frames:v 1 assets/contato.png) und ANSCHAUEN: gelbe Linien alle 100 px, roter Kasten = sicherer Bereich. Finde den oberen Kopf und das Kinn und schreibereel.json(Tabelle „Bereich der Schemata“). - Schnitt: Lies
assets/palavras.txt, schreibeassets/keeps.json; führe innerhalb vonassets/aus:$K --em video-projects/<slug>/assets node ../../../$M/cortar.mjs --no-jl. - Prüfung: Im Projekt-Stamm:
$K --em video-projects/<slug> node ../../$M/transcrever.mjs assets/clean.mp4 assets/transcript.json --nomes "<Begriffe aus Profil>"; lies; führe den--janelas-Scan durch; passe den Schnitt an, bis er sauber ist; falsch gehörtes Wort →assets/caption-fixes.json. - Komposition: Überschreibe
src/index.template.html: Headline in 0–5 s, dann ein Schema pro gesprochener Idee; Zeiten von$K --em video-projects/<slug> node ../../$M/ancoras.mjs "Satz" …(im Projekt-Stamm); echte Bilder inassets/img/. - Montage + Prüfung:
$K --em video-projects/<slug> node ../../$E/scripts/montar.mjs(stoppt mit Fehler, wenn noch Platzhalter oder fehlende Bilder vorhanden sind) →$K --em video-projects/<slug> hyperframes lint(0 Fehler) →$K --em video-projects/<slug> hyperframes snapshot --at …für JEDES Schema und ANSCHAUEN (Gesicht nie verdeckt, Labels lesbar, Zahlen korrekt, kein Beispiel-Platzhalter) →zonas-seguras.mjsauf die Snapshots/Zeiten → rendern und ausliefern (über den Starter, im Arbeitsverzeichnis des Kits):$K node $M/renderizar.mjs <slug>– prüft die Sperren, rendert im Hintergrund, validiert und kopiert sofort nachprontos/. Ausgabe 3 = rendert noch: führe$K node $M/renderizar.mjs <slug> --esperaraus, bis „FERTIG“ erscheint. Niemals$K --em video-projects/<slug> hyperframes renderdirekt oderprontos.mjsvon Hand ausführen. Danachzonas-seguras.mjs renders/<slug>-final.mp4 …zu den Zeiten der Schemata. - Auslieferung: Antworte auf Deutsch, kurz: wo die Datei liegt, was geschnitten wurde, verwendete Bilder, etwaige Unklarheiten, und dass das Video die Meta-Sicherheitszone einhält. Nie veröffentlichen oder die Anzeige schalten.
Variationsformen der Anzeige (wenn die Creatorin „mehrere Versionen“ wünscht)
Gleicher Schnitt, andere Headline und/oder anderer CTA: kopiere das Projekt (video-projects/<slug>-v2), ersetze nur Block B1 und den CTA, montiere, Snapshot der Headline und rendere. Wiederhole weder Schnitt noch Transkription.
Anpassungen nach der Auslieferung
„Entferne den Preis“ → keeps.json, Schritte 3–4, berechne die Zeiten der Schemata nach dem Abschnitt mit ancoras.mjs und Schritt 6. „Tausche die Headline“ → B1 und Schritt 6. „Untertitel höher“ → capTop in reel.json und Schritt 6. Niemals von vorne beginnen, was sie nicht zu ändern bat.