Cómo convertir diseños de sitios web dibujados a mano en código HTML usando Sketch2Code de Microsoft

¿Alguna vez se preguntó qué tan genial sería simplemente dibujar algo en un papel y dejar que cobre vida en el mundo real? Bueno, eso es solo algo que Microsoft ha logrado con la aplicación web Skletch2Code impulsada por IA que puede convertir dibujos escritos a mano desde una pizarra a sitios web HTML con un clic de un botón.

Sketch2Code puede convertir cualquier diseño dibujado a mano de un sitio web en HTML en cuestión de segundos. La herramienta utiliza el servicio de inteligencia artificial Computer Vision de Microsoft para detectar objetos HTML en un dibujo y luego utiliza el reconocimiento de texto para extraer el texto escrito a mano en el dibujo para combinar y crear fragmentos HTML de todos los elementos de diseño de la imagen.

Esto hace que sea increíblemente rápido para los diseñadores y desarrolladores web construir prototipos HTML de un sitio web en muchos estilos diferentes en cuestión de segundos. Si está interesado en saber cómo funciona esto en el backend, asegúrese de leer los detalles técnicos sobre Sketch2Code en el sitio web de Microsoft.

A continuación se muestra un tutorial rápido para mostrarle lo simple que es usar Sketch2Code para convertir dibujos de diseño de sitios web en páginas HTML reales.

En primer lugar, dibuje un diseño de su sitio web en una pizarra o una hoja blanca. Luego, tome una foto y guárdela en su computadora. Después de eso, haga clic en el botón de abajo para abrir la aplicación web Sketch2Code en su navegador.

Inicie la aplicación web Sketch2Code

Una vez que tenga el sitio web abierto, haga clic en el Cargar diseño y seleccione la imagen del diseño del sitio web que dibujó en una pizarra o en una hoja blanca.

Después de cargar el diseño del sitio web dibujado a mano, siéntese y observe cómo Sketch2Code usa IA para generar automáticamente una página HTML basada en el diseño de la imagen que cargó.

Una vez finalizado el proceso, se le mostrará una vista previa de la página HTML recién generada junto con la opción de descargar el código completo. Clickea en el Descarga tu código HTML para obtener el archivo .html del diseño de su sitio web dibujado a mano para que pueda probarlo y obtener una vista previa localmente en su navegador web.

Eso es. Esperamos que Sketch2Code le ahorre tiempo en la creación de prototipos de un diseño de página web.

Categoría: Web