Como converter layouts de sites desenhados à mão em código HTML usando Sketch2Code da Microsoft

Você já se perguntou o quão legal seria apenas desenhar algo em um papel e deixar que ganhe vida no mundo real? Bem, isso é apenas algo que a Microsoft conseguiu com o aplicativo da web Skletch2Code com tecnologia de IA, que pode converter desenhos escritos à mão de um quadro branco em sites HTML com o clique de um botão.

Sketch2Code pode converter qualquer layout desenhado à mão de um site em HTML em meros segundos. A ferramenta usa o serviço Computer Vision AI da Microsoft para detectar objetos HTML em um desenho e, em seguida, usa o reconhecimento de texto para extrair o texto manuscrito no desenho para combinar e construir trechos de HTML de todos os elementos de design da imagem.

Isso torna insanamente rápido para web designers e desenvolvedores construir protótipos HTML de um site em muitos estilos diferentes em questão de segundos. Se você estiver interessado em saber como isso funciona no back-end, certifique-se de ler os detalhes técnicos sobre Sketch2Code no site da Microsoft.

Abaixo está um tutorial rápido para mostrar a você como é simples usar Sketch2Code para converter desenhos de layout de sites em páginas HTML reais.

Primeiro, desenhe um layout de seu site em um quadro branco ou folha branca. Em seguida, tire uma foto dele e salve-o em seu computador. Depois disso, clique no botão abaixo para abrir o aplicativo Sketch2Code no seu navegador.

Inicie o Sketch2Code Web App

Depois de abrir o site, clique no Upload Design e selecione a imagem do layout do site que você desenhou em um quadro branco ou folha branca.

Depois de enviar o design do site desenhado à mão, sente-se e assista ao Sketch2Code usar IA para gerar automaticamente uma página HTML com base no layout da imagem que você carregou.

Assim que o processo for concluído, você verá uma prévia da página HTML recém-gerada, juntamente com a opção de baixar o código completo. Clique no Baixe o seu código HTML para obter o arquivo .html do layout de seu site desenhado à mão, para que você possa testá-lo e visualizá-lo localmente em seu navegador.

É isso. Esperamos que o Sketch2Code economize seu tempo na criação de protótipos de um layout de página da web.