Андрей Савкин: с помощью ИИ за 12 дней вернул бренду бикини независимую витрину и канал заявок

Всем привет! Меня зовут Андрей Савкин. Я инженер-программист по образованию, больше 10 лет писал код на C++ для авиационной и космической отраслей. Сейчас я развиваю Rocket Lab — небольшую команду из разработчиков, маркетологов, специалистов по рекламе и поисковому продвижению. 

Мы создаем посадочные страницы и помогаем бизнесу привлекать клиентов, автоматизируем процессы, собираем продукты для стартапов. Всего команда выполнила более 100 проектов разного масштаба.

В своей работе я больше года использую вайбкодинг. Один из показательных проектов — сайт Artemis Style, бренда сценических костюмов для бодибилдинга. Расскажу, как я собрал его всего за 12 дней с помощью ChatGPT, Claude и Claude Code. 

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

Как клиент остался без сайта

Artemis Style делает сценические костюмы на заказ. Это женские бикини для категорий Fitness Bikini, Wellness и Bodyfitness, а также мужские костюмы для Men's Physique, Bodybuilding и Classic Physique. Изделия вручную расшивают кристаллами и подгоняют под спортсмена.

Брендом занимались два партнера. После их расставания Artemis Style остался без сайта — собственной витрины и одного из каналов продаж. А потенциальному клиенту стало негде узнать больше об ателье, посмотреть модели бикини и оформить заказ. 

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

Как я загрузил в ChatGPT 2,5 ГБ фото и остановил бесконечные улучшения

У клиента накопилось около 450 фотографий общим объемом примерно на 2,5 ГБ. Эти материалы я упаковал в шесть архивов и загрузил в ИИ. У меня был спортивный интерес: хотелось проверить, что нейросеть сможет увидеть во всей медиатеке клиента, а не в нескольких выбранных кадрах.

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

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

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

Вместе с ИИ мы за три дня подготовили три визуальных направления: темное сценическое, светлое лавандовое и более сияющее, которое назвали Aurora. Финальную концепцию я собрал из сильных элементов всех трех. 

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

Как Claude собрал рабочую версию сайта

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

Из этого диалога постепенно вырос набор примерно из 12 файлов с правилами для Claude Code. Каждый документ отвечал за свое направление: дизайн, структуру страниц, тексты, фотографии, анимации, формы, поисковое продвижение или технические требования. ChatGPT также помог составить на основе этих файлов промпты для Claude Code. 

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

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

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

Что мы программировали сами

Вручную мы с командой Rocket Lab развернули сайт на сервере: подготовили рабочую среду, установили WordPress, загрузили готовую пользовательскую часть и проверили, что все компоненты правильно настроены и работают вместе. Мы справились за 6 дней. Затем потребовалось примерно три дня на отладку. 

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

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

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

Как я обнаружил, что сайт не грузится

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

Тогда я попросил Claude проверить, что видит человек, который зашел на сайт впервые. То есть первый заход с пустым кешем. Оказалось, что заголовок, подзаголовок и кнопки сначала были скрыты ради красивой анимации. Они появлялись только после того, как браузер загружал около 192 КБ дополнительного кода и запускал эффект.

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

Мы изменили анимацию: теперь текст и кнопки появляются сразу, а визуальный эффект запускается отдельно. Для меня это стало самым наглядным аргументом против идеи, что нейросеть может сама написать код, сама его проверить и сдать готовый продукт.

Почему я не стал генерировать купальники, хотя нейросеть могла сделать их красивее

Готовый сайт нужно было наполнить контентом — фотографиями купальников. ChatGPT помогал систематизировать медиатеку клиента по фильтрам, например мужское и женское. Но после снимки нужно было вручную повернуть, кадрировать, уменьшить и сжать. 

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

Как проект изменил мой взгляд на агентство с ИИ

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

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

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