Transformez des captures d'écran en code fonctionnel
Screenshot-to-code est un outil logiciel qui analyse des fichiers de capture d'écran pour les convertir en code HTML, Tailwind, React ou Vue propre. Il permet aux développeurs de transformer rapidement des conceptions d'interface en extraits de code fonctionnels.
Mises à jour
- 18 septembre 2026: Étoiles 75,377 → 79,191.
Ce que ça vous apporte
- Convertit les captures d'écran et les fichiers de conception en code HTML ou React propre
- Transforme les enregistrements de sites web en prototypes fonctionnels
- Prend en charge Tailwind CSS et diverses bibliothèques d'interface populaires
Installation
echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --buildcd frontend
pnpm install
pnpm devSi vous ne codez pas
Analysez la capture d'écran et créez une structure de code propre et fonctionnelle qui reflète exactement le design de l'image. Préparez la sortie au format HTML ou React en utilisant Tailwind CSS. Extrayez les logos et les ressources réels de l'image pour les inclure dans le code, et codez tous les éléments du design de manière réactive (responsive).
Dépôt : https://github.com/abi/screenshot-to-code. Base-toi sur les instructions officielles du fichier README de ce dépôt pour l'installation et l'exécution.
Avant de commencer, vérifie quel système d'exploitation nous utilisons et si les outils nécessaires (ex: Python, Node.js, Git, Docker) sont installés. Installe ceux qui manquent étape par étape selon ce système.
Crée un nouveau dossier vide pour travailler. Ne touche pas aux fichiers en dehors de ce dossier et ne supprime rien. Avant chaque commande, décris ce que tu vas faire en une phrase.
Dis-moi ce que je devrais voir à l'écran à la fin de chaque étape. Si une erreur survient, je te copierai le message d'erreur tel quel et nous la corrigerons ensemble.
Termes liés du glossaire
Liens
TreScout n'a pas développé cet outil · nous l'avons repéré dans les tendances GitHub et présenté. Cette page décrit le dépôt tel qu'il était le 2026-08-28 : Le nombre d'étoiles et notre texte datent de ce jour, le dépôt a pu changer depuis. Consultez le lien du dépôt pour l'état actuel. Le texte de présentation a été préparé avec l’IA à partir de la propre documentation du dépôt et cette page a été traduite automatiquement depuis l’original turc · la version turque fait foi.