Как просить ИИ исправить сайт: 8 запросов вместо «сделай красивее»
Чтобы ИИ исправил сайт предсказуемо, укажите четыре вещи: где находится проблема, что вы видите, каким должен стать результат и что нужно сохранить. Фраза «сделай красивее» оставляет все четыре решения агенту. Запрос «увеличь расстояние между ценой и кнопкой в карточках услуг, сохрани остальную страницу» задаёт понятную границу работы.
Ниже восемь учебных запросов для фрилансера или студии, которые дорабатывают первую версию сайта. Это заготовки для конкретных наблюдений, а не отчёт о тестировании. Замените названия блоков и тексты своими, отправляйте подходящий запрос по одному и проверяйте результат перед следующей правкой.
Сначала опишите наблюдение
Полезный комментарий состоит из факта и желаемого изменения. Вместо «страница тяжёлая» напишите: «На телефоне заголовок занимает почти весь первый экран, основная кнопка уходит ниже». Приложите скриншот проблемного места, если он поможет однозначно найти элемент. Отметьте ширину экрана или устройство и адрес страницы.
Если проблема в самой идее первого экрана, начните с выбора задачи для него. Если хочется изменить весь визуальный стиль, сначала соберите задание по дизайн-референсу. Восемь запросов ниже подходят для локальных изменений уже выбранного решения.
1. Отступы: разнести элементы внутри карточки
Наблюдение: цена визуально сливается с описанием, кнопка стоит вплотную к тексту. Критерий: на телефоне и компьютере понятно, где заканчивается описание и начинается действие.
Исправь только внутренние отступы карточек в разделе «Услуги».
Сейчас описание, цена и кнопка стоят слишком близко друг к другу.
Раздели их на три читаемые группы и используй одинаковые
расстояния между одинаковыми элементами во всех карточках.
Сохрани тексты, цены, размеры шрифта, цвета и ссылки.
Не меняй порядок карточек и расстояния между разделами страницы.
Результат: элементы не сливаются и не перекрываются
на узком и широком экране.
После правки сравните короткую и самую длинную карточку. Одна аккуратная карточка ещё не означает, что правило подходит всему разделу.
2. Заголовок: сократить без новых обещаний
Наблюдение: заголовок длинный и повторяет подзаголовок. Критерий: смысл услуги сохранён, неподтверждённых преимуществ не появилось.
Сократи только главный заголовок.
Текущий текст: «Индивидуальное изготовление деревянных полок
для дома по вашим размерам и пожеланиям».
Новый текст: «Деревянные полки по вашим размерам».
Не меняй подзаголовок, кнопку, изображения и остальные разделы.
Не добавляй сроки, скидки, гарантии или новые характеристики.
На телефоне заголовок должен читаться целиком, без обрезания
и горизонтальной прокрутки.
Здесь редактор сам выбирает формулировку и просит заменить её точно. Если вы хотите варианты от ИИ, сначала запросите их отдельно, выберите один и только затем поручите изменение страницы.
3. Палитра: выделить основное действие
Наблюдение: второстепенные кнопки выглядят так же, как основная. Критерий: посетитель видит главное действие, но подписи остальных элементов остаются читаемыми.
Измени только оформление кнопок первого экрана.
Кнопку «Обсудить заказ» сделай главным акцентом:
используй уже выбранный акцентный цвет проекта.
Кнопку «Посмотреть работы» оформи как второстепенную.
Сохрани обе подписи, адреса переходов, размеры и расположение.
Не меняй фон страницы, логотип и палитру других разделов.
Проверь в коде состояния наведения и клавиатурного фокуса:
текст должен оставаться различимым, фокус — заметным.
Проверьте обе кнопки обычным наведением и клавишей Tab. Разный цвет сам по себе не подтверждает удобство или доступность; оцените реальные состояния и читаемость.
4. Меню: закрывать после выбора раздела
Наблюдение: на телефоне переход к разделу происходит, но меню остаётся поверх страницы. Критерий: выбранный раздел виден, меню можно открыть снова.
Исправь поведение существующего мобильного меню.
После выбора пункта меню выполни его текущий переход
и закрой меню. Сейчас оно остаётся поверх содержимого.
Сохрани названия пунктов, адреса ссылок и оформление шапки.
Не добавляй новые страницы и не меняй меню на компьютере.
После закрытия страница должна снова свободно прокручиваться,
а кнопка меню — позволять открыть его повторно.
Проверьте переход, прокрутку и повторное открытие. Отдельно попробуйте закрыть меню без выбора пункта: исправление одного пути не должно ломать другой.
5. Карточки: выровнять кнопки при разной длине текста
Наблюдение: в одном ряду кнопки находятся на разной высоте. Критерий: кнопки выровнены, а содержимое длинной карточки не спрятано.
Исправь компоновку карточек в разделе «Варианты работы».
В ряду на широком экране расположи кнопки по нижней линии,
даже когда описания имеют разную длину.
Не сокращай тексты и не прячь строки за многоточием.
Сохрани порядок, ссылки и фотографии.
Не задавай высоту, из-за которой содержимое обрезается.
На телефоне карточки должны идти удобной вертикальной колонкой,
без лишней пустоты ради выравнивания с соседней карточкой.
Сравните все карточки, а не только первую строку. Если клиент позже увеличит описание, правило должно позволить блоку вырасти.
6. Изображение: сохранить важную часть кадра
Наблюдение: на телефоне обрезается предмет, ради которого поставлена фотография. Критерий: важная часть видна, изображение не растянуто.
Исправь только отображение фотографии в первом экране.
На узком экране правая часть полки выходит за границу кадра.
Подбери положение и способ вписывания изображения,
чтобы полка была видна целиком и сохранялись пропорции.
Используй текущий файл. Не заменяй его и не генерируй новый.
Не меняй тексты, фон, кнопку и остальные изображения.
Если сохранить текущую высоту блока без обрезания невозможно,
объясни ограничение и предложи вариант компоновки.
Уточните в запросе, какой объект необходимо сохранить. «Не обрезай важное» недостаточно: агент может иначе определить смысловой центр фотографии.
7. Форма: сделать ошибки понятными
Наблюдение: посетитель не понимает, какое обязательное поле пропущено. Критерий: ошибка указана рядом с полем, введённый текст сохранён.
Доработай только сообщения проверки существующей формы.
При пропуске обязательного поля покажи рядом с ним
понятную причину, например «Укажите способ связи».
Не обозначай ошибку только цветом.
Сохраняй уже введённые значения при ошибке проверки.
Не меняй набор полей, адрес отправки и подключение формы.
Не показывай успешную отправку, если её не подтвердил
действующий обработчик. Если обработчик не подключён,
сообщи об этом отдельно и не имитируй получение заявки.
Этот запрос касается обратной связи в интерфейсе. Реальное получение заявки проверяют отдельно по согласованному маршруту; внешний вид сообщения не доказывает, что данные дошли.
8. Ссылки: привести одинаковые кнопки к одному действию
Наблюдение: две кнопки «Обсудить заказ» ведут в разные места. Критерий: обе открывают согласованный раздел, другие ссылки сохранены.
Исправь ссылки только у кнопок «Обсудить заказ»
в первом экране и в разделе «Услуги».
Обе должны вести к существующему разделу «Контакты»
на этой же странице.
Сохрани подписи, оформление и все остальные ссылки.
Не создавай новую форму, страницу или внешний адрес.
После перехода заголовок «Контакты» должен быть виден,
а не скрыт под закреплённой шапкой.
Нажмите каждую из двух кнопок: одинаковая подпись не означает одинаковую настройку. Проверьте и обратный путь к основному содержимому.
Как принимать правку
После каждого запроса сравните результат с наблюдением, с которого начинали. Проверьте изменённый элемент и соседнее действие: после меню — переход, после карточки — кнопку, после ошибки формы — возможность исправить поле.
Если результат не подходит, опишите оставшуюся разницу: «Кнопки выровнялись, но длинная карточка обрезает последнюю строку». Такой ответ продолжает конкретную задачу. Новое «переделай всё» меняет её границы и затрудняет сравнение версий.
Перед показом клиенту пройдите чек-лист проверки первого сайта. Отметьте, что вы проверили самостоятельно, а что пока известно только из ответа агента. Для следующего запроса в Lovarus возьмите один подходящий пример выше и подставьте наблюдение из своего проекта.