Как улучшить дизайн сайта, созданного ИИ

1. Найдите конкретную проблему

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

• Иерархия: видно ли главное действие и понятно ли, кому предназначен продукт?
• Композиция: есть ли причина у каждой карточки, колонки и декоративного элемента?
• Читаемость: помещается ли текст, различимы ли подписи кнопок, не перекрывает ли фон содержание?
• Цельность: повторяются ли правила шрифтов, цветов, радиусов и расстояний?

Запишите «три одинаковых блока подряд» или «подпись не читается на светлой кнопке». Это проверяемые задачи. «Не хватает премиальности» пока остаётся пожеланием, которое нужно перевести в конкретные изменения.

2. Выберите одно визуальное направление

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

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

Зафиксируйте направление коротко: светлая или тёмная основа, один акцент, гарнитуры заголовков и текста, тип изображений. Если бренд уже существует, используйте его правила. Новое направление должно объяснять содержание страницы, а не скрывать его.

3. Замените общие обещания содержанием

Фразы «инновационные решения» и «новый уровень возможностей» можно поставить почти на любой сайт. Замените их ответами: что делает продукт, для кого, какой следующий шаг. Реальный снимок интерфейса или понятная схема процесса помогают, когда объясняют именно этот ответ.

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

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

4. Замените одну секцию

Сохраните текущую версию в Git и выберите одну секцию с наибольшей проблемой. Если первый экран уже объясняет предложение, не обязательно начинать с него: однообразный блок «О компании» или нечитаемый FAQ могут быть более точной задачей.

Подберите блок под существующий объём контента. Сначала установите исходный вариант через «Копировать для ИИ», затем сравните его с превью. Порядок действий разобран в первом гайде по Cursor.

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

5. Дайте агенту ограниченное задание

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

Улучши только секцию «О компании» на главной. Сначала найди её в коде и кратко опиши, что будешь менять.

Используй блок из VibeUI:
<свежая ссылка из «Копировать для ИИ»>

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

6. Проверьте результат на своей странице

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

• Проверьте соседние секции: фон, отступ между блоками и порядок заголовков.
• На ширине около 390 px проверьте переносы, подписи, отсутствие горизонтальной прокрутки и доступность действий.
• Пройдите страницу клавишей Tab. Проверьте ссылки, формы и реальные назначения кнопок.
• Проверьте поведение при уменьшении движения и не делайте важный текст доступным только после анимации.

Этот план помогает управлять правками, но сам по себе не доказывает рост заявок. Для такого вывода нужны отдельные данные посещений и действий. Сначала добейтесь понятной, цельной и работающей страницы; затем измеряйте её результат.