SCREENSHOT TO CODE : votre capture d’écran devient du code React ou Vue
⏱️ Temps de lecture estimé : 3 minutes
📌 SCREENSHOT TO CODE est un outil IA qui convertit une capture d’écran, une maquette Figma ou un enregistrement d’écran en code fonctionnel, prêt à être retravaillé. Le projet est open source, affiche près de 80 000 étoiles sur GitHub et se teste directement en ligne.
Le scénario vous parle peut-être : un client envoie la photo d’une interface « qu’il faudrait bien reproduire », ou vous croisez un design dont la structure vous plaît. La recopier à la main demande du temps et de la rigueur. Ici, vous déposez l’image, vous choisissez votre stack, et l’outil génère le code avec un aperçu côte à côte. Le README montre des répliques du New York Times, d’Instagram ou de Hacker News obtenues à partir de simples captures.
Côté stacks, le choix couvre l’essentiel du front : HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap et Ionic + Tailwind. De quoi partir sur une base techniquement juste pour votre projet, pas sur un format unique imposé.
Le mode vidéo est l’autre surprise. Vous enregistrez votre écran en train de naviguer sur un site ou une app, et l’outil en tire un prototype fonctionnel qui réagit aux interactions. Pour qui veut tester une idée d’interface avant d’écrire une ligne, c’est un raccourci précieux.
Sous le capot, plusieurs modèles se relaient : Gemini 3 Flash et 3.1 Pro pour la génération et l’extraction des vrais logos et images de votre capture, GPT-5.5 et GPT-5.4 Mini, Claude Opus 4.6 et 4.8, plus z-image-turbo via Replicate pour la génération d’images. Un détail que je trouve malin : l’agent peut rendre sa page générée dans un Chromium headless et comparer le résultat à la cible avant de vous rendre la main. Il se corrige seul au lieu de livrer une approximation.
Je reste lucide sur la limite : le code produit est un excellent point de départ, pas un produit fini. Les répliques rendent la structure et le style, pas la logique métier. Et en auto-hébergement, il faut prévoir au moins une clé API (OpenAI, Anthropic ou Gemini), Replicate en plus pour l’édition d’images. La facture des modèles reste à votre charge.
Quelques points forts :
- 🖼️ Capture, maquette Figma ou enregistrement vidéo en entrée
- 🧩 Six stacks : HTML, React, Vue, Bootstrap, Ionic + Tailwind
- 🎥 Une vidéo d’écran devient un prototype interactif
- 👀 L’agent vérifie son rendu dans Chromium avant de livrer
- 🐳 Open source (MIT), image Docker fournie pour s’auto-héberger
Screenshot to Code s’utilise en ligne sur le site officiel, ou en local : frontend React/Vite, backend FastAPI, licence MIT. Si vous passez du temps à recopier des interfaces à l’œil, le test vaut franchement le détour.
Sources
