Montrer plutôt que dire.

Q: Existe-t-il un éditeur visuel ?

Oui. La commande npx vistaro studio ouvre un éditeur visuel local sur la chronologie : aperçu en direct où l'on peut se déplacer, cibles choisies au clic, effets prédéfinis, étapes déplacées à la souris, boutons de vérification et d'export. Il enregistre dans le même vistaro.config.json que votre agent écrit, et rien ne quitte votre machine.

Vistaro est un outil en ligne de commande pour votre agent de code. L'agent écrit une copie HTML de l'écran de votre application et un script de clics, de saisie et de sous-titres ; Vistaro en fait des vidéos produit, des guides d'aide, des boucles marketing et des visites interactives, dans toutes les langues. Aucun enregistrement d'écran, et quand votre interface change, il les reconstruit.

Commencer Voir ce qu'il produit

Gratuit et open source
Tourne sur votre machine, sans clé d'API

demo/vistaro.config.json · la chronologie

{ "meta": { "title": "Draft a proposal response", "app": "Clarido" },
  "steps": [
    { "id": "progress", "time": "2.2s", "action": "highlight",
      "target": ".section-count",
      "title": "Check what is left",
      "subtitle": "Two of five sections are drafted." },

    { "id": "open-section", "time": "4.4s", "action": "click",
      "target": "#item-3", "title": "Open the section" },

    { "id": "draft", "time": "6.4s", "action": "type",
      "target": "#editor-type-target",
      "value": "We will ensure rigorous compliance…",
      "title": "Draft the response" },

    { "id": "zoom", "time": "9.6s", "action": "camera",
      "target": "#text-editor", "scale": 1.15 },

    { "id": "export", "time": "13.4s", "action": "highlight",
      "target": "#btn-export",
      "title": "Export when ready" }
  ] }

demo/index.html · l'écran

<header>
  <span class="section-count">
    2 of 5 sections drafted
  </span>
  <button id="btn-export">
    Export to Word
  </button>
</header>

<!-- le plan, l'éditeur, la
     note d'évaluation : du
     HTML et du CSS, écrits par
     l'agent d'après votre UI -->

Abrégé pour la lecture : 5 des 9 étapes de la chronologie, et le haut de l'écran. La démo française reprend la même chronologie avec un fichier de chaînes traduit. Les fichiers complets sont sur GitHub : la chronologie et l'écran. Chaque sélecteur de la chronologie pointe vers l'écran.

le prompt

Installez vistaro comme dépendance de développement (npm install --save-dev vistaro, puis npx playwright install chromium), lisez node_modules/vistaro/AGENTS.md et créez une démo produit de l'écran principal de l'application. Explorez ce que vistaro propose et utilisez les animations et les transitions appropriées. Affichez un curseur au besoin.

L'agent écrit les deux fichiers de l'onglet La source, les vérifie, puis fait le rendu de la démo.

Un seul prompt, tapé dans un agent de code depuis le dossier de l'application. Le résultat est un changement ordinaire dans votre dépôt, que vous relisez avant de le garder.

Une chronologie, tous les formats que votre équipe demande

À partir d'une seule chronologie, Vistaro produit une vidéo de démo, un guide d'aide, une boucle pour la page d'accueil, une visite interactive et toutes les langues, sur ordinateur comme sur téléphone. Demandez les formats dont vous avez besoin, quand vous en avez besoin.

Une vidéo de démo, prête à publier

Le curseur, les clics, la saisie, le zoom et les sous-titres sont dans la vidéo. Besoin d'une voix ? Écrivez une phrase de narration par étape et elle est lue par-dessus la vidéo. Cet exemple-ci est en anglais.

demo.mp4la vidéo
demo.vttles sous-titres, pour n'importe quel lecteur

Les étapes 2 et 3 d'un guide d'aide généré, en anglais : « Check what is left », avec le badge des sections rédigées mis en évidence, et « Open the section », avec l'élément du plan mis en évidence, chacune suivie de sa légende

Un article d'aide pas à pas

Chaque étape titrée devient une instruction numérotée avec sa propre capture d'écran, déjà mise en évidence et recadrée. Voici les étapes 2 et 3 du guide tiré de cette démo, en anglais. Le publier, c'est copier un dossier.

guide.mdpour votre site de documentation
guide.htmlune page autonome
guide.jsonpour votre propre centre d'aide

La dernière image de la boucle : la vue pipeline de Clarido répond à « Where is churn risk hiding? » avec un graphique à barres et 310 k$ récupérables ce trimestre

Boucle de 10 secondes

Lire · 10 s

Une courte boucle pour votre page d'accueil

Muette, en boucle, faite pour démarrer d'elle-même sur une page d'accueil ou dans une annonce de lancement. Elle se lance quand elle arrive à l'écran. Celle-ci montre une question résolue dans la vue pipeline de Clarido.

clip.mp4 · .webmpour le web
clip.gifpour les courriels et les README
embed.htmlà intégrer tel quel, joue à l'écran

Toutes les langues, même chorégraphie

La démo du haut de la page est la traduction de celle-ci, étape par étape. Seuls les mots changent : un fichier de chaînes et l'écran traduit. Les dates, les nombres et les devises suivent aussi la langue.

locales/fr/l'écran traduit
strings.fr.jsonles titres et les sous-titres

Voir tous les formats, sur ordinateur et téléphone (en anglais) Ouvrir la visite interactive complète

Votre agent fait le travail, vous relisez le diff

Vistaro est un outil en ligne de commande dont le manuel est écrit pour les agents de code. Vous demandez une fois ; la démo arrive dans votre dépôt comme n'importe quel autre changement.

Demandez à votre agent

Un seul prompt dans votre agent de code (Claude Code, OpenAI Codex ou Google Antigravity), depuis votre projet. L'agent installe Vistaro, lit son manuel et s'occupe du reste.
le prompt
```
Installez vistaro comme dépendance de développement (npm install --save-dev vistaro, puis npx playwright install chromium), lisez node_modules/vistaro/AGENTS.md et créez une démo produit de mon site.
```
L'agent l'installe avec npm install --save-dev vistaro ; Commencer donne les détails. Node 20.6 ou plus récent est requis.
Il écrit deux fichiers

Un écran qui reproduit votre interface, et une chronologie qui dit quoi faire et quand : cliquer ici, taper ceci, zoomer là, avec un sous-titre pour chaque étape.
Il vérifie son travail, puis produit tout

Avant le rendu, Vistaro rejoue la démo et signale ce qui cloche, comme un bouton absent de l'écran ou un zoom pointé sur du vide. L'agent corrige comme il corrigerait un test qui échoue. Quand votre interface change, redemandez : seules les démos touchées sont reconstruites.

votre dépôt, après un prompt

demo/
  index.html        l'écran
  vistaro.config.json  la chronologie
  locales/fr/       en français

demo.mp4 + .vtt     la vidéo
guide/              l'article d'aide
tour-out/           la visite

Seul le bloc du haut est de la source. Tout ce qui est en dessous est généré : personne ne retouche une vidéo à la main.

Vous préférez éditer à l'œil ? Ouvrez Studio.

Votre agent écrit la première version. Studio est un éditeur visuel local sur la même chronologie : parcourez un aperçu en direct, cliquez sur un élément pour le cibler, déplacez une étape dans le temps, puis vérifiez et exportez. Il enregistre dans le fichier de votre dépôt : il n'y a toujours qu'une seule source.

terminal

$ npx vistaro studio

Comment fonctionne Studio

Pourquoi pas un outil de capture d'écran ?

Arcade, Supademo, Storylane, Scribe et Tango enregistrent votre écran dans un éditeur. Vistaro garde la démo sous forme de source.

Question	Outils de capture	Vistaro
Ce que vous gardez	Des captures et des extraits dans l'éditeur d'un fournisseur	Deux fichiers texte dans votre propre dépôt
Quand l'interface change	Quelqu'un réenregistre tout	Demandez à votre agent ; seul ce qui a changé est reconstruit
Formats	Généralement un par outil	Vidéo, guide d'aide, boucle et visite à partir d'une chronologie
Langues	Un enregistrement par langue	Un fichier de chaînes par langue
Qui fait le travail	Vous, en cliquant dans l'application	Votre agent de code

Pour qui ce n'est pas fait : si vous voulez parcourir votre application une fois et placer des zones cliquables dans un éditeur, un outil de capture ira plus vite. (Vistaro a aussi un éditeur, Studio, mais il modifie une chronologie dans votre dépôt, pas un enregistrement.) Vistaro devient rentable quand les démos changent souvent, existent en plusieurs langues et vivent dans un dépôt où votre agent travaille déjà.

Questions

Autre chose ? Posez la question sur GitHub.

Faut-il une clé d'API, ou un LLM ?

Non. Vistaro fonctionne en local, sans clé ni compte. La réflexion se fait dans l'agent de code que vous utilisez déjà : il écrit les deux fichiers, Vistaro les vérifie et en fait le rendu. C'est aussi pour ça qu'il tourne en CI sans aucun secret.

Peut-il enregistrer notre vraie application, pas seulement une maquette ?

Oui. La même chronologie peut jouer dans votre vraie application : vrais chargements de page, session connectée, et une remise à zéro entre deux passes pour que les données enregistrées ne fassent pas échouer la seconde. Il peut aussi vous regarder parcourir un parcours une fois et rédiger la chronologie pour vous (expérimental).

Existe-t-il un éditeur visuel ?

Oui. La commande npx vistaro studio ouvre un éditeur visuel local sur la chronologie : aperçu en direct où l'on peut se déplacer, cibles choisies au clic, effets prédéfinis, étapes déplacées à la souris, boutons de vérification et d'export. Il enregistre dans le même vistaro.config.json que votre agent écrit, et rien ne quitte votre machine. Comment fonctionne Studio.

Peut-on garder privées les démos de fonctionnalités pas encore lancées ?

Oui, par défaut. Tout tourne sur votre machine ou dans votre propre CI. Rien n'est envoyé chez nous ni chez qui que ce soit.

Qu'est-ce qu'il faut pour le faire tourner ?

Node 20.6 ou plus récent sous macOS ou Linux (Windows n'est pas testé). Votre agent l'installe avec npm install --save-dev vistaro, puis npx playwright install chromium pour le navigateur qui sert à l'enregistrement (environ 150 Mo). ffmpeg est inclus. La narration est facultative : les voix d'OpenAI si une clé est définie, sinon la voix de macOS.

Votre prochaine démo tient en un prompt.

C'est gratuit et open source. Collez un prompt dans votre agent de code, puis relisez la démo qu'il produit comme n'importe quel autre changement.

Commencer

Une version hébergée, avec statistiques de visionnement, capture de prospects ou centre d'aide partagé, vous intéresserait ? Dites-nous à quoi elle vous servirait sur GitHub.