Com convertir dissenys de llocs web dibuixats a mà en codi HTML mitjançant Sketch2Code de Microsoft

Alguna vegada t'has preguntat fins a quin punt seria dibuixar alguna cosa en un paper i deixar que cobrés vida al món real? Bé, això és només una cosa que Microsoft ha aconseguit amb l'aplicació web Skletch2Code amb intel·ligència artificial que pot convertir dibuixos escrits a mà d'una pissarra blanca a llocs web HTML amb un clic d'un botó.

Sketch2Code pot convertir qualsevol disseny dibuixat a mà d'un lloc web en HTML en pocs segons. L'eina utilitza el servei Computer Vision AI de Microsoft per detectar objectes HTML en un dibuix, i després utilitza el reconeixement de text per extreure el text escrit a mà del dibuix per combinar i crear fragments HTML de tots els elements de disseny de la imatge.

Això fa que sigui increïblement ràpid que els dissenyadors i desenvolupadors web creïn prototips HTML d'un lloc web en molts estils diferents en qüestió de segons. Si esteu interessats a saber com funciona això al backend, assegureu-vos de llegir els detalls tècnics sobre Sketch2Code al lloc web de Microsoft.

A continuació es mostra un tutorial ràpid per mostrar-vos com de senzill és utilitzar Sketch2Code per convertir dibuixos de disseny de llocs web en pàgines HTML reals.

Primer de tot, dibuixeu un disseny del vostre lloc web en una pissarra o un full blanc. A continuació, feu-ne una foto i deseu-la al vostre ordinador. Després d'això, feu clic al botó següent per obrir l'aplicació web Sketch2Code al vostre navegador.

Inicieu l'aplicació web Sketch2Code

Un cop tingueu el lloc web obert, feu clic a Carrega disseny botó i seleccioneu la imatge del disseny del lloc web que heu dibuixat en una pissarra o un full blanc.

Després de penjar el disseny del lloc web dibuixat a mà, asseieu-vos i mireu que Sketch2Code utilitza la IA per generar automàticament una pàgina HTML basada en el disseny de la imatge que heu penjat.

Un cop finalitzat el procés, se us mostrarà una vista prèvia de la pàgina HTML recent generada juntament amb l'opció de descarregar el codi complet. Feu clic a Baixeu el vostre codi HTML botó per obtenir el fitxer .html del disseny del vostre lloc web dibuixat a mà perquè pugueu provar-lo i previsualitzar-lo localment al vostre navegador web.

Això és. Esperem que Sketch2Code us estalviï temps a l'hora de crear prototips d'un disseny de pàgina web.

Categoria: Web