Re:Shift: от идеи до PHP/JS-лендинга — разработка с ИИ и проверка результата

Для проекта Re:Shift нужно было с нуля сформировать и запустить имидж студию: придумать название, определить позиционирование, выстроить модель услуг и представить её на сайте. Я хотел сделать не очередной каталог стилистов, а сервис, где отправной точкой становится задача клиента.

При этом важно было быстро запустить не дизайн-макет, а работающий сайт: с понятной структурой, адаптивной вёрсткой, интерактивными блоками и реальным приёмом заявок.

Отдельная цель — проверить на собственном проекте, насколько ИИ может помочь одному специалисту пройти весь путь от концепции до программирования и тестирования без привлечения отдельной команды на первом этапе. Я уже использовал ИИ в других разработках, но здесь хотел организовать работу системно: с согласованными источниками, передачей задач между исполнителями, отчётами и проверкой каждого этапа.

Для первого релиза выбрал одностраничный сайт на PHP и JavaScript без CMS и базы данных. Параллельный эксперимент с Joomla/YOOtheme Pro относится к следующему этапу развития и не должен задерживать работу текущего сайта.

Сначала продуктовая модель и содержание

С помощью ChatGPT я прорабатывал нейминг, позиционирование, структуру услуг и тексты. В основу Re:Shift положил принцип: сначала разобраться в задаче человека, затем предложить формат работы. Решения принимал сам, потому что убедительно написанные варианты ИИ не всегда соответствовали реальным условиям услуги.

Утверждённые тексты и правила вынес в Notion, чтобы следующие исполнители использовали один источник, а не фрагменты длинных диалогов.

Единая инфраструктура задач

Организовал связку ChatGPT, Notion и Google Drive. В ChatGPT обсуждал варианты, формировал задания и проверял результаты. В Notion хранил требования, актуальные тексты, задачи и отчёты. В Google Drive — фотографии, референсы, макеты и скриншоты.

Один ИИ-исполнитель записывал задание в рабочий документ Notion, следующий забирал его и возвращал отчёт. Перед переходом к новой задаче я проверял результат. Автоматической цепочки без приёмки не было.

От целой страницы перешёл к отдельным секциям

Попытки подготовить большой лендинг одним заданием давали слишком много ошибок: бот путал структуру, пропускал элементы, изменял соседние блоки и утверждённый текст.

Поэтому стал работать по циклу: одна секция → дизайн-проба → замечания → вёрстка → проверка в браузере.

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

Разработка и регрессионная проверка

Сайт собрали на PHP и JavaScript. Для заявок подготовили обработчик /api/request.php с серверной проверкой полей, согласий и антиспам-механизмами. Проверял не только сетевой ответ, но и получение письма.

После функциональных доработок тестировал уже работавшие сценарии. Например, при расширении модальных окон портфолио скрипт начал обращаться к несуществующему элементу recases-detail-number. Ошибка Cannot set properties of null останавливала обработчик, и карточки перестали открываться. После исправления вновь проверил открытие по фото, заголовку и стрелке.

Похожее ограничение встретилось при передаче подготовленного текста в Telegram и MAX. Вместо ненадёжного автоматического заполнения добавили предпросмотр обращения и явное копирование перед открытием мессенджера.

Отдельный тест переноса на Joomla

Для следующего этапа развития на тестовой Joomla/YOOtheme Pro попробовал через ИИ-агента воссоздать Header и Hero. Внешнее сходство постепенно удалось получить, но агент использовал многочисленные локальные CSS-переопределения в элементах Builder. Они перекрывали штатные и глобальные настройки оформления.

Такой вариант не принял как основу для переноса: основная часть будущего сайта должна управляться нативными средствами YOOtheme Pro, а собственный CSS применяться в исключительных случаях. Сейчас выбираю между другим подходом к агентской сборке, гибридной работой и ручной настройкой. Действующий PHP/JS-сайт этот эксперимент не затрагивает.

Рабочий сайт вместо демонстрационного макета

В результате запущен полноценный одностраничный сайт Re:Shift на PHP и JavaScript, без CMS и базы данных. На нём представлены направления услуг, работает навигация, интерактивные блоки и формы заявок. Фактическое получение заявки по электронной почте было проверено отдельно от ответа сервера.

Организация разработки

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

Для работы использовалась связка ChatGPT, Notion и Google Drive: единые требования, постановка задач, отчётность и материалы. Это уменьшило необходимость повторно передавать контекст разным исполнителям и позволило вести разработку по отдельным секциям.

Что удалось проверить на практике

• Посекционная разработка оказалась управляемее попыток генерировать целую страницу одним заданием.

• Для длинных секций было полезно разделить визуальную композицию и окончательное наполнение утверждёнными текстами.

• Проверка синтаксиса JavaScript не заменяет тесты пользовательских сценариев: после исправления ошибки обращения к отсутствующему DOM-элементу работа карточек портфолио восстановилась.

• Реальную доставку заявки подтвердили полученным письмом, а не только статусом HTTP-запроса.

• Первый тест переноса Header/Hero на Joomla/YOOtheme Pro выявил проблему сопровождаемости: локальные CSS-переопределения мешали настройке через штатную дизайн-систему. Этот эксперимент не является завершённым переносом.

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