Нейросети · 3 мин

Нейросеть сломала сайт: как исправлять по одной причине

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

Что разберём

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

Остановитесь на воспроизводимой ошибке

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

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

Сократите область изменения

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

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

Повторить→Исправить→Проверить
Один воспроизводимый сбой позволяет проверить эффект конкретного изменения.

Пример рабочего запроса

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

Пример для практики
Проблема: мобильное меню скрывается под обложкой.
Шаги: открыть страницу на ширине 390px, нажать «Меню».
Ожидание: все ссылки видны и доступны.
Факт: нижние ссылки перекрыты картинкой.
Проверь HTML меню и связанные CSS-правила.
Предложи минимальную правку, объясни причину.
Не меняй тексты, ссылки и остальные блоки.
Опиши, как проверить исправление.

Проверьте не только исчезновение симптома

Если меню стало видно после огромного z-index, это ещё не доказательство аккуратного решения. Проверьте закрытие, прокрутку, клавиатуру и широкую версию. Возможно, нужно исправить контекст наложения или порядок элементов, а не перекрыть все остальные части сайта.

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

Составьте короткий журнал проверки

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

Практика: в HTML/CSS-песочнице намеренно задайте картинке слишком большую ширину. Сформулируйте запрос на исправление, но сначала сами найдите правило, которое мешает. Сравните своё объяснение с ответом нейросети: цель упражнения — научиться проверять предложенное решение.

из статьи — в свой проект

HTML/CSS-песочница

Открой инструмент ZIPKA и попробуй пример из разбора. Он доступен бесплатно, без записи на курс.

Открыть инструмент ↗

Источники и дальнейшее чтение