Outils
screenshot-to-code, Docker
Prix
Gratuit (MIT), plus l'usage de l'API d'IA
Temps
30 min la 1re fois
Niveau
Terminal, intermédiaire

Un client vous montre une capture de la page d'accueil qu'il aime, ou un dessin de sa future page de réservation. Avant, il fallait tout reconstruire à la main avant même de pouvoir lui montrer quelque chose. screenshot-to-code fait cette première traduction de l'image vers le code : vous gagnez le temps de la mise en place et vous passez directement aux ajustements.

À quoi ça sert, et pour qui

Le dépôt abi/screenshot-to-code (licence MIT) transforme une capture, une maquette ou un design Figma en code. Il sait aussi partir d'un enregistrement d'écran pour produire un prototype qui réagit aux clics (ce mode demande une clé Gemini). Les formats de sortie : HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap et Ionic + Tailwind.

C'est utile pour un indépendant ou une petite agence qui fait des sites, pour un patron qui veut montrer une idée de page à son développeur, ou pour moderniser une ancienne page dont vous n'avez plus le code.

Installer l'outil sur votre ordinateur

La méthode la plus simple passe par Docker, un logiciel qui fait tourner l'application dans une « boîte » isolée. Installez d'abord Docker Desktop et lancez-le.

  1. Récupérer le codeDans le Terminal :
    Terminal
    git clone https://github.com/abi/screenshot-to-code.git
cd screenshot-to-code
  2. Ajouter votre clé d'APIIl faut au moins une clé : Anthropic (Claude), OpenAI ou Gemini. La clé Anthropic se crée dans la console Claude. Remplacez votre-cle par la vôtre ; elle reste dans le fichier .env sur votre machine.
    Terminal
    echo "ANTHROPIC_API_KEY=votre-cle" > .env
  3. Lancer l'applicationLa première construction prend quelques minutes.
    Terminal
    docker-compose up -d --build
  4. Ouvrir l'interfaceAllez sur http://localhost:5173 dans votre navigateur. L'icône en forme d'engrenage permet aussi de saisir ou changer les clés.

Si vous ne voulez rien installer, l'auteur propose une version hébergée sur screenshottocode.com. Lisez ses conditions avant d'y envoyer une maquette client : l'image part alors sur un serveur tiers.

Exemple : la maquette d'une page de réservation

  1. Préparer l'imageUne capture nette, en pleine largeur, d'une seule page. Retirez les données personnelles visibles (noms, e-mails, numéros).
  2. Choisir le format« HTML + Tailwind » pour une page simple à héberger, « React + Tailwind » si votre développeur travaille en React.
  3. Déposer l'imageL'outil génère le code et un aperçu. Comparez avec l'original et notez ce qui ne va pas.
  4. Faire relire le résultat par ClaudeCollez le code obtenu dans Claude avec ce prompt, pour passer d'une copie visuelle à une base propre :
    Prompt
    Voici le code HTML/Tailwind d'une page générée à partir d'une capture.
Reprends-le pour en faire une base de travail propre :
- tous les textes en français, au vouvoiement ;
- remplace les textes et images d'exemple par des repères [À REMPLIR] ;
- titres dans l'ordre (un seul h1), boutons et liens accessibles,
  textes alternatifs sur les images ;
- signale-moi tout ce qui ressemble à une marque, un logo ou un texte
  protégé copié de la capture.
Rends le fichier complet, puis la liste de ce que tu as changé.

Les réglages utiles

  • Une ou plusieurs clés : avec une seule clé, l'outil n'utilise que les modèles de ce fournisseur. Avec plusieurs, il propose plusieurs variantes à comparer.
  • Gemini et Replicate : le dépôt les recommande pour réutiliser les vrais logos et images de la capture, et pour retoucher ou détourer des images. Sans clé Replicate, ces fonctions sont absentes.
  • La langue : l'outil recopie les textes de l'image. Une maquette en anglais donne une page en anglais : la traduction se fait ensuite, avec le prompt ci-dessus.

Limites et coût

  • Le code est un point de départ : pas de formulaire relié à une boîte mail, pas de base de données, pas d'optimisation pour Google. Il reste du travail de développeur.
  • Chaque génération consomme des crédits chez le fournisseur d'IA choisi, facturés à l'usage selon ses tarifs. Surveillez votre consommation dans la console du fournisseur.
  • Le dépôt déconseille les modèles open source en local (via Ollama), jugés de trop faible qualité pour cet usage.

À respecter. Reproduire le site d'un autre, son logo ou ses textes pose un problème de droit d'auteur et de marque : servez-vous de l'outil pour vos propres maquettes, vos pages ou celles de vos clients avec leur accord. Votre clé d'API est un secret : ne publiez jamais le fichier .env (sur GitHub notamment) et révoquez la clé si elle a fuité. Installez uniquement depuis le dépôt officiel abi/screenshot-to-code.

Sources

Vous voulez passer de la maquette à un site rapide, bien référencé et relié à vos outils ? C'est mon métier : voyez mes sites web.