«Я создала сайт и игру — без мам, пап и навыков программирования»

Продюсер vc.ru три дня использовала в работе новый сервис «Яндекса» для вайбкодинга

Недавно мы запустили новый сервис для создания веб-продуктов по текстовому описанию — Vibecraft. Это умный инструмент, в котором можно сгенерировать сайт, CRM-систему или игру за несколько часов и без навыков программирования. Единственное ограничение — воображение пользователя.

В честь запуска, предложили коллегам из vc.ru протестировать продукт. За эксперимент взялась креативный продюсер Лада, она три дня пробовала сервис в разных рабочих задачах: создала сайт с описанием подписок площадки и сгенерировала прототип игры.

В «Комитете» есть разработчики и дизайнеры, но обычно они плотно заняты приоритетными задачами. Тем временем у продюсеров регулярно появляются новые гипотезы, которые хочется поскорее протестировать. Классно, когда можно взять дело в свои руки и без знания кода собрать MVP или макеты продуктов (спасибо нейронкам).

Я никогда не занималась вайбкодингом. Если честно, мне казалось, что «вайбкодить» значит писать код по настроению, когда есть желание поработать. Долгое время обходила это занятие стороной, потому что не умею программировать. Я проходила курс по Python в университете и даже сделала свой телеграм-бот, но с тех пор прошло несколько лет, и я откатилась до уровня «print(“hello, world!”)».

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

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

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

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

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

Магия началась уже на этом этапе: Vibecraft структурировал идею, составил план реализации и даже предложил несколько стилей для дизайна. Я выбрала «Классический vc.ru» с пастельными оттенками (его мне и посоветовали).

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

Вот что получилось после первого промпта.

Получился фундамент для будущей страницы, теперь будем вместе её «докручивать». Начала с первого блока с галереей тарифов. Вот что я изменила:

Vibecraft понял меня с первого раза.

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

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

Но мне понравилась идея с чек-листом. Решила сделать его максимально дофаминовым (простите, я зумер) и информативным. Вот мои просьбы к Vibecraft:

Ещё я намешала разных условий для авто-активаций: например, если пользователь выбрал 50 или 70 тысяч показов, то к ним автоматически «приплюсовывается» контент-аудит, потому что это базовый набор для Pro Ultra.

На этом моменте мы и застряли: сервис не сразу разобрался в тонкостях каждого тарифа (понимаемо), поэтому я вручную отловила баги и внесла правки в логику конструктора. Думаю, было бы проще, если бы я описала все условия с помощью Python-конструкций в духе if-elif-else, но так будет нечестно.

В какой-то момент я обленилась и начала писать без знаков препинания. До этого сервис осыпал меня комплиментами в духе «Отличный запрос!», но за такой промпт уже не похвалил.

Зато всё понял. Получилось отлично.

Рубрику с ответами на вопросы я особо не правила — только обновила контент. В конце сделала шапку и навигацию. Удобно, что в проект можно добавить собственные изображения: для этого нужно перейти в раздел «Файлы» (в левом верхнем углу, между иконками с ракетой и книжкой), а затем «тегнуть» их в чате с ИИ.

Я загрузила в хранилище логотип наших Pro-подписок (бейдж в виде чёрной галочки) и попросила разместить его рядом с названием сайта. А иконки для навигации Vibecraft нарисовал сам. Вот результат.

Очень аккуратно и минималистично, в стиле vc.ru. Вот ссылка, если хочется полистать получившийся сайт.

Перейдём ко второй задаче — она будет гораздо компактнее.

Сперва предыстория: мы в «Комитете» теперь делаем игры. Первая уже запущена — это ежедневная викторина, которая выходит в отдельном блоге. Сейчас в разработке ещё несколько механик, и одна из них — аналог «Криптограма», головоломки, где нужно угадать фразу.

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

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

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

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

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

В самом конце попросила адаптировать проект в мобильной версии (контейнер с игрой был обрезан по краям), заменить название сайта в шапке и нарисовать логотип в том же стиле.

Если захотелось сыграть, вот ссылка. Подсказка: я загадала фразу из поп-культуры.

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

Что касается продукта — мне он понравился. Это и правда не очередной конструктор, а «умный» инструмент, который подстраивается под тебя. А ещё сервис очень лоялен к новичкам: если хотите попробовать себя в вайбкодинге, то советую начать с него.

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