Communitygithub.com

tin-computer/tin

Ein Live-Produkt in Phone-Größe aufnehmen und ein kommentiertes 9:16-Demo-Video rendern.

Was ist tin?

Dieses Skill ermöglicht die automatisierte Erstellung hochwertiger Produkt-Demo-Videos im 9:16-Format (Hochformat) direkt aus einer Produkt-URL. Es gibt keine Echtzeit-Bildschirmaufnahme: Stattdessen werden statische Keyframes erfasst, aus denen der Renderer flüssige Scroll-, Tipp-, Zoom- und Caption-Animationen synthetisiert. Das Tool `tin-studio` orchestriert den gesamten Workflow – von der Story-Planung über das Aufnehmen von Screenshots und die Sprachsynthese bis hin zum finalen Render. Es unterstützt Entwickler und Produktteams dabei, schnell konsistente, markenkonforme Demos ohne manuelle Videobearbeitung zu erstellen. Plattform: Claude Code (als Skill), verwendbar in CLI-Umgebungen mit `tin-studio`. Die finale Ausgabe ist eine MP4-Datei mit 1080x1920 Auflösung und Audiospur.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/tin-computer/tin/tree/HEAD/codex_procedures/creative.product_demo/skills/product-demo-video

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Verfahren für Produkt-Demo-Videos

Alles geschieht über tin-studio (führe tin-studio help aus). Arbeite im Studio-Arbeitsverzeichnis, das von der Runtime bereitgestellt wird (nenne es WORK; API-Läufe verwenden /home/tin-work/studio, historische OAuth-Läufe verwenden /home/user/.tin-lite/studio); lediglich die fertige MP4 wird in das Projekt-Checkout gelegt. Es gibt keine Echtzeit-Bildschirmaufnahme: Du erfasst stabile Keyframes und der Renderer synthetisiert die Scroll-, Tipp-, Zoom- und Caption-Bewegung, was das Ergebnis glatt macht.

1. Geschichte planen

  1. Lese wiki/INDEX.md (## Produkt, Feature-Map, Positionierung). Lese angle und notes.
  2. Führe tin-studio inspect <product_url> WORK/inspect aus. Lese das JSON: headings mit ihren scrollY, actions mit fertigen selectors (bevorzuge solche mit inHeader: true für die Navigation), text, docHeight. Öffne WORK/inspect/inspect.png und WORK/inspect/inspect-full.png mit deinem Bildbetrachter und notiere, was jeder Bildschirm zeigt. Untersuche ein oder zwei weitere Seiten, falls die Geschichte sie benötigt (Dokumentation, Preise).
  3. Entscheide das Format: script-format.md beschreibt: einen Hook von höchstens sieben Wörtern, der das Problem benennt (angle falls angegeben), dann fünf bis sieben Schritte. Jeder Schritt ist ein sichtbarer Moment mit einer Sprachzeile von höchstens vierzehn Wörtern und einer Caption von höchstens fünf Wörtern. Markiere genau ein *Wort* pro Caption und im Hook. Der letzte Schritt landet auf dem Call-to-Action, den die Seite tatsächlich anbietet (Testversion, Preise, Installation) mit einer [warm]-Zeile. Insgesamt maximal 75 Wörter Rede.
  4. Behauptungen stammen aus dem Seitentext oder dem Projektgedächtnis; Zahlen müssen im Schritt, der sie nennt, auf dem Bildschirm sichtbar sein.
  5. Schreibe jede Zeile, als würde ein Creator mit dem Betrachter sprechen: Präsens, zweite Person, die Sache selbst. Erzähle niemals die Seite ("die Seite zeigt", "dieser Abschnitt listet", "das Beispiel der Site"); sage, was es für sie bedeutet ("dein Agent bekommt seine eigene Nummer"). Schreibe Beträge und Anzahlen als Wörter und behalte Markennamen innerhalb eines vollständigen Satzes.

2. Schreiben und aufnehmen

  1. Schreibe WORK/script.json im Format aus script-format.md.
  2. Führe tin-studio capture WORK/script.json WORK/out aus. Öffne jedes WORK/out/frames/kNNN.png mit deinem Bildbetrachter und prüfe: die Seite wurde geladen (kein Leerbild, kein Fehler, kein Interstitial); kein Cookie-Banner oder Popup bedeckt den Inhalt (füge einen frühen click-Schritt auf dessen Schließen-Button ein, falls eines erscheint, oder wähle eine Seite ohne solches); jeder Scroll landet dort, wo die Caption es erwartet; jeder Klick traf das beabsichtigte Element (der click-Keyframe zeigt die neue Seite). Ein falscher Keyframe ist ein Skript-Fix: besserer selector aus inspect, scrollTo, ein größeres settleMs, oder eine andere Seite. Nimm erneut auf, bis jeder Keyframe korrekt ist.

3. Stimme

  1. Führe tin-studio voice WORK/out --voice <voice> --language "<language>" aus. Füge [excited] auf der Hook-Zeile und [warm] auf der letzten ein; ansonsten einfache Sätze. Jeder Lauf gibt die Clip-Länge pro Schritt aus; wenn ein Clip länger als fünf Sekunden ist, kürze diese Zeile.
  2. Die Stimme ist pro Lauf begrenzt (24 Zeilen, 3000 Zeichen). Ein erneuter Lauf behält unveränderte Zeilen bei, also bearbeite eine Zeile in WORK/script.json, eine erneute Aufnahme ist nicht nötig, und führe voice erneut aus.
  3. Eine Zeile, die der Anbieter ablehnt, wird als REFUSED mit dem Grund gemeldet, und die anderen Zeilen bleiben erhalten. Ein content_policy_violation ist der undurchsichtige Textprüfer des Anbieters, der fehlschlägt: Führe zuerst voice erneut aus, ohne ein eigenes --style (der Standardstil besteht bekanntermaßen den Test), dann schreibe diese eine Zeile mit einfacheren Worten um und führe voice erneut aus. Sende niemals eine unveränderte abgelehnte Zeile erneut und verwende nicht mehr als zwei Umschreibungen für eine Zeile; lasse sie fallen und lasse die Caption den Schritt tragen.

4. Vorschau, rendern, prüfen

  1. Charakter: Wenn character gesetzt ist, lautet die Datei /home/user/project/characters/<character>.svg; führe zuerst tin-studio check darauf aus. Wenn sie fehlt oder abgelehnt wird, rendere ohne sie und teile dies in der Nachricht mit.
  2. Zeige eine Vorschau von drei Frames vor dem vollständigen Render (Hook, ein mittlerer Scroll, der letzte Schritt): tin-studio frame WORK/out WORK/p1.png --at 1.5 --bg <backdrop> [--character <svg>], und nochmals bei etwa der halben Gesamtlänge und am Ende. Betrachte sie: Captions lesbar und zentriert, das Gesicht des Charakters sichtbar und bedeckt nicht die Caption, die Telefonkarte zeigt den richtigen Bildschirm, Hintergrund harmoniert nicht.
  3. Rendern: tin-studio render WORK/out WORK/<slug>.mp4 --bg <backdrop> [--character <svg>]. Es gibt die Dauer aus. Dann muss tin-studio check WORK/<slug>.mp4 OK ausgeben und tin-studio probe sollte 1080x1920 mit einem Audiostream anzeigen.
  4. Länger als 40 Sekunden: Entferne einen Schritt oder kürze Zeilen, führe voice erneut aus, rendere erneut.

5. Ausliefern

Kopiere die geprüfte MP4 in den deklarierten Ausgabepfad und nichts weiter. Die letzte Nachricht ist das Storyboard: Hook, dann pro Schritt die Caption, die Sprachzeile und was auf dem Bildschirm ist; die Gesamtdauer, verwendete Stimme, Hintergrund und Charakter; sowie alle Behauptungen, die du abgeschwächt hast, weil die Seite sie nicht unterstützte.

Regeln

Melde dich niemals an, logge dich ein, fülle ein Formular aus oder drücke auf Kaufen, Senden, Löschen, Einladen oder Kontakt. Verwende kein Konto. Erfasse keine Seiten hinter einem Login. Bearbeite das DOM der Seite nicht, um einen Zustand vorzutäuschen. Erstelle keine Datei im Projekt-Checkout außer dem deklarierten Ausgabepfad.

Verwandte Skills