screenshot-to-code : cloner un site en quelques minutes ? Le test honnête

TL;DR — screenshot-to-code en une minute

• Ce que c’est : un outil open source qui transforme une capture d’écran, une maquette ou un Figma en code frontend (HTML + Tailwind, React, Vue…) grâce à un modèle de vision.
• Le malentendu : « clone n’importe quel site parfaitement » est survendu. L’outil reproduit l’apparence d’un écran, pas un site — sans backend, sans logique, sans interactivité réelle.
• La réalité : un excellent point de départ à nettoyer, pas un clone livrable tel quel.
• Le détail oublié : il faut votre propre clé API (OpenAI ou Anthropic). Ce n’est ni magique ni gratuit à l’usage.
• Notre verdict : Installer. Vraiment utile pour partir d’un design — à condition de savoir ce que ce n’est pas.

« Ce repo GitHub clone n’importe quel site parfaitement en quelques minutes. » Vous avez peut-être vu passer la vidéo. L’outil derrière, screenshot-to-code, est l’un des projets d’IA les plus connus au monde — des dizaines de milliers d’étoiles, et une version hébergée payante. Il est réellement bon. Mais le mot « parfaitement » mérite qu’on s’y arrête, parce qu’il change tout ce que vous pouvez en attendre.

Ce que fait vraiment screenshot-to-code

Le principe est simple et impressionnant : vous lui donnez une image — une capture d’un site existant, une maquette, un écran Figma, parfois même une vidéo — et un modèle de vision (Claude, GPT-4o…) génère le code frontend correspondant. Vous choisissez la cible : HTML + Tailwind, React, Vue, Bootstrap. En quelques secondes, vous obtenez une page qui ressemble à votre image.

Pour prototyper, c’est un gain de temps réel : au lieu de repartir d’une page blanche, vous démarrez avec une structure déjà en place, à ajuster.

« Cloner parfaitement » : le mot qui trompe

Voilà où le buzz déraille. « Cloner un site parfaitement » suggère qu’on récupère le site. Faux. On récupère l’apparence d’un écran, à un instant T.

La différence est énorme. Un site, ce n’est pas qu’un visuel : c’est un backend, une base de données, des formulaires qui fonctionnent, une logique métier, des états, des animations, plusieurs pages reliées entre elles. screenshot-to-code ne voit rien de tout cela — il voit une image. Il en reproduit la surface, souvent très bien, parfois approximativement (espacements, polices, images de remplacement), et jamais le fonctionnement.

« Parfaitement » est donc un mot marketing. Le résultat honnête, c’est « une maquette codée, ressemblante, à retravailler ». Ce qui est déjà beaucoup — à condition de ne pas croire qu’on a fini.

Ce que ça ne fait PAS (et qu’aucune vidéo ne précise)

• Pas de backend, pas de données. Les boutons ne soumettent rien, les listes ne chargent rien. C’est une coquille visuelle.
• Pas de multi-pages ni de navigation réelle. Une image = un écran. Un site de vingt pages, c’est vingt captures à traiter, sans les liens.
• Un nettoyage nécessaire. Le code généré est un brouillon : classes redondantes, images en placeholder, structure à réorganiser. Comptez du temps de reprise.
• Une clé API et un coût. L’outil open source tourne avec votre clé (OpenAI/Anthropic). Chaque génération consomme des tokens — modeste, mais réel.

Pour qui c’est un vrai accélérateur

Malgré ces limites, screenshot-to-code est un excellent outil quand on l’utilise pour ce qu’il est :

• Partir d’une maquette (Figma, dessin, capture) et obtenir en secondes une base de code au lieu d’écrire le HTML à la main.
• Reproduire rapidement un composant ou une section dont vous aimez la mise en forme, pour l’adapter ensuite à votre projet.
• Prototyper une idée d’interface pour la montrer, avant de la développer proprement.

Pour un créateur de landing pages ou un développeur front, c’est un raccourci qui fait gagner l’étape la plus ingrate : passer d’une idée visuelle à un premier code.

Notre verdict : Installer — mais pour la bonne raison

Contrairement à bien des outils que le buzz survend, screenshot-to-code tient une vraie promesse : transformer un design en code de départ, vite. C’est utile, c’est bien fait, c’est open source. À installer dans votre boîte à outils si vous touchez au frontend.

La seule chose à désapprendre, c’est le fantasme du « clone parfait ». Vous n’aspirez pas un site : vous accélérez la première marche. Vu sous cet angle, l’outil ne déçoit jamais — il tient exactement ce qu’il fait vraiment.

Points de vigilance

• Le nettoyage fait partie du travail : prévoyez de reprendre le code, ne le mettez pas en production tel quel.
• La clé API a un coût : surveillez votre consommation si vous générez en volume.
• Le design des autres ne vous appartient pas : s’inspirer d’une maquette est sain, recopier à l’identique le site d’un concurrent l’est moins. Utilisez-le pour créer, pas pour plagier.