Communitygithub.com

tin-computer/tin

Capturez un produit en direct au format téléphone et générez une vidéo de démonstration narrative au format 9:16.

Qu'est-ce que tin ?

Cette compétence automatisée, `tin-studio`, permet de créer des vidéos de démonstration produit au format vertical 9:16, comme vu sur les téléphones. Vous planifiez un storyboard, capturez des keyframes depuis des pages web réelles, générez une narration vocale, puis composez le tout en une vidéo MP4 fluide. Le processus évite l'enregistrement d'écran en temps réel : vous définissez des moments clés (défilement, clics, zooms) et le moteur de rendu synthétise les transitions, garantissant un résultat net et sans à-coups. Fonctionne avec n'importe quel site public (sans connexion ni formulaire) et est conçu pour les environnements d'exécution CLI comme ceux de Claude Code, Cursor ou Codex, où le répertoire de travail `tin-studio` est fourni.

Compatible avec~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

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Procédure de vidéo de démonstration produit

Tout se passe via tin-studio (exécutez tin-studio help). Travaillez dans le répertoire de travail Studio fourni par l'environnement d'exécution (appelez-le WORK ; les exécutions API utilisent /home/tin-work/studio, les exécutions OAuth historiques utilisent /home/user/.tin-lite/studio) ; seul le MP4 final va dans le projet. Il n'y a pas d'enregistrement d'écran en temps réel : vous capturez des keyframes stabilisées et le moteur de rendu synthétise le défilement, le tap, le zoom et le mouvement des sous-titres, d'où la fluidité du résultat.

1. Planifiez l'histoire

  1. Lisez wiki/INDEX.md (## Product, plan des fonctionnalités, positionnement). Lisez angle et notes.
  2. Exécutez tin-studio inspect <product_url> WORK/inspect. Lisez le JSON : headings avec leur scrollY, actions avec des selector prêts à l'emploi (préférez ceux avec inHeader: true pour la navigation), text, docHeight. Ouvrez WORK/inspect/inspect.png et WORK/inspect/inspect-full.png avec votre visualiseur d'images et notez ce que chaque écran montre. Inspectez une ou deux pages supplémentaires si l'histoire le nécessite (docs, tarifs).
  3. Décidez du format décrit par script-format.md : une accroche d'au maximum sept mots qui nomme le problème (angle si fourni), puis cinq à sept étapes. Chaque étape est un moment visible avec une ligne vocale d'au maximum quatorze mots et un sous-titre d'au maximum cinq mots. Marquez exactement un *mot* par sous-titre et dans l'accroche. La dernière étape aboutit à l'appel à l'action que la page propose réellement (essai, tarifs, installation) avec une ligne [warm]. Le discours total fait au maximum 75 mots.
  4. Les affirmations proviennent du texte de la page ou de la mémoire du projet ; les chiffres doivent être visibles à l'écran dans l'étape qui les énonce.
  5. Écrivez chaque ligne comme un créateur s'adressant au spectateur : présent, deuxième personne, la chose elle-même. Ne racontez jamais la page (« la page montre », « cette section liste », « l'exemple du site ») ; dites ce que cela signifie pour eux (« votre agent obtient son propre numéro »). Écrivez les montants et les décomptes en toutes lettres et conservez les noms de marque à l'intérieur d'une phrase complète.

2. Écrivez et capturez

  1. Écrivez WORK/script.json au format décrit dans script-format.md.
  2. Exécutez tin-studio capture WORK/script.json WORK/out. Ouvrez chaque WORK/out/frames/kNNN.png avec votre visualiseur d'images et vérifiez : la page s'est chargée (pas de blanc, pas d'erreur, pas d'interstitiel) ; aucune bannière de cookies ni popup ne couvre le contenu (ajoutez une étape click précoce sur son bouton de rejet si elle apparaît, ou choisissez une page sans). Chaque défilement atterrit là où le sous-titre attend ; chaque clic atteint l'élément visé (la keyframe click montre la nouvelle page). Une keyframe erronée est une correction de script : meilleur selector d'après l'inspection, scrollTo, un temps settleMs plus grand, ou une page différente. Recapturez jusqu'à ce que chaque keyframe soit correcte.

3. Voix

  1. Exécutez tin-studio voice WORK/out --voice <voice> --language "<language>". Ajoutez [excited] sur la ligne d'accroche et [warm] sur la dernière ; sinon, phrases simples. Chaque exécution affiche la durée du clip par étape ; si un clip dure plus de cinq secondes, raccourcissez cette ligne.
  2. La voix est limitée par exécution (24 lignes, 3000 caractères). Relancer conserve les lignes inchangées, donc modifiez une ligne dans WORK/script.json, la recapture n'est pas nécessaire, puis exécutez à nouveau voice.
  3. Une ligne refusée par le fournisseur est signalée comme REFUSED avec la raison et les autres lignes sont conservées. Un content_policy_violation est le vérificateur de texte opaque du fournisseur qui se déclenche à tort : exécutez d'abord voice à nouveau sans aucun --style de votre part (le style par défaut est connu pour passer), puis réécrivez cette ligne avec des termes plus simples et exécutez voice à nouveau. Ne renvoyez jamais une ligne refusée inchangée et ne passez jamais plus de deux réécritures sur une même ligne ; abandonnez-la et laissez le sous-titre porter l'étape.

4. Aperçu, rendu, vérification

  1. Personnage : lorsque character est défini, le fichier est /home/user/project/characters/<character>.svg ; exécutez d'abord tin-studio check dessus. S'il est manquant ou rejeté, effectuez le rendu sans lui et dites-le dans le message.
  2. Prévisualisez trois images avant le rendu complet (l'accroche, un défilement au milieu, l'étape finale) : tin-studio frame WORK/out WORK/p1.png --at 1.5 --bg <backdrop> [--character <svg>], et encore une fois à environ la moitié de la longueur totale et à la fin. Regardez-les : sous-titres lisibles et centrés, le visage du personnage visible et ne cachant pas le sous-titre, la carte téléphonique montrant le bon écran, l'arrière-plan non dissonant.
  3. Rendu : tin-studio render WORK/out WORK/<slug>.mp4 --bg <backdrop> [--character <svg>]. Il affiche la durée. Ensuite, tin-studio check WORK/<slug>.mp4 doit afficher OK et tin-studio probe doit montrer 1080x1920 avec un flux audio.
  4. Plus long que 40 secondes : supprimez une étape ou raccourcissez les lignes, relancez voice, refaites le rendu.

5. Livrez

Copiez le MP4 vérifié vers le chemin de sortie déclaré et rien d'autre. Le message final est le storyboard : l'accroche, puis pour chaque étape le sous-titre, la ligne vocale et ce qui est à l'écran ; la durée totale, la voix, l'arrière-plan et le personnage utilisés ; et toute affirmation que vous avez atténuée parce que la page ne la soutenait pas.

Règles

Ne vous inscrivez jamais, ne vous connectez jamais, ne remplissez pas de formulaire, n'appuyez pas sur acheter, envoyer, supprimer, inviter ou contacter. N'utilisez aucun compte. Ne capturez pas de pages nécessitant une connexion. Ne modifiez pas le DOM de la page pour simuler un état. Ne créez aucun fichier dans le projet en dehors du fichier de sortie déclaré.

Skills associés