Le design lead de X open-source stageshow : un agent qui dessine et anime des démos d'interfaces

Si vous avez déjà demandé à un agent de dessiner une interface, vous connaissez l'effet : tout est là, les boutons fonctionnent, mais le résultat est pénible à regarder. Pas de sens du style, pas de hiérarchie, pas ce que les designers appellent le goût. Benji Taylor, responsable du design chez X et SpaceXAI, a tenté de transmettre ce goût à l'agent sous forme d'instructions. Le résultat, c'est le skill stageshow, désormais disponible en open source.

De quoi s'agit-il et pourquoi

Stageshow apprend à l'agent à produire du faux UI, c'est-à-dire des interfaces « factices ». Ce sont de belles démos de produit destinées aux landing pages, aux vidéos promo et aux infographies. Nul besoin d'une vraie application : l'agent dessine lui-même l'écran et l'anime lui-même. D'après l'auteur, les exemples du post ont été réalisés sans enregistrement d'écran. Tout a été dessiné et animé par l'agent.

Le problème est familier à tout product manager et à tout marketeur. Les captures d'écran deviennent obsolètes à chaque release, l'enregistrement d'écran paraît brut, et personne n'affecte un designer à chaque illustration d'article. Si l'agent sait assembler des scènes soignées à partir d'une description, ce segment étroit du travail peut lui être confié.

Comment ça fonctionne

La vraie valeur du skill réside dans le processus, pas dans les belles images. L'agent suit sept étapes.

1. Choisir le format : statique ou animé, boucle ou lecture unique, dimensions.
2. Choisir l'apparence : clair, sombre, blueprint ou glass, ainsi que le vrai chrome et les icônes du produit.
3. Imaginer un scénario de 3 à 5 scènes.
4. Prendre l'exemple de référence le plus proche et l'adapter.
5. Assembler l'écran : quelques lignes réelles, le reste en éléments factices.
6. Régler l'animation pour que les scènes se chevauchent et que la boucle soit sans raccord visible.
7. Enregistrer la démo par script, examiner chaque image, vérifier la largeur d'un téléphone et corriger les erreurs.

Plusieurs choix d'ingénierie sont judicieux. L'agent ne dessine pas à partir de zéro mais s'appuie sur une référence, ce qui évite un design aléatoire. La règle « quelques lignes réelles, le reste en éléments factices » empêche de surcharger l'écran de détails. Quant à la dernière étape, elle crée une boucle de rétroaction : l'agent examine lui-même le résultat image par image et vérifie la largeur mobile, comme le ferait un humain attentif.

Ce qu'il sait faire d'autre

La liste des fonctionnalités est plutôt pratique. Le skill dessine des fenêtres de navigateur et d'applications, des téléphones, et prend en charge le style macOS 26. Il propose plusieurs types de curseur : il trouve lui-même les éléments par leur nom et change de forme au survol. Il y a aussi une caméra qui zoome sur le fragment voulu, ainsi que des annotations et des grilles bento. Parmi les exemples figurent les styles de Linear, Slack, Figma, Notion et d'autres produits.

La gestion des thèmes mérite une mention à part. Les tokens de votre design system passent par les props : la scène s'écrit une seule fois, et c'est le thème qui change les couleurs. Pour une équipe, cela signifie qu'un même scénario peut sortir aux couleurs de la marque, en version sombre ou en versions adaptées à différents segments, sans refaire l'animation.

Comment l'essayer

L'installation tient en une commande :

npx skills add benjitaylor/skills --skill stageshow

L'auteur du post sur la chaîne Tips AI explique qu'il utilise le skill pour créer des infographies destinées à des articles SEO sur les fonctionnalités de son application. C'est un bon exemple de cas d'usage concret : le contenu est requis régulièrement, et le visuel devient souvent le goulot d'étranglement.

Limites et conclusion

Il faut garder des attentes réalistes. Le skill apporte à l'agent de la discipline et un ensemble de références, mais ne remplace pas un designer. La qualité du résultat dépend du modèle qui exécute les instructions et de la ressemblance de votre produit avec les exemples. Pour une identité visuelle atypique, il faudra configurer les thèmes et, selon toute vraisemblance, compléter les références avec les vôtres. De plus, un faux UI n'est par définition pas une vraie interface. Pour les tests, la documentation et les captures ayant une valeur juridique, un enregistrement fidèle est indispensable, et en marketing, il faut garder à l'esprit que l'utilisateur ne verra pas exactement la même chose que sur l'image.

La conclusion pratique est simple. Si vous réalisez des landing pages, des contenus promo ou des contenus sur les fonctionnalités de votre produit, installez le skill et testez-le sur une tâche. Il est encore plus utile d'en étudier la structure : format, apparence, scénario, référence, assemblage, animation, vérification. Cette recette du « goût sous forme de processus » peut se transposer à d'autres tâches pour lesquelles il manque à l'agent le sens du style.