Come convertire layout di siti Web disegnati a mano in codice HTML utilizzando Sketch2Code di Microsoft

Ti sei mai chiesto quanto sarebbe bello disegnare qualcosa su un foglio e lasciarlo prendere vita nel mondo reale? Bene, questo è solo qualcosa che Microsoft ha ottenuto con l'app Web Skletch2Code basata sull'intelligenza artificiale che può convertire i disegni scritti a mano da una lavagna a siti Web HTML con un clic di un pulsante.

Sketch2Code può convertire qualsiasi layout disegnato a mano di un sito Web in HTML in pochi secondi. Lo strumento utilizza il servizio Microsoft Computer Vision AI per rilevare gli oggetti HTML in un disegno, quindi utilizza il riconoscimento del testo per estrarre il testo scritto a mano nel disegno per combinare e creare frammenti HTML di tutti gli elementi di progettazione nell'immagine.

Ciò rende follemente veloce per i web designer e gli sviluppatori la creazione di prototipi HTML di un sito Web in molti stili diversi in pochi secondi. Se sei interessato a sapere come funziona nel backend, assicurati di leggere i dettagli tecnici su Sketch2Code sul sito Web di Microsoft.

Di seguito è riportato un breve tutorial per mostrarti quanto è semplice utilizzare Sketch2Code per convertire i disegni del layout del sito Web in pagine HTML reali.

Prima di tutto, disegna un layout del tuo sito web su una lavagna o un foglio bianco. Quindi, scatta una foto e salvala sul tuo computer. Successivamente, fai clic sul pulsante in basso per aprire l'app web Sketch2Code nel tuo browser.

Avvia l'app Web Sketch2Code

Una volta aperto il sito web, fai clic su Carica disegno e seleziona l'immagine del layout del sito web che hai disegnato su una lavagna o un foglio bianco.

Dopo aver caricato il design del sito web disegnato a mano, siediti e guarda Sketch2Code che usa l'intelligenza artificiale per generare automaticamente una pagina HTML basata sul layout nell'immagine che hai caricato.

Una volta terminato il processo, ti verrà mostrata un'anteprima della pagina HTML appena generata insieme all'opzione per scaricare il codice completo. Clicca sul Scarica il tuo codice HTML per ottenere il file .html del layout del tuo sito web disegnato a mano in modo da poterlo testare e visualizzare in anteprima localmente nel tuo browser web.

Questo è tutto. Ci auguriamo che Sketch2Code ti faccia risparmiare tempo nella prototipazione di un layout di pagina web.