Screenshot to Code : convertir des captures d'écran en code frontend

Conversion visuelle de captures d'écran en code frontend fonctionnel

Screenshot to Code est un outil qui accepte une capture d'écran, une maquette, un design Figma ou un enregistrement d'écran, puis génère du code frontal clean et fonctionnel via l'IA. Le README l'appelle « la façon la plus facile » d'essayer cette approche en utilisant le produit hébergé. Contrairement aux outils qui se limitent à suggérer du code, celui-ci génère un CSS et une structure de template complète prête à l'emploi. Le projet est écrit en Python, avec un frontend React/Vite et un backend FastAPI. Une version hébergée est disponible sur screenshottocode.com pour accès immédiat sans installation. Le code open-source est sur GitHub avec 75 435 stars et 9 210 forks.

Piles d'infrastructure supportées et générations de code

Le projet génère du code pour six piles de sortie : HTML avec Tailwind, HTML avec CSS standard, React avec Tailwind, Vue avec Tailwind, Bootstrap, et Ionic avec Tailwind. Le README énumère les modèles d'IA par défaut comme Gemini 3 Flash Preview et Gemini 3.1 Pro Preview (réputés comme les meilleurs), GPT-5.5 et GPT-5.4 Mini, et Claude Opus 4.6 et 4.8. Il ajoute z-image-turbo via Replicate pour la génération d'images supplémentaires. Le choix de la pile détermine la syntaxe CSS et le framework frontal utilisés dans la sortie générée.

Fournisseurs LLM et clés API obligatoires

L'exécution locale nécessite au minimum une clé de fournisseur parmi OpenAI, Anthropic ou Gemini. Le README recommande fortement Gemini et Replicate pour la meilleure précision. Gemini gère l'extraction des véritables logos et images de la capture d'écran (plutôt que de les régénérer), et Replicate gère la génération d'images, la suppression d'arrière-plan et l'édition d'images. Sans clé Replicate, les fonctions edit_images et remove_backgrounds ne sont pas disponibles. Le README note que l'ajout de plusieurs clés permet à l'application de choisir automatiquement une combinaison de modèles plus forte pour chaque variante ; avec une seule clé, seuls les modèles du fournisseur sont utilisés. Pour ceux qui préfèrent les modèles open-source Ollama, un commentaire GitHub explique comment configurer l'application, bien que le README déconseille cette approche en raison de la qualité inférieure des résultats.

Installation du backend avec Poetry et Playwright

Pour configurer le backend local, créez d'abord un fichier .env dans le répertoire backend avec les clés API : OPENAI_API_KEY, ANTHROPIC_API_KEY, GEMINI_API_KEY et REPLICATE_API_KEY. Ensuite, exécutez poetry install, puis poetry run playwright install chromium (sur Linux, utilisez l'option --with-deps et exécutez sudo/apt). Activez l'environnement avec la commande imprimée par poetry env activate. Enfin, lancez le serveur avec poetry run uvicorn main:app --reload --port 7001. Le README note que Chromium doit être installé pour activer la fonctionnalité d'aperçu de capture d'écran ; sans lui, l'application fonctionne mais ignore cette fonction optionnelle.

Déploiement du frontend React et configurations personnalisées

Le frontend s'installe avec pnpm install et démarre avec pnpm dev, écoutant sur localhost:5173. Vous pouvez configurer les clés OpenAI, Anthropic et Gemini via la boîte de dialogue des paramètres dans l'interface utilisateur (cliquez sur l'icône d'engrenage après le chargement). Replicate doit être configuré dans backend/.env car il ne dispose pas de dialogue d'interface. La boîte de dialogue des paramètres affiche également si l'aperçu de capture d'écran est disponible sur votre backend. Pour exécuter le backend sur un port différent, mettez à jour VITE_WS_BACKEND_URL dans frontend/.env.local. Pour configurer un proxy OpenAI (utile en cas de restriction géographique), définissez OPENAI_BASE_URL dans backend/.env ou directement dans la boîte de dialogue des paramètres, en vous assurant que l'URL contient v1 dans le chemin.

Déploiement Docker et mode vidéo

Pour Docker, écrivez vos clés API dans un fichier .env à la racine du projet, puis exécutez docker-compose up -d --build depuis le répertoire racine. L'application s'exécutera sur localhost:5173. Le README précise que cette configuration n'est pas adaptée au développement car les modifications de fichiers ne déclenchent pas une reconstruction. Screenshot to Code prend également en charge la transformation d'un enregistrement vidéo d'un site Web en action en un prototype fonctionnel. Le mode vidéo nécessite une clé Gemini et fonctionne mieux avec Replicate pour les ajustements d'images résultants.

Aperçu visuel du rendu et exemples publiés

La fonctionnalité optionnelle d'aperçu de capture d'écran rend la page générée par l'agent dans un navigateur sans tête (Chromium) et permet à l'agent de vérifier visuellement son travail. Elle s'active automatiquement une fois Chromium installé via l'étape playwright install chromium, ou automatiquement dans l'image Docker. Le README inclut des exemples visuels montrant le côté-à-côté pour NYTimes, Instagram et Hacker News. Pour le dépannage, il renvoie à Troubleshooting.md et à des issues GitHub spécifiques. Aucune information de benchmark de performances ou de conditions de soutien n'est fournie. Le projet est sous licence MIT sans garanties explicites.

Conclusion éditoriale

Screenshot to Code offre une approche visuelle pour générer du code frontend, avec support de plusieurs piles (HTML, React, Vue) et fournisseurs LLM (Gemini, GPT, Claude). Pour évaluer son adéquation, testez la version hébergée sur screenshottocode.com (pas de configuration requise), puis explorez le déploiement local si vous avez besoin de personnalisation. Exigez au minimum une clé Gemini pour l'extraction d'assets et Replicate pour la génération d'images ; vérifiez les performances de rendu Chromium et observez la qualité du code généré sur vos captures d'écran représentatives.

Sources officielles

1. Official documentation
2. Official README
3. Project repository