Понадобилось совсем немного времени, чтобы превратиться из обычного разработчика в вайб-кодера, но, как говорится, есть нюанс. В этой статье я делюсь опытом создания нескольких новых продуктов, которые появились буквально за несколько дней, и рассказываю, как кардинально изменилась моя работа по сравнению с разработкой для больших монолитов. Хочу показать на примере Rolloo.app и AITom.app, каково это — начинать что-то с нуля c AI-тулами.

Как я стал вайбкодером

Раньше я работал над академией Hyperskill - это большой продукт для обучения программированию. Как разработчик, я писал код, ходил на митинги, тестировал.. стандартная рутина. Но когда появились Cursor, Windsurf, Roocode, всё резко изменилось. Стало понятно, что создавать прототипы теперь можно в разы быстрее, а значит, появляется время для экспериментов.

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

Дашборд приложения AITom с возможностью добавить ссылку на онлайн-созвон для его последующей обработки

Главная панель AI Tom. Здесь отображается список текущих и прошедших митингов (уроков) с возможностью добавления новых встреч для обработки.

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

Полноценное приложение за день

Для быстрого старта я подготовил два шаблона для вайбкод-приложений:

  • Для Nuxt с использованием NuxtUI (GitHub);
  • Также для Nuxt, но с ShadCN компонентами (GitHub)

Спойлер: шаблон с ShadCN показал себя значительно лучше…

Чтобы качество генерации кода оставалось высоким, я использовал Memory Bank MCP. Несмотря на увеличение потребления токенов, это must-have для серьёзных проектов. Memory Bank сохраняет все особенности вашего проекта: архитектуру, специфику фреймворка, стиль написания кода и многое другое. Чем больше проект, тем больше пользы от Memory Bank.

Если вы в целом не сталкивались с MCP, рекомендую просто посмотреть на список доступных, думаю вы найдете что-то полезное для своего проекта.

Процесс разработки

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

Сначала мы создали карточки кейсов, описали их и спроектировали схему для Supabase. Затем оформили страницу кейса и добавили чат. Все было бы проще если бы я не решил использовать совсем уж свежую технологию Vercel AI Gateway. Она позволяет просто передать название LLM-модели и получить структурированный ответ. Так появился живой чат с “собеседником” по теме кейса.

Интерфейс чата с ботом, который отыгрывает роль из созданного сценария

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

Больше всего мне понравилось работать с ShadCN — Cursor отлично понимал, как строить интерфейс из этих компонентов, и редко ошибался со сложными элементами вроде форм и модальных окон. Также я создал правила для Cursor в директории /.cursor/rules/ с описанием фреймворка и используемых библиотек и пакетов. Это можно автоматизировать, попросив сам Cursor:

textCopyCreate (if not exist) directory named '.cursor/rules' in the project root.
Then create new rule file that will be always applied.
Analyse the project structure and used npm packages, and generate the description

Дальнейшая работа над проектом

Дальше всё шло как по маслу. Я подробно описывал каждую фичу и контролировал работу Cursor. Для небольших изменений достаточно режима Auto, но для реализации новых фичей лучше использовать режим “MAX” — он потребляет больше токенов, но качество результата значительно выше.

Буквально за несколько часов удалось собрать MVP и самостоятельно протестировать продукт. Результат меня сильно впечатлил. К хорошему быстро привыкаешь, правда, токены заканчиваются тоже быстро…

Почему стоит попробовать

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

На ранних этапах, пока приложение не превратилось в огромный монолит, скорость разработки увеличивается в 5-10 раз.

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

Проект с чистого листа

Не откладывайте на потом:

  1. Установите Cursor или другой ИИ-редактор
  2. Выберите простую идею для пет-проекта
  3. Используйте мои шаблоны как отправную точку
  4. Не бойтесь экспериментировать с новыми технологиями

Лучший способ понять возможности новых инструментов — начать их использовать.

Обратная связь и контакты

Я открыт для любой обратной связи. Обращайтесь за демо-доступами к AI Tom и Rolloo — с радостью покажу проекты в действии. Также готов делиться опытом разработки подобных решений. Думаю, мы сможем быть полезны друг другу.

Контакты