Mastra Demo Skill
Erstellen Sie professionelle Produkt-Demo-Videos durch die Kombination von:
- Browser-Automatisierung zur GIF-Aufzeichnung (über claude-in-chrome MCP)
- ElevenLabs-Sprachausgabenerstellung
- Remotion-Videokomposition
Befehle
| Befehl | Zweck |
|---|---|
/mastra-demo:init <name> | Neues Demo-Projekt aus Vorlagen erstellen |
/mastra-demo:script | DEMO_SCRIPT.md generieren oder validieren |
/mastra-demo:record | Browser-Aktionen als GIFs aufzeichnen |
/mastra-demo:audio | Sprachausgaben über ElevenLabs generieren |
/mastra-demo:compose | Remotion-Komposition erstellen |
/mastra-demo:render | Finales Video exportieren |
/mastra-demo:status | Fortschritt und nächste Schritte anzeigen |
Schnellstart
# 1. Neues Demo-Projekt erstellen
/mastra-demo:init my-awesome-demo
# 2. DEMO_SCRIPT.md mit Ihrem Inhalt bearbeiten (oder interaktiv generieren)
/mastra-demo:script
# 3. Browser-GIFs für jedes Segment aufzeichnen
/mastra-demo:record
# 4. Sprachausgaben generieren
/mastra-demo:audio
# 5. Videokomposition erstellen
/mastra-demo:compose
# 6. Finales Video rendern
/mastra-demo:render
Voraussetzungen
- claude-in-chrome MCP: Browser-Automatisierungserweiterung für GIF-Aufzeichnung
- ElevenLabs API-Schlüssel: Für die Sprachausgabenerstellung
- Node.js 18+: Für Remotion
- ffprobe: Zur Audio-Dauererkennung (im Lieferumfang von ffmpeg)
Projektstruktur
Von diesem Skill erstellte Demo-Projekte haben diese Struktur:
my-demo/
├── .env # ELEVENLABS_API_KEY
├── .mastra-demo-state.json # Ausführungsstatus
├── DEMO_SCRIPT.md # Skript mit Segmenten
├── package.json # Remotion-Abhängigkeiten
├── public/ # Assets (GIFs, Audio)
│ ├── segment-01.gif
│ ├── segment-01.mp3
│ └── ...
├── out/ # Gerenderte Ausgabe
│ └── demo.mp4
└── src/
├── Root.tsx
├── DemoVideo.tsx
└── scenes/
Skript-Format
DEMO_SCRIPT.md definiert Ihre Demo:
# Demo: Feature-Name
## Erzählung
Schreiben Sie zuerst die vollständige Geschichte als zusammenhängenden Prosa-Text.
Dies gewährleistet einen natürlichen Fluss über die Segmente hinweg.
## Einstellungen
fps: 30
voice: Daniel
## Titel
text: "Feature-Name"
subtitle: "Slogan"
duration: 5s
## Segmente
### segment-01-einleitung
url: http://localhost:4111
voiceover: |
Dies ist die einleitende Erzählung, die
natürlich mit der obigen Erzählung verbunden ist.
actions:
- navigate: http://localhost:4111
- wait: 2s
- find: "Anmelden-Button"
- click: gefundenes Element
## Outro
heading: "Los geht's"
command: "npx create-mastra@latest"
links:
- mastra.ai/docs
Erzählfluss
Der Schlüssel zu großartigen Demos ist der Erzählfluss. Auch wenn wir einzelne GIFs und Audiosegmente aufnehmen, muss die Sprachausgabe eine kohärente Geschichte erzählen.
Gute Übergänge:
- "Nachdem wir nun eingeloggt sind..."
- "Hier wird es interessant..."
- "Zurück im Mastra Studio, der Unterschied ist sofort spürbar..."
Schlechte Muster:
- Abrupte Segmentstarts ohne Kontext
- Aufzählungs-ähnliche Erzählung
- Keine Verbindung zwischen den Segmenten
Browser-Aktionen
Verfügbare Aktionen für die Aufzeichnung:
| Aktion | Format | Beispiel |
|---|---|---|
| Navigieren | navigate: <url> | navigate: http://localhost:4111 |
| Warten | wait: <time> | wait: 2s |
| Finden | find: "<query>" | find: "Anmelden-Button" |
| Klicken | click: <target> | click: gefundenes Element |
| Tippen | type: "<text>" | type: "Hallo Welt" |
| Scrollen | scroll: <dir> | scroll: down |
Spracheinstellungen
Empfohlene ElevenLabs-Einstellungen für professionelle Demos:
- Stimme: Daniel, Brian, George oder Chris
- Modell: eleven_multilingual_v2
- Stabilität: 0.5
- Ähnlichkeitsverstärkung: 0.75
Referenzen
Ausführliche Dokumentation finden Sie hier:
references/script-format-reference.md- Vollständiges DEMO_SCRIPT.md-Formatreferences/gif-recording-reference.md- Browser-Automatisierungsmusterreferences/audio-generation-reference.md- ElevenLabs-Integration
Vorlagen
Das templates/-Verzeichnis enthält Remotion-Projektdateien:
- React-Komponenten für Szenen (Titel, DemoGif, Outro)
- Browser-Frame-Komponente
- Skript zur Audiogenerierung
- Paketkonfiguration