Как создавался сайт «Городские кварталы» на YPage

Первое — техническое задание. Без него смысла нет. Я просто вывалил все, что знал о проекте: что это квартиры от застройщика в Новосибирске (и правый, и левый берег), что смотреть будут семьи, молодые пары и те, кто хочет вложиться в бетон. Бизнес-цель понятная — сбор заявок через квиз и звонки. Структуру набросал сразу: шапка с навигацией, яркий первый экран, блок с квизом, преимущества, акции, каталог жилых комплексов, контакты и подвал. Квиз задумал на 7 шагов: от выбора района до контактных данных. Технически — Bootstrap 4, иконки, нормальные ЧПУ-адреса и метатеги. На это ушло минут 20, но это как фундамент — если он кривой, дом развалится.

Второй этап — генерация. Я дал AI это ТЗ и сказал буквально: «Сделай двухстраничный сайт для застройщика». И тут началось самое интересное. AI не просто накидал каркас, он сгенерировал вообще всё: логотип, фон на герое с новостройками, картинки для трех жилых комплексов («Солнечный берег», «Городской парк», «Первый квартал»), даже фотки для акций. Без стоков, всё свое. Стилей наваял около 500 строк — темно-синий с золотом, карточки, кнопки, адаптив. Собрал главную страницу по всем блокам ТЗ, отдельно сделал страницу квиза с прогресс-баром, валидацией, даже embed-режим для iframe предусмотрел. На этом этапе всё выглядело так, будто готово к выкладке в сеть.

Третий момент — первый облом. Открываю я страницу, а там пустота. Белый экран, никакой магии. Оказалось, при записи HTML контент каким-то образом вывалился за пределы тега , а внутри body остался только мусорный комментарий. Пишу: «Проверь сайт, пустая страница». AI глянул, поправил структуру, починил теги — на это ушло 4–5 итераций, но главная ожила.

Четвертое — новая засада. Квиз внутри iframe висит, а там ничего. Я смотрю — файл quiz.html есть, код внутри рабочий, но фрейм не грузится. Проблема оказалась в том, что фолбэк был спрятан через display:none, а iframe тупо не успевал подтянуть контент. Промт: «Квиз на фрейме не подгружается». AI быстренько отобразил фолбэк и подвязал скрипт, который прячет его только после полной загрузки фрейма.

Пятое, финальное решение. В какой-то момент я понял, что две страницы — это оверхед. Пользователь все равно должен проходить квиз без перезагрузок, поэтому я сказал: «На сайте должна быть одна страница, квиз встроить на главную вместо фрейма». И AI без лишних слов перекроил структуру: убрал блок с iframe, вставил HTML-контейнеры для квиза прямо в секцию #quiz-block, добавил еще 200 строк CSS для inline-отображения, перенес весь JS-код (7 шагов, 270 строк логики) на главную страницу, а кнопки «Пройти тест» перелинковал на якорь #quiz-block. Теперь это монолитная страница без переходов.

Что в итоге. Одна страница, которая включает: шапку с логотипом и меню, герой с заголовком и двумя кнопками, сам квиз на 7 шагов с прогрессом и валидацией, четыре карточки преимуществ с иконками, три блока акций (скидка 4%, семейная ипотека, trade-in), каталог из трех ЖК с фото и тегами, повторный CTA-баннер, контакты с формой и полноценный подвал с юридической информацией. Плюс модальное окно для консультации.

Пару слов про время. Весь процесс — от пустого листа до публикации — занял примерно полтора часа. Если бы я писал это руками без AI, ушло бы минимум день-два, и то не факт, что изображения пришлось бы искать на стоках. Здесь же все картинки сгенерированы на лету и выглядят как профессиональные рендеры.

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

В общем, такое дело. Теперь у меня есть четкое понимание: если есть внятное ТЗ и нормальный AI-ассистент, то запустить лендинг для застройщика можно практически за чай, а не за выходные.