AI в MarkupGen: от генерации кода до оценки

AI в MarkupGen — это не отдельная функция, он пронизывает все три этапа рабочего процесса: сборку кода из дизайна, оценку качества этого вывода и предложения по его улучшению, когда результат не совсем совпадает. Этот пост разбирает каждый уровень и объясняет, почему они созданы для поддержки суждения разработчика, а не для его замены.

Сборка кода из структуры дизайна

На первом этапе AI не «перерисовывает» дизайн по скриншоту — он читает реальную структуру, переданную плагином Figma: Auto Layout, отступы, иерархию слоёв, ограничения ресайза. Отталкиваясь от этого, он генерирует HTML/CSS, который напрямую следует этой структуре, вместо того чтобы угадывать пиксель за пикселем:

• Свойства Auto Layout (направление, зазор, отступы, выравнивание) сопоставляются с эквивалентными правилами CSS Flexbox.
• Ограничения ресайза макета преобразуются в адаптивные точки перелома, а не в единственную страницу фиксированной ширины.
• Вывод отдаёт предпочтение осмысленным HTML-элементам, а не глубоко вложенным, безымянным <div>.

Сборка на основе структуры, а не угадывание по изображению — вот почему результат сохраняет иерархию и отступы исходного дизайна, вместо чего-то, что просто «выглядит правильно», а лежащий в основе CSS совершенно другой.

Выбор подходящей AI-модели для задачи

MarkupGen позволяет выбирать между AI-моделями везде, где этот выбор имеет значение — например, при повторной генерации кода после оценки. Есть два уровня: быстрая, экономичная модель, подходящая для небольших и средних дизайнов, и модель более высокого качества, подходящая для крупных дизайнов с более сложными компонентами. Для аккаунтов, которые не выбирают модель вручную, система автоматически подбирает подходящую на основе текущего тарифа, балансируя скорость и стоимость без необходимости настройки.

Автоматическая оценка качества вывода

После генерации кода AI сравнивает скриншот живого превью с исходным дизайном и оценивает, насколько точно они совпадают, по шкале от 1 до 10. Это не абстрактное число — оно сопровождается подробной оценкой того, что совпадает, а что не так, так что вы сразу понимаете, готов ли экспорт к продакшену или ещё нуждается в доработке. Как только оценка преодолевает порог почти идеального совпадения, система считает, что для AI больше не осталось ничего значимого для исправления, и скрывает ненужные предложения по повторной генерации.

Цикл обратной связи: анализ и повторная генерация

Если экспорт не дотягивает, MarkupGen не просто выдаёт число и останавливается. Экран оценки сравнивает исходный дизайн и живой превью бок о бок, с масштабированием для проверки деталей, генерирует конкретное предложение по улучшению и позволяет отредактировать это предложение перед нажатием «Регенерировать с этим изменением» — так AI пересобирает код вокруг того отзыва, который вы действительно хотите учесть, а не начинает заново наугад.

Почему это важно

Все три уровня направлены на одну и ту же цель: убрать механический перевод из процесса «от дизайна к коду», чтобы усилия разработчика шли туда, где действительно требуется человеческое суждение — детали взаимодействия, пограничные случаи и интеграция результата в более крупную кодовую базу. Если хотите увидеть, как все три уровня работают на вашем собственном дизайне, попробуйте бесплатно.