Demo-Film

Was macht Demo-Film?

scripts/demo filmt eine Web-App und schreibt ihr Korpus nach ~/demo-reels-out/<workspace>/ (DEMO_OUT_ROOT verschiebt das übergeordnete Verzeichnis, DEMO_OUT benennt ein einzelnes Verzeichnis eines Durchlaufs): pro Szene eine MP4 mit Sprachaufnahme, ein Poster, Retina-Standbilder, plus full-tour.mp4, manifest.json und index.html. Alles lokal. Die Engine läuft aus diesem Skill; nichts wird in die zu filmende App installiert.

Nicht verhandelbar

Jeder dieser Punkte kostet einen Durchlauf oder die Geduld eines Benutzers.

1. Ein gebundener Build, niemals ein Dev-Server. Sein Modulgraph gehört demjenigen, der den Quellcode bearbeitet. Kopieren Sie ihn an einen privaten Ort und überprüfen Sie seine API-Basis durch Lesen des Bundles. Eine URL ohne Repository dahinter ist der Modus site; eine URL auf localhost ist ein Dev-Server und wird nie gefilmt.
2. Im Modus build jede Anfrage prozessintern mocken und die Uhr anhalten. Ein Korpus wird veröffentlicht, und ein echtes Konto veröffentlicht echte Adressen von Personen. Der Modus site gibt beides wissentlich auf: nur öffentliche Seiten.
3. Besitzen Sie Ihren Port und Ihr Ausgabeverzeichnis. Das Studio weigert sich, einen Server zu übernehmen, den es nicht gestartet hat. Niemals pkill nach Muster.
4. 1080p60 Video, 2x Standbilder. Das sind separate Einstellungen. 4K-Video ruckelt, weil der Durchsatz ein festes Budget an Pixeln pro Sekunde ist.
5. Führe die Geste aus, dann spreche den Text, während auf das Ergebnis gezoomt wird. Ein Motiv pro Zeile. Niemals den Text sprechen, bevor das Motiv existiert. Wenn die App einen eigenen Timer hat – ein Rückgängig-Fenster, ein Toast – wird die Geste innerhalb des Timers ausgeführt und die Worte danach, sonst zeigt der Film eine Funktion, die nicht funktioniert.
6. Eine Szene, dann anhalten und nachfragen (Schritt 8). Das hat vier Fehler erfasst, bevor sechsundzwanzig weitere Szenen gefilmt wurden.
7. Lies das PNG, jedes Mal. Eine Szene, die besteht, während sie das Falsche einrahmt, ist ein Fehler, und nur ein Blick auf das Standbild erkennt ihn.
8. Nichts ist endgültig, bis sie es sagen. Jede Anmerkung zu den Worten, dem Bildausschnitt, dem Tempo, was gezeigt wird oder der Stimme ist ein erneuter Dreh, keine Verhandlung: Ändern und erneut filmen. Sie können nicht sehen, was Sie sehen, daher sind „zu lang", „mehr reinzoomen" und „weniger zoomen" vollständige Anweisungen, und eine Szene ist günstig zweimal zu drehen.

Arbeitsablauf

1. Wählen Sie den Modus aus dem, was Ihnen gegeben wurde. Fragen Sie nicht. Eine http(s)-URL auf einem öffentlichen Host ist site, Arbeitsbereich ~/.shipdemo/<host>/. Eine URL auf localhost oder einer privaten Adresse ist ein Dev-Server: Finden Sie das Repository dahinter und behandeln Sie die Anfrage als dieses Repository. Keine URL bedeutet das Repository, in dem Sie sich befinden, also gehen Sie nach oben und suchen Sie nach einer Web-App (einer package.json mit einem Build-Skript neben einer Vite-, React Router-, Next-, Astro-, SvelteKit- oder Remix-Konfiguration). Genau eine ist build; bei mehreren fragen Sie, welche; bei keiner fragen Sie nach einer URL oder einem Pfad. Ein Arbeitsbereich, dessen .origin bereits dieses Repository nennt, wird wiederverwendet, nicht neu erstellt. Sagen Sie den Modus und den Arbeitsbereichspfad in einer Zeile und machen Sie weiter.
2. scripts/doctor.sh, dann richten Sie sich ein, bevor Sie den Benutzer um etwas anderes bitten. Sie haben einen Skill installiert; sie haben sich nicht angemeldet, drei Skripte auszuführen. Sagen Sie, was fehlt, in einer Zeile, sagen Sie, was Sie vorschlagen zu installieren und wie groß es ungefähr ist, und führen Sie es aus, sobald der Benutzer zustimmt. scripts/install.sh deckt die Engine und Chromium ab (etwa 250 MB) und installiert auch ffmpeg, wo ein Paketmanager es erlaubt; scripts/install-voice.sh ist die Stimme (~350 MB), und stumm filmen ist eine gute Antwort, wenn der Benutzer das vorzieht. Installieren Sie niemals etwas ohne zu fragen, und geben Sie niemals einen Arztbericht zur Interpretation weiter. Zwei Dinge wird es nicht tun, und Sie auch nicht: Ihren Node aktualisieren, weil zu wissen, welches Tool es besitzt, Sache des Benutzers ist, und sudo ausführen, weil eine Passwortabfrage in einem Skript, das niemand beobachtet, einfach hängt. In beiden Fällen gibt das Skript den einen Befehl aus und Sie geben ihn weiter.
3. Erkunden, nichts schreiben. site: Öffnen Sie die URL und lesen Sie sie, um zu erfahren, wofür die Seite ist, die drei Dinge, die sich zu zeigen lohnen, und was stabil genug ist, um darauf zu zeigen. Wenn sie auf einer Anmeldeseite landet, anhalten: Eine angemeldete App wird von ihrem Repository aus gefilmt, also fragen Sie danach oder nach einer öffentlichen URL. build: Der Build-Befehl, wörtlich aus package.json kopiert; das Ausgabeverzeichnis aus der Konfiguration des Frameworks; ein absoluter API-Host in .env* (er kommt in build.forbid); der Schlüssel, den das Theme-Boot-Skript liest; eine vorhandene Fixture-API oder MSW-Handler; data-testid-Dichte; Routen ohne Anmeldedaten.
4. scripts/scaffold.mjs <appRoot>, oder scripts/scaffold.mjs --site <url>. Keines von beiden schreibt etwas in die App.
5. Füllen Sie die demo.config.ts des Arbeitsbereichs aus. Ein noch unbekanntes Pflichtfeld bedeutet, dass die Erkundung noch nicht abgeschlossen ist. config.md
6. Nur build: Schreiben Sie mock.ts und seed/. Verwenden Sie die eigenen Daten-Fixtures des Repositorys, wo es sie hat, aber niemals eine Datei, die @playwright/test importiert: Zwei Kopien in einem Durchlauf sind ein Fehler, den Playwright ablehnt, und er scheitert am gesamten Korpus, nicht an der einen Szene, die es verursacht hat. Dann DEMO_VOICE=0 scripts/demo --grep smoke. Verwenden Sie die Fixture-API des Repositorys, falls vorhanden (mocking.md). Lesen Sie das Standbild: Angemeldet, Seed-Daten, richtiges Theme, keine Anmeldeseite. Lesen Sie die Capture-Zeile. Korrigieren Sie, bis beides stimmt, dann schreiben Sie demo/ui.ts nur mit dem, was der Smoke-Lauf bewiesen hat.
7. Schreiben Sie zuerst das Skript. Füllen Sie die profile.json des Arbeitsbereichs (kopieren Sie template/profile.json; Produkt, Zielgruppe, Abschlusszeile, verbotene Wörter), dann schreiben Sie jede Zeile nach script.md: Aufhänger, Schritte, Nutzen, Abschluss. Der Aufhänger kommt auch in hooks.json für die Varianten. Filmen Sie das, worum sie gebeten haben, im Umfang, in dem sie darum gebeten haben. Eine benannte Funktion ist eine Szene: Schreiben Sie sie, filmen Sie sie, übergeben Sie sie. Antworten Sie nicht auf „nimm die Suche auf der Startseite auf" mit einem Vorschlag für zehn Szenen, und weiten Sie die Anfrage nicht stillschweigend aus, weil das Produkt mehr enthält. Nur wenn die Anfrage das gesamte Produkt ist, schlagen Sie 6 bis 10 Szenen vor, jede mit einem Titel und einem einzeiligen Werbetext in Tour-Reihenfolge, und fragen Sie, welche zuerst gefilmt werden sollen.
8. STOPPEN. Filmen Sie diese eine Szene mit Stimme. Überprüfen Sie, ob die gesprochene Anzahl mit den say-Aufrufen übereinstimmt, nichts überzogen ist, die Rate gehalten wurde. Lesen Sie jedes Standbild. Geben Sie dem Benutzer den MP4-Pfad und fragen Sie nach der Register der Schreibe, der Zoomstärke, dem Tempo und der Stimme. Schreiben Sie nichts anderes, bis sie antworten.
9. Dann Stapel von drei oder vier über --grep; das Manifest wird zusammengeführt. Lesen Sie die Standbilder nach jedem Stapel. DEMO_BUILD=0 scripts/demo überspringt den Neubau beim Iterieren an einer Szene – zwanzig Sekunden statt vier Minuten; lassen Sie es für den Durchlauf weg, der das Korpus produziert.
10. Vollständiger Durchlauf mit DEMO_CAPTIONS=1 DEMO_TRACE_FRAMES=1, dann scripts/check.mjs <out> und <out>/index.html öffnen. Berichten Sie die Capture-Tabelle, alle langsamen Clips und jedes Flag, das die Überprüfungen aufwerfen.
11. Varianten. Fragen Sie, welche sie möchten, es sei denn, sie haben gesagt: reel, wide-phone, wide-laptop, wide-laptop-zoom, web oder all (scripts/variants.mjs --list beschreibt jede). Dann scripts/variants.mjs <out> --only <list>. Telefon-Voreinstellungen nehmen Hochformat-Aufnahmen und Laptop-Voreinstellungen Querformat, also filmen Sie beide Größen, wenn beide gewünscht sind. Lesen Sie ein Poster pro Variante, bevor Sie sie übergeben.

Eine Szene

scene('tasks', { title: 'Your to-dos, beside your calendar', blurb: '...' },
  async ({ actor, page, shot }) => {
    await actor.click(page.getByRole('radio', { name: 'Today' }));
    await actor.settle();
    await actor.spotlight(
      row('Send Sam the feedback'),
      'And this one is from yesterday that I never got to, so it is flagged.',
      { scale: 1.8, stay: true }
    );
    await shot('overdue');
    await actor.unfocus();
  });

spotlight nimmt die Erzählmarke entgegen, bewegt dann Kamera und Cursor über die Eröffnungsworte der Zeile. Skalierung nach Motiv: Panel ~1,4, Zeile ~1,7, einzelnes Steuerelement ~2. Eine Zeile über den ganzen Bildschirm bekommt ein einfaches say und keinen Zoom. unfocus ist eher ein Hinweis als eine Bewegung: Die Kamera kommt nur heraus, wenn etwas eine Weitwinkelansicht erfordert, also gleiten aufeinanderfolgende Beats über dieselbe Region statt zu hüpfen. scenes.md · narration.md

Niemals

Cloud-TTS (der Film zeigt private Daten). Playwrights recordVideo (keine Kontrolle über Rate, Größe oder Start; der Rekorder ersetzt es). 4K als Standard. Musik, Introkarten oder Überblendungen. Szenen, die aus einem Routen-Crawl generiert werden: Eine Szene ist Choreografie mit einem Zweck. Wiederholungen: Eine wiederholte Szene ist ein anderer Film.

Untertitel, Überprüfungen und Varianten

Untertitel sind für alles aktiviert, das veröffentlicht werden soll (DEMO_CAPTIONS=1): .srt, .vtt, .lines.json und eine .captioned.mp4, aus dem Skript selbst geschnitten, also stimmen sie wörtlich mit der Stimme überein. Eingebrannte Untertitel sitzen unten, über den Player-Steuerelementen erhöht (DEMO_CAPTION_MARGIN überschreibt; niemals oben).

scripts/check.mjs führt drei Überprüfungen durch: Stimme (jede Zeile transkribiert und mit ihrem Skript verglichen), Bildschirm (jede halbe Sekunde auf die neverOnScreen-Worte des Profils gelesen, dann alles in Rot Gezeichnete) und Frames (langsame Lücken). Ein fehlendes Werkzeug wird mit dem Befehl zur Installation übersprungen (scripts/install-checks.sh). Rot, das dorthin gehört, wie ein überfälliges Abzeichen, wird ebenfalls aufgelistet: Lesen Sie die Liste, zählen Sie es nicht.

scripts/variants.mjs liest variants/presets.json. Eine neue Variante ist ein neuer Eintrag dort: Leinwand, wo die App sitzt, wo der Aufhänger und die Untertitel hingehören, und zoom, wenn sie auf Highlights hereinzoomen soll. Nichts wird neu gefilmt; die Originale werden nie berührt.

Auch

DEMO_VOICE_VARIANTS=am_michael,bf_emma mischt denselben Take in mehreren Stimmen (<scene>.<voice>.mp4), um eine Stimme vorzuspielen, ohne neu zu filmen.

capture.md vor jeder Änderung einer Capture-Nummer. runs.md für Builds, Isolation und das Manifest. troubleshooting.md wenn ein Durchlauf stirbt oder eine Aufnahme falsch aussieht. Die Engine läuft aus diesem Skill, also erreicht eine Korrektur in engine/ jedes Projekt auf dem Rechner auf einmal: bearbeiten Sie es dort, und nichts muss verbreitet werden.