Вайбкодинг по-взрослому: как я вывел MVP из головы в прод за 3 дня (и что пошло не так)

Сначала честно: вайбкодинг — это не магия

Я в IT 26 лет. Прошёл через enterprise-архитектуру, микросервисы на Go, адские деплои на bare-metal. Когда появился ChatGPT, я фыркал: "Ещё один генератор мусора". Потом попробовал Claude Code в феврале 2026 — и понял: это не игрушка, а сварочный аппарат. Можно сварить что угодно, но если не знаешь, где шов, — прожжёшь дыру насквозь.

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

Проблема: бизнес хочет "как в ChatGPT", но вчера

Запрос от клиента: "Сделай сервис, который по загруженному логотипу генерирует анимированный аватар в стиле мультфильмов Pixar. Бюджет — $2000. Срок — неделя". Раньше я бы послал такого клиента в далёкое путешествие. Сейчас сказал: "Давай попробуем по-новому".

Главная проблема любого MVP — разрыв между ожиданиями и реальностью. Бизнес хочет идеальный продукт, а у вас — 7 дней и почти ноль команды. Вайбкодинг не закрывает этот разрыв магией, он даёт инструмент для быстрой итерации. Но инструментом надо уметь пользоваться.

Решение: связка Claude Code + Codex + Kling AI

После нескольких экспериментов (о некоторых я писал раньше) я остановился на такой архитектуре:

• Claude Code (2026.3) — генератор кода. Берёт на себя 80% рутины: CRUD, базовая верстка, интеграции.
• Codex ревьюер — агент для проверки кода. Вылавливает техдолг, который Claude Code плодит пачками. Без ревью вы утонете.
• Kling AI 3.0 — генерация анимации аватаров. Лучшее соотношение цена/качество на май 2026.
• OpenServer 7.2 — среда для деплоя. Потому что поднимать контейнеры на nginx вручную в 2026 — моветон.

Шаг 1: Превращаем бизнес-требования в промпт-спецификацию

Самый частый вопрос: "Какой промпт написать, чтобы AI сделал идеально?" Ответ: никакой. Промпт — это не магическое заклинание, а интерфейс передачи сложности. Чем сложнее бизнес-логика, тем больше слоев абстракции надо передать.

Я сделал так:

1. Написал на русском описание MVP — 3 абзаца, без технического жаргона.
2. Попросил Claude Code перевести это в user stories (формат Given/When/Then).
3. Попросил Codex ревьюер проверить user stories на непротиворечивость.
4. Из user stories модель автоматически сгенерировала файл spec.md, который стал источником правды.

Шаг 2: Генерация кода — как не завалить проект техдолгом

Здесь классическая ловушка: вы даёте Claude Code задачу, он пишет 500 строк за минуту, вы радуетесь. Через 3 дня код превращается в спагетти, где никто не понимает, откуда что берётся. Мы проходили это.

Как я избежал ада:

• Модульность через силу. Каждый модуль — отдельная папка, строгий интерфейс. Claude Code не видит код соседнего модуля. Только контракт (TypeScript типы).
• Codex ревьюер после каждого коммита. Заставил CI/CD прогонять агента-ревьюера. Если находит дублирование кода или нарушение архитектуры — коммит не проходит. Больно, но лечит.
• Документация для ИИ. Я написал файл AI_CONTEXT.md, который Claude Code читает перед каждой сессией. Там: архитектура, конвенции, forbidden patterns (например, "не используй any"). Это сократило количество переписываний на 40%.

1 Запускаем генерацию бэкенда (FastAPI + SQLite)

claude \
  --context AI_CONTEXT.md \
  --prompt "Создай FastAPI приложение с эндпоинтами: POST /upload (принимает файл логотипа), GET /status/{id} (возвращает статус генерации). Используй SQLite через SQLAlchemy async. Валидация полей через Pydantic v2." \
  --model claude-sonnet-4-20260512 \
  --output backend/

Через 30 секунд у меня был рабочий каркас. Без единой строчки ручного кода.

2 Фронтенд на React + Tailwind

claude \
  --context AI_CONTEXT.md \
  --prompt "Создай одностраничное приложение React с drag-and-drop для загрузки изображения. Покажи прогресс-бар обработки. Используй Tailwind, анимации Framer Motion. Адаптив под мобильные." \
  --model claude-sonnet-4-20260512 \
  --output frontend/

Тут AI сгенерировал компонент загрузки, но забыл обработку ошибок при отмене. Codex ревьюер нашёл эту проблему на этапе PR. Если бы я деплоил вслепую — пользователи бы видели бесконечное вращение.

Шаг 3: Генерация анимации аватаров через Kling AI

Самая весёлая часть. Бэкенд должен: принять логотип -> отправить его в Kling AI API -> получить ссылку на готовую анимацию -> конвертировать в WebM для производительности.

Я попросил Claude Code написать интеграцию с Kling AI 3.0. Модель сгенерировала код, но с устаревшим endpoint (v2 вместо v3). Урок: всегда проверяйте версии API, AI может выдать deprecated. Пришлось вручную обновить URL и добавить параметр style: "pixar".

3 Оптимизация WebM

Kling отдаёт MP4. Для встраивания в веб лучше WebM. Я написал пайплайн конвертации с помощью ffmpeg-wasm прямо в браузере. Но первый билд весил 50 МБ — клиенты бы прокляли. Пришлось добавить сжатие через libvpx-vp9 с битрейтом 1M. Результат — 3 МБ при том же качестве.

// Пример Node.js скрипта конвертации
import { execa } from 'execa';

export async function convertToWebM(inputPath, outputPath) {
  await execa('ffmpeg', [
    '-i', inputPath,
    '-c:v', 'libvpx-vp9',
    '-b:v', '1M',
    '-crf', '30',
    '-row-mt', '1',
    outputPath
  ]);
}

Шаг 4: Сборка окружения и деплой на OpenServer

Типичная ошибка: разработка на Mac/Windows, а прод на Ubuntu с ARM. Всегда поднимайте тестовое окружение как можно раньше.

Я использовал OpenServer 7.2 — готовый контейнер с nginx, PHP (не нужно, но предустановлено), Node 22, Python 3.13. Настройка заняла 15 минут:

1. Установил OpenServer на VPS (Ubuntu 24.04 LTS).
2. Настроил обратный прокси: nginx -> FastAPI (бэкенд) -> статика (фронт).
3. Добавил SSL через Let's Encrypt (бот уже встроен в OpenServer).
4. Настроил Systemd для автозапуска uvicorn.

Что пошло не так (и как я это чинил)

Идеальной истории не бывает. Вот список ошибок, которые я совершил, и как их избежать:

• Синдром "все исправит AI": Claude Code написал авторизацию через JWT — пропустил refresh-токены. Пришлось дописывать руками. Вывод: AI хорош для скелета, но бизнес-логику всегда проверяйте сами.
• Переоценка производительности: Сначала отдавал сырые MP4. После оптимизации WebM скорость загрузки упала с 8 до 1.2 секунды. Профилируйте!
• Отсутствие документации для ИИ: Первые два дня я не использовал AI_CONTEXT.md и получал произвольные архитектурные решения. Как только добавил — код стал консистентным.
• Игнорирование ревью: Однажды я замерджил PR без Codex ревью. Через час обнаружил утечку памяти из-за не закрытых сокетов. Читайте про тёмную сторону — там больше примеров.

Итоговый стек и время

Да, 13 часов — не 1 день. Но это MVP, который не стыдно показать клиенту. Без вайбкодинга я бы потратил минимум неделю.

Что дальше? Пара мыслей про 2026 год

Вайбкодинг — не замена разработчикам. Это амплитудный модулятор. Если вы умеете читать чужой код, понимаете архитектуру и не боитесь лезть в дебаггер — AI даст вам десятикратный прирост скорости. Если вы новичок, который надеется, что Claude Code напишет Netflix — вы получите гору неработающего кода и разочарование.

Мой совет: начните с маленького проекта. Хоть игру на JS — только чтобы почувствовать, как AI понимает ваш стиль. Потом усложняйте. И всегда, слышите, всегда ревьюьте код. Даже если кажется, что модель идеальна.

Если вы дочитали до сюда — вы серьёзно настроены. Возьмите мой опыт, переделайте под себя. И помните: идеального инструмента нет. Есть ваш скилл видеть, где AI врёт. Этот скилл стоит дороже любой модели.

Подписаться на канал