Я подсел на вайб-кодинг: запустил в продакшн пять проектов за два месяца. Что вам нужно знать, если тоже хотите попробовать (от n8n до MCP).

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

Я увлекся программированием больше двадцати лет назад, еще в школе. Позже в университете фрилансил, создавая сайты, и это увлечение переросло в собственный бизнес — студию panfilov.digital (сегодня мы входим в топ-10 разработчиков в нескольких категориях «Рейтинга Рунета»). И поскольку разработкой занималась команда, со временем я отошел от непосредственного написания кода.

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

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

Термин «вайб-кодинг» предложил в посте у себя в X Андрей Карпатый (Andrej Karpathy, ex-OpenAI, ex-Tesla).

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

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

Поскольку моя студия специализируется на веб-разработке, я буду рассказывать именно про нее. Среди наиболее популярных сервисов можно выделить v0, Replit, Bolt и Lovable. Чем они отличаются и какие из них мне нравятся больше всего?

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

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

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

Главное преимущество такого подхода заключается в том, что клиент буквально через несколько дней может увидеть реально работающий интерфейс и самостоятельно его протестировать. Этого часто не хватает в «классической» разработке: текстовое ТЗ, красивые дизайн-макеты и даже кликабельные прототипы не дают полного представления о том, как система будет действительно работать. Когда клиент начинает пользоваться интерфейсом, это приносит наибольшую пользу: появляются новые пожелания, приходит понимание, какие функции действительно нужны, а какие — второстепенны, что удобно, а что — нет.

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

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

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

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

Преимущества Replit:

Я также экспериментировал с другими платформами, предлагающими разработку из промпта в аналогичном формате. Среди наиболее популярных сейчас — Bolt и Lovable. Однако они показались мне несколько ограниченными, так как предлагают только интеграцию с БД Supabase, хотя для создания интерфейсов и несложных контентных прототипов они подходят отлично.

Мое внимание привлек еще один проект — v0 от компании Vercel, создателей фреймворка Next.js и одноименной платформы для хостинга и облачного развертывания.

На v0 я решил создать свой контентный пет-проект — информационный туристический сайт, посвященный острову Ибица.

Логика работы v0 та же, что у Replit: ИИ-агент генерирует полноценный fullstack-код на основе промпта. Отличие в том, что он очень хорошо натренирован на создание интерфейсов с использованием библиотеки компонентов shadcn (также на Tailwind CSS) и на фреймворк Next.js (поскольку разработчики платформы являются и его создателями). Поэтому для контентного сайта, которому необходим серверный рендеринг (SSR) для полноценной индексации поисковиками, это идеальный вариант.

Кроме того, v0 «из коробки» интегрируется со многими сторонними сервисами, включая объектное хранилище Blob и базу данных Supabase. Подключение сервисов в код происходит простым нажатием кнопки: создаются и прописываются все необходимые доступы. В случае с БД сразу выполняется SQL-запрос на создание таблиц с нужной структурой. Такая нативная интеграция очень удобна.

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

Что мне не понравилось в v0, так это работа с чатами. При работе в одном чате через некоторое время система сообщает, что контекст заканчивается и нужно начать новый чат. Однако новый чат, даже в рамках одного проекта, создается пустым, то есть кодовая база не копируется. Нужно делать fork текущего чата, чтобы создать новый, что выглядит довольно запутанно. В Replit, напротив, при создании нового чата кодовая база сохраняется; обнуляется только контекст, и новый чат рекомендуется заводить при переходе к новому сегменту или логическому объему задачи.

Отдельно стоит упомянуть развертывание на платформу Vercel из v0. Одним кликом проект разворачивается на отдельном поддомене — не нужно возиться с настройками серверов или ручным деплоем. Любые изменения кода автоматически подхватываются при коммите в основную ветку (main), а если загружается отдельная ветка, она разворачивается на свой тестовый адрес, что удобно для тестирования перед публикацией в продакшн.

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

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

Но для еще более точной проработки прототипа я использую IDE с ИИ: выгружаю версию из v0/Replit в GitHub и оттуда скачиваю на компьютер для доработки с помощью Windsurf.

Cursor, кажется, получил больше внимания, особенно на фоне своей недавней оценки в $9 млрд (привлекли $900 млн по этой оценке). Мне почему-то больше подошел Windsurf, который недавно был приобретен OpenAI за $3 млрд.

В чем отличие Cursor/Windsurf от ИИ-агентов, работающих в браузере:

MCP — это протокол, позволяющий через LLM подключаться к внешним сервисам и взаимодействовать с ними на естественном языке так же, как и с самой нейросетью.

Для настройки такой связи необходимо подключить IDE к MCP-серверу и выполнить настройку. Например, с помощью MCP-сервера GitHub можно делать коммиты и полностью управлять репозиторием, даже не зная git-команд. Через MCP-сервер также можно подключиться к БД Supabase и PostgreSQL и выполнять запросы к БД прямо из чата в IDE.

Мои топ-3 MCP для Cursor / Windsurf:

Для эффективной работы с Cursor рекомендую использовать:

Файл .cursorrules определяет поведение ИИ в проекте и содержит инструкции о том, какие файлы читать при выполнении команд, как проверять соответствие архитектуре и каким принципам следовать при написании кода (например, SOLID, строгая типизация, покрытие unit-тестами).

Одним из важных правил является обязательная проверка изменений на соответствие архитектуре проекта, заданной в docs/architecture.mermaid. Этот файл описывает модули, взаимодействие между ними, зависимости и потоки данных в виде схемы Mermaid, что позволяет ИИ быстро понимать границы компонентов и их связи.

Кроме того, в docs/technical.md прописывается стек технологий (например, NestJS, TypeORM, RabbitMQ, PostgreSQL и др.), структура модулей и примеры кода для каждого компонента системы. Кстати, здесь же можно указать, чтобы при работе с каждой технологией ИИ запрашивал актуальную документацию через MCP-сервер context7. Это позволяет создавать новые модули или функции в строгом соответствии с заданной архитектурой и стилем.

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

Подход, который я называю «визуальным программированием», уже давно представлен на рынке такими инструментами, как Zapier, Make.com (бывший Integromat) и отечественный Albato. С развитием LLM возможности самих платформ значительно расширились, а процесс создания логики в них упростился и ускорился.

n8n имеет преимущество перед перечисленными платформами, так как это open-source решение, которое можно разместить на своих серверах.

Информацию можно получать:

Возможности составления сценариев практически неограничены, именно поэтому я называю это не «nocode», а «визуальным программированием». К тому же в n8n есть узел Code, в который можно вставлять любой кастомный код на JavaScript/TypeScript. Код для этих узлов легче всего генерировать с помощью нейросетей (я предпочитаю ChatGPT и Grok).

ИИ подключается через ноду AI Agent с возможностью задавать кастомный промт, подключать инструменты (Tools) и память (Memory). Поддерживается распознавание с изображений. Новые модели OpenAI семейства 4.1 (а также 4.1-mini и 4.1-nano) с контекстом в миллион токенов специально оптимизированы для использования tool-ов и отлично подходят для подключения в n8n.

Вот несколько реальных примеров скриптов с AI, которые я реализовал на практике:

В n8n необязательно использовать узлы с API нейросетей. Скрипты также помогают в «классической» разработке проектов:

С помощью «вайб-кодинга» я начал развивать собственный интерфейс управления студией. После того как Notion в прошлом году пригрозил удалить все наши данные, я осознал, насколько сильно бизнес зависит от облачных SaaS-решений, и теперь последовательно перевожу важные инфраструктурные компоненты на self-hosted решения.

Вот пара сценариев использования n8n для админки студии:

В этой статье я затронул лишь малую часть всех возможностей и инструментов, которые сегодня можно применять для разработки продуктов с помощью нейросетей: еще есть генерация дизайна, автоматическая разработка с автотестами, создание документации, использование md-файлов для трекинга задач в Cursor и Windsurf, OpenAI Codex и Claude Code для работы из командной строки и так далее.

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

В своем Telegram-канале я рассказываю о том, как занимаюсь бизнесом студии разработки, как развиваю стартап Telegram Mini App и, конечно, о своем опыте работы с нейросетями в создании продуктов — подписывайтесь.

Если вам нужна разработка («классическая» или «вайбовая») или консультация — пишите мне в Telegram: @mpanfilov.