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

Кто это пишет и почему тебе стоит дочитать
Я Николай Калинин, Коля WebSansay. С 2016 года автоматизирую бизнес: n8n, боты, контент-заводы, ИИ-агенты, которые работают вместо менеджеров и копирайтеров. Сегодня большую часть своих рабочих проектов я собираю вместе с ИИ-агентом Claude Code: ставлю задачу, проверяю результат, принимаю или откатываю. Это не теория из чужого ролика, а моя ежедневная кухня. Поэтому я знаю, где новичок спотыкается в первый вечер, и разложил путь так, чтобы ты через эти грабли не прошёл.
Что внутри:
- что такое вайб-кодинг и чем он отличается от конструктора сайтов;
- как устроено любое приложение (на примере ресторана, поймёт даже бабушка);
- какие программы нужны и как их поставить на Windows, macOS и Linux;
- как правильно ставить задачу ИИ: формула, 8 правил и готовые промпты;
- 4 уровня «спидрана»: от идеи до работающего приложения;
- как выложить в интернет, не засветить ключи и что делать, когда всё сломалось;
- сколько это стоит и как на этом зарабатывать без сказок про «миллион за выходные».
Что такое вайб-кодинг простыми словами
Термин придумал исследователь ИИ Андрей Карпатый в начале 2025 года, а к концу года словарь Collins назвал «vibe coding» словом года. Идея простая: ты не учишь язык программирования, ты объясняешь ИИ, что должно получиться. ИИ пишет код, создаёт файлы, запускает приложение, читает ошибки и сам их чинит.
Представь стройку. Ты — заказчик и прораб: решаешь, что строим, даёшь чертёж, принимаешь каждый этап. ИИ — бригада: быстро таскает кирпичи, но если сказать «построй что-нибудь», построит что попало. Вся разница между «навайбкодил красивую картинку» и «запустил рабочее приложение» — в том, дал ты бригаде чертёж или нет.
Чем это отличается от конструкторов вроде Tilda или Wix
В конструкторе ты собираешь сайт из готовых блоков и упираешься в потолок: запись клиентов, личный кабинет, CRM, бот — либо платно и криво, либо никак. При вайб-кодинге ИИ пишет настоящий код. Код твой: его можно переносить, дорабатывать, продавать. Потолка нет, есть только твоя способность ясно объяснить задачу.
Что новичку по силам, а что лучше не трогать
| Берись смело | Сложно или рискованно |
|---|---|
| Онлайн-запись для барбершопа, салона, автосервиса | Банковские и финансовые системы |
| Учёт клиентов, заказов, склада | Медицинские данные пациентов |
| Лендинг с формой заявок | Сервисы на миллионы пользователей |
| Внутренние инструменты для бизнеса | 3D-игры со сложной физикой |
| Telegram-боты, калькуляторы, каталоги, личные кабинеты | Всё, где ошибка стоит больших денег или чужих данных |
Почему правая колонка опасна: ИИ пишет код, который работает, но не всегда безопасен. Пока ты не научился проверять безопасность (это отдельный блок ниже), не делай то, где утечка или ошибка в расчётах навредит людям.
Лучшее первое приложение решает одну понятную проблему одного бизнеса. Например: «мастер теряет записи в мессенджере». Его проще сделать и проще продать.
Как устроено любое приложение: объясняю на ресторане
Запомни эту картинку — и ты поймёшь 90% того, что тебе будет говорить ИИ. Любое приложение устроено как ресторан.

- Зал (фронтенд) — то, что видит клиент: экраны, кнопки, формы. Работает в браузере.
- Кухня (бэкенд, сервер) — логика, которую клиент не видит: проверить, свободно ли время, посчитать сумму.
- Склад (база данных) — где лежат клиенты, записи, оплаты. Таблицы как в Excel, только умнее.
- Официант (API) — носит запросы из зала на кухню и обратно: «запиши Алию на 14:00» и ответ «готово».
- Здание (хостинг) — компьютер в интернете, где приложение работает круглосуточно.
- Адрес (домен) — название сайта, например
moisalon.ru.
Путь одной записи от клика до мастера
Словарик: слова, которые пугают, а на деле простые
| Слово | Простыми словами |
|---|---|
| Промпт | Твоё сообщение ИИ, то есть задание |
| Проект | Папка со всеми файлами приложения |
| Терминал | Окно, где компьютеру дают команды текстом, а не мышкой |
| Фреймворк | Готовый каркас, чтобы не писать всё с нуля (например, Next.js) |
| Стек | Набор технологий проекта: язык, каркас, база |
| localhost | Твой компьютер в роли сервера: приложение видишь только ты |
| Деплой | Выложить приложение в интернет |
| Git и коммит | «Сохранения» как в игре: точка, к которой можно вернуться |
| GitHub | Облако, где лежит код и вся история сохранений |
| Ключ API | Пароль, по которому приложение заходит в сервис |
| .env | Файл с ключами и настройками, который никогда не уходит в интернет |
| RLS | Правила базы «кто что может видеть». Охранник у каждой таблицы |
| Контекст | Всё, что ИИ «помнит» в текущем чате. Память у него конечная |
| Агент | ИИ, который не просто отвечает, а сам делает: создаёт файлы, запускает команды |
Какой инструмент выбрать: конструктор в браузере или ИИ-агент
| Конструкторы (Lovable, Bolt, Replit, v0) | ИИ-агенты (Claude Code, Cursor) | |
|---|---|---|
| Как работает | Пишешь в чат на сайте, приложение собирается там же | ИИ работает с папкой проекта на твоём компьютере |
| Старт | Очень быстрый, ничего ставить не надо | Нужно поставить 3-4 программы, это один вечер |
| Контроль | Меньше, сложное даётся тяжело | Полный: код твой |
| Когда ломается | Часто ходишь по кругу | Можно разобраться, откатиться, починить |
| Для чего | Быстро показать идею, прототип | Приложение, которое будет работать на бизнес |
Хочешь за вечер показать идею — бери конструктор. Хочешь приложение, которое работает на реальный бизнес и которое можно продать — бери агента. Принципы из этой статьи (план, четыре уровня, промпты) работают и там, и там.
Почему я беру Claude Code
- Работает с настоящей папкой проекта: сам создаёт файлы, запускает приложение, читает ошибки и чинит их.
- Есть режим плана: сначала показывает, что собирается делать, а код пишет только после твоего «ок».
- Любой неудачный шаг откатывается командой
/rewind. - Помнит правила проекта через файл
CLAUDE.md. - Понимает русский: промпты можно писать как есть.
Claude Code входит в платные подписки Claude: Pro примерно за $20 в месяц и Max от $100 (цены на октябрь 2026, перед оплатой проверь на сайте). В бесплатном тарифе его нет. Для первого приложения Pro хватает; лимиты общие с обычным чатом, так что, упёршись в лимит, просто подожди несколько часов.
Теперь честно про Россию. Регистрация и оплата Claude из России — отдельный квест, и если ты с ним не справился, это не повод бросать тему. Есть бесплатная альтернатива: Antigravity в России без VPN: рабочая активация и обход блокировки 2026. Принципы вайб-кодинга там те же. А если хочешь именно Claude и не хочешь тратить вечер на танцы с оплатой, напиши мне, подскажу рабочие связки.
Установка за один вечер

Терминал без страха
Терминал — окно, где компьютеру дают команды текстом. Сломать им что-то обычными командами из этой статьи невозможно.
- Windows: нажми Пуск, набери «PowerShell», открой.
- macOS: Cmd + Пробел, набери «Терминал», Enter.
- Linux: Ctrl + Alt + T или поиск по слову «Терминал».
Хватит шести команд:
| Команда | Что делает |
|---|---|
cd Desktop |
Перейти в папку (здесь на Рабочий стол) |
cd .. |
Вернуться на папку выше |
mkdir moj-proekt |
Создать папку |
dir (Windows) или ls (macOS, Linux) |
Показать, что лежит в папке |
| Ctrl + C | Остановить то, что сейчас работает |
| Стрелка вверх | Повторить прошлую команду |
Шаг 1. Node.js и Git
- Node.js запускает приложения на JavaScript. Зайди на nodejs.org, нажми кнопку с пометкой LTS (стабильная версия), установи, жми «Далее».
- Git хранит версии проекта. Зайди на git-scm.com, скачай и установи с настройками по умолчанию. На macOS Git обычно уже есть, на Linux ставится из менеджера пакетов (
sudo apt install git). - Закрой терминал и открой заново, иначе он не увидит новые программы. Проверь:
node -v
npm -v
git --version
Увидел номера версий — всё установлено. Цифры у тебя будут свои, это нормально. Если пишет «не распознано как имя командлета», программа не поставилась или терминал старый: перезапусти его, а если не помогло, перезагрузи компьютер.
Шаг 2. Claude Code
Есть две формы запуска, выбирай любую.
Вариант А, проще всего: скачай приложение Claude для компьютера на claude.com/download, войди в аккаунт с подпиской и открой раздел Code. Выбираешь папку проекта и пишешь задачи.
Вариант Б, через терминал. Одна команда под твою систему.
Windows (PowerShell):
irm https://claude.ai/install.ps1 | iex
macOS и Linux (Терминал):
curl -fsSL https://claude.ai/install.sh | bash
Установка идёт молча, без полосы прогресса. Когда закончится, открой новый терминал и проверь:
claude --version
Первый запуск: перейди в папку проекта (cd Desktop/moj-proekt) и набери claude. Откроется браузер, войди в аккаунт. На вопрос «доверяешь ли этой папке» отвечай «да», если папка твоя.
Шаг 3. Аккаунты в сервисах
Зарегистрируйся заранее, удобнее всего входить через GitHub:
- GitHub — хранит код и историю версий;
- Supabase — база данных, вход по паролю, API;
- Vercel — выкладывает приложение в интернет.
Чек-лист готовности: node -v, git --version и claude --version показывают версии (или в приложении открывается раздел Code); есть подписка; есть три аккаунта; на Рабочем столе лежит папка проекта. Застрял — сделай скриншот и спроси обычный чат Claude: «Я ставлю такую-то программу на Windows, вот что вижу. Что делать?»
Как общаться с агентом: режимы, команды и память
Работа выглядит так: ты пишешь задачу обычным текстом, Claude читает файлы проекта и показывает план, перед изменением файлов и запуском команд спрашивает разрешение, делает и говорит, как проверить.
Режимы (переключаются Shift + Tab)
- Обычный — спрашивает разрешение на каждое действие. Пока учишься, это самый безопасный вариант.
- Автоправки — правит файлы без вопросов. Включай, когда план уже одобрен.
- План — только думает и предлагает, ничего не меняет. Включай перед любой большой задачей.
Есть ещё режим «делай всё без вопросов» (флаг --dangerously-skip-permissions). Название говорит само за себя: новичку им пользоваться не надо, можно случайно разрешить удалить важное.
9 команд, которых хватит на всё
Команды набираются в начале сообщения через /. Набери просто /, и появится список.
| Команда | Что делает | Когда нужна |
|---|---|---|
/init |
Создаёт CLAUDE.md, память проекта |
Первый запуск в проекте |
/plan |
Режим плана: сначала план, потом код | Любая задача больше одного файла |
/clear |
Новый чат с чистой памятью, файлы на месте | Новая задача |
/compact |
Сжимает переписку в краткое содержание | Задача та же, а чат длинный |
/context |
Показывает, сколько памяти занято | Ответы стали хуже |
/rewind |
Откатывает код и чат к прошлой точке | Claude всё испортил |
/resume |
Открывает прошлый разговор | Вернулся на следующий день |
/model |
Сменить модель ИИ | Сложная задача или экономия лимита |
/help |
Все команды | Что-то забыл |
Полезные клавиши: Esc останавливает Claude прямо сейчас, Esc Esc открывает меню отката, @имя-файла показывает ему конкретный файл.
Почему ИИ тупеет посреди проекта
У ИИ ограниченная память на один разговор — контекст. Чем длиннее чат, тем больше в нём старого мусора: отменённые идеи, прошлые ошибки, лишние файлы. ИИ начинает путаться, забывать важное, а лимиты тратятся быстрее. Рецепт простой: одна задача — один чат. Закончил экран, сохранил, написал /clear, пошёл дальше.
Долгая память живёт в файле CLAUDE.md. Чат очищается, а файл остаётся, и Claude читает его в начале каждой сессии. Пиши туда, что за проект, какой стек, какие правила («по одному экрану», «схему базы без спроса не трогать»). Заметил, что ИИ повторяет одну и ту же ошибку? Скажи: «Запомни в CLAUDE.md: [правило]». Больше не повторит.
Кстати, лимит на длинных сессиях кончается быстро. Как отдать рутину дешёвой модели и сэкономить лимит, я разобрал отдельно: Лимит Claude Code кончается за вечер? Субагент Haiku 5.5 забирает рутину у Opus.
Как ставить задачу ИИ: формула и 8 правил
Промпт — это ТЗ. Плохое ТЗ даёт плохой результат у любого исполнителя, у человека тоже. Формула из шести частей:
- Контекст. Что за проект. «Делаем запись в барбершоп, план лежит в docs/».
- Задача. Что сделать. «Сделай экран записи».
- Детали. Как именно. «Занятое время не показывать, удобно на телефоне».
- Границы. Чего не делать. «Только этот экран, базу не трогай».
- Проверка. Как понять, что готово. «В конце скажи, как проверить по шагам».
- Вопросы. Разреши спросить. «Если что-то непонятно, спроси до начала».
Плохо: «сделай админку красивую».
Хорошо: «Сделай экран “Админка” для мастера по docs/. Вход по паролю. Список записей на день: время, имя, телефон, услуга. Кнопка “Отметить оплату”. Только этот экран. В конце скажи, как проверить».
8 правил промптинга
- Одна задача за раз. «Сделай экран, поправь базу и дизайн» — это три задачи, и одна сломается.
- «Не пиши код», когда нужно подумать. Сначала план, потом код.
- Показывай, а не описывай. Скриншот или текст ошибки лучше тысячи слов. Картинку можно вставить прямо в Claude Code.
- Говори, что не трогать. «Не меняй то, что уже работает».
- Проси объяснить простыми словами. «Объясни, что сделал, как новичку». Так ты учишься и замечаешь косяки.
- Проси проверку. «Как мне проверить, что это работает?» И проверяй сам.
- Проси критику. «Найди слабые места в плане, будь строгим».
- Не спорь по кругу. Третья попытка не помогла —
/rewindили/clearи опиши задачу иначе.
Волшебная фраза в конец любого сложного промпта: «Если чего-то не хватает, сначала задай мне вопросы». ИИ перестаёт гадать и начинает уточнять.
Спидран: 4 уровня от идеи до приложения

Главная ошибка новичка
Новичок пишет одну фразу: «Создай мне приложение». Через минуту получает красивый экран, а потом всё ломается на первом клиенте. Почему? На одну фразу ИИ сам придумывает всё: экраны, где хранятся данные, кто что видит. Он гадает, и где не угадал, там поломка. Это не ИИ глупый. Ему не дали плана.
Как правильно: как со стройкой дома. Сначала чертёж, потом фундамент, потом стены. Проходим четыре уровня, и на каждом ИИ отвечает на один вопрос.
Структура папки проекта получится такой:
moj-proekt/
CLAUDE.md правила для ИИ
docs/
01-architecture.md уровень 1
02-stack.md уровень 2
03-database.md уровень 3
schema.sql SQL базы
.env.local ключи, НЕ в GitHub
Уровни 1-3 можно проходить в обычном чате Claude. Ответ сохрани в файл с расширением .md или попроси Claude Code: «Сохрани это в docs/01-architecture.md».
Пример на всю статью — онлайн-запись в барбершоп «Fade Studio». Стрижка 1 500 ₽, борода 800 ₽, комплекс 2 000 ₽ (цифры придуманные, для примера). Клиент записывается с телефона, мастер видит записи в админке. Свою идею подставляй вместо барбершопа.
Уровень 1. Архитектура: чертёж без единой строчки кода
Чертёж отвечает на вопросы: кто пользуется, какие экраны, какие данные, как всё связано. Промпт:
Не пиши код.
Я хочу сделать приложение: [для кого, что делает, как зарабатывает].
Опиши, из каких частей оно будет, какие экраны, какие данные и как они связаны. Формат:
1. Пользователи: кто и что делает.
2. Экраны: кто видит и что можно сделать.
3. Данные: что храним, какие поля.
4. Связи: что с чем связано.
5. Что НЕ делаем в первой версии.
Если чего-то не хватает, сначала задай до 5 вопросов.
Хороший ответ для барбершопа: экран записи для клиента (услуга, дата, свободное время, имя, телефон), админка для мастера (записи на день, оплата, отмена), логика на сервере (проверить время и сохранить), три таблицы: клиенты, записи, оплаты. А в блок «Что НЕ делаем» уезжают онлайн-оплата, уведомления и отзывы: добавим потом. Пункт «Чего не делаем» — твой главный союзник против раздутого проекта.
Уровень 2. Стек: на чём строим
Стек — набор технологий. Тебе не нужно в нём разбираться, нужно, чтобы ИИ выбрал один вариант и больше не метался:
Вот архитектура моего приложения: [вставь docs/01-architecture.md]
Какой стек выбрать, чтобы его было просто поддерживать? Я новичок, код будешь писать ты.
Дай один вариант, без альтернатив. Для каждой части простыми словами: за что отвечает и почему она.
Если подходит: TypeScript, Next.js, Supabase, хостинг Vercel.
Что за набор: TypeScript — язык, который ловит часть ошибок ещё до запуска. Next.js — экраны и сервер в одном проекте. Supabase — готовая база, вход по паролю и API. Vercel — публикует приложение и выдаёт ссылку. Почему именно он: ИИ знает его лучше всего (миллионы примеров в сети), частей мало, старт бесплатный. Ответ сохрани в docs/02-stack.md и больше стек не меняй. Если ИИ вдруг предложит «давай перейдём на другое», отвечай «нет».
Уровень 3. База данных: здесь нельзя ошибаться
База — это таблицы (клиенты, записи, оплаты) и связи между ними. Экран можно перерисовать за пять минут. А если поменять базу, когда в ней уже лежат данные и под неё написан код, переделывать придётся почти всё. Поэтому на этот уровень тратим больше всего времени.
Не пиши код приложения.
Вот архитектура и стек: [вставь docs/01 и docs/02]
Спроектируй базу данных в Supabase (PostgreSQL): таблицы, поля, типы, связи.
Требования:
- у каждой таблицы id типа uuid;
- время храни в timestamptz, мой часовой пояс Europe/Moscow;
- один мастер не может иметь две записи на одно время;
- деньги храни целым числом в рублях;
- включи Row Level Security на всех таблицах и опиши правила, кто что может читать и менять. Гость без входа может создать запись и видеть только занятые слоты, без имён и телефонов.
Сначала объясни схему простыми словами, потом дай один SQL-файл для SQL Editor в Supabase.
И сразу вторым заходом — строгий ревьюер:
Проверь эту схему как строгий ревьюер. Что сломается, если:
1) два клиента одновременно запишутся на одно время;
2) мастер отменит запись;
3) клиент запишется второй раз с тем же телефоном;
4) записей станет 10 000;
5) посторонний попробует прочитать телефоны клиентов?
Исправь схему и дай итоговый SQL целиком.
Как запустить базу в Supabase: на supabase.com создай проект (New project), регион выбери поближе, пароль базы сохрани в надёжном месте. Слева открой SQL Editor, New query, вставь SQL из ответа, нажми Run. В Table Editor проверь, что таблицы на месте. В Project Settings, раздел API Keys, скопируй Project URL и публичный ключ.
Ключи: самая опасная ошибка новичка

У Supabase два вида ключей, и перепутать их — главный способ слить всю базу:
- Публичный (publishable) — можно использовать в браузере. Его защищают правила RLS из уровня 3.
- Секретный (secret) — открывает всю базу без ограничений. Только на сервере. Никогда в браузер, на GitHub или в чат нейросети.
Хранятся ключи в файле .env.local в корне проекта. Он остаётся на твоём компьютере и не попадает на GitHub.
# Адрес проекта и публичный ключ: можно в браузер
NEXT_PUBLIC_SUPABASE_URL=https://abcdefgh.supabase.co
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_publishable_xxxxxxxx
# Секретный ключ: только если понадобится серверу
# SUPABASE_SECRET_KEY=sb_secret_...
Что такое RLS простыми словами: охранник у каждой таблицы. Клиент без входа может только записаться и увидеть занятые часы. Мастер после входа видит имена и телефоны. Остальным не видно ничего. Засветил секретный ключ? Сразу иди в Supabase, раздел API Keys, создай новый секретный ключ, старый удали. Это бесплатно и занимает минуту.
Важный российский нюанс. Телефоны и имена клиентов — персональные данные. По закону о персональных данных (152-ФЗ) данные граждан РФ положено хранить на серверах в России. А оплатить зарубежное облако российской картой сегодня тоже непросто. Поэтому я сам ставлю Supabase на российский сервер (Beget, Timeweb, Selectel): PostgreSQL, вход по паролю, Realtime и хранилище файлов у тебя на своём VDS. Есть готовый скрипт установки с руководством от 2 900 ₽ и вариант «под ключ» на твоём сервере от 12 000 ₽. Нужно — пиши, подберу формат.
Уровень 4. Код: по одному экрану
Правило уровня: один экран, проверил, коммит, /clear, следующий экран. Просишь всё сразу — ошибки слипаются, и не понять, где сломалось.
Шаг 1. Правила проекта. Положи файлы уровней 1-3 в папку docs, открой в ней Claude Code и отправь первым сообщением:
Прочитай все файлы в docs/. Создай CLAUDE.md с правилами:
- строим строго по docs/, стек не меняем;
- схему базы не меняй без моего разрешения;
- по одному экрану, лишнего не добавляй;
- секретный ключ только на сервере, никогда в браузере и в git;
- тексты для пользователя на русском, ошибки понятным языком;
- после каждого шага пиши, как мне проверить.
Код пока не пиши.
Шаг 2. Каркас.
Создай проект Next.js на TypeScript по docs/. Только каркас:
- подключение к Supabase через .env.local (NEXT_PUBLIC_SUPABASE_URL и NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY);
- .env.local добавь в .gitignore;
- главная страница с названием FADE STUDIO.
Скажи, куда вставить ключи, какой командой запустить и что я должен увидеть.
Вставь ключи в .env.local, запусти npm run dev и открой в браузере localhost:3000. Пока терминал открыт, приложение работает, остановить — Ctrl + C. Работает? Скажи: «Сделай git-коммит: каркас». Это твоя точка отката.
Шаг 3. Экран «Запись» для клиента.
Делаем экран 1 "Запись" для клиента, по docs/.
Клиент выбирает услугу, дату и свободное время, вводит имя и телефон, нажимает "Записаться". Занятое время не показывай. После записи покажи "Вы записаны на [дата, время]".
Удобно для телефона. Ошибки понятным текстом, никаких "500".
Только этот экран. В конце: как проверить по шагам.
Проверка: запишись сам, в Supabase (Table Editor, таблица bookings) должна появиться строка. Запишись на то же время ещё раз — должен быть отказ. Всё так? Коммит и /clear.
Шаг 4. Экран «Админка» для мастера.
Делаем экран 2 "Админка" для мастера, по docs/.
Вход по email и паролю через Supabase Auth. Регистрации нет, аккаунт мастера я создам сам.
Записи на выбранный день: время, имя, телефон, услуга, оплачено или нет. Кнопки "Отметить оплату" (создаёт строку в payments) и "Отменить запись".
Без входа экран недоступен. Только этот экран. В конце: как проверить.
Проверка: в Supabase (Authentication, Users, Add user) создай мастера, войди, отметь оплату. Открой админку в режиме инкогнито: без входа она открываться не должна.
Запуск: Git, Vercel и домен

Git простыми словами
Git — это «сохранения» как в игре. Каждый коммит — точка, к которой можно вернуться. GitHub — облако, где лежат эти сохранения. Команды учить не нужно: говори Claude Code человеческим языком.
| Скажи Claude | Что произойдёт |
|---|---|
| Сделай коммит: [что сделано] | Сохранит рабочую версию |
| Покажи историю коммитов | Список всех сохранений |
| Откати к последнему коммиту | Отменит всё, что сломалось после |
| Загрузи проект на GitHub в приватный репозиторий, проведи меня по шагам | Код окажется в облаке |
| Отправь изменения на GitHub | Обновит код в облаке (и сайт на Vercel) |
Правило: коммит только тогда, когда всё работает. Сломанное не сохраняем.
Публикуем на Vercel
- Проект уже на GitHub (репозиторий приватный).
- Зайди на vercel.com через GitHub: Add New, Project, выбери репозиторий, Import.
- В разделе Environment Variables добавь те же две строки, что в
.env.local. Без них приложение в интернете не увидит базу. - Нажми Deploy. Через пару минут получишь ссылку вида
moj-proekt.vercel.app. Открой её на телефоне.
Дальше всё само: каждый раз, когда ты отправляешь изменения на GitHub, Vercel обновляет сайт за 1-2 минуты. Свой домен купи у любого регистратора (для России обычно .ru, стоит в районе сотен рублей в год). В Vercel открой Settings, Domains, добавь домен и повтори показанные настройки в кабинете регистратора. Застрял — сделай скриншот и спроси Claude.
Перед первыми клиентами: проверка безопасности
Проверь проект на безопасность как строгий ревьюер:
- включён ли RLS на всех таблицах;
- может ли посторонний без входа прочитать имена и телефоны клиентов;
- не попал ли секретный ключ в код браузера или в git;
- можно ли отправить форму 1000 раз подряд;
- проходит ли npm run build без ошибок.
Исправь найденное и перечисли, что исправил, простыми словами.
Семь правил безопасности, которые стоит выучить:
- Секретный ключ — никому и никуда: ни в браузер, ни на GitHub, ни в чат.
- RLS включён на каждой таблице.
- Репозиторий на GitHub приватный.
- Админка только по паролю, без регистрации для всех.
- Пароли от сервисов разные, двухфакторный вход включён на GitHub, Supabase и Vercel.
- Телефоны клиентов — персональные данные. Собирай только то, что нужно.
- Не вставляй в промпты реальные данные клиентов. Для тестов придумывай выдуманные.
Когда всё сломалось: это нормально
Ломается у всех, и у меня каждую неделю. Важно не бояться красного текста, а уметь показать его ИИ так, чтобы он починил с первого раза. Скопируй ошибку целиком (или сделай скриншот) и отправь с таким промптом:
Сломалось.
Что я делал: [по шагам]
Что ожидал: [...]
Что получил, полный текст ошибки: [целиком из браузера или терминала, или скриншот]
Найди причину, объясни простыми словами и исправь. Не трогай то, что уже работает.
| Видишь | Скорее всего |
|---|---|
| Invalid API key | Ключ скопирован не целиком или не в .env.local. После правки перезапусти npm run dev |
| relation … does not exist | Таблица не создана: SQL не запускали |
| row-level security policy | RLS не пускает. Покажи ошибку ИИ вместе с docs/schema.sql |
| is not defined | Опечатка или забытый импорт. ИИ чинит за секунду |
| Port 3000 is in use | Приложение уже запущено в другом окне. Закрой его |
| Дома работает, в интернете нет | Не добавлены переменные в Vercel |
| Всё сломалось после правки | /rewind или «Откати к последнему коммиту» |
| База не отвечает | Бесплатный Supabase засыпает после недели без активности: зайди и нажми Restore |
Если ИИ ходит по кругу
Бывает: ИИ чинит одно, ломает другое, и так без конца. Не продолжай спорить в том же чате: контекст уже забит неудачными попытками.
- Остановись после трёх неудачных попыток.
- Откатись:
/rewindили «откати к последнему коммиту». - Очисти чат:
/clear. - Опиши задачу заново в режиме плана: «Сначала найди причину и покажи план, код пока не пиши».
- Упрости задачу. Не «сделай админку», а «сделай только список записей без кнопок».
Предыдущие попытки починить [проблему] не сработали: [что пробовали].
Не пиши код. Найди 3 возможные причины, для каждой - как проверить. Начнём с самой вероятной.
Финальная проверка
Проверяй с телефона и по ссылке из интернета, а не на своём компьютере. Клиент записывается и видит «Вы записаны на…». Запись сразу появляется в админке. На занятое время записаться нельзя. Админка без пароля не открывается. Оплата отмечается, отмена работает. После перезагрузки данные на месте. Ошибки написаны человеческим языком. Секретного ключа нет ни в коде, ни на GitHub. Все пункты отмечены? Поздравляю: у тебя не игрушка, а приложение.
Сколько это стоит
| Сервис | Бесплатно | Когда платить |
|---|---|---|
| Claude Pro | Нет: Claude Code в бесплатном тарифе не работает | Около $20 в месяц сразу |
| Vercel | Тариф Hobby только для личных некоммерческих проектов | Работает на бизнес или продаёшь клиенту: Pro, около $20 в месяц |
| Supabase | 2 проекта, база 500 МБ, засыпает после недели без активности | Пошли реальные клиенты: Pro от $25 в месяц |
| GitHub | Приватные репозитории бесплатно | Обычно не нужно |
| Домен .ru | — | Раз в год у регистратора |
Итого: учиться и тестировать — около $20 в месяц, только Claude Pro. Приложение, которое уже работает на бизнес, — порядка $65 в месяц (Claude, Vercel Pro, Supabase Pro) плюс домен. Цены на конец октября 2026, они меняются: перед оплатой загляни на сайты сервисов.
Оплата в приложении: что нужно в России
Принимать оплату на сайте — уже не только код, а юридические шаги. Делай это после того, как приложение заработало. Тебе понадобится статус, с которым работают платёжные сервисы (самозанятый, ИП или ООО: условия смотри у конкретного сервиса), договор с эквайрингом (например, ЮKassa или CloudPayments) и чеки по закону. Когда договор подписан, сервис даст документацию и тестовые ключи. Дальше отдай их Claude:
Хочу принимать онлайн-оплату при записи через [сервис]. Вот их документация: [ссылка или текст].
Не пиши код. Объясни по шагам, как это будет работать, что изменится в базе и как сделать безопасно. Начнём с тестового режима.
Для старта обычно не нужно даже это. Первые клиенты прекрасно платят на месте, а мастер отмечает оплату в админке. Онлайн-оплату добавляй, когда она реально нужна бизнесу.
Как на этом зарабатывать, без сказок
Малому бизнесу не нужна «нейросеть». Ему нужно, чтобы не терялись клиенты, заявки и деньги. Вайб-кодинг позволяет закрыть такую боль за дни, а не за месяцы. Схема из четырёх шагов:
- Найди боль. Поговори с 5-10 владельцами: барбершопы, салоны, автосервисы, кофейни. «Где вы теряете время и клиентов?»
- Сделай одно маленькое решение для одного бизнеса. Можно бесплатно или со скидкой в обмен на отзыв.
- Покажи результат похожим бизнесам: «В таком-то салоне записи больше не теряются».
- Бери деньги за внедрение и за поддержку раз в месяц: хостинг, правки, новые функции.
План на первые 7 дней
| День | Что делаем | Результат |
|---|---|---|
| 1 | Читаешь про основы и инструменты, ставишь Node, Git, Claude Code, заводишь аккаунты | Чек-лист готовности закрыт |
| 2 | Учишься общаться с агентом, пробуешь на ерунде: «сделай страницу с моим именем» | Не боишься терминала |
| 3 | Уровни 1-2: архитектура и стек своей идеи | Файлы docs/01 и docs/02 |
| 4 | Уровень 3: база данных, строгая проверка, Supabase | Таблицы в Supabase |
| 5 | Уровень 4: правила, каркас, экран 1 | Запись работает локально |
| 6 | Экран 2 и проверка безопасности | Админка работает |
| 7 | GitHub, Vercel, финальная проверка с телефона | Ссылка, которую не стыдно показать |
Не успел за семь дней? Нормально. Главное — не перескакивать уровни. Медленно по плану всё равно быстрее, чем быстро без плана и потом заново.
Честно: где это не сработает и что в статью не вошло
- ИИ не сделает всё сам. Он пишет код, а ты ставишь задачу, проверяешь и принимаешь решения. Это работа заказчика, а не зрителя.
- Время. Установка — вечер, первое приложение — 3-5 вечеров. Второе пойдёт в 2-3 раза быстрее. Обещания «приложение за 5 минут» — маркетинг.
- Нужен компьютер. Windows 10/11, macOS или Linux, от 4 ГБ памяти и интернет. С одного телефона по этому гайду не получится.
- Безопасность на тебе. Продавая приложение, ты отвечаешь за его работу, за данные клиентов и за правки среди ночи. Начинай с простого, плати за коммерческие тарифы сервисов, делай резервные копии.
- Чего здесь нет. Я не разбирал мобильные приложения для App Store и Google Play, сложные платёжные схемы и нагрузку в тысячи пользователей. Это следующий уровень, к нему идут после первого рабочего проекта.
- Доход не гарантирую. Сколько можно заработать, зависит от рынка и от тебя. Цифр обещать не буду.
- Цены и интерфейсы меняются. Всё про тарифы и кнопки в сервисах — на конец октября 2026. Если картинка на экране отличается, ищи ту же кнопку рядом или спроси Claude со скриншотом.
Частые вопросы новичков
Нужно ли знать программирование для вайб-кодинга?
Нет. Но придётся понимать, как устроено приложение: что такое экран, сервер, база и ключи. Для этого и нужен блок про ресторан выше.
Сколько денег нужно на старт?
Учиться и пробовать — около $20 в месяц за подписку Claude Pro. Остальные сервисы бесплатны, пока у приложения нет реальных клиентов.
Можно ли вайб-кодить бесплатно?
Частично. У конструкторов (Lovable, Bolt, Replit) есть бесплатный старт с лимитами, есть и бесплатные инструменты вроде Antigravity. Но для настоящего приложения под бизнес лучше сразу закладывать подписку.
Чем вайб-кодинг лучше конструктора сайтов?
Конструктор ограничивает возможности блоками. При вайб-кодинге ИИ пишет настоящий код: можно сделать запись клиентов, личный кабинет, CRM, бота. Код принадлежит тебе.
Это безопасно?
Безопасно, если соблюдать правила: приватный репозиторий, секретный ключ только на сервере, RLS на всех таблицах, проверка безопасности перед клиентами. Не безопасно — вставлять реальные данные клиентов в промпты и выкладывать ключи.
Что дальше и чем я могу помочь
Если пройдёшь путь сам, ты получишь не только приложение, но и навык, который окупится много раз. Но бывает, что времени нет, а бизнес горит. Вот что я делаю руками и готов сделать за тебя:
- Аудит автоматизации. Двухчасовой разбор твоих процессов: карта, где теряются время и деньги, что автоматизировать сначала, расчёт экономии и готовое ТЗ. Стоимость аудита засчитывается в счёт последующей разработки.
- Бот-продавец для Авито и Telegram-ассистент. Отвечает клиентам за секунды, ночью и в выходные, собирает контакты и отдаёт тебе тёплую заявку. Шаблон самому — от 4 900 ₽, настройка под ключ — от 15 000 ₽.
- Supabase на российском сервере под твоё приложение или автоматизации n8n: скрипт с руководством от 2 900 ₽ или установка под ключ.
- Готовая ИИ-система для маркетинга, контента и продаж — от 25 000 ₽. Работает у меня самого в проде: контент-завод, который ведёт мои же соцсети.
Точные цены и состав зависят от задачи, поэтому сначала коротко опиши её мне в личку: скажу честно, нужно ли тебе это вообще или проще сделать самому по статье выше.