# Гайд по вайб-кодингу: выбор стека и подходы к работе

> [HTML-версия](https://learnvibecoding.ru/publiclessons/gayd-po-vayb-kodingu-vybor-steka-i-podkhody-k-rabote) · [Индекс для LLM](https://learnvibecoding.ru/llms.txt) · [Политика использования материалов](https://learnvibecoding.ru/politika-materialov)
> Материалы защищены. Обучение LLM без согласия запрещено. При разрешённом использовании — обязательна прямая ссылка на страницу-источник.
> Принципы эффективного вайб-кодинга

**Курс:** Дополнительные материалы

**Вайб-кодинг** — это способ создания программ, где ты описываешь, что хочешь на обычном языке, а нейросеть пишет весь код за тебя.

> Термин придумал **Андрей Карпатый**, сооснователь OpenAI и бывший глава AI в Tesla. В феврале 2025 года он написал: *"Это новый вид программирования, где ты полностью отдаёшься вайбу, забываешь, что код вообще существует"*.

### Для кого это?

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

### Важное уточнение

Да, ты можешь не смотреть в код, но это **не значит**, что проект создастся сам по себе магическим образом. Тебе всё ещё нужно:
- Чётко описывать требования
- Контролировать результат
- Проектировать архитектуру

---

## Выбор стека технологий

**Стек** — это используемые языки программирования, API, базы данных и другие интеграции. По сути, стек определяет архитектуру проекта.

### ⚠️ Почему выбор стека лучше не доверять в слепую нейросетям?

1. **Критичность этапа** — от него сильно зависит сложность, масштабируемость и надёжность проекта
2. **Переусложнение** — нейросети часто предлагают переусложнённые варианты архитектуры даже для маленьких приложений
3. **Неактуальность информации** — нейросетям по умолчанию недоступна актуальная информация о новейших сервисах AI и моделях

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

---

## Компоненты стека

### 1. Frontend (клиентская часть)

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

| Технология | Когда использовать |
|------------|-------------------|
| HTML + CSS + JavaScript | Простейшие проекты |
| **NextJS + TypeScript** | Современный стандарт для сайтов |

> **TypeScript** — это типизированная версия JavaScript, где потенциальные ошибки отлавливаются ещё во время сборки проекта.

### 2. Backend (серверная часть)

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

| Технология | Когда использовать |
|------------|-------------------|
| **Node.js** | Соло-проекты, быстрый старт |
| **Python** | Соло-проекты, AI/ML задачи |
| Go | Высоконагруженные серверы |
| Java / Kotlin | Enterprise-уровень (для маленьких проектов — перебор) |

### 3. Мобильная разработка

| Платформа | Нативные технологии | Кросс-платформенные |
|-----------|--------------------|--------------------|
| Android | Kotlin + Jetpack Compose | React Native (TypeScript) |
| iOS | Swift + SwiftUI | Flutter (Dart) |

> **React Native** и **Flutter** компилируются на обе платформы из единого исходного кода. Хороши для соло-проектов, чтобы не делать одну работу дважды.

### 4. База данных

| Тип | Характеристики | Когда использовать |
|-----|---------------|-------------------|
| **SQL (PostgreSQL)** | Простота, максимальная структурированность | 90% проектов |
| **SQLite** | Ультралёгкая, все данные в одном файле | Локальные или супермаленькие проекты |
| NoSQL | Высокая скорость, гибкость | Специфические задачи |

### 5. Интеграция с AI

#### LLM (языковые модели)

| Сервис | Тип | Особенности |
|--------|-----|-------------|
| **OpenRouter** | Агрегатор | Единый API для 100+ моделей (GPT, Claude, Llama, Mistral). Легко менять модели без переписывания кода |
| **Together AI** | Агрегатор | Open-source модели, низкие цены, быстрый inference |
| **Groq** | Провайдер | Сверхбыстрый inference на специализированных чипах LPU |
| **Fireworks AI** | Агрегатор | Быстрый inference, оптимизация под production |
| **OpenAI API** | Провайдер | GPT-4o, o1, o3 — флагманские модели |
| **Anthropic API** | Провайдер | Claude 3.5/4 — сильны в анализе и коде |
| **Google AI Studio** | Провайдер | Gemini 2.0 — большой контекст, мультимодальность |
| **Mistral AI** | Провайдер | Европейский провайдер, хорошие открытые модели |

> 💡 **Совет:** Начни с OpenRouter — он позволяет быстро тестировать разные модели и найти оптимальную по цене/качеству.

#### Распознавание речи (Speech-to-Text)

| Сервис | Особенности |
|--------|-------------|
| **OpenAI Whisper API** | Высокое качество, поддержка 99 языков, word-level timestamps |
| **11 Labs Scribe** | Высокая точность, хорошо работает с русским |
| **Deepgram** | Быстрый real-time, хорош для стриминга |
| **AssemblyAI** | Много фич: speaker diarization, summarization |
| **Google Cloud STT** | Надёжность enterprise-уровня |

#### Синтез речи (Text-to-Speech)

| Сервис | Особенности |
|--------|-------------|
| **ElevenLabs** | Лучшее качество, клонирование голоса, эмоции |
| **OpenAI TTS** | Простое API, хорошее качество, низкая цена |
| **PlayHT** | Много голосов, voice cloning |
| **Resemble AI** | Клонирование голоса, эмоциональный контроль |
| **Minimax** | Хорошее качество для китайского и английского |
| **Fish Audio** | Открытые модели, voice cloning |

#### Генерация изображений

| Сервис | Особенности |
|--------|-------------|
| **DALL-E 3 (OpenAI)** | Отличное понимание промптов, интеграция с ChatGPT |
| **Midjourney** | Лучшая художественность, нужен Discord/веб |
| **Stability AI** | Stable Diffusion через API, гибкие настройки |
| **Leonardo AI** | Удобный UI, много стилей, API |
| **Ideogram** | Лучший для текста на изображениях |
| **Flux (через FAL/Replicate)** | Open-source, высокое качество |
| **Recraft** | Векторная графика, иконки, иллюстрации |

#### Генерация видео

| Сервис | Особенности |
|--------|-------------|
| **Runway ML** | Gen-3 Alpha — качество и контроль |
| **Kling AI** | Высокое качество, длинные видео |
| **Luma Dream Machine** | Быстрая генерация, хороший motion |
| **Pika Labs** | Простой интерфейс, стилизация |
| **Sora (OpenAI)** | Флагман 2025, реалистичное видео |
| **HeyGen** | AI-аватары, говорящие головы |
| **D-ID** | Анимация лиц, аватары |

#### Универсальные платформы

| Сервис | Особенности |
|--------|-------------|
| **FAL AI** | Широкий выбор моделей: изображения, видео, аудио. Serverless |
| **Replicate** | Запуск open-source моделей через API, pay-per-use |
| **Hugging Face Inference** | Огромная библиотека моделей, бесплатный tier |

> 💡 **Совет:** FAL AI и Replicate — отличный выбор для быстрого прототипирования, так как там уже развёрнуты сотни моделей.

---

## Подход к работе с новым проектом

### Шаг 1: Определить проблему

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

### Шаг 2: Продумать алгоритм

Перед началом реализации нужно понять, **как конкретно будет работать алгоритм** программы:
- Что на входе?
- Что на выходе?
- Какие шаги нужны для преобразования?

### Шаг 3: Выбрать стек

Основываясь на понимании задачи, выбери подходящие технологии. Если задача специфическая — сделай отдельный ресёрч.

### Шаг 4: Настроить проект

#### 1. Инициализировать Git

**Git** — это система контроля версий. Она сохраняет историю всех изменений в коде, позволяя вернуться к любой предыдущей версии. Думай об этом как о "машине времени" для твоего проекта.

**Как инициализировать Git в Cursor:**
1. Открой терминал: меню `View` → `Terminal`
2. Введи команду: `git init`
3. Готово! Теперь в папке проекта появится скрытая папка `.git`

> 💡 **Что такое коммит?** Это "снимок" твоего кода в определённый момент. Делай коммиты после каждого работающего изменения — так ты всегда сможешь откатиться назад.

**Основные команды Git (вводить в терминале):**

| Команда | Что делает |
|---------|-----------|
| `git status` | Показывает, какие файлы изменены |
| `git add .` | Добавляет все изменённые файлы в "подготовку" к коммиту |
| `git add имя_файла` | Добавляет конкретный файл |
| `git commit -m "описание"` | Создаёт коммит с описанием изменений |
| `git push` | Отправляет коммиты на удалённый сервер (GitHub/GitLab) |
| `git pull` | Скачивает изменения с удалённого сервера |

**Типичный рабочий цикл:**

```bash
# 1. Посмотреть, что изменилось
git status

# 2. Добавить все изменения
git add .

# 3. Сохранить коммит с описанием
git commit -m "Добавил форму авторизации"

# 4. Отправить на GitHub (если репозиторий подключён)
git push
```

> ⚠️ **Важно:** Команда `git push` сработает только если ты подключил удалённый репозиторий (например, на GitHub). Для нового проекта сначала создай репозиторий на GitHub, затем выполни команду, которую GitHub покажет (обычно это `git remote add origin ...`).

**Пример ввода в Терминале курсора:**
git add .
git commit -m "Pictures in audio slider"
git push

#### 2. Создать .gitignore

**.gitignore** — это файл со списком того, что Git должен игнорировать. Сюда добавляют файлы, которые не нужно сохранять в истории: временные файлы, секретные ключи, тяжёлые зависимости.

**Как создать .gitignore:**
1. В корне проекта создай файл с названием `.gitignore` (именно с точкой в начале!)
2. Добавь в него нужные правила

**Пример базового .gitignore:**
```
# Зависимости
node_modules/

# Секреты (НИКОГДА не коммить!)
.env
.env.local

# Системные файлы
.DS_Store
Thumbs.db

# Логи и кэш
*.log
.cache/
```

> ⚠️ **Важно:** Всегда добавляй `.env` в `.gitignore` до первого коммита! Иначе твои API-ключи и пароли попадут в историю Git.

#### 3. Настроить правила проекта (Rules)

**Правила проекта** — это инструкции для AI-агента в Cursor. Они задают контекст: какие технологии использовать, какой стиль кода соблюдать, что делать нельзя. Можно поискать какие настройки вводить для конкретного стека.

**Где настроить в Cursor:**
1. Открой настройки правил в Cursor
2. Перейди во вкладку **Rules**
4. Добавь правила в раздел **Project Rules** (для текущего проекта) или **User Rules** (для всех проектов)

**Пример правил проекта:**
```
Это проект на Next.js 14 с TypeScript.

Используемый стек:
- Frontend: Next.js + React + Tailwind CSS
- Backend: Supabase (PostgreSQL + Auth)
- Язык: TypeScript (строгая типизация)

Правила:
- Всегда используй TypeScript, не JavaScript
- Компоненты создавай как функциональные (не классовые)
- Стили пиши через Tailwind CSS
- Не добавляй новые зависимости без моего разрешения
- Комментарии пиши на русском языке
```

> 💡 Чем точнее описаны правила, тем меньше агент будет "фантазировать" и предлагать лишнее.

### Шаг 5: Реализовывать пошагово

**Идти от простого к сложному**, наполняя программу фичами и усложняя основной процесс.

> ❌ **Не пытайся сгенерировать весь проект в один промпт** — вероятность багов будет слишком высокой, и разгребать их будет сложно.

#### ❌ Плохой пример — всё в одном промпте

```
Сделай мне приложение для учёта финансов. Нужна авторизация через Google, 
дашборд с графиками расходов по категориям, возможность добавлять транзакции 
с автоматической категоризацией через AI, экспорт в Excel, тёмная тема, 
мобильная адаптация, уведомления о превышении бюджета, интеграция с банком 
через API, и чтобы данные синхронизировались между устройствами.
```

**Что не так:**
- Слишком много требований за раз — агент запутается в приоритетах
- Нет чёткой последовательности — непонятно, с чего начать
- Сложно отлаживать — если что-то сломается, непонятно где искать
- Контекст переполнен — модель забудет часть требований

#### ✅ Хороший пример — пошаговая реализация

**Промпт 1:** Структура
```
Создай базовую структуру Next.js проекта для приложения учёта финансов.
Пока только главная страница с заголовком "Мои финансы".
```

**Промпт 2:** База данных
```
Добавь подключение к Supabase. Создай таблицу transactions с полями:
id, amount, category, description, date, user_id.
```

**Промпт 3:** Базовый функционал
```
Сделай форму добавления транзакции и отображение списка транзакций.
Пока без авторизации, просто CRUD для одного пользователя.
```

**Промпт 4:** Авторизация
```
Добавь авторизацию через Supabase Auth. Привяжи транзакции к user_id.
```

**Промпт 5:** Визуализация
```
Добавь график расходов по категориям за текущий месяц.
Используй библиотеку recharts.
```

*...и так далее*

**Почему это работает:**
- ✅ Каждый шаг можно протестировать отдельно
- ✅ Легко найти, где сломалось
- ✅ Можно делать коммиты после каждого шага
- ✅ Агент фокусируется на одной задаче

---

## Принципы эффективного вайб-кодинга

### 🔐 Git — твой друг

- Используй Git во всех проектах, где код тебе дорог
- **Коммиты** — это чекпоинты, к которым можно вернуться
- **Коммить всё, что страшно потерять**, даже промежуточные результаты
- Не соглашайся на обратную совместимость во время вайб-кодинга — это почти всегда мусорный код

### 📏 Правила проекта (Rules) настраиваются в настройках Cursor

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

### 🔍 Выбор модели

- **Используй самые умные модели**, на которые хватает бюджета
- Интеллект сильно влияет на сложность работы
- Со слабыми моделями вайб-кодить очень больно — они не следуют инструкциям
- Лучшие модели можно смотреть на лидербордах (например, lmarena.ai)

### 📦 Размер файлов

- Удерживай размер файлов **до 1000 строк**
- Это позволяет адекватно работать с кодом без перегрузки контекста модели
- Если файл разрастается — разбей его на части по функциям и ответственности

### 🎯 Переменные окружения (.env)

- Выноси все глобальные настройки, которые могут меняться
- Храни API-ключи и секреты отдельно
- **Добавляй .env в .gitignore**, чтобы секреты не попали в репозиторий

### 🛠️ MCP для библиотек

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

### 👀 Следи за мыслями модели

- Наблюдай, о чём думает модель во время реализации
- Заранее замечай моменты, где она тебя не поняла
- Корректируй курс уточняющими инструкциями

### ✅ Тестируй после каждого изменения

После каждого рефакторинга или доработки обязательно проверяй работу кода.

---

## Обработка ошибок

Когда появляются ошибки:
1. Скопируй текст ошибки в чат агента
2. Обычно это их чинит
3. Если не помогает — попробуй изменить модель или уточни контекст

---

## Итог

**Вайб-кодинг — это тоже программирование** с теми же принципами, подходами и логикой. Разница лишь в уровне абстракции:

| Классическая разработка | Вайб-кодинг |
|------------------------|-------------|
| Классы, методы, функции | Бизнес-требования, архитектура |
| Уровень кода | Уровень стеков, сервисов, фреймворков |

Однако скилл понимания кода остаётся существенным плюсом — особенно в дебаггинге и работе с нагруженными системами.

---

## Чек-лист для нового проекта

- [ ] Определена проблема, которую решаем
- [ ] Продуман алгоритм (вход → выход → шаги)
- [ ] Выбран стек технологий
- [ ] Инициализирован Git
- [ ] Настроен .gitignore
- [ ] Созданы правила проекта для агента
- [ ] Выбрана подходящая AI-модель
- [ ] Подготовлен .env файл для секретов
- [ ] Готов к пошаговой реализации

---

*Основано на материалах канала VibeCoder*

[Все уроки](https://learnvibecoding.ru/publiclessons.md) · HTML: https://learnvibecoding.ru/publiclessons