Opus 5.5, HyperFrames et ElevenLabs : documenter trois SaaS en vidéo
Mike Codeur
Sur un SaaS qui évolue vite, la documentation prend du retard : de nouveaux écrans arrivent avant leurs explications, et tourner une démonstration pour chaque langue devient coûteux. Mike a construit SaaS Motion Docs, un workflow qui part du produit pour générer de la documentation, des vidéos de démonstration et une aide contextualisée. Dans la vidéo, il le présente sur AgentsMail, VillaSlot et YouThumb, avec Opus 5.5, HyperFrames et ElevenLabs.
Partir du produit, pas d’une vidéo générique
La méthode commence par les prérequis du projet et son design system. Il faut ensuite examiner les écrans et décrire les actions que l’utilisateur peut réellement accomplir. Une vidéo utile ne doit pas inventer de fonctions ni montrer une interface sans rapport avec le produit : sa structure dépend de la documentation de l’écran concerné.
Produire une démonstration sans filmer l’interface
Le workflow utilise HyperFrames pour reconstruire des séquences d’interface en HTML avant le rendu vidéo. Cette approche convient aux explications répétables d’un produit : le contenu et la mise en scène peuvent être adaptés sans refaire une capture manuelle de chaque parcours. Ce n’est pas pour autant un remplacement universel du motion design créatif.
Localiser, alléger et intégrer
Le processus prévoit des versions françaises, anglaises et espagnoles, la compression des vidéos et leur placement au bon endroit : documentation, aide « ? » dans l’application et contenus associés. La voix off ElevenLabs complète les séquences. Une aide contextuelle est plus utile lorsqu’elle se trouve près de la fonctionnalité qu’elle explique que dans une liste isolée de vidéos.
| Étape | Entrée | Livrable à contrôler |
|---|---|---|
| Analyse | Écrans et design system | Fonctionnement documenté |
| Génération | Documentation par écran | Vidéo fidèle à l’interface |
| Localisation | Texte et séquences | Versions FR, EN, ES |
| Intégration | Produit et documentation | Aide accessible au bon endroit |
| Voix | Script localisé | Piste audio synchronisée |
Trois produits, un même principe
La fiche de production indique que le workflow a été lancé la même nuit sur AgentsMail, VillaSlot et YouThumb. Pour AgentsMail, elle documente notamment des vidéos intégrées à la documentation et des points d’aide dans les écrans. Les volumes et les besoins varient selon les produits ; l’objectif commun est de transformer une opération manuelle répétitive en un processus contrôlable. Vérifie toujours la fidélité des captures, des traductions et de l’aide intégrée avant publication.
Voir la méthode et récupérer le skill
La vidéo détaille les étapes et montre le prompt utilisé. Le skill SaaS Motion Docs est également disponible si tu veux étudier le workflow plutôt que reproduire seulement le rendu final.