Un outil open source convertit les captures d'écran en code

Aperçu de l'outil

Un outil open source capable de convertir des captures d'écran d'interfaces en code a déjà cumulé plus de 74 000 étoiles sur GitHub.

Fonctionnement

L'intelligence artificielle analyse la capture d'écran de référence et reconstruit automatiquement la disposition des éléments, les marges, les boutons et autres détails de l'interface sous forme de code. Cette approche est particulièrement utile lorsque le résultat diverge constamment de la référence lors du « vibe coding ». L'outil permet de générer rapidement un premier jet, qui peut ensuite être adapté aux spécificités de votre projet.

Cas d'utilisation

Si vous démontrez le cas d'utilisation via un enregistrement d'écran, l'outil peut même reproduire les interactions et les animations.

Dans Codex ou Claude Code, il suffit de fournir une capture d'écran accompagnée d'une invite. Par exemple :

En utilisant ce dépôt, implémentez la capture d'écran jointe comme un écran front-end entièrement fonctionnel.

Reproduisez la disposition des éléments, les proportions, les marges, les polices, les couleurs et les positions des images conformément à la capture d'écran, sans ajouter d'éléments personnels.

Après l'implémentation, prenez une capture d'écran du résultat, comparez-la avec l'original et corrigez séquentiellement toutes les différences notables.

Séparez les composants et les styles selon leurs rôles, et extrayez les éléments d'interface répétitifs dans une structure réutilisable.

Une fois terminé, expliquez brièvement comment exécuter le projet et quelles différences par rapport à l'original subsistent.

Informations complémentaires

Dépôt GitHub