Screenshot to code IA gratuit : le convertisseur open source et la voie DeepSeek Vision
Deux chemins pour transformer une maquette en code qui tourne : installer abi/screenshot-to-code sous licence MIT avec Docker et une seule clé de modèle, ou joindre l'image à DeepSeek et la faire reconstruire en un seul fichier HTML. 15 étapes, chaque affirmation vérifiée contre le dépôt et api-docs.deepseek.com.
L'essentiel
- Le logiciel est gratuit, les tokens ne le sont pas. abi/screenshot-to-code est sous licence MIT et ne coûte rien à auto-héberger, mais il exige au moins une clé de modèle — OpenAI, Anthropic ou Gemini — facturée à la token par ce fournisseur.
- DeepSeek ne fait pas partie de ses modèles. La liste par défaut du README cite Gemini 3 Flash / 3.1 Pro, GPT-5.5 / 5.4 Mini et Claude Opus 4.6 / 4.8, et la chaîne "deepseek" n'apparaît nulle part dans le dépôt.
- Le modèle qui voit chez DeepSeek est deepseek-flash : sur le tableau tarifaire officiel, la ligne Vision affiche ✓ pour flash et « Not supported » pour deepseek-v4-pro. Les images entrent en base64, par URL publique ou via un file_id de la Files API.
- Les deux routes finissent pareil — un fichier HTML unique que l'on double-clique. Aux tarifs Flash publiés par DeepSeek, une capture plus quelques milliers de tokens de balisage coûtent très en dessous d'un centime d'USD.
Install Screenshot-to-Code Locally — Convert Screenshot to Functional Code
Chaîne:Fahd Mirza9:38
DeepSeek R1 Coding — Testing Screenshot to Code Conversion
Chaîne:United Top Tech3:06
abi/screenshot-to-code README — supported stacks, required keys, Docker
Docs:github.com/abi/screenshot-to-codeDocs
DeepSeek API Docs — Vision (base64, external URL, Files API)
Docs:api-docs.deepseek.comDocs
DeepSeek API Docs — Models & Pricing (the Vision row)
Docs:api-docs.deepseek.comDocs
Les images proviennent de deux captures d'écran propres (sans incrustation de webcam ni sous-titres gravés) ; les piles prises en charge, les clés requises, les commandes Docker et les limites d'image de DeepSeek sont recoupées avec le README abi/screenshot-to-code, ses fichiers sources et api-docs.deepseek.com.
Les captures sont créditées aux chaînes qui les ont enregistrées et chaque étape pointe vers l'horodatage exact. Les deux enregistrements précèdent les noms de modèles DeepSeek actuels : quand une image montre une étiquette plus ancienne, le texte suit la documentation officielle.
Les 15 étapes, d'une capture à une page qui s'affiche
Partir d'une seule capture
- 1
Capturer la portion d'interface à reconstruire
N'importe quelle image fixe convient — la démo de l'outil se sert d'une chaîne YouTube, et la voie DeepSeek ci-dessous d'une maquette de connexion de 68 Ko enregistrée en log.PNG. La capture vaut mieux qu'un cahier des charges écrit : espacements, couleurs et hiérarchie sont déjà tranchés, le modèle les lit au lieu de les inventer. Recadrez sur le composant qui compte, sinon vous brûlez des tokens en habillage que vous supprimerez ensuite.
Le point de départ : une carte de connexion en PNG, encore rien de converti.Voir à 1:02 - 2
Ouvrir le convertisseur et voir ses quatre entrées
Après installation locale, http://localhost:5173 propose un cadre d'envoi et trois raccourcis : Record Screen (filmer un site en direct), Enter URL avec Capture (l'outil photographie lui-même une URL) et Import from Code (coller du HTML existant pour continuer à l'éditer). Le menu Generating choisit la pile — HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap ou Ionic + Tailwind. Aucun compte n'est impliqué ; l'application parle directement à votre fournisseur de modèles.
Le hall d'entrée de la version auto-hébergée : zone de dépôt, capture d'écran, URL et import de code.Voir à 4:00
Installer le convertisseur open source gratuit
- 3
Vérifier l'hôte avant d'installer
L'application est un front React/Vite avec un back FastAPI, et la voie Docker demande un Docker Engine opérationnel. Fahd Mirza commence par cat /etc/*release pour vérifier sa machine — ici Ubuntu 22.04.4 LTS — parce que les commandes suivantes supposent un shell POSIX et un docker compose disponible. macOS et Windows font l'affaire dès lors que Docker Desktop tourne.
Un contrôle d'hôte en deux secondes : Ubuntu 22.04.4 LTS, avec Docker Desktop derrière.Voir à 2:12 - 4
Cloner le dépôt et poser une clé dans backend/.env
Lancez git clone https://github.com/abi/screenshot-to-code, entrez dans le dossier et écrivez la clé dans le fichier .env que lit la stack Compose — la ligne du README est textuellement echo "OPENAI_API_KEY=sk-your-key" > .env. Une seule clé suffit pour démarrer ; OpenAI, Anthropic et Gemini sont les trois acceptées, et en ajouter laisse l'application choisir un mélange de modèles plus costaud à chaque génération. DeepSeek n'est pas de cette liste, et la question 2 de la FAQ explique pourquoi l'override d'URL de base n'y change rien.
La clé fictive du README, écrite dans le fichier que le back charge au démarrage.Voir à 2:55 - 5
Construire et lancer les deux conteneurs d'une commande
Depuis la racine du dépôt, docker compose up -d --build télécharge les images de base, installe Poetry pour le back et les paquets yarn pour le front, puis laisse les deux tourner en arrière-plan. Comptez quelques minutes sans cache : le fichier Compose publie le back sur le port 7001 et le front sur 5173. Le README prévient que cette voie sert à exécuter, pas à développer — modifier un fichier ne relance pas la construction.
Toute l'installation tient en une commande ; -d la détache, le terminal peut fermer.Voir à 3:25 - 6
Suivre la construction des couches back et front
Le journal est la partie utile quand ça casse : backend 2/7 RUN pip install "poetry==1.4.1" et frontend 4/5 RUN yarn install sont les couches qui lâchent derrière un proxy ou sur un réseau verrouillé. Si ça bloque là, le correctif concerne le DNS de Docker ou un miroir npm, presque jamais l'application. La dernière couche terminée, localhost:5173 répond.
Vingt secondes après, les deux images ont passé leurs couches de dépendances.Voir à 3:45
Convertir, enregistrer, affiner
- 7
Déposer la capture
Glissez le fichier sur le cadre pointillé ou cliquez pour ouvrir le sélecteur ; l'image s'installe dans la colonne de gauche sous ORIGINAL SCREENSHOT et y reste la référence de toutes les versions suivantes. Sombre ou clair est un réglage sous l'engrenage, pas une différence de fonctionnement. C'est d'ailleurs dans cette boîte de dialogue que vous pouvez coller vos clés sans toucher au .env — le README note que les clés définies là ne vivent que dans votre navigateur et priment sur la configuration .env.
La même application en thème sombre, en attente du fichier — la zone de dépôt est presque toute l'interface.Voir à 4:45 - 8
Générer et comparer les variantes
L'outil lance plusieurs modèles par requête, afin que vous choisissiez un résultat au lieu de subir le premier : Option 1 et Option 2 sont deux onglets sur la même capture, et leur nombre vient de NUM_VARIANTS dans backend/config.py — quatre en entrée image, deux en entrée vidéo. Le code s'écrit dans la barre latérale au fil de sa production, avec un bouton Cancel si la direction est mauvaise. Chaque exécution est conservée dans Versions, donc expérimenter ne fait rien perdre.
Deux variantes de la même capture en plein flux, avec l'original épinglé en dessous.Voir à 5:00 - 9
Trois lectures : Desktop, Mobile, Code
La zone d'aperçu a trois bascules — Desktop, Mobile et Code — et c'est Code qui compte pour la passation, car elle affiche le balisage brut à copier. Reset jette l'exécution, Download l'exporte, et sous les variantes se tiennent Update (envoyer une autre consigne), Regenerate (relancer la même) et Select and update (encadrer la zone à modifier). C'est là que le screenshot-to-code cesse d'être une démo pour devenir une boucle d'édition.
La page reconstruite à côté des commandes pour continuer de la travailler.Voir à 5:20 - 10
Enregistrer le balisage en simple fichier .html
Copiez le code depuis l'onglet Code dans un fichier — ici test.html dans le dossier mycode — et toute l'étape de build s'arrête là. La sortie est du HTML autonome avec des classes Tailwind : ni installation de paquets ni serveur de développement entre vous et la page. Pour l'intégrer à un vrai arbre de composants, collez-le plutôt dans un fichier React ou Vue et réallouez les noms de classes.
Un fichier, 3,1 ko, ouvert dans Firefox par clic droit.Voir à 5:40 - 11
Ouvrir depuis le disque et voir ce qui a survécu
Charger le fichier directement depuis le système de fichiers prouve que le résultat tourne sans serveur. Comparez-le ensuite sans complaisance à la vignette ORIGINAL SCREENSHOT : mise en page, hiérarchie typographique et espacements passent bien, ce sont les logos et photos de tiers qui sont approchés — exactement pourquoi le README recommande vivement une clé Gemini (elle pilote l'extraction d'assets, donc la réutilisation des vraies images de la capture) et une clé Replicate (génération d'images et détourage). Ce qui manque se rattrape par une consigne supplémentaire, pas par une refonte.
La page convertie s'exécute depuis le disque local, bannière et en-tête reconstruits.Voir à 6:12 - 12
Affiner par prompt de mise à jour, pas par régénération
Tapez la modification dans le champ sous les variantes — ici « change the background color to deep blue » — et l'outil produit une nouvelle version plutôt qu'une nouvelle page, si bien que Versions garde les deux : Create v1 et la mise à jour en v2. Cocher « Include screenshot of current version? » envoie aussi le rendu courant, ce qui empêche un ajustement de repartir vers une mise en page générique. Cette boucle est la raison pour laquelle l'installation vaut le coup.
Une consigne plus tard, la retouche est stockée en v2 et v1 reste à un clic.Voir à 6:45
Voie B : DeepSeek regarde l'image
- 13
Voie B : joindre la capture dans DeepSeek
Si vous ne voulez rien installer, DeepSeek accepte l'image dans son produit de chat : le trombone ajoute log.PNG, la zone de saisie l'affiche comme une pièce jointe de 68,14 Ko, et la consigne tient en une phrase — « give me html and css code for this image in a single html file ». La puce de cet enregistrement indique DeepThink (R1) ; les libellés du sélecteur bougent plus vite que les tutoriels, alors fiez-vous au mécanisme, pas à l'étiquette. Ce qui revient est un fichier que vous collez et ouvrez.
La capture jointe dans le chat DeepSeek, avec en dessous l'exigence d'un fichier unique.Voir à 1:22 - 14
Lire le plan avant le code
Le panneau de réflexion trahit si le modèle a vraiment regardé : il énumère le titre « Login », les libellés « User Name » et « Password », les champs de saisie et le bouton Submit, puis choisit flexbox avec justify-content et align-items centrés sur une hauteur de 100vh. Quand une reconstruction rate, c'est ici qu'il faut regarder — un modèle qui a sauté les libellés rendra un formulaire sans libellés. Dépliez-le, et si la description est fausse, recadrez la capture et renvoyez-la.
Dix secondes de raisonnement : le modèle nomme chaque élément qu'il compte reproduire.Voir à 1:45 - 15
Prévisualiser, puis extraire le code
DeepSeek rend sa propre réponse dans une modale d'aperçu — la carte de connexion reconstruite avec libellés empilés, deux champs et un bouton Submit bleu pleine largeur, coiffée de la mention « AI-generated, for reference only ». C'est une simplification, pas un clonage : les halos dégradés et les icônes de champs de la maquette ont disparu. Copiez le HTML, enregistrez-le en index.html et ouvrez-le, exactement comme aux étapes 10 et 11. Autant le dire franchement : le chat de DeepSeek comme son API acceptent les images, mais les générateurs purement texte — y compris notre propre générateur d'artifacts sur ce site — ne le font pas ; là, décrivez l'interface avec des mots au lieu d'attendre qu'elle voie votre capture.
La carte reconstruite dans l'aperçu DeepSeek — assez proche pour poursuivre, assez simplifiée pour vérifier.Voir à 2:48