Microsoft научила приложение превращать эскизы интерфейса в код

Microsoft Azure / YouTube

Microsoft представила прототип приложения Ink to Code, которое превращает наброски интерфейса в базовый код программы. В ней пользователь может нарисовать от руки эскиз основных элементов интерфейса, после чего программа превратит их в ровные фигуры и преобразует эскиз в XML-файл, который можно загрузить в Visual Studio и использовать для разработки приложений для Windows и Android, сообщается в блоге компании.

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

Разработчики из Microsoft создали прототип приложения, которое ускоряет и частично автоматизирует процесс верстки интерфейсов. В нем пользователь может от руки нарисовать основные элементы интерфейса, к примеру, поля для ввода, надписи и кнопки, и присвоить им соответствующие классы. При этом их можно рисовать и не ровно, потому что они выравниваются автоматически с помощью Windows Ink API.

После создания наброска программа автоматически преобразует его в XML-разметку, которую можно использовать для создания приложений для Универсальной платформы Windows (UWP) с помощью среды разработки Microsoft Visual Studio или Android-приложений с помощью Xamarin. Стоит отметить, что этот код представляет собой не готовое приложение, а лишь его часть, отвечающую за интерфейс, к которой также необходимо написать код с функциями приложения.


Изначально приложение будет доступно в виде прототипа в магазине приложений Windows, но только для пользователей из США и Канады.

В прошлом году похожую систему представил датский стартап Uizard Technologies. Его специалисты разработали нейросеть, которая может преобразовывать скриншоты пользовательского интерфейса в готовый код, не требующей существенной доработки.

Григорий Копиев

Нашли опечатку? Выделите фрагмент и нажмите Ctrl+Enter.