demo-script

Skill „Demo-Skript“

Erstellen Sie strukturierte Demo-Video-Skripte, indem Sie das Live-Produkt erkunden und gemeinsam mit dem Benutzer verfassen.

Warum es das gibt

Gute Demo-Videos brauchen gute Skripte. Schlechte Demos schweifen ab, überspringen wichtige Punkte oder sind zu schnell. Dieser Skill erzeugt ein präzises, überprüfbares Skript, das /record-demo automatisch ausführen kann.

Workflow

Schritt 1: Briefing

Sammeln Sie den Kontext vom Benutzer:

Erforderlich:

• Welches Produkt/Welche Funktion soll demonstriert werden
• Ziel-URL (Staging/Produktion)
• Wer ist die Zielgruppe? (Interessenten, bestehende Nutzer, Entwickler, internes Team)

Optional (nachfragen, falls nicht angegeben):

• Spezifischer Ablauf (z. B. „einen Testfall mit Schritten und erwarteten Ergebnissen erstellen“)
• Ton (professionell, lässig, technisch, Marketing)
• Ziel-Dauer (30s, 1 Min., 3 Min., 5 Min.)
• Wichtige Punkte, die betont werden sollen
• Dinge, die vermieden/übersprungen werden sollen

Standardannahmen, falls nicht angegeben:

• Zielgruppe: Interessenten, die das Produkt bewerten
• Ton: professionell, aber zugänglich
• Dauer: 1–2 Minuten
• Auflösung: 1920×1080

Schritt 2: Produkterkundung

Nutzen Sie die Playwright-Browser-Tools, um die tatsächliche Produkt-UI zu erkunden.

Das ist entscheidend – raten Sie nicht, wie die UI aussieht. Navigieren Sie tatsächlich darin:

1. Öffnen Sie die Ziel-URL im Browser
2. Machen Sie Screenshots von jeder relevanten Seite/jedem relevanten Bildschirm
3. Notieren Sie die tatsächlichen Button-Beschriftungen, Menüpunkte, Formularfelder
4. Verstehen Sie den Navigationsablauf
5. Identifizieren Sie UI-Elemente anhand ihrer echten Selektoren

Beispiel-Erkundungsablauf:
  → Zur App-URL navigieren
  → Dashboard-Screenshot machen
  → Durch die Zielfunktion klicken
  → Screenshot von jedem Zustandswechsel
  → Exakte Selektoren für alle interaktiven Elemente notieren
  → Auf Ladezustände, Animationen, Modals prüfen

Warum zuerst erkunden?

• Echte Selektornamen (keine geratenen, die während der Aufnahme fehlschlagen)
• Genaue Erzählung, die mit dem übereinstimmt, was auf dem Bildschirm zu sehen ist
• Den natürlichen Ablauf entdecken (vielleicht gibt es einen Schritt, den der Benutzer vergessen hat zu erwähnen)
• Potenzielle Probleme erkennen (Auth-Wände, langsame Ladezeiten, leere Zustände)

Authentifizierung:

• Falls die App einen Login erfordert, fragen Sie den Benutzer nach Anmeldedaten oder einer vorauthentifizierten Sitzung
• Alternativ eine Staging-Umgebung mit Testdaten verwenden
• Hinweis: Cookies/Sitzung für die Aufnahmephase speichern

Schritt 3: Skriptentwurf

Erzeugen Sie ein strukturiertes Skript im JSON-Format mit den Arrays metadata und scenes.

Das vollständige JSON-Schema, die Aktionsreferenz und die Highlight-Stile finden Sie in references/script-format.md.

Schritt 4: Überprüfung & Iteration

Präsentieren Sie das Skript dem Benutzer in einem lesbaren Format (KEIN rohes JSON). Formatieren Sie es wie folgt:

🎬 Demo-Skript: „Erstellen Ihres ersten Testfalls“
Dauer: ~90 Sekunden | Zielgruppe: Interessenten

━━━ Szene 1: Eröffnung – Dashboard-Überblick ━━━
  → Navigiere zu /dashboard
  🎙️ „Willkommen bei OneTest. Legen wir Ihren ersten Testfall an.“
  ⏸️ 2s Pause

━━━ Szene 2: Navigation zu Test Cases ━━━
  → Klicke: Sidebar „Test Cases“
  🎙️ „Öffnen Sie den Bereich Test Cases über die Seitenleiste.“
  ✨ Highlight: Sidebar-Element (Pulsieren)
  ⏸️ 1,5s Pause

━━━ Szene 3: Neuen Testfall erstellen ━━━
  → Klicke: Button „Erstellen“
  🎙️ „Klicken Sie auf Erstellen, um einen neuen Testfall zu starten.“
  ✨ Highlight: Button „Erstellen“ (Glühen)
  ⏸️ 2s Pause

  → Tippe in Titel: „Anmeldung mit gültigen Anmeldedaten“
  🎙️ „Geben Sie einen aussagekräftigen Titel ein.“
  ⏸️ 1s Pause

  → Tippe in Beschreibung: „Stellen Sie sicher, dass sich Benutzer anmelden können...“
  🎙️ „Fügen Sie eine klare Beschreibung hinzu, was dieser Testfall überprüft.“
  ⏸️ 1,5s Pause

━━━ Szene 4: Abschluss ━━━
  → Warte 2s (auf dem Endbildschirm verweilen)
  🎙️ „Und das war’s – Ihr erster Testfall ist fertig.“
  ⏸️ 1,5s Pause

Gesamtdauer geschätzt: ~90 Sekunden

Mit dem Benutzer iterieren:

• „Möchten Sie Szenen hinzufügen/entfernen?“
• „Soll das Tempo schneller oder langsamer sein?“
• „Würden Sie Erzähltexte ändern?“
• „Möchten Sie die Reihenfolge umstellen?“

Schritt 5: Speichern & Übergabe

Nach Genehmigung:

1. Skript-JSON speichern unter workspace/<datum>/demo-skript-<name>.json
2. Lesbare Version speichern unter workspace/<datum>/demo-skript-<name>.md
3. Dem Benutzer mitteilen: „Skript fertig! Führen Sie /record-demo aus, um es aufzunehmen, oder ich kann jetzt mit der Aufnahme beginnen.“

Aktionsreferenz für Skripte

10 unterstützte Aktionen: navigate, click, type, select, scroll, hover, wait, screenshot, drag, keyboard.

5 Highlight-Stile: pulse (Pulsieren), glow (Glühen), arrow (Pfeil), dim-others (Andere abdunkeln), zoom (Vergrößern) – werden per CSS/JS eingefügt.

Vollständige Referenz mit Feldern und Beispielen in references/skript-format.md.

Richtlinien für die Erzählung

Gute Erzählung:

• Kurze Sätze (unter 15 Wörter)
• Präsens, aktive Stimme („Klicken Sie auf Erstellen“ nicht „Wir werden auf den Erstellen-Button klicken“)
• Beschreiben, WAS passiert UND WARUM („Fügen Sie eine Beschreibung hinzu, damit Ihr Team weiß, was getestet werden soll“)
• Nicht das Offensichtliche erzählen („Ich bewege meinen Cursor zu...“ – nein)
• Pausenlänge an die Erzähllänge anpassen (längere Erzählung = längere Pause)

Temporegeln:

• Erste Szene: längere Pausen (Zuschauer orientiert sich)
• Mittlere Szenen: moderate Pausen
• Letzte Szene: 2–3 Sekunden auf dem Endzustand verweilen
• Nach dem Tippen: kurze Pause, damit der Zuschauer lesen kann
• Nach Seitennavigation: warten auf Laden + 1s, damit der Zuschauer scannen kann

Ton nach Zielgruppe:

• Interessenten: Fokus auf Nutzen, einfach halten, Fachjargon vermeiden
• Entwickler: technische Begriffe erlaubt, Konfiguration zeigen, APIs erwähnen
• Intern: kann lässiger sein, Teamkonventionen referenzieren

Tipps für großartige Demos

1. Mit Daten starten – Leere App nicht demonstrieren. Testdaten bereitstellen.
2. Den Happy Path zeigen – Randfälle für die Dokumentation aufheben, nicht für Demos.
3. Ein Feature pro Video – 90-sekündiges, fokussiertes Video > 10-minütige Tour.
4. Mit dem Ergebnis enden – Das Erstellte/Abgeschlossene zeigen, kein Menü.
5. Dinge realistisch benennen – „Anmeldung mit gültigen Anmeldedaten“ > „Test 1“.
6. UI aufräumen – Nicht benötigte Tabs schließen, Entwicklertools ausblenden, sauberes Browserprofil verwenden.