saas-demo-maker

Übersicht

Dieses Skill erfasst Screenshots von beliebigen Web- oder lokalen Anwendungen und rendert daraus ein poliertes, lautloses SaaS-Demo-Video (MP4). Es basiert auf der bewährten Castify-Pipeline unter ~/SaaS/castify/generate_castify_demo.py und verallgemeinert diese für jedes Aperone-Projekt.

Wenn aufgerufen, MÜSSEN Sie am Ende der Sitzung ein MP4 erstellen. Hören Sie nicht bei „Hier ist ein Plan“ auf – führen Sie ihn aus.

Wann verwenden

Starten Sie dies bei jedem der folgenden Fälle (auch bei teilweiser Übereinstimmung oder Umschreibung).

Japanische Auslöser

デモ動画 / デモMP4 / デモ動画を作って / デモ動画を生成して
プロモ動画 / 紹介動画 / サービス紹介動画
スクショ撮って動画にして / スクリーンショットを動画にして
動画を作って（SaaSやアプリの文脈）
既存のスクショから動画を作って
画面録画（静止画合成で代替する旨を伝えてから対応）

Englische Auslöser

demo video / demo MP4 / product demo
promotional video / promo video / intro video
screenshot to video / capture and render
make a video from screenshots

Direkte Angabe mit `/saas-demo-maker`

Bei Unsicherheit (Starten erlaubt)

Enthält „Video“, „MP4“ oder „Screenshot“ im Kontext einer App, SaaS oder eines Tools
Erwähnt eine lokale App oder eine öffentliche URL
Bitte „aus vorhandenen Bildern ein Video zu machen“

Eingaben

Aus der Benutzernachricht parsen:

Eingabe	Standard	Hinweise
`url`	—	Vollständige URL oder `http://localhost:3000`
`product_name`	aus Projekt abgeleitet	Wird in Pill und Konfiguration verwendet
`brand_color`	`#7c3aed`	Überschreibt die VIOLET-Konstante
`screens`	5	Anzahl der aufzunehmenden Screenshots
`output_path`	`output/saas_demo.mp4`	Relativ zum Projektstamm
`mode`	`full`	`full` / `capture` / `render`
`locale`	`ja` bei japanischer Nachricht, sonst `en`	Beeinflusst den Schritttext
`steps`	Aus templates.md Preset	Benutzertext hat Vorrang
`assets_dir`	`output/screenshots`	Quellbilder für den Render-Modus

Modi

full mode

Screenshots von einer Live-URL oder lokalen App erfassen und dann das Video rendern.

Beispielauslöser:

/saas-demo-maker https://castify.aperone.com Erstelle ein Demo-Video für die Service-Karte. 5 Bildschirme, unter 20 Sekunden, Markenfarbe #7c3aed, Ausgabe output/castify_demo.mp4
/saas-demo-maker http://localhost:3000 Mach Screenshots von LP, Login, Dashboard, Eingabe und Ergebnis und erstelle ein lautloses SaaS-Demo-MP4 für Endlosschleife

capture mode

Nur Screenshot-Erfassung – kein Video-Rendering.

Beispielauslöser:

/saas-demo-maker Nur Screenshots machen. LP, Login, Dashboard, Eingabe, Ergebnis – 5 Stück

render mode

Video aus vorhandenen Screenshots rendern – kein Erfassungsschritt.

Beispielauslöser:

/saas-demo-maker Aus den 5 vorhandenen Screenshots im Assets-Ordner nur das Video erstellen. Produktname: Aperone Academy, Markenfarbe: #7c3aed
/saas-demo-maker Aus den 5 Assets nur das Video erstellen. Produktname: Castify, Ausgabe: output/castify_demo.mp4

Arbeitsablauf

Schritt 0 – Vorbereitung

demo_config.json lesen, falls im aktuellen Projekt vorhanden.
Prüfen, ob Screenshots in output/screenshots/ oder assets/ existieren.
Modus aus der Benutzernachricht erkennen (Standard: full).
Sicherstellen, dass das Verzeichnis output/ existiert, oder es erstellen.

Schritt 1 – Konfiguration generieren

demo_config.json in das Projektstammverzeichnis schreiben:

Werte aus der Benutzernachricht verwenden.
Schritttexte aus dem templates.md-Preset passend zu product_name wählen, oder generische Vorlage für die Bildschirmanzahl, oder benutzerdefinierten Text.
Die Datei jetzt schreiben, vor der Generierung von Skripten.

Schritt 2 – Skripte schreiben (full oder capture mode)

capture_screenshots.py in das Projektstammverzeichnis schreiben. generate_saas_demo.py in das Projektstammverzeichnis schreiben. README_demo_video.md in das Projektstammverzeichnis schreiben (nur beim ersten Mal; überspringen, falls vorhanden).

Im Render-Modus capture_screenshots.py überspringen.

Schritt 3 – Abhängigkeiten installieren (falls fehlend)

Prüfen und bei Bedarf installieren (siehe reference.md für Befehle):

ffmpeg — which ffmpeg || brew install ffmpeg
pillow — python3 -c "import PIL" || python3 -m pip install pillow
Für TypeScript-Erfassung: Prüfen, ob node_modules/playwright existiert

Schritt 4 – Erfassen (full oder capture mode)

Das Erfassungsskript ausführen:

python3 capture_screenshots.py

Oder wenn das Projekt ein vorhandenes Playwright-TypeScript-Erfassungsskript hat (z. B. scripts/demo-screenshots.ts), dieses bevorzugen:

npx tsx scripts/demo-screenshots.ts

Nach der Erfassung prüfen, dass output/screenshots/ mindestens 2 PNG-Dateien enthält. Wenn die Erfassung fehlschlägt, den Fehler lesen, capture_screenshots.py korrigieren und wiederholen.

Schritt 5 – Rendern (full oder render mode)

Ausführen:

python3 generate_saas_demo.py

Auf Fehler achten. Wenn das Skript abstürzt, den Traceback lesen, das Skript korrigieren und erneut ausführen. Nicht den Benutzer fragen – bis zu 3 Versuche selbst heilen.

Schritt 6 – Qualitätskontrolle

ffprobe ausführen, um zu überprüfen:

ffprobe -v error -select_streams v:0 \
  -show_entries stream=width,height,duration,codec_name,pix_fmt \
  -of default output/saas_demo.mp4

Alle 10 Punkte der Qualitätscheckliste in reference.md überprüfen. Wenn ein Punkt fehlschlägt, korrigieren und neu rendern.

Schritt 7 – Bericht

Die endgültige Antwort ausgeben (siehe „Format der endgültigen Antwort“ unten).

Screenshot-Erfassungsspezifikation

Auflösung

1280 × 720 (Chromium-Viewport)

Browser

Playwright Chromium, headless.

Warte-Strategie

await page.goto(url, wait_until="networkidle")
await page.wait_for_timeout(800)  # zusätzliche Beruhigungszeit

Kandidaten für lokale URLs (in dieser Reihenfolge versuchen)

http://localhost:3000
http://localhost:5173
http://localhost:8000
http://localhost:8080

Ausgabeverzeichnis

output/screenshots/ relativ zum Projektstamm.

Standard-Dateinamen

01-landing.png
02-login.png
03-dashboard.png
04-input.png
05-result.png
06-options.png   (bei 6+ Bildschirmen)
07-processing.png (bei 7 Bildschirmen)

Start der lokalen App

package.json lesen, um das Dev-Skript zu finden (dev, start, usw.).
Den Dev-Server im Hintergrund starten.
Warten, bis die Kandidaten-URL antwortet (max. 30 s).
Screenshots erfassen.
Den Dev-Server stoppen.

Authentifizierungshandhabung

Wenn .env Test-Anmeldedaten und ein Dev-Bypass-Flag enthält (z. B. DEV_BYPASS_AUTH=true), dieses vor dem Start in der Umgebung setzen.
Bei Login-Bildschirmen: Eine Demo-E-Mail-Adresse (demo@<produkt>.io) ausfüllen, ohne abzusenden – den ausgefüllten Zustand als Login-Bildschirm erfassen.
Keinen echten Auth-Bypass oder Brute-Force-Login versuchen.
Wenn eine Seite zur Anmeldung umleitet und kein Bypass verfügbar ist, den Login-Bildschirm als einen der Demo-Bildschirme verwenden (das sieht glaubwürdig aus).

Dev-Mode-Artefakte

Clerk-Entwicklungsmodus-Banner, Next.js-Dev-Indikator, Debug-Overlays – NICHT versuchen, sie im Browser zu entfernen. Stattdessen im Render-Schritt mit einem Verlaufs-Overlay oder einem dunklen Panel am unteren Rand der Karte abdecken.

Render-Spezifikation

Architektur

Alle Einzelbilder als PNG-Dateien in output/frames/ generieren, dann mit ffmpeg kodieren. NICHT moviepy für die Kodierung verwenden – ffmpeg als Subprozess direkt aufrufen.

Bildgrößenanpassung

card = ImageOps.fit(image.convert("RGBA"), (card_w, card_h),
                    method=Image.Resampling.LANCZOS)

Dies ist die EINZIG zulässige Methode zur Bildgrößenanpassung. Der Screenshot muss innerhalb jeder Szene vollständig statisch sein – kein Zoom, kein Schwenk, kein Ken Burns.

Ken Burns – VERBOTEN

Keinen skalenabhängigen Faktor oder Positionsversatz pro Frame auf den Screenshot anwenden. Der Pixelinhalt des Screenshots darf sich zwischen Frame 0 und Frame 98 einer Szene nicht ändern. Nur Overlays (Beschriftung, Pill, Fortschrittsbalken, Glühen) dürfen animiert werden.

Beschriftungsanimation (erlaubt)

Das Beschriftungs-Panel kann über die ersten 20 % einer Szene (scene_t < 0.2) ein- und 8 px nach oben verschoben werden. Dies ist die einzige erlaubte Animation auf der Bildebene.

Timing

SCENE_SECONDS     = 3.3   # fest – nicht ändern
TRANSITION_SECS   = 0.4   # fest – nicht ändern
FPS               = 30
SCENE_FRAMES      = 99
TRANSITION_FRAMES = 12

Übergang

Horizontaler Slide: Das ausgehende Bild verlässt links, das eingehende Bild kommt von rechts. ease_in_out_cubic verwenden. Einen schmalen, weichzeichnenden Schleier an der Schnittkante hinzufügen. Siehe reference.md für den vollständigen Algorithmus.

ffmpeg-Befehl

Den genauen Befehl aus reference.md verwenden. Wichtige Flags: -c:v libx264 -pix_fmt yuv420p -movflags +faststart -an -crf 18

Visuelle Gestaltungsregeln

Hintergrund

#020617  (BG)  – Füllung hinter der Karte

Karten-Layout

card_box = (34, 22, WIDTH-34, HEIGHT-22)
radius   = 30

Oberer Chrom-Akzentstrich bei card_box[1] + 48. Kartenrahmen: 1 px CARD_EDGE.

Overlays (alle erforderlich)

Fortschrittsbalken – segmentiert, oben auf der Karte, violette Füllung für abgeschlossene Schritte
Beschriftungs-Panel – unten links, glasartiges dunkles Panel, SCHRITT N / Name / Text
Produkt-Pill – unten rechts, farbiger Punkt der Markenfarbe + Produktname
Fokus-Glühen – violettes Glühen um das wichtigste UI-Element (siehe reference.md zur Ableitung)
Vignette – subtiler, abgerundeter dunkler Rand auf dem gesamten Frame
Unterer Verlauf – deckt Dev-Mode-Artefakte im unteren Kartenbereich ab, wenn nötig

Verbotene Gestaltungselemente

Weißer Text auf einfarbig schwarzem Kästchen (kein Glaseffekt)
Übermäßiges Leuchten / übersättigtes Glühen
3D-Transformationen oder perspektivische Verzerrungen
Verzerrung der Screenshot-Benutzeroberfläche
Bearbeiten oder Ersetzen von im Screenshot sichtbarem Text

Konfigurationsregeln

demo_config.json vor dem Ausführen von Skripten schreiben. Bei erneuter Ausführung im Render-Modus zuerst die vorhandene Konfiguration lesen und Benutzerüberschreibungen zusammenführen, anstatt zu überschreiben.

Schema:

{
  "product_name": "string",
  "brand_color": "#7c3aed",
  "output_path": "output/saas_demo.mp4",
  "screenshots": ["output/screenshots/01-landing.png"],
  "steps": [{ "step": 1, "name": "...", "body": "...", "focus": null }],
  "fps": 30,
  "resolution": [1280, 720],
  "mode": "full",
  "locale": "ja"
}

Implementierungsanforderungen

capture_screenshots.py Verantwortlichkeiten:

Playwright Chromium headless starten
Viewport auf 1280 × 720 setzen
Zu jeder Ziel-URL navigieren, auf networkidle + 800 ms Beruhigungszeit warten
PNGs in output/screenshots/ mit Standard-Dateinamen speichern
Maus vor jedem Screenshot aus dem Bildschirm bewegen (page.mouse.move(1400, 800))
Erfolg/Fehlschlag pro Screenshot ausgeben
Exit-Code 0 bei Erfolg, 1 bei Fehlschlag

generate_saas_demo.py muss alle in reference.md aufgeführten Funktionen enthalten. Wichtige Invarianten:

SCENE_SECONDS = 3.3 – fest codiert, keine Konfigurationsüberschreibung
TRANSITION_SECONDS = 0.4 – fest codiert, keine Konfigurationsüberschreibung
fit_cover() ruft ImageOps.fit() auf – keine Zoom-Arithmetik
render_scene() ändert NICHT die Skalierung pro Frame
encode_video() ruft ffmpeg-Subprozess mit -an-Flag auf

Qualitätscheckliste

Nachdem encode_video() erfolgreich war, ALLE folgenden Punkte überprüfen, bevor "erledigt" gemeldet wird:

output/saas_demo.mp4 existiert, Größe > 100 KB
Dauer innerhalb ±2 s von (Bildschirmanzahl × 3,3 s)
Breite=1280, Höhe=720 (durch ffprobe bestätigt)
Kein Audiostream
codec_name = h264
pix_fmt = yuv420p
Alle Screenshots erscheinen in der richtigen Reihenfolge
Kein auffälliges Dev-Mode-Banner sichtbar (falls nötig durch Overlay abgedeckt)
Ergebnis-/Ausgabebildschirm kommuniziert klar den Produktwert
Beschriftungstext ist auf allen Szenen lesbar

Diesen Check ausführen:

ffprobe -v error -select_streams v:0 \
  -show_entries stream=width,height,duration,codec_name,pix_fmt \
  -of default output/saas_demo.mp4

Fehlerbehebung

Fehler	Wiederherstellung
`ffmpeg` nicht gefunden	`brew install ffmpeg`, dann wiederholen
`PIL` nicht gefunden	`python3 -m pip install pillow`, dann wiederholen

In Ihrer bevorzugten KI fragen

Dokumentation

saas-demo-maker

Übersicht

Wann verwenden

Japanische Auslöser

Englische Auslöser

Direkte Angabe mit /saas-demo-maker

Bei Unsicherheit (Starten erlaubt)

Eingaben

Modi

full mode

capture mode

render mode

Arbeitsablauf

Schritt 0 – Vorbereitung

Schritt 1 – Konfiguration generieren

Schritt 2 – Skripte schreiben (full oder capture mode)

Schritt 3 – Abhängigkeiten installieren (falls fehlend)

Schritt 4 – Erfassen (full oder capture mode)

Schritt 5 – Rendern (full oder render mode)

Schritt 6 – Qualitätskontrolle

Schritt 7 – Bericht

Screenshot-Erfassungsspezifikation

Auflösung

Browser

Warte-Strategie

Kandidaten für lokale URLs (in dieser Reihenfolge versuchen)

Ausgabeverzeichnis

Standard-Dateinamen

Start der lokalen App

Authentifizierungshandhabung

Dev-Mode-Artefakte

Render-Spezifikation

Architektur

Bildgrößenanpassung

Ken Burns – VERBOTEN

Beschriftungsanimation (erlaubt)

Timing

Übergang

ffmpeg-Befehl

Visuelle Gestaltungsregeln

Hintergrund

Karten-Layout

Overlays (alle erforderlich)

Verbotene Gestaltungselemente

Konfigurationsregeln

Implementierungsanforderungen

Qualitätscheckliste

Fehlerbehebung

Verwandte Skills

steipete/bluebubbles

steipete/eightctl

steipete/blucli

steipete/bear-notes

steipete/camsnap

steipete/gifgrep

Direkte Angabe mit `/saas-demo-maker`