Как создавался сайт "Городские кварталы"
Ну, расскажу тут про один вечерний эксперимент. Сидел, смотрел на задачу - сделать лендинг для одного новосибирского застройщика, "Городские кварталы" называется. У них там квартиры, оба берега, семьи, инвесторы, всякое такое. И подумал: а дай-ка попробую провернуть всё через AI-ассист
Первым делом набросал ТЗ. Без этого вообще никак, потому что если дать AI полную волю, он напишет вам сайт то ли для пиццерии, то ли для космического туризма. Расписал всё конкретно: целевая аудитория - семьи и инвесторы, цель - заявки через квиз и звонки, структура от шапки до подвала, 7 шагов для квиза, чтобы человек сначала выбрал район, потом бюджет, потом сроки, а в конце оставил контакты. Ну и технику типа Bootstrap 4, ЧПУ и title с description. Минут 20 на это ушло, но, блин, эти 20 минут потом сэкономили кучу нервов.
Потом я загрузил это ТЗ ассистенту и сказал: "Сделай двухстраничник". И он, надо сказать, выдал вполне себе годную картину. Сгенерировал логотип, hero-фон с какими-то новостройками, картинки для жилых комплексов - "Солнечный берег", "Городской парк", "Первый квартал". Все картинки без стоков, AI-шные, выглядят как рендеры, даже придраться не к чему. Написал CSS на 500 строк с тёмно-синей и золотой гаммой, карточки, модалки, адаптив. Главная страница собралась как конструктор: шапка, hero, блок с квизом, преимущества, акции, каталог ЖК, контакты с формой, подвал. Отдельно сделал страницу квиза с прогресс-баром и валидацией. Вроде бы всё летает.
Но тут началось самое весёлое. Открываю сайт - а там пустой экран. Ну просто белый лист, и всё. Оказалось, при записи HTML контент улетел за пределы тега </html>, а внутри <body> остался только комментарий. Это как если бы вы построили дом, а внутри одна кладовка. Дал промт: "Проверь сайт, пустая страница". AI начал разбираться, читать файл, чинить структуру, убирать дублирующие теги. Итераций 4–5 - и главная ожила.
Дальше - история с квизом. Главная работает, а iframe с квизом висит пустой, как мёртвый груз. Я смотрю - файл quiz.html на месте, JS внутри рабочий. А проблема в том, что фолбэк был скрыт через display:none, и iframe просто не успевал подгрузиться. Попросил AI проверить, он подправил скрипт, чтобы фолбэк показывался по умолчанию, а потом прятался, когда iframe загружался. Стало лучше, но я уже понял, что с фреймами возиться - это как танцы с бубном.
И тут я пересмотрел концепцию. Зачем две страницы? Пусть квиз будет прямо на главной, без iframe. Быстрее, надёжнее, пользователю не надо никуда переходить. Дал промт: "Сделай одну страницу, квиз встрой в секцию #quiz-block". AI убрал фрейм, вставил HTML-контейнеры, дописал CSS ещё на 200 строк, перенёс всю JS-логику на 270 строк. Все кнопки "Пройти тест" стали вести на #quiz-block. Почистил битые остатки. Итог - одностраничник, без переходов, всё на одном экране. Теперь там шапка с лого и якорным меню, hero с двумя CTA, сам квиз из 7 шагов (комнаты, район, бюджет, оплата, сроки, окружение, контакты), преимущества, акции со скидкой 4%, семейной ипотекой и трейд-ином, каталог из трёх ЖК, повторный CTA-баннер, контакты с формой и подвал. И модалка для консультации - тоже прикрутил.
Самое забавное, что все три правки были не про логику или дизайн, а про то, как файлы записались на диск. AI генерирует код хорошо, но операции с файлами могут давать сбои. Я не переписывал сайт заново, а просто точечно дёргал AI: "пустая страница", "iframe не грузится", "сделай одну страницу". И это сработало. Картинки все AI-сгенерированные, выглядят как профессиональные. Платформа YPage позволила собрать всё в одном месте - генерация, правки, публикация. По времени: от ТЗ до готового сайта около полутора часов. Без AI это день-два, если не больше. Так что как инструмент - вполне себе, особенно когда лень или сроки горят. В общем, такое дело.
