Screenshot-to-Code: codice da screenshot con l'AI

Screenshot-to-Code è uno strumento open source che consente di convertire screenshot, mockup e design realizzati con Figma in codice pulito e funzionale utilizzando l'intelligenza artificiale. Questo tool supporta diversi stack tecnologici per lo sviluppo di applicazioni Web tra cui HTML con Tailwind o CSS, React con Tailwind, Vue con Tailwind, Bootstrap, Ionic con Tailwind e SVG.

Screenshot-to-Code e modelli generativi

Per l'elaborazione delle immagini e la generazione del codice Screenshot-to-Code si avvale di alcuni tra i modelli di AI più avanzati come Claude Sonnet 3.5 e GPT-4o. Inoltre, per la creazione delle immagini lo strumento utilizza DALL-E 3 o Flux Schnell tramite Replicate.

Una funzionalità sperimentale introdotta di recente permette di trasformare video o registrazioni dello schermo di un sito web in prototipi funzionanti, con un vantaggio rilevante nel massimizzare la produttività accorciando i tempi di sviluppo.

Tra le altre feature degne di nota lo strumento offre un'opzione per l'ottimizzazione automatica del codice generato. Ciò permette di migliorarne la leggibilità con una maggiore aderenza alle best practice per il coding. È poi possibile utilizzare una modalità per la correzione del codice che consente di rielaborare il risultato finale sulla base di specifiche esigenze stilistiche. Screenshot-to-Code permette inoltre di esportare il codice direttamente in repository GitHub per poi importarlo in flussi di lavoro preesistenti.

Setup ed utilizzo

Per iniziare a utilizzare Screenshot-to-Code è necessario disporre di una API Key di OpenAI con accesso a GPT-4 o di una API Key di Anthropic se si desidera utilizzare Claude Sonnet. L'applicazione è composta da un frontend sviluppato con React/Vite e un backend basato su FastAPI. Gli utenti possono configurare le API Key attraverso il file .env nel backend o direttamente tramite l'interfaccia utente, nelle impostazioni.

Per avviare il backend, è consigliato l'uso di Poetry per la gestione dei pacchetti. Dopo aver installato le dipendenze è possibile eseguire il server utilizzando Uvicorn. Il frontend può essere avviato con Yarn che renderà l'applicazione accessibile localmente. Per chi preferisce utilizzare Docker è disponibile un file docker-compose.yml che facilita la configurazione e l'avvio dell'applicazione.