Ультимативный гайд по вайбкодингу по шагам: как я собираю проекты с ИИ от идеи до боевого сервера

А где кодить вообще? Модель и среда

Начну с инструментов — тут у меня есть четкое мнение.

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

Codex — рабочая альтернатива. В целом он неплох и выдает отличные результаты. Но субъективно Claude как будто справляется с более сложными и комплексными задачами изящнее. Остальные альтернативы рассматривать можно, но пока это компромиссы. Для отдельных задач сойдет, для сквозного флоу я бы не брал.

Среда — VS Code с плагином от Claude. Хотя на деле можно работать и в самом Claude Code или в CLI, это дело привычки. VS Code будет привычнее тем, кто из IT и любит видеть содержимое созданного проекта глазами. А в нативном Claude Code больше встроенных фишек и автоматизаций. Попробуйте оба и оставьте то, что не бесит.

Дальше я буду говорить «Claude Code» как про сам процесс — независимо от того, открыт он у вас в VS Code или отдельно.

Этап 1. Концепция: работаем как продакт, а не как программист

Это самый недооцененный этап. Большинство сразу бросается писать «сделай мне приложение для Х». Так получится монстр Франкенштейна.

Я начинаю иначе. Открываю обычный чат с ChatGPT или Claude (не Claude Code, а именно чат для размышлений) и просто разгоняю концепцию. Накидываю идею, прошу покритиковать, поискать слабые места и подводные камни. На этом этапе я вообще не думаю про техническую реализацию — ни про языки, ни про базы, ни про архитектуру. Я работаю как продакт: вместе с ИИ собираю идеальный конечный результат, образ готового приложения.

Это диалог. ИИ отлично играет роль скептика: задает неудобные вопросы, находит дыры в логике, предлагает то, о чем я не подумал. Несколько кругов такого пинг-понга — и концепция становится в разы крепче.

Когда концепция дозрела, прошу ИИ собрать полный MD-файл с ультимативным описанием концепции. Это первый документ проекта. Дальше их будет много.

Этап 2. Superpowers — скилл, который меняет всё

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

Superpowers — это скилл для Claude, который я горячо рекомендую. Он очень сильно меняет подход к работе над кодом. Мне нравится, как он управляет написанием планов, подходами к тестированию и брейнштормингом. Он реально дисциплинирует агента, заставляет его сначала думать, а потом делать.

Честное предупреждение: он сильно замедляет процесс. Буквально в 10 раз. Там, где без него агент бодро навайбкодил бы за час, с Superpowers уйдет полдня. Но и результат выходит на порядок лучше, продуманнее, чище.

Установить скилл в Claude довольно просто, инструкции есть в его репозитории. Поставьте до того, как начнете серьезный проект — дальше по тексту я буду на него опираться.

Теперь, когда концепция готова и Superpowers под рукой, переходим в Claude Code.

→ Загружаем концепцию в Claude Code

Закидываю MD-файл с концепцией в проект и прошу Claude изучить его досконально и задать мне вопросы, если что-то непонятно. А потом и обновить файл с учетом моих ответов.

Это важный момент: я не жду, что модель прочитает мои мысли. Наоборот, я хочу, чтобы она спросила. Каждый ее вопрос — это место, где иначе была бы галлюцинация или неверное допущение. Отвечаю, файл обновляется, концепция становится еще точнее.

Этап 3. Спецификация и разведка подводных камней

Теперь — техника. Прошу Claude Code (с Superpowers) написать оптимальную техническую спецификацию, описать лучшую архитектуру и положить ее в отдельный MD-файл. Тут уже идут языки, структура данных, выбор технологий, как всё связано между собой, схемы, описания.

→ Разведка через Deep Research

Мой любимый трюк, который спасает кучу нервов. Claude не всегда может на старте понять, как реализовать, например, какую-нибудь хитрую внешнюю интеграцию, найти готовое решение редкой задачи или разрулить по-настоящему сложный вызов. Поэтому я прошу его сделать бриф с 10 вопросами для режима Deep Research, которые стоит уточнить именно через исследование в интернете.

Этот бриф я закидываю обратно в обычный чат с Claude или ChatGPT, включаю режим Deep Research и отправляю его шуршать по сети. Результат исследования скачиваю в MD (да, опять), кладу в папку проекта и прошу Claude Code изучить.

В итоге к моменту планирования у агента на руках не только моя идея, но и свежий срез того, как похожие задачи реально решаются другими людьми на практике (надо, конечно, следить за лицензией на использование). Это резко снижает шанс упереться в стену на середине проекта.

Этап 4. Дизайн до кода

Многие оставляют интерфейс на потом. Я делаю наоборот. Прошу Claude Code по созданному концепту и спеке написать бриф по UI/UX для инструмента Claude Design. Этот бриф я всегда обязательно проверяю сам руками. Дизайн — вещь человечная, и тут чутье пока незаменимо. Прочитал, поправил, где модель ушла не туда.

Дальше закидываю бриф в Claude Design (я так и не понял, какая конкретно его часть доступна в приложении Claude Code, поэтому использую веб-интерфейс) и прошу собрать готовый прототип. Довожу прототип прямо там до 100% покрытия брифа. Кроме самого прототипа прошу собрать дизайн-систему и библиотеку элементов. Пригодится!

Готовый прототип скачиваю в ZIP-архиве, закидываю в папку проекта и прошу Claude Code изучить его на 100%: что в нем есть, где что лежит, как устроен интерфейс. Результаты этого разбора прошу описать в отдельном MD-файле (да, снова MD).

Этап 5. План — самый важный файл в проекте

Теперь у Claude на руках всё: концепция, спецификация, исследование, разобранный прототип. Пора планировать работу.

Прошу Claude Code (с Superpowers) написать полный план работы над проектом с разбивкой на фазы. Угадали, что получается на выходе? Да, еще один MD-файл. И вот он самый важный из всех. В нем мы будем вести всю работу над проектом от начала до конца.

Несколько принципов на этом этапе:

• Деплой пока не трогаем. Я прошу учесть его в плане в самом конце. Работаю либо на локальном ноутбуке, либо на домашнем сервере. К деплою перейду на последнем этапе, когда буду полностью уверен в готовности проекта на локальной машине.
• Git идет сам собой. Claude с Superpowers по умолчанию использует Git, это очень удобно, всегда можно откатиться. GitHub я подключаю, только если работаю над проектом совместно с командой.
• Инфраструктура для LLM заранее. Если проект сам будет использовать нейросети, я сразу прошу изучить доступную мне инфраструктуру. Это либо локальные LLM на моем сервере, либо чаще всего модели с вайбкод-платформы Битрикс24. OpenRouter тоже иногда использую, но редко. Платить за него стало не слишком удобно.

Superpowers нарезает проект на фазы. От Фазы 0 (подготовительной) до пред-деплоя. Когда планирование завершено, Claude обычно сам предлагает, с чего начать и как двигаться дальше. Я редко с ним спорю, но пару правок вношу почти всегда:

1. Прошу перенести создание интерфейса на более ранние фазы. Когда есть что потыкать глазами и руками, проблемы видно раньше.
2. Прошу ввести подробное логирование уже на этапе разработки, это сильно упрощает дебаг потом.

Этап 6. Работа по фазам: 95% всего времени

Вот и основная часть. Эта работа по фазам занимает примерно 95% всего времени вайбкодинга. Часто агенты уходят в автономную работу сами на полдня. Мне нужно лишь изредка их направлять. Поставил фазу, пошел заниматься своими делами, вернулся и проверил.

Каждая фаза идет либо в том же чате с Claude Code, либо в субагентном режиме — это одна из встроенных фич Superpowers, когда задачу разбирают несколько агентов параллельно.

После каждой фазы у меня идет обязательный этап тестирования. Тут несколько важных вещей:

• Покрываем код тестами по максимуму. В том числе через headless-браузеры вроде Playwright, чтобы у Claude появилось зрение и он мог сам проверять интерфейс, а не только логику.
• Смотрим глазами сами на каждом этапе. Автотесты автотестами, а живой взгляд незаменим.
• Проверяем интерфейсные тексты. Как ни странно, это главная боль в вайбкодинге. Claude иногда делает их откровенно бредовыми, поэтому на тексты я обращаю повышенное внимание и редактирую руками. Не доверяйте их модели вслепую.

Пара приемов, которые применяю по ходу:

• Когда надо сделать красиво какую-то часть интерфейса, возвращаюсь в тот самый старый чат с Claude Design и прошу дорисовать недостающее.
• После нескольких завершенных фаз прошу Claude посмотреть весь созданный код свежим взглядом. С нуля в новом чате с новым агентом поискать ошибки, подводные камни, кривую реализацию и способы устранения.

К концу этого этапа я получаю в целом неплохой код и интерфейс. Это, конечно, еще не продакшен-реди, но уже сильно больше, чем кривой MVP.

Этап 7. Безопасность и деплой

→ Поиск уязвимостей — отдельным проходом

Этот шаг я всегда делаю отдельно, не смешивая с разработкой. Ищу уязвимости и простым запросом в Claude, и с помощью специальных скиллов (их уже довольно много на гитхабе, но порекомендовать конкретный не возьмусь). Один такой проход закрывает большую часть дыр.

→ Деплой

В моем случае это один из трех вариантов:

1. Локально на домашнем сервере, если проект для себя или внутренних задач.
2. На Black Hole сервере Битрикс24 Вайбкод — для закрытых приложений или когда нужна интеграция с экосферой Битрикс24.
3. На внешнем VPS, если нужен публичный доступ и собственный домен.

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

→ Еще один проход по безопасности — уже на боевом

После деплоя я всегда еще раз ищу дыры и проблемы, но теперь на боевом сервере. Закрываем уязвимости уже в реальной инфраструктуре, а не только в коде. Среда живого сервера отличается от локальной, поэтому этот проход обязателен.

Если встраиваете в свои приложения LLM-модели, я бы сразу рекомендовал тестировать работу моделей на prompt injection. Для этого тоже можно поискать готовые скиллы.

Этап 8. Жизнь после запуска и доработки

Продукт работает. Дальше можно попросить Claude изучить логи за определенный период (вот тут окупается подробное логирование с пятого этапа), погонять smoke-тесты, финально пройтись по интерфейсу глазами и поправить мелочи: баги, ошибки, шероховатости.

А вот доработка — это отдельный вид боли. Она заслуживает отдельной статьи, но главную рекомендацию дам сразу.

Каждая доработка требует дополнительных проверок и тестов. В лучшем случае всплывут новые баги, в худшем Claude сломает вообще всё. Я не преувеличиваю: чем шире вы разрешаете модели лезть в готовый код, тем выше шанс получить хаос. Лучше узко, точечно, с тестами после каждого касания.

→ Переезд между моделями

Иногда нужно перенести проект из Claude в Codex или в другой инструмент. И вот тут окупается вся моя дисциплина с документами: у меня есть и сам код, и библиотека собранных по ходу MD-файлов. Я просто прошу нового агента досконально изучить их и разобраться в работе проекта. «Досконально» — одно из тех слов, которые я употребляю очень часто.

Главный принцип: всё в MD

Вы наверняка заметили сквозную линию: на каждом этапе я сохраняю документы в формате MD прямо в папку проекта. Концепт, спецификация, исследование, разбор прототипа, план — всё это отдельные markdown-файлы.

Это не я душный и развожу педантизм ради педантизма. Это работает так:

• Я в любой момент могу вернуться к любому документу и вспомнить, почему принял то или иное решение.
• Агент в любой момент может перечитать нужный файл и восстановить контекст.
• Проект становится переносимым: библиотека MD — это его память, которая не зависит от конкретной модели или конкретного чата.

Если выбирать одну привычку из всего флоу, которую я советую завести первой, — это она. Сохраняйте всё в MD.