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

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

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

Сначала опишите экран, на котором видна проблема

Откройте нужную страницу на телефоне. Если используете просмотр с заданной шириной, запишите её: например, 360 или 390 пикселей. Это примеры размеров для воспроизведения, а не полный набор устройств, который гарантирует адаптацию.

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

Для каждого наблюдения запишите:

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

В Lovarus дождитесь завершения текущей работы в проекте и передайте локальное задание в чат. После изменения проверьте результат в «Просмотре». Этот порядок описан в инструкции по редактированию сайта. Замените поля в скобках в выбранном промпте своими наблюдениями; не отправляйте все пять запросов, если проблемы нет.

1. Длинный заголовок: сохранить слова и освободить место

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

Исправь только заголовок первого экрана на странице [адрес].
Проблема при размере просмотра [ширина × высота]:
[какая строка обрезается или с чем перекрывается].
Текст заголовка: [полная согласованная формулировка].

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

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

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

2. Высокое меню: дать доступ к последнему пункту

Меню может помещаться на одном телефоне и перестать помещаться при меньшей высоте окна или увеличенном тексте. Важно проверить открытое состояние, а не только значок меню.

Исправь открытое мобильное меню на странице [адрес].
При размере [ширина × высота] недоступны пункты [названия]:
[опиши, что происходит при попытке до них добраться].

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

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

Пройдите этот путь самостоятельно. Если после закрытия меню страница перестала прокручиваться, правка ещё не принята. Проверьте переход по последнему пункту: доступность текста не доказывает, что ссылка ведёт куда нужно.

3. Карточки: разместить длинное название рядом с ценой

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

Исправь мобильную раскладку карточек в разделе [название].
На размере [ширина × высота] в карточке [точный заголовок]
[название, цена или кнопка] перекрывает [элемент].

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

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

Сверьте суммы и единицы после изменения. Ошибка «цена осталась, но исчезло “за месяц”» меняет смысл предложения, даже если карточка теперь выглядит аккуратно. Нажмите на кнопки и проверьте их назначение без отправки реальных заявок.

4. Широкий элемент: устранить причину горизонтального сдвига

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

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

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

Проверь проблемное место и страницу целиком на узком
и широком экране. Сообщи, какой элемент был причиной.

Проверьте края блока и попробуйте добраться до всего содержимого. Для таблицы прочитайте последнюю колонку; для ссылки проверьте полный текст и переход. Отсутствие полосы прокрутки само по себе не является критерием готовности.

5. Закреплённая кнопка: не перекрывать содержимое

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

Исправь закреплённую нижнюю панель на странице [адрес].
На телефоне [устройство и браузер] она закрывает [элемент].
При фокусе в поле [название] наблюдается [что происходит].

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

Не меняй обработку и отправку формы в рамках этой правки.
Перечисли состояния для проверки на реальном телефоне.

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

Как зафиксировать, что исправлено

После каждой задачи вернитесь к исходному скриншоту и повторите то же действие. Затем проверьте соседний размер окна и широкую страницу. Запишите результат словами: «заголовок читается целиком, кнопка не перекрыта, проверены такие-то размеры». Если телефон недоступен, укажите, что проверен только просмотр в окне браузера; не называйте проверку завершённой на всех устройствах.

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