Le Shazam des sites : n'importe quel screenshot devient du code propre

Tu screenshot un site que tu aimes, tu drop l'image dans l'app, et l'IA te sort une version en HTML/Tailwind, React, Vue ou Bootstrap. Elle récupère les vrais logos et images, ouvre la page dans un navigateur pour comparer son rendu à ton screenshot, et corrige avant de te la montrer. Ce lead magnet te donne le repo, le setup en 3 étapes, les 5 use cases business et les limites à connaitre.

Pourquoi ça change ta vie de builder

Copier une inspi visuelle, ça a longtemps voulu dire ouvrir les outils dev de Chrome, sniffer les classes, exporter les logos à la main, refaire le layout à la trace. Une journée de boulot pour repartir d'un mockup approximatif.

Sur les 12 derniers mois, ce workflow a changé. Les modèles multimodaux (Claude, Gemini, GPT) lisent une capture d'écran comme un humain lit une page, et sortent le HTML+CSS derrière. Le premier outil qui a fait le buzz sur ce workflow, en open source, c'est screenshot-to-code d'Abi Raja (78,4k stars sur GitHub, licence MIT, dernière update mi-août 2026). Tu l'installes chez toi et tu contrôles ce qui sort.

Ce que ça débloque concrètement : tu prends la landing d'une boite que tu admires, tu récupères la structure, et tu adaptes à ton offre en 20 minutes au lieu de 2 jours. Ou tu screenshot ta propre page et tu demandes à l'IA une variante "plus dense" ou "en dark mode". Ou tu drops une capture Figma et tu récupères le code du composant.

C'est quoi exactement screenshot-to-code

Le repo : github.com/abi/screenshot-to-code. Créé par Abi Raja, licence MIT. 78,4k stars, 9,5k forks, actif. Il existe aussi une version hébergée par le créateur sur screenshottocode.com (abonnement mensuel) si tu ne veux rien installer, mais tu paies l'app plutôt que juste les modèles IA en dessous.

Les 4 choses qui changent vraiment :

1. Multi-stack, pas juste HTML.

Tu choisis avant génération : HTML+Tailwind, HTML+CSS pur, React+Tailwind, Vue+Tailwind, Bootstrap, ou Ionic+Tailwind. L'IA adapte l'output à la cible. Si tu vis dans Next.js, tu prends React+Tailwind et tu colles direct dans ton projet.

2. Extraction des vrais assets.

C'est la partie que peu de tools font bien. L'app détecte les logos, images, icônes sur ton screenshot, les découpe, et les intègre dans le HTML final au bon endroit. Pas un placeholder gris avec "logo ici". Le vrai logo, à la bonne taille, au bon endroit.

3. Auto-vérification en navigateur.

L'app ouvre la page qu'elle vient de générer dans un navigateur invisible, capture son propre rendu, et le compare au screenshot que tu as fourni. Si ça diverge trop (mauvaise couleur, mauvais spacing, texte oublié), elle corrige et refait un tour. Ta version finale a déjà été relue par l'IA avant que tu la voies.

4. Screen recording vers prototype animé.

Bonus rarement mis en avant : tu peux uploader une capture vidéo d'un site en action (scroll, hover, ouverture de modale), et le tool essaye de reproduire les interactions dans le prototype. Ça marche moins bien qu'une image fixe, mais pour prototyper une interaction précise vue ailleurs, c'est un raccourci.

Setup en 3 min

Va sur Claude et dis lui de télécharger le repo suivant : github.com/abi/screenshot-to-code. Et suis les instructions de Claude.

5 use cases business concrets

1. Rebuilder une landing d'inspiration en 20 minutes

Tu tombes sur la landing d'une boite qui te plait (structure, ton visuel, densité). Screenshot full page (extension GoFullPage sur Chrome pour capturer même le bas de scroll), drop dans l'app, stack React+Tailwind. Tu récupères un fichier .tsx prêt à coller dans un projet Next.js, et tu remplaces les textes par les tiens. Le vrai gain n'est pas le code, c'est le layout : le tool a fait tourner ton oeil pendant 2 jours de dev.

Instruction à ajouter dans la case "additional instructions" avant de générer :

Utilise exactement les mêmes classes Tailwind, mais remplace tous les textes
par des placeholders génériques (Lorem ipsum pour les paragraphes,
"Your Headline" pour les h1, "Feature name" pour les h3).

2. Faire un A/B test visuel sur ta propre page

Tu screenshot ta page actuelle. Tu la drop dans l'app avec l'instruction "génère une variante avec un hero en dark mode, un CTA plus proéminent, et une preuve sociale sous le fold". L'IA te sort une V2 en 30 secondes. Tu copies le HTML, tu la mets sur une URL /variant-b, tu envoies 50 % du trafic dessus pendant une semaine et tu vois quelle version convertit mieux.

3. Extraire un composant précis d'un site complexe

Tu vois un pricing table nickel sur un SaaS. Tu screenshot juste la section pricing (pas la page entière). Tu drop, stack HTML+Tailwind. Tu récupères le composant isolé, sans le reste du site autour. Copie-colle dans ton projet, adapte les prix, publie. 10 minutes chrono. Ça marche aussi pour un formulaire, une navbar, un footer, une modale.

4. Prototype de démo pour un client sans passer par Figma

Tu es en call avec un prospect qui veut voir "à quoi ça ressemblerait chez lui". Tu screenshot son site actuel, tu drop dans l'app avec l'instruction "ajoute une section produits avec 3 cartes et un CTA achat" ou "ajoute un formulaire de qualification en haut". L'app te ressort son site + ta modification, avec ses logos et sa charte. Tu partages ton écran en direct, il visualise la V2 pendant que tu parles.

5. Transformer un enregistrement vidéo en prototype interactif

Tu tombes sur un Reel qui montre une UI avec une animation cool (un scroll parallax, une modale qui se déploie). Tu screen-record 5 secondes de la partie qui t'intéresse, tu drop la vidéo dans l'app. Le tool essaye de reproduire l'interaction en HTML + Tailwind. Le résultat est brut, mais c'est un point de départ pour recréer l'interaction plutôt que la coder en observant la vidéo image par image.

Les limites à garder en tête

1. Le rendu n'est jamais pixel-perfect sur des sites complexes. Sur une landing simple, l'output est bluffant. Sur une page avec 15 sections, des animations SVG custom, des grilles asymétriques et des micro-interactions au hover, l'IA lisse et simplifie. Utilise-le pour attraper la structure et l'esthétique globale, puis termine à la main.
2. Ce n'est pas un skill Claude Code, c'est une app à part. Le tool utilise Claude (ou GPT, ou Gemini) comme modèle en dessous, mais il tourne dans sa propre app web à localhost:5173. Tu ne l'appelles pas depuis Claude Code ni depuis Claude Desktop. Si tu vis dans le terminal Claude Code, c'est un aller-retour vers un onglet Chrome. Rien de grave, mais c'est bien de le savoir avant de te lancer.
3. Le code sorti est jetable, pas maintenable. Les classes Tailwind sont posées à plat, il n'y a pas de composants réutilisables, pas de logique métier. C'est du HTML statique généré. Ta charge de travail derrière : refactorer en composants, brancher les données, ajouter la logique. Le tool t'économise le layout initial, pas l'ingénierie.

Le mot de la fin

Tu ne remplaces pas un designer avec ce tool. Tu ne remplaces pas un dev front non plus. Ce que tu remplaces, c'est la phase la plus pénible du build d'une landing : traduire une inspiration visuelle en HTML+CSS de départ. Cette phase te prenait une journée, elle prend maintenant 5 minutes.

Le vrai levier, c'est le temps de test. Tu peux prototyper 5 variantes de ta homepage dans l'après-midi, choisir la meilleure, et passer le temps gagné à travailler l'offre, le copywriting, le funnel. C'est là que le business bouge, pas dans le CSS.

Installe Docker ce soir, télécharge le repo, colle ta clé Anthropic, docker-compose up. Prends 3 landings que tu aimes, screenshot, drop, compare les outputs. Tu vas voir ce que ça change en 30 minutes.