Vibe Coding: от идеи до работающего сервиса с ИИ

Практический курс по вайб-кодингу для тех, кто хочет создавать приложения, используя ИИ как основного партнёра в разработке. Вы освоите инструменты (Cursor, Claude, Replit), научитесь проектировать архитектуру, формулировать задачи для ИИ, работать с данными и деплоить готовые продукты. Курс построен на конкретных примерах, готовых промптах и реальной работе с кодом — от пустой папки до запущенного сервиса.

1. Настройка окружения и инструменты вайб-кодинга

Настройка окружения и инструменты вайб-кодинга

Представьте: вы открыли ноутбук, написали нейросети «сделай мне приложение для учёта расходов» — и через час у вас работает прототип. Звучит как фантастика, но именно так работает вайб-кодинг — подход к разработке, где вы описываете задачу на естественном языке, а искусственный интеллект генерирует код. Термин ввёл бывший директор по ИИ в Tesla Андрей Карпатый в феврале 2025 года, и с тех пор подход набрал критическую массу: по данным JetBrains, 41% всего производимого в мире кода генерируется ИИ.

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

Три инструмента, которые закрывают 90% задач

Вайб-кодинг не требует десятка программ. Достаточно трёх компонентов: редактор кода с ИИ, AI-модель и платформа для деплоя. Всё остальное — опционально.

Редактор кода: Cursor

Cursor — это редактор на базе VS Code, перестроенный вокруг ИИ. Главное отличие от обычного редактора: он понимает контекст всего вашего проекта. Когда вы пишете промпт в боковом чате, Cursor видит все файлы, структуру папок и зависимости. Это как работать с программистом, который уже прочитал весь код перед тем, как отвечать.

Установка занимает пять минут:

  • Скачайте с сайта cursor.com
  • Установите как обычное приложение
  • Авторизуйтесь (есть бесплатный план для старта)
  • После установки откройте папку проекта — и вы уже можете общаться с ИИ прямо внутри кода. Клавиша Cmd+K (на Mac) или Ctrl+K (на Windows) открывает чат, а Cmd+L — боковую панель для длинных диалогов.

    AI-модель: выбор и настройка

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

    В настройках Cursor (Settings > Models) можно выбрать модель и настроить параметры. Для начала оставьте настройки по умолчанию — они подходят для большинства задач.

    Платформа для деплоя: Vercel

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

    Настройка проекта: первый промпт

    Откройте Cursor, создайте папку для проекта и откройте чат. Первый промпт — самый важный, потому что он задаёт архитектуру всего приложения.

    Вот шаблон, который работает:

    Обратите внимание: в этом промпте нет слова «код». Вы просите план. Это принцип, который сэкономит вам часы отладки — ИИ почти всегда предлагает избыточно сложное решение, и ваша задача — упростить его до старта.

    Rules-файлы: инструкция для ИИ на весь проект

    В Cursor есть механизм rules-файлов — это файл .cursor/rules/, который ИИ читает перед каждым ответом. Представьте его как инструкцию для нового сотрудника: что можно, что нельзя, как принято в этом проекте.

    Минимальный набор правил для старта:

    Правильно настроенный rules-файл позволяет генерировать до 98% кода через ИИ — потому что модель точно знает контекст и ограничения проекта.

    Git: ваша страховка

    Git — система контроля версий. Если объяснять на пальцах: это кнопка «сохранить» для всего проекта, которая помнит все предыдущие версии. Если ИИ сломал что-то — вы откатываетесь к рабочему состоянию за одну команду.

    Настройка:

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

    Рабочий стол: что ещё пригодится

    Помимо трёх основных инструментов, в процессе вам встретятся:

  • GitHub — хранение кода в облаке и портфолио проектов
  • Postman или Insomnia — для тестирования API-запросов
  • Браузерные DevTools (F12) — для отладки веб-приложений
  • Терминал — базовые команды: cd, ls, npm install, npm run dev
  • Не нужно учить всё сразу. Инструменты осваиваются по мере необходимости — когда вы впервые столкнётесь с задачей, для которой они нужны.

    Частая ошибка: собрать всё, прежде чем начать

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

    Правило простое: если вы можете запустить npm run dev и увидеть пустую страницу в браузере — окружение настроено. Всё остальное добавляется по ходу.

    В следующей статье мы разберём, как превратить идею в архитектуру приложения — и почему правильный план экономит 80% времени на отладку.

    2. Проектирование архитектуры и логики приложения

    Проектирование архитектуры и логики приложения

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

    По данным Forrester, команды, которые инвестируют в предварительное проектирование, получают 415% ROI за три года по сравнению с теми, кто сразу пишет код. В вайб-кодинге это правило работает сильнее, чем где бы то ни было: ИИ генерирует код молниеносно, но если архитектура неверная — вы получаете быстрый путь к нерабочему продукту.

    От идеи к спецификации за 30 минут

    Архитектура приложения — это не чертёж на 20 страниц. Это ответы на четыре вопроса:

  • Что делает приложение? — одна фраза
  • Кто им пользуется? — один-два типа пользователей
  • Какие данные хранятся? — список сущностей
  • Какие экраны видит пользователь? — список страниц
  • Вот пример для трекера расходов:

    | Вопрос | Ответ | |--------|-------| | Что делает | Позволяет вести учёт личных расходов | | Кто пользуется | Один пользователь (пока без регистрации) | | Данные | Расходы: сумма, категория, дата, описание | | Экраны | Форма добавления, таблица расходов, итоги по категориям |

    Четыре ответа — и у вас есть архитектура MVP. Запишите их в файл README.md в корне проекта. Это ваша карта, к которой вы будете возвращаться каждый раз, когда ИИ предложит что-то лишнее.

    Схема данных: скелет приложения

    Данные — это фундамент. Если структура данных неправильная, всё приложение шатается. Перед тем как просить ИИ писать код, определите сущности и их поля.

    Для трекера расходов схема выглядит так:

    Эту схему можно дать ИИ прямо в промпте:

    Когда вы задаёте схему данных заранее, ИИ не будет изобретать свои поля и связи. Это экономит десятки итераций.

    Маршрут пользователя: что нажимает человек

    User flow — это путь пользователя через приложение. Не техническая диаграмма, а простое описание: «Пользователь открывает приложение → видит таблицу расходов → нажимает «Добавить» → заполняет форму → расход появляется в таблице».

    Запишите этот путь в три-четыре шага. Если путь сложнее — значит, MVP слишком большой. Упростите.

    Почему это важно для вайб-кодинга? Потому что ИИ, получив user flow, строит приложение в правильном порядке: сначала данные, потом логику, потом интерфейс. Без user flow ИИ начнёт с красивой кнопки, к которой не подключено ничего.

    Вертикальные слайсы: строить по фичам, не по слоям

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

    Правильный подход — вертикальные слайсы: одна фича от базы данных до интерфейса за один заход.

    | Слой (неправильно) | Вертикальный слайс (правильно) | |---|---| | Шаг 1: Создать все таблицы БД | Шаг 1: Добавление расхода (форма → БД → отображение) | | Шаг 2: Написать все API | Шаг 2: Удаление расхода (кнопка → БД → обновление таблицы) | | Шаг 3: Сделать весь фронтенд | Шаг 3: Фильтрация по категориям |

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

    Промпт-план: как задать архитектуру ИИ

    Вот готовый промпт, который превращает вашу спецификацию в архитектурный план:

    ИИ вернёт список milestone'ов. Ваша задача — проверить, что каждый milestone маленький и тестируемый. Если milestone содержит слово «все» («сделать все формы», «настроить все API») — разбейте его.

    Антипаттерны проектирования в вайб-кодинге

    Слишком много фич в первой версии. Если в вашем MVP больше пяти фич — это не MVP. Оставьте три, максимум четыре. Остальные добавите после того, как первые заработают.

    Сложная аутентификация на старте. Регистрация, OAuth, восстановление пароля — это отдельный проект. Для MVP используйте localStorage или простейший пароль. Аутентификацию добавите, когда ядро продукта будет работать.

    Копирование архитектуры чужого проекта. ИИ может предложить архитектуру enterprise-приложения для вашего пет-проекта. Спрашивайте: «Это минимальное решение? Есть вариант проще?»

    Практический пример: проектируем за 20 минут

    Допустим, вы хотите сделать сервис для ведения заметок. Вот как выглядит процесс проектирования:

    Шаг 1. Записываете в README: «Заметки с заголовком и текстом. Один пользователь. Хранилище — localStorage.»

    Шаг 2. Определяете схему: Note { id, title, body, created_at }.

    Шаг 3. Пишете user flow: «Открывает → видит список заметок → нажимает «Новая» → пишет → сохраняется → видит в списке.»

    Шаг 4. Делите на milestone'ы: (1) создание и отображение заметок, (2) редактирование, (3) удаление, (4) поиск.

    Шаг 5. Даёте ИИ промпт с планом и просите начать с milestone 1.

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

    В следующей статье мы перейдём от плана к действию — разберём, как правильно ставить задачи ИИ и итерировать от промпта к рабочему коду.

    3. Итеративная разработка: от промпта к рабочему коду

    Итеративная разработка: от промпта к рабочему коду

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

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

    Цикл итерации: четыре шага

    Рабочий цикл вайб-кодинга состоит из четырёх шагов, которые повторяются снова и снова:

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

    Промпт как спецификация

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

    Вот структура промпта, который даёт предсказуемый результат:

    Пример:

    Последняя строка — ключевая. Она заставляет ИИ остановиться и подумать, вместо того чтобы генерировать 500 строк в неизвестном направлении.

    Правило одной фичи

    Самая частая ошибка — просить слишком много за один промпт. Когда вы говорите «сделай систему авторизации с OAuth, dashboard с графиками и управление пользователями», ИИ пытается охватить всё сразу, путается и ломает то, что уже работало.

    На Reddit это называют «One Last Fix» Trap — каждый следующий фикс порождает два новых бага. Вы начинаете чинить кнопку, а заканчиваете переписыванием половины приложения.

    Рабочий подход — vertical slices (вертикальные слайсы): одна фича от данных до интерфейса за один заход.

    Вместо:

    Делайте по шагу:

    Потом:

    Каждый шаг тестируете, коммитите в Git, и только потом идёте дальше.

    Как давать ИИ контекст

    ИИ не видит ваш экран, не помнит предыдущие сессии и не знает, что вы имели в виду. Чем больше контекста — тем точнее результат.

    Полные ошибки. Если что-то сломалось — копируйте весь текст ошибки из консоли браузера или терминала. Не пересказывайте своими словами. ИИ лучше понимает технический текст, чем ваши интерпретации.

    Ссылки на файлы. В Cursor используйте @ для упоминания файлов: @src/pages/settings.tsx вместо «тот файл с настройками». Это даёт ИИ прямой доступ к коду.

    Скриншоты. Если что-то выглядит неправильно — сделайте скриншот и вставьте в чат. Один скриншот заменяет 200 слов промпта. ИИ видит то же, что вы, и мгновенно понимает проблему.

    Вот шаблон промпта для отладки:

    Правило трёх попыток

    ИИ застрял — не может починить баг за три итерации? Откатывайтесь на последний рабочий коммит в Git и пробуйте другой подход.

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

    Итерация vs хаос: как отличить

    Не каждое взаимодействие с ИИ — это итерация. Вот как отличить продуктивный цикл от хаоса:

    | Итерация | Хаос | |----------|------| | Одна фича за промпт | Список из пяти задач | | План перед кодом | Сразу «сделай» | | Тест после каждого шага | Тестирование «потом» | | Коммит после milestone | Коммит «когда-нибудь» | | Откат после трёх неудач | Часы попыток исправить |

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

    Практический сценарий: итерация в действии

    Допустим, вы строите сервис для ведения заметок. Вот как выглядит одна итерация:

    Промпт 1 (план): «Нужно добавить возможность редактировать заметку. При клике на заметку открывается форма с текущими данными. Расскажи план, не пиши код.»

    ИИ отвечает: «Создам компонент EditNoteForm, добавлю состояние isEditing, при клике на заметку покажу форму с предзаполненными полями...»

    Вы: «Упрости. Мне не нужен отдельный компонент — просто замени содержимое заметки на inline-форму.»

    ИИ: «Хорошо, изменю NoteCard: при клике заголовок и текст станут редактируемыми полями...»

    Вы: «Ок, пиши код.»

    ИИ генерирует код. Вы тестируете: кликаете на заметку, поля становятся редактируемыми, меняете текст, нажимаете «Сохранить» — работает.

    Коммит: git commit -m "feat: inline editing for notes"

    Одна итерация. Десять минут. Рабочая фича. Именно так выглядит вайб-кодинг, когда процесс выстроен.

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

    4. Работа с данными, API и внешними интеграциями

    Работа с данными, API и внешними интеграциями

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

    Три уровня работы с данными

    В вайб-кодинге вы встретите три уровня хранения данных, от простого к сложному:

    Уровень 1: localStorage. Данные хранятся в браузере конкретного пользователя. Подходит для прототипов и однопользовательских инструментов. Не требует настройки — работает из коробки.

    Уровень 2: Облачная база данных. Данные хранятся на сервере и доступны с любого устройства. Supabase — популярный выбор для вайб-кодинга: это PostgreSQL-база с готовым API, авторизацией и хранилищем файлов. Бесплатный план покрывает большинство пет-проектов.

    Уровень 3: Свой бэкенд. Отдельный сервер с собственной логикой. Нужен, когда стандартных решений не хватает — сложная обработка данных, интеграция с несколькими сервисами, кастомные алгоритмы.

    Для первого рабочего сервиса достаточно уровня 2. Supabase даёт вам базу данных, API и авторизацию без написания серверного кода — вы работаете с ним прямо из фронтенда.

    Подключение Supabase: пошагово

    Вот как выглядит процесс подключения облачной базы к проекту:

    Шаг 1. Создайте проект на supabase.com. Вам дадут два ключа: URL и anon key. Это адрес вашей базы и «пропуск» для обращения к ней.

    Шаг 2. В настройках Supabase создайте таблицу. Для трекера расходов:

    Если SQL пугает — Supabase имеет визуальный редактор таблиц. Можно создать те же поля кликами мыши.

    Шаг 3. Дайте ИИ промпт с ключами:

    ИИ сгенерирует код подключения и заменит localStorage-вызовы на запросы к базе. Это один из тех случаев, когда вайб-кодинг работает блестяще — потому что операции CRUD (создание, чтение, обновление, удаление) стандартны и ИИ отлично их генерирует.

    API: как приложение общается с внешним миром

    API (Application Programming Interface) — это контракт между вашим приложением и внешним сервисом. Вы отправляете запрос, сервис возвращает данные. Как заказ в ресторане: вы говорите официанту, что хотите, а он приносит блюдо.

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

    Вот как это работает на практике:

    Этот код делает три вещи: отправляет запрос, получает ответ в формате JSON и извлекает нужное значение. ИИ может сгенерировать такой код по промпту «получи курс доллара из API и покажи на странице».

    Промпты для работы с API

    Вот шаблоны промптов, которые дают предсказуемый результат при работе с внешними сервисами:

    Подключение API:

    Работа с авторизацией API:

    Последний пункт критически важен: никогда не храните ключи и токены в коде. ИИ по умолчанию может вшить секрет прямо в файл — всегда проверяйте и просите использовать переменные окружения.

    Три интеграции, которые пригодятся в каждом проекте

    Авторизация через Supabase Auth. Готовая система регистрации и входа. Supabase берёт на себя хранение паролей, восстановление доступа и безопасность. Промпт: «Добавь авторизацию через Supabase Auth с email и паролем. Показывай разные страницы для авторизованных и неавторизованных пользователей.»

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

    Отправка уведомлений через Email API. Сервисы вроде Resend или SendGrid позволяют отправлять письма из приложения. Промпт: «При добавлении нового расхода отправляй мне письмо на [email] с суммой и категорией. Используй Resend API.»

    Ловушки при работе с данными и API

    Хардкод вместо реальных данных. ИИ может показать красивый dashboard с данными, но данные окажутся зашитыми в код — это demo-заглушка, а не рабочее приложение. Проверяйте: перезагрузите страницу, добавьте данные через форму, обновите — если данные сохраняются, значит подключение работает.

    Отсутствие обработки ошибок. API может не ответить. Сеть может отвалиться. База может вернуть пустой результат. Если ИИ не добавил обработку ошибок — попросите отдельным промптом: «Добавь обработку ошибок для всех API-вызовов. Показывай пользователю понятное сообщение, а не пустой экран.»

    Фантомные пакеты. ИИ уверенно импортирует npm install super-api-helper, которого не существует в npm. Под такими именами регистрируют вредоносное ПО. Проверяйте каждый import на существование пакета перед установкой.

    SQL-инъекции. Если приложение принимает пользовательский ввод и использует его в запросах к базе — убедитесь, что запросы параметризованы. Промпт: «Используй параметризованные запросы и валидируй весь ввод от пользователя.»

    Практический пример: подключаем API погоды

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

    Промпт 1 (план): «Хочу показывать погоду рядом с каждым расходом. Используй OpenWeatherMap API. Расскажи план, не пиши код.»

    ИИ предлагает: «Создам компонент WeatherBadge, при добавлении расхода буду запрашивать погоду по дате и городу...»

    Вы: «Город не нужен — бери геолокацию браузера. И кешируй запросы, чтобы не дёргать API для каждой даты.»

    ИИ генерирует код. Вы тестируете: добавляете расход, рядом появляется иконка погоды. Работает.

    Коммит: git commit -m "feat: weather widget for expenses"

    Одна интеграция. Две итерации. Рабочая фича.

    В следующей статье мы разберём финальный этап — как тестировать приложение, находить баги и выкладывать готовый продукт в интернет.

    5. Тестирование, отладка и деплой готового проекта

    Тестирование, отладка и деплой готового проекта

    Вы потратили неделю на разработку. Приложение работает на вашем компьютере. Вы показываете другу — и он находит баг за тридцать секунд: «А если я введу минус в поле суммы?» Вы проверяете — и приложение сохраняет расход с отрицательным числом, ломая все расчёты. Знакомо?

    По данным Stack Overflow, 66% разработчиков сталкиваются с AI-кодом, который работает «almost right» — выглядит рабочим, но ломается в реальных условиях. В вайб-кодинге эта проблема острее, потому что ИИ оптимизирует код под happy path — идеальный сценарий, который вы описали в промпте. Граничные условия, нетипичные данные и ошибки пользователя остаются без обработки.

    Именно поэтому тестирование — не финальный этап, а непрерывный процесс, который начинается с первого промпта.

    Тестирование в вайб-кодинге: три уровня

    Уровень 1: Smoke-тест после каждого изменения

    Smoke-тест — быстрая проверка, что приложение вообще запускается и базовые функции работают. Не детальный разбор, а ответ на вопрос: «Всё ещё живо?»

    После каждого изменения, которое сгенерировал ИИ, делайте три вещи:

  • Откройте приложение в браузере
  • Выполните основной сценарий (добавьте данные, посмотрите результат)
  • Проверьте консоль браузера на ошибки (F12 → вкладка Console)
  • Если smoke-тест не проходит — не продолжайте. Исправляйте или откатывайтесь на последний рабочий коммит.

    Уровень 2: Проверка граничных условий

    ИИ редко обрабатывает граничные случаи. Ваша задача — попробовать сломать приложение:

  • Пустые поля. Что если оставить форму пустой и нажать «Сохранить»?
  • Слишком длинные строки. Вставьте 10 000 символов в поле «Описание».
  • Специальные символы. Введите <script>alert('hack')</script> в поле имени.
  • Отрицательные числа. Минус в поле суммы — что произойдёт?
  • Невалидные даты. 32 декабря или дата из будущего.
  • Вот промпт, который заставляет ИИ закрыть эти дыры:

    Уровень 3: Security-ревью

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

    SQL-инъекции. Если пользовательский ввод попадает в запрос к базе без обработки — злоумышленник может получить доступ ко всем данным. Решение: параметризованные запросы.

    XSS (межсайтовый скриптинг). Если приложение вставляет пользовательский текст прямо в HTML — можно внедрить вредоносный скрипт. Решение: экранирование данных перед отображением.

    Хранение секретов в коде. API-ключи, пароли и токены не должны быть видны в репозитории. Решение: переменные окружения (.env-файлы).

    Промпт для security-ревью:

    Отладка: как находить и чинить баги

    Когда что-то ломается, у вас есть три инструмента:

    Консоль браузера. Откройте F12 → Console. Красные сообщения — это ошибки. Скопируйте текст ошибки целиком и вставьте ИИ с контекстом: «Вот ошибка, вот что я делал, вот что ожидал.»

    Вкладка Network. Там видны все запросы к серверу и базе данных. Если данные не сохраняются — проверьте, уходят ли запросы и что возвращают. Статус 400 или 500 означает ошибку на стороне сервера.

    Режим отладки Cursor. В Cursor есть встроенная функция: выделяете проблемный код, нажимаете Cmd+K и описываете проблему. ИИ видит код и контекст — часто исправляет с первого раза.

    Важный принцип: не описывайте ошибку своими словами. Копируйте точный текст. ИИ лучше понимает технический вывод, чем «ну типа кнопка не работает».

    Деплой: выкладываем приложение в интернет

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

    Vercel: один клик из GitHub

    Vercel — самый простой путь для React и Next.js приложений.

  • Зарегистрируйтесь на vercel.com через GitHub
  • Нажмите «Import Project» и выберите репозиторий
  • Vercel автоматически определит настройки и запустит деплой
  • Через минуту вы получите ссылку вида my-app.vercel.app
  • Каждый раз, когда вы пушите код в GitHub, Vercel автоматически обновляет сайт. Никаких команд, никакой настройки.

    Replit: деплой из браузера

    Если вы разрабатывали в Replit — деплой встроен в платформу. Нажмите кнопку «Deploy», и приложение станет доступно по публичной ссылке. Никакого Git, никакого терминала.

    Netlify: для статических сайтов

    Если приложение не требует сервера — Netlify берёт папку с файлами и делает её доступной в интернете. Перетащили папку — получили ссылку.

    Перед деплоем: чеклист

    Прежде чем нажать кнопку «Deploy», проверьте:

  • Нет захардкоженных секретов. Поищите в коде API-ключи, пароли, токены. Если нашли — вынесите в переменные окружения.
  • Переменные окружения настроены на хостинге. В настройках Vercel или Netlify добавьте те же переменные, что в вашем .env-файле.
  • Приложение работает в режиме production. Запустите npm run build локально — если сборка проходит без ошибок, деплой пройдёт успешно.
  • Проверены основные сценарии. Откройте приложение в режиме инкогнито (без кеша) и пройдите основной путь пользователя.
  • После деплоя: мониторинг и обратная связь

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

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

    Смотрите логи. Vercel и Supabase показывают логи ошибок в реальном времени. Если что-то падает — вы увидите это в панели управления.

    Итерируйте. Каждый баг — это промпт для ИИ. Опишите проблему, получите исправление, протестируйте, задеплойте. Цикл тот же, что при разработке.

    Автоматические тесты: когда и зачем

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

    Промпт для генерации тестов:

    ИИ сгенерирует тесты, которые вы сможете запускать командой npm test. Это не обязательно для старта, но становится критически важным, когда пользователей больше десяти.

    Главный урок: не бойтесь запускать

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

    Запустите. Получите обратную связь. Улучшите. Повторите. Это и есть настоящий вайб-кодинг — не написание кода, а быстрый путь от идеи к живому продукту.