Вчера я собрал трекер расходов с нуля и задеплоил его на Vercel. Auth, база, дашборд с графиками, CSV-экспорт. Вайб кодинг пошаговая инструкция — вот что получилось из этого эксперимента. Ни строчки кода руками. Ну, почти — пару раз пришлось лезть в DevTools, но об этом позже.
Я уже разбирал реальный кейс: SaaS за 19 дней в одиночку — там цифры, грабли и честные выводы. Здесь другое: пошаговый путь, чтобы ты мог повторить сам.
Какие инструменты нужны для вайб-кодинга в 2026?
Какие AI кодинг инструменты 2026 года реально работают? Есть два пути: бесплатный и тот, за который я плачу.
Бесплатный стек (для первого раза):
- Google Antigravity — AI-IDE, полностью бесплатный. Внутри Claude Opus 4.5 и Gemini 3.1 Pro. Да, бесплатно.
- Gemini CLI — агент для терминала, тоже бесплатно
- Vercel — хостинг, free tier
- Supabase — база данных и авторизация, free tier
- Git + GitHub — бесплатно
Рабочий стек ($40-200/мес):
- Cursor Pro — $20/мес. Лучший IDE для вайб-кодинга. 46% разработчиков назвали его «most loved» в опросах 2026 года
- Claude Code на Max Plan — $100-200/мес. SWE-bench 80.8%, контекст на миллион токенов. Для сложных задач ничего лучше пока нет
- Vercel — free tier (хватает)
- Supabase — free tier (тоже хватает)
Дальше я показываю на связке Cursor + Claude Code. Но если хочешь начать вайб кодинг без бюджета, Google Antigravity закроет 80% задач. Я пробовал оба варианта, и для первого проекта разница минимальна.
Ещё понадобится: Node.js 20+, Git, аккаунт на GitHub. У меня первый проект занял часов шесть. Сейчас подобное делаю за два-три.
Инфо
Сколько стоит вайб-кодинг? От $0 до $200/мес. Бесплатный стек (Antigravity + Vercel + Supabase) — рабочий вариант для старта. Рабочий стек (Cursor + Claude Code) — $40-200/мес в зависимости от нагрузки. Сравни с традиционной разработкой: минимум $50-150K за MVP с командой.
Шаг 1: идея и спецификация — что делать ДО первого промпта
Этот шаг большинство пропускает. И потом удивляется, что AI генерирует мусор. Я тоже пропускал. Пока не потратил полдня на переделку того, что можно было описать за десять минут.
Расплывчатый промпт = расплывчатый результат. «Сделай мне трекер расходов», и AI сам придумает модель данных, выберет стек, нарисует UI на свой вкус. Потом разгребай.
Мой подход — ответить на пять вопросов до того, как открыл IDE:
- Что делает? Трекер расходов для фрилансеров
- Кто пользователь? Фрилансер, который хочет видеть, куда утекают деньги
- Какие экраны? Добавление расхода, список расходов, дашборд по категориям
- Какие данные? Расход (сумма, категория, дата, описание). Пользователь (email, пароль)
- Ограничения? React + TypeScript + Supabase + Vercel. Без платных интеграций, MVP
Десять минут. Зато AI получает чёткое ТЗ, а не «сделай что-нибудь красивое».
Помнишь, что промпт — это не строка, а система? Для вайб-кодинга это работает один в один. Чем больше контекста ты даёшь AI (стек, ограничения, структуру данных), тем предсказуемее результат.
Шаг 2: настраиваем рабочее окружение
Перед первым промптом нужно настроить окружение. Три вещи.
Первое — инициализация проекта:
mkdir expense-tracker && cd expense-tracker
git init
npx create-next-app@latest . --typescript --tailwind --eslint --app --use-npm
npm install @supabase/supabase-js @supabase/ssr rechartsВторое: файл конфигурации для AI. Без него AI забывает контекст и предлагает конфликтующие решения. С конфигурацией работает как напарник, который знает проект.
Для Claude Code создаём CLAUDE.md в корне:
# Expense Tracker
Трекер расходов для фрилансеров. React + TypeScript + Tailwind + Supabase.
## Стандарты
- TypeScript strict mode
- Tailwind v4, без кастомного CSS
- Supabase для БД и авторизации
- Маленькие компоненты, один файл — один компонент
- Тесты для бизнес-логики
## Команды
npm run dev # dev server на localhost:3000
npm test # тесты
npm run build # production buildДля Cursor — .cursorrules:
- Объясни план действий до начала кода, жди подтверждения
- Используй самую простую реализацию
- Меняй только файлы, которые я указал
- Никаких новых зависимостей без моего согласия
- React + TypeScript + Tailwind + Supabase
Кто хочет копнуть глубже, можно настроить Claude Code с кастомными навыками. Но для первого проекта хватит базового CLAUDE.md.
Третье: Supabase. Заходим на supabase.com, создаём проект, копируем URL и anon key. Создаём .env.local:
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGci...И сразу — .env.local в .gitignore. Не потом, не «когда-нибудь». Сейчас.
echo ".env.local" >> .gitignore
git add -A && git commit -m "initial setup"Шаг 3: первый промпт — генерируем приложение
Окей, создаём приложение с помощью AI. Это ключевой шаг вайб-кодинга: открываем Cursor или Claude Code и вставляем спецификацию. Вот реальный промпт, который я использовал:
Build an expense tracker for freelancers.
Tech: Next.js 15 App Router, TypeScript, Tailwind, Supabase (already configured in .env.local).
Features:
1. Auth: email/password signup and login via Supabase Auth. Protect all routes except landing page.
2. Add expense: form with amount (number, required), category (select from preset list: Food, Transport, Office, Software, Education, Other), date (default today), note (optional text).
3. Expense list: table with all expenses, sorted by date desc. Filter by category. Delete button.
4. Dashboard: monthly totals by category as a bar chart (use recharts). Total spent this month as a big number at the top.
5. CSV export: button that downloads all expenses as CSV.
Database: one table "expenses" with columns: id (uuid), user_id (references auth.users), amount (numeric), category (text), date (date), note (text), created_at (timestamptz). Enable RLS — users see only their own data.
UI: clean, minimal. Sidebar navigation. Mobile-friendly.
Промпт конкретный. Стек задан. Фичи пронумерованы. Модель данных описана. RLS упомянут. AI знает, что делать.
Дальше Claude Code или Cursor Agent начинают генерировать файлы. Компоненты, роутинг, подключение к Supabase, миграции для базы. У меня это заняло минуты три.
После первой генерации у тебя будет рабочий UI с формами, роутинг, подключение к Supabase, стили. Выглядит прилично. Но нормальной обработки ошибок там не будет, безопасность дырявая, перформанс никакой. Это нормально. Первая генерация — фундамент, не финальный продукт.
Сразу коммитим:
git add -A && git commit -m "v1: initial AI generation"Запускаем npm run dev, открываем localhost:3000, тыкаем. Регистрация работает? Расход добавляется? Дашборд показывает данные? Если базовый флоу живой — двигаемся дальше.
Шаг 4: итерации — ревью, правки, тесты
Вот тут начинается настоящая работа. AI-код почти никогда не работает из коробки. У меня так каждый раз: первый запуск, что-то не рендерится, auth редиректит не туда, стили поплыли. Суть вайб-кодинга не в том, что AI выдаёт идеальный код с первого раза. Суть в быстрых итерациях.
Главное правило: одно изменение за промпт.
Плохо: «Add validation, dark mode, and CSV export» Хорошо: «Add form validation — amount must be positive number, category is required, show error messages below each field»
Монолитный промпт на пять фич, и AI запутается, смешает изменения, сломает то, что работало. Одна фича, один промпт, один коммит.
Security review — не пропускай
Этот шаг бесит пропускать, потому что хочется уже фичи пилить. Но исследование Databricks показало: один self-reflection промпт снижает уязвимости на 48-50%. Почти вдвое. Один промпт. Вот он:
Review this codebase as a security expert. Check for:
1. User input trusted without validation
2. Missing authorization checks (auth is not the same as authz)
3. Secrets or API keys in source code
4. Tokens stored in localStorage instead of httpOnly cookies
5. SQL injection or XSS vulnerabilities
6. Missing rate limiting on auth endpoints
7. Verbose error messages exposing internals
List every issue with file path and line number.
Это не паранойя. По данным Veracode (2025), 45% AI-кода содержит security flaws. CodeRabbit зафиксировал 1.7x больше major issues в AI-коде по сравнению с написанным людьми. Промпт выше — минимальная страховка. Я его копирую в каждый проект.
Порядок итераций
Не хаотично, а по приоритету. Сначала фиксы из security review: дыры закрываем первыми, тут без вариантов. Потом недостающие фичи из спецификации — CSV-экспорт, фильтры. Дальше обработка ошибок: пустые состояния, loading, edge cases (это то, что AI любит забывать). Потом UI/UX: адаптивность, анимации, мелочи. И тесты, в конце, когда логика устоялась.
Для сложных фич у меня работает приём «план сначала»:
Outline your step-by-step plan for adding CSV export of all expenses.
Don't write any code yet. Describe which files you'll change and why.
AI расписывает план. Я проверяю, что план адекватный. И только потом: «Implement step 1 only.»
Когда модель начинает буксовать на архитектурных решениях или сложном дебаге, можно управлять мышлением модели, включив extended thinking. Токенов сожрёт больше, но для нетривиальных задач окупается.
Ещё один приём, который спасал меня не раз — self-critique перед коммитом:
Look at the changes you just made. What could break?
What edge cases did you miss?
AI сам находит проблемы, которые сам же создал. Ирония, но работает.
Внимание
Контекстный дрифт: после 20-30 сообщений в одном чате AI начинает «забывать» ранние инструкции. Решение: /clear между блоками задач, новые сессии для крупных фич. Не пытайся сделать весь проект в одном чате.
Тесты
AI пишет тесты быстрее, чем ты формулируешь, что нужно протестировать. Промпт:
Write tests for:
1. User can sign up and log in
2. User can add an expense with valid data
3. Form rejects empty amount and missing category
4. Dashboard shows correct monthly totals
5. CSV export contains all user expenses
Use the testing framework already in the project.
Плюс ручное тестирование. Прокликай полный флоу: signup, login, добавление расхода, дашборд. Отправь пустую форму, ошибки валидации на месте? Разлогинься и попробуй открыть дашборд, редирект на логин работает? Добавь штук 50 расходов и проверь, что дашборд не тормозит. Открой на телефоне. Если UI не развалился, ты молодец.
Git commit после каждого блока итераций. Не после каждой строчки, но и не раз в день.
Шаг 5: деплой — выкатываем в прод
Большинство русскоязычных гайдов по вайб кодингу заканчиваются на localhost. Мы нет.
Supabase: миграции и RLS
В Supabase Dashboard уже создана таблица expenses (AI сгенерировал SQL). Проверяем, что RLS включён. Каждый пользователь должен видеть только свои расходы:
-- В Supabase SQL Editor
ALTER TABLE expenses ENABLE ROW LEVEL SECURITY;
CREATE POLICY "Users can view own expenses"
ON expenses FOR SELECT
USING (auth.uid() = user_id);
CREATE POLICY "Users can insert own expenses"
ON expenses FOR INSERT
WITH CHECK (auth.uid() = user_id);
CREATE POLICY "Users can delete own expenses"
ON expenses FOR DELETE
USING (auth.uid() = user_id);Без RLS любой залогиненный пользователь видит данные всех. Та самая дыра, о которой я говорил выше.
Vercel: три команды
npm i -g vercel
vercel login
vercelVercel спросит настройки, соглашаемся с дефолтами. После деплоя добавляем environment variables через vercel env add или через дашборд Vercel:
vercel env add NEXT_PUBLIC_SUPABASE_URL
vercel env add NEXT_PUBLIC_SUPABASE_ANON_KEYПередеплоиваем с переменными:
vercel --prodГотово. У тебя есть URL вида expense-tracker-xxx.vercel.app. Рабочее приложение в интернете.
После деплоя: Прокликай весь флоу на продакшен-URL: регистрация, добавление расхода, дашборд, CSV-экспорт. Открой на телефоне. И попроси кого-нибудь зарегистрироваться, потому что свежий взгляд ловит то, что ты уже не замечаешь.
Чеклист: как проверить AI-код перед релизом
Перед тем как скинуть ссылку кому-то, пройдись по чеклисту вайб-кодинга. Я серьёзно, не пропускай.
Безопасность:
- Environment variables в Vercel, НЕ в коде
-
.env*в.gitignore - RLS в Supabase настроен и протестирован
- Формы валидируются на клиенте и сервере
- Нет секретов в git-истории (
gitleaks detect --source .) - Error messages не показывают stack traces
Функциональность:
- Auth: signup, login, logout, protected routes
- CRUD для основной сущности работает
- Дашборд показывает корректные данные
- Экспорт работает
- Пустые состояния — не белый экран, а placeholder
Инфраструктура:
- HTTPS (Vercel включает автоматически)
- Работает на мобильном
-
npm auditбез critical уязвимостей
# Автоматические проверки
npm audit
npx gitleaks detect --source .Совет
Если хочешь ещё серьёзнее, есть Semgrep — бесплатный SAST-сканер. pip install semgrep && semgrep scan --config=auto . Находит типовые уязвимости в JS/TS коде. Для пет-проекта можно пропустить. Но если туда будут заходить реальные люди с реальными деньгами, не пропускай.
Частые ошибки новичков в вайб-кодинге
Граблей в вайб-кодинге хватает. Вот те, на которые я наступал сам или видел, как наступают другие.
Самая частая: «Сделай мне приложение» без спецификации. AI придумает за тебя. Модель данных, стек, UI. Потом два часа разгребаешь то, что можно было направить десятиминутным спеком. Возвращайся к шагу 1.
Вторая по популярности: монолитный промпт на пять фич сразу. AI смешает изменения, сломает одно, починив другое. Одна фича, один промпт, один коммит. Без исключений.
Нет git? Генерация сломала то, что работало, откатиться некуда. git commit перед каждой крупной генерацией. Это необходимость, не рекомендация.
Пропущенный security review тоже классика. AI сгенерировал красивый auth-flow, токен в localStorage, и вот тебе XSS уводит сессию. Один промпт на security review сокращает уязвимости вдвое.
Контекстный дрифт подкрадывается незаметно. После 25 сообщений AI начинает «забывать» начальные инструкции. У меня однажды начал предлагать Angular в React-проекте. Решение простое: новый чат для новой задачи.
Отдельная история, март 2026: инженер Алексей Григорьев использовал Claude Code для обновления своего сайта. AI-агент удалил production-базу данных с данными курсов за несколько лет. Не было safety checks, было избыточное доверие агенту. Мораль простая: AI — инструмент, не коллега, которому можно делегировать без контроля.
И ещё одна мелочь, которая раздражает: люди открывают Claude Code, чтобы поправить кнопку на 2 пикселя. Открой DevTools, поправь руками. Быстрее и дешевле.
Что дальше: от утилиты до SaaS
Ты собрал трекер расходов. Работает, задеплоен, можно пользоваться. Что теперь?
Пользуйся сам. Хотя бы неделю. Серьёзно. Ты быстро найдёшь, что неудобно, чего не хватает, что бесит. Эти инсайты дороже любого user research на старте. У меня через три дня использования собственного трекера набралось шесть пунктов на доработку.
Когда базовые раздражители починены, можно добавлять фичи: повторяющиеся расходы, бюджеты по категориям, интеграция с банком через API. Каждая фича по тому же циклу: спецификация, промпт, генерация, ревью, тест, деплой.
Если захочешь пойти дальше и превратить утилиту в продукт, добавить Stripe, лендинг, онбординг, вот реальный кейс: SaaS за 19 дней в одиночку — там показано, как это выглядит от начала до конца.
А если стандартные модели не справляются с доменной спецификой (допустим, нужен AI, который понимает бухгалтерскую терминологию), можно дообучить модель под свои задачи. Звучит сложно, но технически доступнее, чем кажется.
Знаешь, что мне больше всего нравится в вайб-кодинге? Порог входа. Не нужно три года учить React, чтобы собрать работающую штуку. Достаточно понимать, чего хочешь, и уметь это объяснить. AI пишет код, ты принимаешь решения. Инструменты бесплатны или стоят как один ужин в месяц. Попробуй на чём-нибудь маленьком, для себя. Хуже не будет, а вот залипнуть можно надолго.
