Zuoyan Lens — это продукт, который преобразует дизайн-макеты в код для создания веб-страниц. Он является одним из направлений «низкокодовых» платформ и работает без участия человека.

Этот проект позволяет легко и быстро преобразовать макеты Sketch или Photoshop в поддерживаемый код фронтенда. Обещают, что работа над 100 страницами займёт не более 10 минут. Это значительно увеличивает производительность разработчиков фронтенда.

Особенности:

• Код производственного уровня. С помощью интеллектуальных алгоритмов создаётся структура и логика CSS, которые по качеству сопоставимы с кодом среднего фронтенд-разработчика. Используется полная flex-вёрстка. Элементы автоматически корректируются в соответствии с их окружением, чтобы соответствовать дизайну. Код получается читаемым и поддерживаемым.
• Интеллектуальное вырезание изображений. Автоматически создаются прозрачные PNG-изображения для вырезания, а также файлы иконок SVG, которые можно использовать как шрифты IconFont или преобразовывать в SVG-спрайты.
• Автоматическое обнаружение шрифтов. Шрифты из дизайн-макетов автоматически обнаруживаются. Если шрифт отсутствует, система предложит его установить. Несоответствие шрифтов может повлиять на качество восстановления страницы. В этом случае дизайнер может объединить слои.
• Распознавание циклических макетов. Алгоритмы точно определяют макеты списков и сеток. Производительность при этом остаётся высокой.
• Кроссплатформенность и независимость от системы. Поддерживаются все платформы, включая Windows и Linux, и обеспечивается совместимость с файлами Sketch.
• Нулевые затраты на обучение для дизайнеров. Дизайнерам нужно только следовать стандартным правилам проектирования. Никаких дополнительных требований нет.
• Открытое преобразование AST, возможность свободного определения вывода. Используется GoGoCode для преобразования абстрактного синтаксического дерева (AST), что позволяет свободно определять выходные языки и синтаксис, такие как React, WeChat Native, Vue, UniApp, Taro и RN.
• Высокая степень восстановления. Средняя степень восстановления дизайна составляет 0,95, что соответствует стандартам производства и значительно снижает затраты на проверку пользовательского интерфейса.

Сценарии использования:

• Разработка мелкозернистых модулей для мобильных устройств.
• Создание активных страниц для мобильных устройств.
• Полная разработка мобильных веб-сайтов.
• Приложения ToC для ПК.
• Приложения ToB для ПК.
• Нативные приложения для ПК с богатым взаимодействием.
• Игровые сценарии.

Планирование низкокодовой цепочки:

• Логическое и событийное программирование. Можно визуально связывать логику с действиями.
• Понимание семантики серверной части. Обеспечивается автоматизация обработки данных и привязки.
• Развёртывание релизов. Автоматизация развёртывания достигается через пользовательские команды развёртывания или интеграцию с CI-процессами.

Как использовать:

• Прямое использование:
  1. Установить: npm i -g @zuoyanart/lens.
  2. Перейти в каталог проекта и выполнить команду (структура каталога приведена в демо).
• Использование с двумя командами:
  1. Клонировать проектный код.
  2. Создать соединение.
  3. Перейти в каталог проекта и выполнить команду.

В настоящее время доступны только DSL-преобразования для H5 и Uniapp. Другие преобразования могут быть созданы самостоятельно.

Для получения дополнительной информации рекомендуется обратиться к демонстрационному примеру.