Как мы научили AI верстать страницы в системе сайта

На одном из проектов SEO-специалисты не только готовили тексты, но и сами размещали их на сайте. Верстальщика в процессе не было, поэтому HTML для новых материалов они получали через нейросетевые инструменты.

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

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

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

Проблема здесь была не в SEO-специалистах и не в самой нейросети. Чтобы поставить AI точную задачу, нужно самому понимать, каким должен быть хороший результат.

Сначала мы сняли с SEO-специалистов задачу верстки

Это всех вполне устраивало: им нужно было заниматься текстами и SEO, а не разбираться, почему в очередной странице появились новые стили.

Мы взяли уже созданные материалы и сначала привели верстку в порядок.

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

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

Вместо того чтобы каждая страница сама описывала свой внешний вид, HTML стал содержать в основном структуру. Так появилась единая дизайн-концепция для информационных страниц.

Готовую систему мы отдали нейросети на изучение

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

На основе этого была подготовлена инструкция.

В ней уже можно было явно написать, как оформляются различные элементы интерфейса:

• обычный смысловой блок;
• карточка;
• маркированный список;
• нумерованный список;
• таблица;
• CTA;
• кнопки;
• сетка разметки.

То есть нейросеть получила не пример, который нужно приблизительно имитировать, а правила выбора.

И это сильно изменило результат.

Что пришлось зафиксировать в инструкции

Чтобы от запроса к запросу получать предсказуемую разметку, оказалось недостаточно просто перечислить несколько CSS-классов.

Нужно было явно определить границы работы AI.

Например, мы зафиксировали, что текст уже готов и переписывать его не нужно. Нейросеть отвечает только за разметку. Описали, какой именно HTML нужен на выходе. Для статьи, например, требуется только содержимое контентного блока: без head, body, шапки сайта, подвала и другого внешнего каркаса.

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

Зафиксировали запреты на добавление inline-стилей, случайных недокументированных цветов и отступов, вариантов оформления интерфейса и новых декоративных решений.

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

Наконец, в инструкции нужны эталонные примеры. Не только описание “для списка используйте такой класс”, но и небольшой правильный HTML-фрагмент. На практике это сильно снижает количество трактовок.

После этого AI стал заниматься своей частью задачи

Теперь можно взять готовый текст, передать его вместе с инструкцией и получить чистый HTML на существующих классах сайта.

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

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

Для меня здесь важен более общий вывод.

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

Разница часто в том, кто ставит задачу.

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

В нашем случае сначала пришлось профессионально решить задачу верстки. И только после этого оказалось возможным достаточно точно объяснить это решение AI, чтобы дальше он воспроизводил его самостоятельно.