Как конвертировать нарисованные от руки макеты веб-сайтов в HTML-код с помощью Sketch2Code от Microsoft

Вы когда-нибудь задумывались, как здорово было бы просто нарисовать что-нибудь на бумаге и воплотить это в жизнь в реальном мире? Что ж, это всего лишь то, чего Microsoft добилась с помощью веб-приложения Skletch2Code на базе искусственного интеллекта, которое может конвертировать рукописные рисунки с доски в веб-сайты HTML одним нажатием кнопки.

Sketch2Code может преобразовать любой нарисованный от руки макет веб-сайта в HTML за считанные секунды. Инструмент использует службу Microsoft Computer Vision AI для обнаружения HTML-объектов на рисунке, а затем использует распознавание текста для извлечения рукописного текста на рисунке, чтобы объединить и создать HTML-фрагменты всех элементов дизайна на изображении.

Это позволяет веб-дизайнерам и разработчикам невероятно быстро создавать HTML-прототипы веб-сайтов в самых разных стилях за считанные секунды. Если вам интересно узнать, как это работает на серверной стороне, обязательно прочитайте технические подробности о Sketch2Code на веб-сайте Microsoft.

Ниже приведено краткое руководство, которое покажет вам, как просто использовать Sketch2Code для преобразования рисунков макета веб-сайта в настоящие HTML-страницы.

Прежде всего нарисуйте макет вашего сайта на доске или белом листе. Затем сфотографируйте его и сохраните на свой компьютер. После этого нажмите кнопку ниже, чтобы открыть веб-приложение Sketch2Code в браузере.

Открыв веб-сайт, нажмите кнопку «Загрузить дизайн» и выберите изображение макета веб-сайта, которое вы нарисовали на доске или белом листе.

Выберите и загрузите нарисованный от руки макет сайта

После загрузки нарисованного от руки дизайна веб-сайта расслабьтесь и наблюдайте, как Sketch2Code с помощью искусственного интеллекта автоматически генерирует HTML-страницу на основе макета загруженного вами изображения.

После завершения процесса вам будет показан предварительный просмотр только что сгенерированной HTML-страницы, а также возможность загрузить полный код. Нажмите кнопку «Загрузить HTML-код», чтобы получить. html с нарисованным от руки макетом веб-сайта, чтобы вы могли протестировать и просмотреть его локально в своем веб-браузере.

Нажмите кнопку «Загрузить HTML-код».

Вот и все. Мы надеемся, что Sketch2Code сэкономит вам время при создании прототипа макета веб-страницы.