Личный-опыт · 5 мин чтения

Как я переделал сайт с помощью ИИ — и почему это оказалось сложнее, чем я думал

Как я переделал сайт с помощью ChatGPT, Codex и Cursor за 12 часов. Честный опыт: что работает, а что нет.

Как я переделал сайт с помощью ИИ — и почему это оказалось сложнее, чем я думал

Содержание

Обычно здесь мы пишем про ИИ-агентов и автоматизацию. Но иногда хочется написать про личный опыт работы с ИИ. Это один первый из таких постов.

Есть такая ирония: мой сайт выглядел как типичный ИИ-шный сайт. Знаете этот стиль — чистенько, аккуратненько, пусто. Hero-секция с градиентом, три карточки с иконками, CTA-кнопка по центру. Будто один и тот же промпт запустили тысячу раз и получили тысячу одинаковых результатов.

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

Поэтому я решил сделать редизайн. Сел за это в выходные — и почти весь день просидел на дне. Около 12 часов. Это был один из тех дней, когда открываешь ноутбук утром, а закрываешь уже когда темно за окном. И — да, всё это снова с помощью ИИ. Только на этот раз по-другому.


Шаг 1. Сначала — референсы, потом — промпты

Я не стал сразу кидать задачу в чат. Вместо этого открыл Dribbble и Behance и несколько часов смотрел на дизайны, которые мне нравятся визуально. Это важный момент: у меня не было чёткого технического задания — только ощущение, что я хочу что-то другое.

Когда набрался набор референсов, я загрузил их в ChatGPT и попросил сгенерировать концепцию сайта на их основе. Не копию — именно концепцию: цветовую палитру, структуру, общее настроение.

ChatGPT справился. Концепция получилась — не идеальная, но уже что-то живое.


Шаг 2. Codex пишет вёрстку — и сразу начинаются проблемы

Картинку с концепцией я загрузил в Codex и попросил собрать вёрстку на чистом HTML. С первой попытки получилось криво. С второй — чуть лучше, но дизайн всё равно не нравился до конца.

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

И вот здесь начались настоящие проблемы.

Нейросеть раз за разом делала точь-в-точь — вплоть до текстов из референса. Я просил стиль, а получал копию. Менял промпт, добавлял уточнения — результат всё равно не вписывался в стиль сайта. Было ощущение, что Codex не видит сам сайт, а читает только код — без понимания того, как это выглядит в браузере.

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

Позже я разобрался, почему так происходило. Codex Web (веб-версия) буквально не видит результат своей работы — он не делает скриншот страницы после изменений и не сравнивает с тем, что должно получиться. Он работает только с кодом. Это не метафора — пользователи в открытых issues на GitHub прямо пишут об этом: Codex возвращает страницы с ошибками, не замечая проблемы, потому что не смотрит на визуальный результат.

Идеальный воркфлоу выглядел бы так: ИИ изменил код → сам сделал скриншот → сравнил с референсом → поправил. Такое возможно, если подключить браузерные инструменты вроде Playwright. Но это требует отдельной настройки, и большинство людей просто не знает, что такое вообще существует. Я не знал — и потратил на ручные итерации куда больше времени, чем мог бы.

Дизайн до
Дизайн до


Шаг 3. Код разросся — и я попросил его убрать

После всех правок я получил рабочий дизайн. Но код превратился в болото: ~1000 строк, грязная структура, хаотичные стили.

Тут я сделал неочевидный шаг — попросил нейросеть не добавлять новые фичи, а переписать код чище, используя методологию БЭМ. Результат: код сжался до 500 строк. Читать стало в разы проще.

Почему не переписал сразу в Next.js и не сделал всё по-человечески? Потому что это боевой сайт. Переписывать работающий проект с нуля — риск. Старые стили начали бы мешаться с новыми, что-нибудь обязательно сломалось бы. Решение "сначала очистить, потом переносить" оказалось правильным.


Шаг 4. Cursor закрыл остаток работы

Чистый код я загрузил в Cursor и попросил применить новый дизайн к главной странице. Он справился — не идеально, пришлось кое-что доправлять, но результат был.

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


Что в итоге

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

Дизайн после
Дизайн после

Если бы я делал это снова, вот что изменил бы:

  • Больше времени на референсы в начале. Чем точнее ты понимаешь, чего хочешь — тем меньше итераций потом.
  • Не давать ИИ скриншоты конкурентов без чёткого ограничения. Он буквально скопирует текст. Надо явно писать: "только стиль, не содержание".
  • Сначала чистить код, потом масштабировать. Грязный код + новые правки = хаос. Это я понял чуть позже, чем хотелось бы.
  • Cursor лучше работает, когда у него есть эталон. Сначала доведи одну страницу до финального вида — остальные пойдут быстрее.
  • Если хочешь меньше итераций — подключи браузерные инструменты. Playwright MCP или аналоги дают ИИ возможность видеть результат своей работы визуально, а не только читать код. Это меняет всё.

Это не история успеха в духе "я запустил промпт и получил идеальный сайт". Это история про то, что ИИ — хороший инструмент, но он всё равно требует вкуса, терпения и нескольких десятков итераций.