Кодирование спецификаций дизайна пользовательского интерфейса Figma может быть трудоемким для разработчиков фронта. Новый инструмент искусственного интеллекта под названием Auto -код от WaveMaker предназначен для упрощения процесса путем генерации веб -и мобильных компонентов. Затем код может быть экспортирован в Angular для Интернета и реагировать на Native для мобильных устройств.
«Этот процесс передачи между командой дизайнеров и командами фронтальных инженеров занимает время из -за количества итераций, которые он проходит, чтобы получить идеальную внедрение подгонки и финишировать», — сказал Прашант Редди, старший директор по продукту WaveMaker. «Благодаря автоматическому коду, мы пытаемся сделать эту передачу между дизайнером и командой фронтальной инженерии Pixel Для них, чтобы доставить конечный продукт ».
Низкий код, но для программистов
По словам соучредителя Wavemaker и технического директора Deepak Anupalli, WaveMaker-это платформа с низким содержанием кодов, но в первую очередь она используется профессиональными разработчиками frontend в финансовых учреждениях, крупных продуктах и независимых поставщиках программного обеспечения. Часто эти компании строят и доставляют сотни экранов в рамках своего путешествия по модернизации продуктов.
«Еще до LLMS (модели с большими языками) мы генерировали код в угловании и реагировали нативные, и мы на самом деле давали код разработчику, чтобы они могли создать свое приложение на вершине», — сказал он. «Вот как мы смогли убедить наших разработчиков принять продукт. Они на самом деле видят реальный код, они владеют им и настраивают его ».
Что делает авток
Автод переводит материал 3 на основе рисунка на основе фигма в код, готовый к производству для элементов пользовательского интерфейса, навигации и взаимодействия приложений.
Материал 3 — это система проектирования с открытым исходным кодом Google. Figma использует комплект дизайна Material 3, который включает в себя предварительно разработанные компоненты, стили и руководящие принципы. Это позволяет дизайнерам легко создавать прототипы и макеты, которые придерживаются принципов материала 3.
В то время как WaveMaker AutoCode работает из коробки для проектов Figma, используя систему проектирования Material 3, его можно разрешить работать с клиентскими предсказательными системами проектирования. AutoCode идентифицирует элементы дизайна, такие как формы, списки и карты, и отображает их по соответствующим виджетам в Wavemaker Studio. Он поддерживает переменные фигмы, режимы и токены дизайна для поддержания целостности исходного дизайна в процессе разработки.
Сгенерированный код также может быть настроен для добавления бизнес -логики в студийной среде WaveMaker.
Создание компонентов
В настоящее время WaveMaker имеет более 90 компонентов, включая кнопки, текстовые поля, формы, многоэтапные формы, таблицы и диаграммы. Он также предлагает компоненты мобильного приложения, которые обычно используются, включая нижнюю навигацию.
«Есть шаблоны, которые появляются, которые мы видим как распространенное в веб -и мобильном приложении, а затем мы компонентизируем это и добавляем это в продукт», — сказал Редди.
Автод может распознавать отдельные компоненты, такие как текстовое поле или кнопку, но он также может группировать их и распознать, что вместе они создают длинную форму или форму регистрации.
«Эта абстракция очень важна, потому что тогда модель программирования смещается на« Куда вы хотите, чтобы данные, выходящие из этой формы? », — сказал Редди. «Наша модель ИИ распознает все компоненты, которые находятся в дизайне, а затем объединяют компоненты в дизайне в логические абстракции более высокого порядка — такие как формы, сетки таблицы, список карт — будь то вертикальные или горизонтальные».
Он также распознает абстракции более высокого порядка.
«С точки зрения программы, когда вы видите список карт, вы думаете о них как о массиве ваших данных», — сказал он. «Для программиста очень важно не видеть пять карт, которые находятся в дизайне Figma как отдельные карты, а в качестве списка. Итак, наша модель ИИ делает все это ».
ИИ, но не LLM
Автод код-это инструмент на основе машинного обучения (ML), но не генеральный ИИ. Вместо того, чтобы тренировать LLM, он опирается на метаданные из дизайна Figma. Это решает проблему галлюцинации, сказал Редди и Анупалли.
«Наша реализация основана на методах ML, которые не используют LLM, и поэтому это одна часть архитектуры решения, которая делает его предсказуемым и последовательным каждый раз, когда вы запускаете», — сказал он. «Мы генерируем токены дизайна, затем компоненты, которые используют их, а затем страницу. Все это архитектурные ограждения, которые обеспечивают точное качество перевода, и вы можете проверить это на каждом уровне ».
WaveMaker также предлагает WaveMaker Copilot, помощник по AI, работающему на основе AI в студии разработчика WaveMaker, который может обеспечить настройку пользовательского интерфейса на основе быстрого пользовательского интерфейса для пользовательских интерфейсов WaveMaker.
Примечание редактора: обновлено 5 февраля, 10:28, чтобы исправить написание Дипака Анупалли.
Trending Stories youtube.com/thenewstack Tech движется быстро, не пропустите эпизод. Подпишитесь на наш канал YouTube, чтобы транслировать все наши подкасты, интервью, демонстрации и многое другое. Группа подпишитесь с эскизом. Loraine Lawson — ветеран -репортер, который в течение 25 лет освещал технологические проблемы от интеграции данных до безопасности. Прежде чем присоединиться к новому стеку, она работала редактором Banking Technology Site Bank Automation News. Она … читайте больше от Лорейн Лоусон
