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

Вам не нужно становиться разработчиком

Главное, что нужно понять: вы не учитесь кодить. Вы учитесь работать с AI как с инструментом. Это принципиально другой навык, и он осваивается быстро.

Какие инструменты существуют и почему я выбрала Cursor

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

Новых инструментов появляется всё больше — рынок обновляется каждые несколько недель. Остановилась на Cursor: интуитивный интерфейс, стабильная работа из России, большое сообщество. Все проекты в конце статьи собраны именно на нём.

Что нужно установить перед началом работы

Прежде чем открыть Cursor и начать собирать проект, компьютеру нужна среда. Без неё Next.js не запустится, Git не сохранит работу, а Python-бэкенд откажется работать. Вот минимальный список того, что нужно поставить один раз.

Node.js

Это среда, в которой живёт весь JavaScript и TypeScript. Без неё Next.js не запустится вообще.

Качайте с официального сайта nodejs.org. Выбирайте версию с пометкой LTS — она стабильная и проверенная. На момент написания гайда актуальная LTS — Node 20.x. Нечётные версии (21, 23) — экспериментальные, их лучше не трогать.

После установки каждой программы обязательно перезапустите терминал и проверьте версию командой. Если команда возвращает номер — всё установлено правильно:

node -v       → должно быть v20.x.x
npm -v        → должно быть 10.x.x
git --version → любая актуальная версия
python --version → 3.11.x или 3.12.x

Git

Система контроля версий. Без неё GitHub не работает, а значит нет страховки и нет деплоя на Vercel. Скачивайте с git-scm.com, устанавливайте с настройками по умолчанию. Проверка: git --version.

Python

Нужен только если в проекте есть бэкенд. Качайте с python.org, версия 3.11 или 3.12 — не 3.13, она ещё сырая для большинства популярных пакетов. На Windows при установке обязательно поставьте галочку Add Python to PATH, иначе терминал его не найдёт.

Tailwind CSS ставить отдельно не нужно — он устанавливается внутри проекта автоматически через npm.

Как установить Cursor и настроить его под себя

Скачивайте Cursor только с официального сайта — cursor.com. Никаких сторонних источников: только официальный сайт гарантирует безопасную и актуальную версию.

После установки выберите модель в настройках. Для сборки продуктов подходят две: Claude Sonnet (claude-sonnet-4-5) и ChatGPT (GPT-5.4). Обе дают хороший результат — выбор зависит от задачи и личного предпочтения.

Как настроить Cursor так, чтобы он понимал вас с полуслова

Без настройки Cursor — просто умный редактор. С правильным тюнингом он становится членом команды, который знает ваш стек, ваши предпочтения и правила проекта.

Глобальные правила (Cursor Rules)

Это текстовый файл, который Cursor читает перед каждым ответом. В нём вы описываете: какой стек используете, как называть файлы, что никогда не трогать, какой стиль кода предпочитаете.

Стек: Next.js 14 App Router, TypeScript, Tailwind CSS, Supabase
Язык кода: TypeScript, без any
Компоненты: функциональные, с именованным экспортом
Стили: только Tailwind, без inline styles
Никогда не трогай: файлы конфигурации (.env, next.config.ts) без явного запроса
Полный код всегда: никаких ..., никаких заглушек

Открыть настройки: Cursor → Settings → Rules for AI.

"Я хочу подключить MCP-сервер Figma. Подскажи, что нужно установить
локально и как это настроить шаг за шагом."

Структура папки проекта: как передать идею в код

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

Правильный подход — сначала документация, потом код. Создайте в корне проекта папку _docs со следующей структурой:

_docs/
├── business/
│   └── PRD.md          — кто пользователь, что делает продукт, метрики успеха
├── architecture/
│   └── ARCHITECTURE.md — стек, схема компонентов, какие API используются
├── design/
│   └── DESIGN.md       — цвета, шрифты, отступы, стиль компонентов
└── rules/
    └── RULES.md        — правила проекта, не более 200 строк

DESIGN.md — самый важный файл. Его нужно передавать Cursor в каждом промпте через @DESIGN.md. Тогда все компоненты будут выглядеть одинаково, а не как случайная смесь стилей.

Формула хорошего промпта для Cursor

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

Шаблон промптаСкопировать

Ты — Senior Full-Stack разработчик.
Мы собираем [ВАШ ПРОДУКТ — например: сайт-визитку с личными продуктами на продажу].
Стек: Next.js 14 App Router, TypeScript, Tailwind CSS, Supabase.

@DESIGN.md @RULES.md

Задача: создай компонент [НАЗВАНИЕ] в файле [ПУТЬ К ФАЙЛУ].
Компонент должен [ЧТО ДЕЛАЕТ — опишите конкретно].
Принимает props: [СПИСОК PROPS].

Не трогай другие файлы.
Полный код без сокращений, без комментариев-заглушек.

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

Как не получить типичный вайбкодерский вид

У большинства продуктов, собранных через AI-инструменты, одинаковый вид: синяя кнопка, белый фон, Inter, стандартные отступы Tailwind. Это не плохо само по себе — плохо, когда все выглядят одинаково.

"Мне нравится дизайн этого сайта: [ССЫЛКА]. Определи шрифты,
цвета и стиль компонентов. Предложи, как применить похожую
дизайн-систему к моему проекту, не ломая существующий код."

Зачем GitHub и как не потерять работу

GitHub — это облачное хранилище вашего кода с историей всех изменений. Без него вы работаете без страховки: Cursor что-то сломал, откатиться некуда.

Первый шаг — создать репозиторий

1. 1. Зайдите на github.com и нажмите New repository.
2. 2. Дайте название, выберите Private или Public.
3. 3. Нажмите Create repository.

git add .                        # добавить все изменённые файлы
git commit -m "описание что сделано"  # сохранить версию
git push                         # отправить на GitHub

API-ключи, .env и почему это важно прямо сейчас

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

Как хранить правильно

Создайте файл .env в корне проекта и записывайте туда все ключи:

ANTHROPIC_API_KEY=sk-ant-...
NEXT_PUBLIC_SUPABASE_URL=https://...
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...

Что добавить в .gitignore

.env
.env.local
.env*.local
node_modules/
.next/

Файл .gitignore говорит Git, что никогда не загружать на GitHub. Создайте его в самом начале проекта — до первого коммита.

Секреты на хостинге

Vercel не читает ваш .env — туда нужно скопировать переменные вручную. Зайдите в проект на Vercel → Settings → Environment Variables и добавьте каждый ключ отдельно.

Vercel, Railway, Supabase — что куда

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

Алгоритм действий, когда что-то пошло не так

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

"Покажи, что именно ты изменил в файле [НАЗВАНИЕ]
за последние несколько ответов и почему."

Команды, которые нужны каждый день

Это базовый набор команд, который закрывает запуск проекта, установку зависимостей, работу с Git и базовую диагностику окружения.

# Запуск проекта локально
npm run dev

# Установка зависимостей после клонирования
npm install

# Создание нового Next.js проекта
npx create-next-app@latest название-проекта

# Git: сохранить и отправить
git add .
git commit -m "что сделано"
git push

# Git: посмотреть историю
git log --oneline

# Git: откатиться к последнему коммиту
git checkout .

# Проверка версий
node -v
npm -v
python --version

# Установка пакета
npm install название-пакета

# Supabase: применить миграцию
npx supabase db push

Сохраните эти команды в заметки — пригодятся с первого дня