screenshot-to-code

🧰 Aperçu général

• Screenshot‑to‑code est un outil open‑source permettant de convertir automatiquement des captures d’écran, maquettes ou designs Figma en code front‑end propre (HTML, CSS, React, Vue, Tailwind, Bootstrap, Ionic, SVG) natural20.com+3github.com+3github.com+3.
• Il utilise des modèles d’IA multimodaux tels que GPT‑4 Vision, Claude Sonnet 3.7, ainsi que GPT‑4o, avec une option pour générer ou compléter des images via DALL·E 3 ou Flux Schnell via Replicate .

⚙️ Architecture & stacks supportés

• Frontend : basé sur React + Vite.
• Backend : implémenté en FastAPI (Python), prenant en charge GPT‑4, Claude, ou modèles open source via Ollama (moins recommandés) .
• Stacks générés :
  • HTML + Tailwind,
  • HTML + CSS,
  • React + Tailwind,
  • Vue + Tailwind,
  • Bootstrap,
  • Ionic + Tailwind,
  • Génération de SVG intégrés .

🚀 Fonctionnalités notables

• Prise en charge expérimentale de l’analyse de vidéos ou d’enregistrements d’écran, transformés en prototypes fonctionnels .
• Alternatives cloud ou locale : possibilité de déployer en container Docker ou en local via un setup simple (backend + frontend) .
• Interface conviviale : upload de captures avec résultats en temps réel.

📥 Installation & utilisation

1. Cloner le dépôt et installer les dépendances avec Poetry (backend) et Yarn (frontend).
2. Configurer les clés :
   • OPENAI_API_KEY pour GPT‑4/Vison,
   • Optionnellement ANTHROPIC_API_KEY pour Claude aisharenet.com+2github.com+2github.com+2.
3. Lancement local :
   • Backend : uvicorn main:app (option docker-compose disponible).
   • Frontend : yarn dev, accessible sur localhost:5173.
   • Mode “mock” pour éviter d’utiliser les crédits GPT‑4‑Vision .

🌟 Popularité & communauté

• Très populaire : 70 300 étoiles et 8 700 forks .
• Nombreux exemples dans le répertoire Examples démontrant la conversion de sites (NYTimes, Instagram, Hacker News) .
• Développé activement : ~900 commits, discussions en cours, issues et FAQ bien documentées.

✅ Points forts & limites

✅ Avantages :

• Génération multisupport (HTML, frameworks modernes).
• Support pour les vidéos/screens.
• Facile à installer en local ou via Docker.

⚠️ Limitations :

• Qualité dépend des modèles IA (GPT‑4 Vision, Claude…).
• Premium key requise pour les meilleures performances.
• Les modèles open-source intégrés via Ollama offrent des résultats moins convaincants .