Часть 1. Из первого модуля: ИИ и сборка сайтов

Карта типовых ошибок

Что вижу на экране → почему так → что написать ИИ

Как этим пользоваться

1. Найдите свой симптом — то, что реально видите на экране.

2. Прочитайте вероятную причину — чтобы понимать, а не просто копировать.

3. Скопируйте готовую фразу, подставьте своё и отправьте ИИ.

Прежде чем начать — три правила

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

Не пересказывайте ошибку своими словами. Если на экране есть текст ошибки — копируйте его целиком, как есть. «Там что-то красное написано» ИИ не поможет.

Одна поломка — одно сообщение. Не сваливайте три проблемы в кучу.

🔴 Не работает вообще

Пустой экран, ошибка, ничего не грузится

Белый пустой экран

Что вижу: превью пустое, ничего нет.

Скорее всего: в коде ошибка, из-за которой страница не может отрисоваться. Одна опечатка ломает всё целиком.

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

Красная надпись с ошибкой

Что вижу: сообщение об ошибке, обычно на английском.

Скорее всего: ИИ написал код с ошибкой при последней правке. Обычное дело, чинится за один заход.

Появилась ошибка. Вот её текст целиком: [вставьте текст ошибки, ничего не сокращая и не переводя] Объясни простыми словами, что случилось, и исправь.

Как скопировать: выделите текст ошибки мышкой и нажмите Ctrl + C. Если не выделяется — сделайте скриншот (Win + Shift + S) и приложите его к сообщению.

Всё работало, а после правки сломалось

Что вижу: до последнего сообщения всё было хорошо.

Скорее всего: новая правка задела то, что работало раньше.

Последнее изменение сломало [что именно перестало работать]. Верни этот кусок к тому, как было до правки. Остальные изменения оставь.

Если не помогло — откатитесь через историю версий и попробуйте другую формулировку правки.

Крутится загрузка и ничего не происходит

Что вижу: значок загрузки, минуты идут.

Скорее всего: большой запрос обрабатывается дольше обычного. До трёх минут — норма.

Что делать:

🟡 Работает не так

Сайт открывается, но ведёт себя неправильно

Кнопка не нажимается

Что вижу: нажимаю — ничего не происходит.

Скорее всего: ИИ нарисовал кнопку, но не описал, что она должна делать. Самая частая недоработка.

Кнопка [название кнопки] не работает: при нажатии ничего не происходит. Она должна [что должно происходить]. Исправь.

Кнопка ведёт не туда

Что вижу: нажимаю — открывается что-то не то.

Скорее всего: в ссылке опечатка или ИИ подставил свою заглушку.

Кнопка [название] должна открывать [куда: WhatsApp на номер +7XXX / раздел «Услуги» на этой же странице]. Сейчас она ведёт не туда. Исправь.

Форма отправляется в никуда

Что вижу: заполнил, нажал «Отправить» — и тишина.

Скорее всего: форма нарисована, но не подключена. Данные никуда не уходят.

Форма [название] не работает. Нужно, чтобы после отправки [что происходит: появлялось сообщение «Спасибо, свяжемся в течение часа», а данные приходили на почту адрес@почта.ру]. Настрой это.

Данные пропадают при обновлении

Что вижу: добавил записи, обновил страницу — всё исчезло.

Скорее всего: данные нигде не сохраняются, живут только пока открыта вкладка.

Записи пропадают при обновлении страницы. Сделай так, чтобы они сохранялись в базе данных и не исчезали.

Считает неправильно

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

Скорее всего: ИИ придумал свою логику расчёта, отличную от вашей.

Расчёт неверный. Проверил так: [выбрал А и Б → получил 5000 ₽, а должно быть 7000 ₽]. Правильная логика: [опишите, как надо считать]. Исправь.

Обязательно приведите конкретный пример с числами. Без него ИИ будет угадывать.

Работает только один раз

Что вижу: первый раз сработало, дальше нет.

Скорее всего: состояние не сбрасывается после первого действия.

[Что именно] срабатывает только один раз, при повторном действии ничего не происходит. Сделай так, чтобы работало каждый раз.

🟠 Выглядит криво

Всё работает, но выглядит не так

Текст налезает друг на друга

Что вижу: буквы наползают, блоки перекрываются.

Скорее всего: не хватает отступов, или блоки заданы жёстким размером.

Текст в блоке [название] налезает на соседние элементы. Добавь отступы и сделай так, чтобы блоки не перекрывались.

На телефоне всё разъехалось

Что вижу: на компьютере хорошо, на телефоне беда.

Скорее всего: нет мобильной версии. Самая частая проблема из всех.

На телефоне [опиши: текст вылезает за экран, кнопки налезают друг на друга]. Сделай нормальную мобильную версию, чтобы всё помещалось. На компьютере ничего не меняй.

Страница ездит вбок

Что вижу: на телефоне двигается влево-вправо.

Скорее всего: какой-то элемент шире экрана.

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

Текст не читается

Что вижу: слишком бледный, слишком мелкий, сливается с фоном.

Текст плохо читается: слишком [мелкий / бледный / близко к фону по цвету]. Увеличь размер, повысь контраст и увеличь межстрочный интервал.

Картинки не появились

Что вижу: серые прямоугольники или значки сломанного изображения.

Скорее всего: ИИ оставил места под фото, но самих фотографий нет — вы их ещё не загрузили. Так и должно быть на этом этапе.

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

Осталось «Lorem ipsum» и заглушки

Что вижу: непонятный текст на латыни, «Название компании», «Услуга 1».

Скорее всего: ИИ не получил указания придумать реальные тексты.

Замени все тексты-заглушки на реалистичные, подходящие для [тип проекта: сайта мастера маникюра]. Никакого «Lorem ipsum» и «Услуга 1» остаться не должно.

Цвета не те, что просил

Что вижу: попросил бежевый — получил белый.

Скорее всего: формулировка была слишком общей.

Цвета не те. Нужно: фон [точное описание: тёплый бежевый, песочный оттенок], текст [тёмно-коричневый], кнопки [золотые]. Поправь только цвета, остальное не трогай.

Всё слишком плотно

Что вижу: блоки прижаты друг к другу, тесно.

Слишком плотно. Увеличь расстояния между блоками и отступы внутри карточек. Размеры текста не меняй.

⚫ Когда ИИ ходит по кругу

Три попытки — та же проблема

Смените подход

Перестаньте просить починить. Попросите объяснить:

Мы уже три раза пытались исправить [проблема], и не получается. Давай иначе: сначала объясни по шагам, как сейчас устроен этот кусок и почему он не работает. Пока ничего не меняй.

Это работает чаще всего. Когда ИИ начинает разбирать свой же код вслух, он сам находит противоречие.

Попросите варианты

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

Начните новый чат

Длинный разговор путает ИИ: он тащит за собой всю историю, включая неудачные попытки.

Что делать: откройте новый чат и опишите задачу заново, коротко и с нуля.

Откатитесь

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

Разбейте на части

Давай по шагам. Сначала сделай только [первая маленькая часть] и ничего больше. Проверим и пойдём дальше.

✅ Алгоритм на любой случай

Не нашли свой симптом? Идите по порядку.

Универсальная фраза

Если совсем не понимаете, что происходит:

Что-то работает не так. Опиши, что сейчас делает эта страница, и проверь её на ошибки: рабочие ли кнопки, нормально ли выглядит на телефоне, нет ли заглушек и незаполненных мест. Составь список того, что стоит поправить.

Иногда проще спросить у ИИ, что не так, чем формулировать самому.

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