От нейминга до работающего лендинга: опыт разработки Re:Shift с ИИ

———

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

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

Сейчас первая версия Re:Shift работает на https://www.re-shift.ru/. Это полноценный одностраничный сайт на PHP и JavaScript, без CMS и базы данных. Есть описание услуг, интерактивные элементы и действующие формы заявок. Пилотным я называю его потому, что впереди расширение проекта, а не потому, что посетителю показывают недоделанную страницу.

———

В бьюти- и fashion-сегменте привычно строить сайт вокруг списка услуг: консультация стилиста, разбор гардероба, шоппинг, подбор капсулы. Но человек нередко приходит не за конкретной процедурой, а с проблемой: прежние вещи перестали подходить к образу жизни, трудно составлять комплекты или нужно обновить гардероб без случайных покупок.

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

Нейросети помогали перебирать варианты нейминга, формулировать позиционирование и описывать услуги. Название Re:Shift появилось вместе с идеей изменений и «пересборки» подхода к гардеробу. Но предложения ИИ приходилось постоянно сопоставлять с реальными условиями: привлекательная формулировка могла создавать неверные ожидания от услуги.

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

———

На проекте сложилась связка из трёх основных инструментов.

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

Задания между ИИ-исполнителями я тоже передаю через Notion. Один готовит постановку задачи в постоянном рабочем документе. Другой забирает её, выполняет конкретный этап и записывает отчёт. Затем я смотрю, что получилось, вношу замечания и решаю, можно ли двигаться дальше.

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

———

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

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

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

Не буду утверждать, что себестоимость снизилась на конкретный процент: параллельной разработки такого же сайта обычной командой у меня не было. Но по опыту других веб-проектов разница в необходимых человеко-часах и организационных затратах ощутима. У этого подхода есть предел: крупному проекту со сложной архитектурой, безопасностью и высокой нагрузкой команда специалистов вполне может понадобиться.

———

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

Рабочей оказалась более простая схема: делать сайт по секциям. Сначала одна дизайн-проба, затем замечания, согласование композиции, перенос в вёрстку и проверка. Только после этого — следующая секция.

Отдельная проблема возникла с длинными текстами. Даже когда в Notion лежал полный утверждённый вариант, генератор дизайна пытался уместить секцию длиной в два экрана в один. Часть текста сокращал, часть заменял выдуманными фразами, иногда вообще убирал карточки.

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

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

———

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

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

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

С заявками был отдельный этап: демонстрационную форму заменили реальной отправкой через PHP-обработчик. Я проверял получение письма в почтовом ящике, а не только положительный ответ сервера.

Сейчас сайт принимает обращения, и это уже рабочий инструмент для студии, а не картинка будущего проекта.

———

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

Эксперимент идёт на отдельном тестовом сайте. Для начала ИИ-агенту поручил воссоздать шапку и первый экран — Header и Hero. Внешне приблизиться к исходному дизайну удалось, но в процессе обнаружился важный технический нюанс.

Агент добивался похожего оформления, прописывая CSS-переопределения прямо в отдельных элементах конструктора. В результате стандартные настройки и глобальные стили YOOtheme Pro теряли влияние на такие элементы: локальные CSS-правила перекрывали их.

Мне этот способ не подходит. Сайт на визуальном конструкторе должен в основном управляться его штатными средствами. Дополнительный CSS нужен для отдельных исключений, а не для замены базовой дизайн-системы.

Поэтому сейчас я решаю, как лучше организовать следующий этап: поручать ИИ только структуру и контент, а стили настраивать вручную; изменить способ работы агента; либо перенести некоторые части обычным способом. Опубликованный PHP/JS-сайт от этого эксперимента не зависит.

———

Для меня главное открытие не в том, что ИИ способен написать код или придумать название. Это уже не новость. Интереснее, как меняется организация разработки, когда один человек может быстрее переходить между задачами разных специалистов.

Re:Shift — не первый мой проект с ИИ, и в других работах сложности были другими. Здесь удалось пройти весь путь — от концепции студии до запущенного сайта — и одновременно понять, где автоматизация помогает, а где без опыта и человеческой проверки качество быстро начинает проседать.