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

Ну, расскажу тут про один вечер. Сидел, думал, чем бы заняться, и решил попробовать склепать сайт для одного новосибирского застройщика. Название придумал такое, "Городские кварталы", чтоб солидно звучало. В общем, задача была - сделать лендинг с квизом, и чтобы всё это работало и выглядело как у людей.

Короче, схема такая: берешь платформу YPage (https://ypage.site/), она типа с ИИ-помощником внутри, закидываешь туда техзадание и ждешь чуда. Сначала я реально залил им подробное ТЗ. Там всё по делу: квартиры в Новосибирске, левый-правый берег, семьи, инвесторы - ну стандартный набор для девелопера. Главное - чтобы квиз был на 7 шагов и в конце заявки собирал. Я еще прописал, чтоб Bootstrap 4 использовали, чтоб не пришлось потом верстку переделывать. На это ушло минут 20, но я знал, что если ТЗ не прописать, то AI нагенерит такой шлак, что полжизни потом править будешь.

Дальше я дал первый промт: "Сделай двухстраничный сайт застройщика квартир". И AI, надо сказать, реально постарался. Сгенерировал картинки - логотип, фон с домами, три жилых комплекса типа "Солнечный берег", "Городской парк". Выглядят как нормальные рендеры, я даже удивился. Написал кучу CSS, стили темно-синие с золотом, смотрится дорого. Собрал главную страницу со всеми блоками: шапка, hero, преимущества, акции, каталог ЖК, контакты. И отдельно сделал страницу для квиза с прогресс-баром и валидацией. Сайт на этом этапе уже выглядел как готовый продукт.

Но, как обычно, не обошлось без глюков. Сначала я открываю сайт, а там - пустота. Белый экран. Я в шоке, думаю, всё, слил время. Оказалось, при записи HTML-файла контент выпал за пределы тега , а в body остался только какой-то комментарий. Ну я написал промт: "Проверь сайт, пустая страница". AI прочитал файл, нашел проблему и починил теги, перенес всё обратно. Четыре-пять итераций, и главная заработала.

Потом вторая беда - iframe с квизом не грузился. Я уже хотел руками лезть, но решил дать еще один промт: "Квиз на фрейме не подгружается, проверь". AI посмотрел файл quiz.html, говорит, всё на месте, JS рабочий. Проблема оказалась в том, что фолбэк был скрыт через display:none, а iframe не успевал загрузиться. Ну он переделал, чтобы сначала показывалась заглушка, а потом она скрывалась, когда всё загрузится.

А потом я передумал. Зачем мне две страницы? Пользователь не любит лишние переходы. Я сказал: "Сделай одну страницу, квиз встрой прямо на главную, без фреймов". И AI всё переделал: убрал iframe, вставил HTML-контейнеры для квиза в секцию, добавил еще CSS и перенес весь JS-код с семью шагами в главную. Теперь кнопки "Пройти тест" ведут не на /quiz, а на #quiz-block. Всё работает гладко.

В итоге за полтора часа получилась одна страница, на которой есть шапка с меню и телефоном, hero-блок с красивым фоном, сам квиз на семь шагов с прогресс-баром, четыре карточки преимуществ, акции, каталог ЖК с тремя комплексами, CTA-баннер и контакты с формой. И модальное окно для консультации. Квиз, кстати, собирает заявки нормально, я проверил.

Без AI я бы возился с этим дня два, а тут просто сидел и давал промты. Главное - не бояться править, если что-то пошло не так. ТЗ - это половина успеха. А YPage оказался удобным, потому что всё в одном месте: и AI-помощник, и генерация картинок, и публикация.