Может ли нейросеть сверстать качественный сайт? Ожидание VS реальность

Инструменты с искусственным интеллектом обещают упростить и ускорить процесс верстки. Кажется, что достаточно создать пару хороших промтов — и у команды на руках готовый рабочий сайт. Но все ли так идеально в реальности?

Мы, команда RocketDev, протестировали доступные сервисы и сделали собственные выводы. В этой статье мы разберемся, стоит ли доверять ИИ полноценную верстку, а также выясним, насколько целесообразно применение нейросетей на клиентских проектах.

Адаптивность

При работе с нейросетями мы обратили внимание, что зачастую они используют фиксированные размеры. ИИ игнорирует принципы mobile-first подхода, некорректно применяет медиа-запросы и испытывает трудности с flexbox и grid-контейнерами. У ресурса на базе сгенерированного кода будут серьезные проблемы с адаптивностью.

Точечных правок недостаточно — команде придется системно переделывать верстку, чтобы обеспечить корректное отображение на различных экранах. Это значительно увеличит затраты времени и ресурсов на проект.

Производительность

Ресурсы, сгенерированные нейросетями, отличаются низкой производительностью. Основные причины:

• избыточный CSS с многочисленными переопределениями;
• неоптимизированные селекторы;
• лишний JavaScript код;
• отсутствие минификации и оптимизации изображений;
• использование inline-стилей вместо внешних CSS.

Нейросеть привлекает большое количество библиотек даже для решения простых задач. В результате эти факторы негативно повлияют на скорость загрузки страниц и общий пользовательский опыт.

Актуальность данных

Поскольку ИИ собирает готовые решения из интернета, то часто предлагает устаревшие подходы и технологии. Также он пытается совместить несовместимые решения, копирует распространенные антипаттерны.

Безопасность

Сгенерированный код уязвим для атак и может поставить под угрозу безопасность сайта. И вот основные проблемы:

• XSS уязвимости, которые появляются из-за отсутствия экранирования данных;
• небезопасные inline-скрипты;
• отсутствие защиты от CSRF;
• слабая валидация пользовательского ввода;
• использование устаревших библиотек с уязвимостями.

Под ударом может оказаться не только инфраструктура сайта, но и конфиденциальная информация о пользователях.

Влияние на SEO

Также мы выявили проблемы сгенерированной верстки, которые могут негативно отразиться на SEO-продвижении.

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

Для устранения ошибок программисту придется переписать структуру HTML, уменьшить зависимости от JavaScript и внедрить server-side rendering.

Работа с промтами

Мы тестировали разные способы генерации веб-страниц, но зачастую получали несвязный, хаотичный результат без четкой архитектуры. Корректировать промт бесполезно, так как ИИ может сгенерировать совершенно новый результат. В итоге программист теряет внесенные изменения и получает данные, которые снова придется править. В условиях потока клиентских задач этот метод сыграет с командой злую шутку.

Вывод

Основная проблема ИИ при верстке сайта — он создает «код, который работает», но не «код, который работает правильно». Его придется постоянно править, актуализировать, проверять на уязвимости. Мы даже подсчитали, сколько времени уйдет на верстку лендинга с помощью ИИ.

• Генерация ИИ: 10%
• Исправление адаптивности: 40%
• Оптимизация производительности: 30%
• Исправление семантики и SEO: 25%
• Правка безопасности: 15%

Итого: 120% времени

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

Неужели с нейросетями все так плохо? Вовсе нет. В верстке мы задействуем ИИ для быстрого прототипирования, обучения новичков и генерации базовой структуры в качестве отправной точки.

Ну а самое главное — они помогают нам в разработке. Мы передаем нейросетям часть рутины, чтобы сосредоточиться на сложных творческих задачах. О плюсах такого подхода мы поговорим в следующих материалах.

От архитектуры до продакшена: проектируем, собираем, развиваем веб-приложения на React и Next.js. Подробнее о наших услугах.