Представим небольшую юридическую компанию, которая собирает сайт с помощью нейросети без спешки. Главную страницу сгенерировали в марте, страницу услуг в апреле, раздел с командой в мае. Каждый раз запрос был подробный, в нем упоминались фирменный синий цвет и «строгий, но дружелюбный стиль». Каждая страница по отдельности получилась симпатичной.
А потом их открыли подряд. Синий везде синий, но у кнопок на главной скругленные углы, на услугах прямые, а в разделе команды кнопок нет вовсе, вместо них ссылки. Заголовки разного размера, карточки с разными отступами, иконки из трех разных наборов. Похоже на семейный альбом, где все вроде бы родственники, но никто ни на кого не похож.
Почему нейросеть каждый раз рисует немного другой сайт
Каждая генерация — это новое решение. Модель видит запрос, а не историю ваших прошлых страниц, если вы ее специально не передали. «Строгий, но дружелюбный стиль» для нее скорее направление, чем описание конкретного сайта, и в этом направлении можно сделать сотню разных вариантов. Она выбирает один из них, и через месяц, скорее всего, выберет другой.
Тильда в справке о DESIGN.md говорит об этом прямо: если стиль для вайб-блока не выбран, блок будет создан в стиле, который выберет используемая AI-модель. Это честное описание поведения любой генерации. Без заранее зафиксированных правил единый стиль не появляется сам, его каждый раз приходится угадывать заново.
Что кроме цветов нужно зафиксировать
Палитра — самая заметная и самая простая часть. Из-за нее легко решить, что, указав два-три цвета, вы задали стиль. На деле характер сайта гораздо сильнее держится на вещах, о которых в запросе обычно не пишут: на шкале размеров заголовков и текста, на отступах между блоками, на форме и состояниях кнопок, на том, как устроены карточки, формы и списки.
Я бы смотрела на дизайн-систему как на набор повторяемых решений. Какая кнопка главная, а какая второстепенная. Как выглядит карточка услуги и что в ней обязательно: заголовок, короткое описание, цена или ссылка. Что происходит с элементом на телефоне. Каким тоном написаны подписи к полям формы. Чем больше таких ответов дано заранее, тем меньше простора для импровизации при генерации новой страницы, и тем меньше сюрпризов при открытии страниц подряд.
Длинный текст — лучший тест для дизайн-системы
Макеты обычно рисуют на удобных текстах. Короткий заголовок в одну строку, аккуратное описание в две, ровные карточки по три в ряд. Реальный контент юридической компании выглядит иначе: «Сопровождение сделок с коммерческой недвижимостью и арендой» в карточке, рассчитанной на «Консультации», ломает и высоту, и ритм всей сетки.
Хорошая дизайн-система описывает, как компоненты ведут себя в неудобных ситуациях: с длинным названием, с пустым полем, с тремя строками вместо одной, на узком экране. Если этих правил нет, нейросеть решает каждый случай по-своему. На одной странице длинный заголовок уменьшится, на другой перенесется, на третьей обрежется многоточием. По отдельности все три решения допустимы. Вместе они и создают тот самый семейный альбом.
Что дает DESIGN.md и чего он не обещает
Для вайб-блоков у Тильды есть свой ответ на эту проблему. По справке, DESIGN.md — это описание дизайна, которое включает цвета, типографику и компоненты, а AI Agent считывает файл и создает блоки в этом стиле. Стиль можно выбрать в библиотеке, найти по категории или добавить свой, а при генерации информация о нем появляется в поле «Контекст». Одновременно можно использовать только один стиль DESIGN.md.
Это полезный инструмент: он дает модели общий контекст, и генерации перестают начинаться с чистого листа. Но справка описывает именно контекст для генерации. Гарантии, что каждый элемент будет точно соответствовать описанию, или проверки на удобство и доступность там нет. И стоит помнить, что DESIGN.md работает внутри вайб-блока, а у вайб-блока свои особенности поддержки: код, панель «Контент», которая зависит от конкретного блока, и правки, которые иногда задевают похожие элементы.
Один сайт, а не коллекция страниц
Когда страниц много и появляются они в разное время, общий стиль лучше закладывать до первой генерации: в стилях проекта, в устройстве карточек и в правилах для текстов. Тогда новая страница через полгода выглядит частью того же сайта.
Где живет дизайн-система на стандартных блоках
У стандартных блоков Тильды тоже есть место для общих правил, и оно старше любых нейросетей. По справке о шрифтах, гарнитура, размер, насыщенность и цвет заголовков и текста задаются в настройках сайта и применяются ко всем стандартным блокам, если в блоке не заданы свои значения. В разделе «Цвета и стили» можно завести стили цвета, типографики и кнопок, причем у стиля типографики настраивается размер шрифта для разных диапазонов экрана. Созданные стили можно скачать и импортировать в другой проект.
Мне ближе такой порядок: нейросеть помогает быстро найти визуальное направление и собрать прототип, а дальше правила переезжают в стили проекта, и страницы собираются уже на них. Прототип в этой схеме остается черновиком, а у сайта появляется одно место, где живет его характер. Поменяли стиль кнопки, и все кнопки сайта поменялись вместе, без похода по страницам.
Юридической компании из начала статьи не обязательно все переделывать. Достаточно выбрать одну страницу, которая нравится больше остальных, описать ее решения словами и стилями и привести к ним остальные. Семейный альбом от этого не станет скучнее, просто родственники наконец узнают друг друга.