ОБУЧЕНИЕ

Вайбкодинг с нуля: как собрать первый прототип

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

Автор: СТАТЕЙНИК17 min read

Источник: Определение термина: Andrej Karpathy, X

Новичок с роботом-наставником собирает первую страницу: слева намётки, в центре чек-лист, справа готовый прототип

Чему вы научитесь

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

Примените за 40 минут

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

Уровень: Новичок - программировать не нужно. Нужны браузер, аккаунт в одном сервисе и время на одну сессию.

В разделе ОБУЧЕНИЕ уже ложатся следующие материалы этой серии: как ставить задачу ИИ, чтобы не переписывать запрос пять раз, и как посчитать реальную стоимость месяца вайбкодинга. Сам раздел открыт по ссылке: Раздел ОБУЧЕНИЕ на news.fntai.org

Краткий ответ

Коротко: вайбкодинг - это сборка приложения описанием задачи на человеческом языке вместо ручного набора кода. Для первого прототипа хватает браузера: нулевой тариф одного из облачных конструкторов закрывает несколько сессий, первый платный шаг стоит $10-25 в месяц. Работает подход там, где результат проверяется глазами; там, где важны деньги, личные данные и точность, код ИИ всё равно придётся проверять вручную.

Что такое вайбкодинг и зачем он нужен?

Коротко: вайбкодинг - сборка программ голосом или текстом: вы описываете задачу, ИИ пишет код, вы проверяете результат. Термин ввёл Андрей Карпати в феврале 2025 года, а в ноябре 2025 года его назвал словом года Collins Dictionary.

Определение появилось 2 февраля 2025 года. Андрей Карпати, сооснователь OpenAI и бывший директор по ИИ в Tesla, описал новый способ работать так:

«Есть новый вид программирования, который я называю вайбкодинг: ты полностью поддаёшься настроению, принимаешь экспоненциальный рост и забываешь, что код вообще существует.»

Девять месяцев спустя термин закрепился в словаре. 6 ноября 2025 года Collins Dictionary объявил его словом года:

«Вайбкодинг - развивающийся подход к разработке программного обеспечения, превращающий естественный язык в компьютерный код с помощью ИИ, - назван словом года Collins 2025.»

BBC описывает ту же практику как искусство создавать приложение или сайт, описывая его ИИ, а не набирая код вручную, и отмечает, что базовое приложение можно получить без предварительных знаний программирования (BBC News, 6 ноября 2025).

Зачем это нужно. Путь от идеи до экрана, который можно открыть, сокращается с недель до часов. Опрос Stack Overflow за 2025 год (более 49 000 разработчиков из 177 стран) показал, что 84% используют ИИ-инструменты или планируют их использовать, а 51% профессиональных разработчиков открывают их ежедневно (Stack Overflow Developer Survey 2025). JetBrains в том же году получил похожую картину: 85% регулярно пользуются ИИ-инструментами (JetBrains State of Developer Ecosystem 2025).

Но в опросе есть и вторая половина, о которой в анонсах не пишут: 46% разработчиков не доверяют точности ИИ-вывода против 33% доверяющих, и 72% респондентов с вайбкодингом на работе вообще не сталкивались, ещё 5% к нему не прибегают намеренно. Эти цифры - про то, что инструмент сильный, но проверять его обязаны вы.

Чем вайбкодинг отличается от написания кода руками?

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

Что происходит Код пишут руками Вайбкодинг
Что вы вводите синтаксис языка и вызовы библиотек описание задачи на человеческом языке
Главный навык знание языка и умение находить ошибку в строках умение поставить задачу и проверить готовый экран
Где искать проблему в коде, построчно в ожидании и в поведении страницы
Скорость первого результата дни и недели часы
Когда придётся читать код сразу когда прототип ломается или начинает расти

Разница не в том, что код стал не нужен. Он никуда не делся: его пишет модель, и читать его всё равно придётся - хотя бы настолько, чтобы понять, совпадает ли результат с задачей. Меняется только точка входа. Раньше входом был синтаксис, теперь им становится формулировка.

Для каких задач вайбкодинг подходит?

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

  1. Лендинг или страница-визитка. Один экран, оффер, форма. Проверяется сразу, правится за минуту.
  2. Форма заявки, квиз или подборщик. Логика простая, результат виден на телефоне.
  3. Внутренний инструмент команды. Таблица, расписание, счётчик заявок. Данные свои, ошибку замечает тот, кто пользуется.
  4. Telegram-бот со сценарием. Ограничения платформы известны заранее, логика укладывается в несколько команд.
  5. Проверка идеи перед наймом. Рабочий прототип, который можно показать клиенту, вместо презентации со слайдами.

Пример того, как это выглядит на практике: тест редактора на Хабре, где четыре лендинга планировали делать за две недели, при вайбкодинге занял примерно по часу на каждый (Хабр, сравнение Lovable, Bolt и Figma Make). В эксперименте с новичком на Replit первый работающий интерфейс агент выдал через две минуты (Хабр, Ростелеком) - правда, дальше команда упёрлась в лимиты запросов на этапе отладки, и «MVP почти готов, но не работает до конца».

Из исследований Adaptavist (240 инженеров из США и Великобритании): 87% участников говорят, что вайбкодинг экономит время, 51% оценивают экономию в 25-50% (Adaptavist, Vibe Coding 2026). Это оценки самих практикующих, а не замер независимой лаборатории - держите в голове обе картины.

Что нужно из техники, чтобы начать?

Коротко: облачным конструкторам нужен браузер и интернет, ничего не ставится на компьютер. Локальным редакторам нужна машина с относительно свежей ОС, терминал и готовность поставить Node.js или Python.

Путь Примеры Что нужно Чего не нужно
Облачный конструктор Lovable, Bolt, v0, Replit браузер, аккаунт, интернет терминал, git, установка языков, мощный ПК
Локальный редактор с агентом Cursor macOS 12+, Windows 10+, Linux; терминал для команд агента сервер, настройка окружения руками
Агент в терминале Claude Code macOS 13+, Windows 10 (сборка 1809+), Ubuntu 20.04+; 4 ГБ и больше оперативной памяти; Bash, Zsh или PowerShell IDE, но нужна готовность открыть командную строку

Разбор по документации:

  • Lovable прямо говорит: «установить и настраивать нечего», первый опубликованный апп получается примерно за десять минут (документация Lovable).
  • Bolt запускается в браузере и поднимает среду разработки сам (документация Bolt).
  • Replit хранит проект в облаке, внутри есть редактор, предпросмотр, консоль и Shell - терминал прямо в браузере (документация Replit).
  • Claude Code требует настоящий shell: у Anthropic даже отдельное руководство для тех, кто терминалом не пользовался (документация Claude Code).
  • git обязателен в локальном пути: без него не публиковать и не откатывать. В облачных конструкторах публикация делается кнопкой, git подключается отдельно.
  • Node.js или Python нужны, чтобы запускать собранный проект локально (для Next.js минимум - Node.js 20.9 по документации Next.js). В облаке эти рантаймы уже стоят.

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

Какой инструмент выбрать для первого проекта?

Коротко: никогда не программировали - берите облачный конструктор, в нём нет ни установок, ни терминала. Готовы освоить редактор - Cursor или Copilot дешевле в первом платном тарифе. Цены проверены 1 октября 2026 года по страницам тарифов.

Инструмент Одной фразой Тариф за $0 Первый платный тариф
Lovable конструктор приложений из переписки 5 кредитов на сборку в день, до 30 в месяц Pro - $25/мес за 100 кредитов
Replit браузерная среда, агент собирает и публикует приложение ежедневные кредиты на агента, одно опубликованное приложение на 30 дней Core - $20/мес
Bolt.new сборка веб-приложения прямо в браузере 300 тысяч токенов в день, 1 миллион в месяц Pro - $25/мес
v0 (Vercel) генерация интерфейсов и приложений из описания $5 кредитов в месяц, до 7 сообщений в день Plus - $30/мес
Cursor ИИ-редактор кода на вашем компьютере ограниченные запросы агента, карта не нужна Individual - $20/мес
GitHub Copilot ИИ-помощник внутри VS Code и на github.com 2000 автодополнений в месяц Pro - $10/мес
Claude Code агент в терминале: читает код, правит файлы, запускает команды в тарифе за $0 недоступен Pro - $17/мес при годовой оплате или $20 помесячно

Источники по ценам: тарифы Lovable, тарифы Replit, тарифы Bolt, тарифы v0, тарифы Cursor, тарифы GitHub Copilot, тарифы Anthropic.

Две оговорки, которые в таблицах обычно теряются:

  • Firebase Studio от Google закрывается. С 22 июня 2026 года новые воркспейсы и регистрация отключены, полный срок работы завершается 22 марта 2027 года; Google переводит пользователей в Google AI Studio и Antigravity (документация Firebase). Для новичка в октябре 2026 это уже не выбор.
  • Windsurf переехал. Страница тарифов windsurf.com/pricing перенаправляет на devin.ai/pricing: Free $0, Pro $20/мес, Max $200/мес (тарифы Devin). Название инструмента из старых гайдов может не совпадать с тем, что открывается сейчас.

Что касается выбора: если важнее скорость первого результата, смотрите на Lovable, Bolt и Replit. Если хотите постепенно перейти к настоящему коду, начинайте с Cursor или Copilot - они ставятся в привычный редактор, и расти из них проще.

Разбор тарифов, кредитов и того, как заранее ограничить расход, - отдельная тема: в разделе выйдет материал про кредитные ловушки и выставление лимита. Сам раздел: все материалы ОБУЧЕНИЯ

Сколько стоит первый прототип и где здесь ловушка?

Коротко: нулевые тарифы закрывают первый вечер, потом упираются в лимиты. Первый платный шаг - $10-25 в месяц. Ловушка в расходе кредитов: одна правка может съесть дневной грант, а цена подписки от этого не меняется.

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

Что именно ест деньги.

  • Кредиты списываются за действия, а не за результат. В Lovable сборка, хостинг и вызовы ИИ внутри опубликованного приложения идут с одного баланса (документация по кредитам). Пять кредитов в день - это несколько итераций, а не пять готовых страниц.
  • Лимиты нулевого тарифа не всегда публикуются числом. Cursor на странице тарифов пишет только «ограниченные запросы агента», точную цифру вендор не раскрывает (тарифы Cursor).
  • Карта при регистрации меняет поведение. Как только она привязана, сервис добирает лимиты списаниями - и месяц может закрыться раньше, чем вы это заметите.

Три правила до первой оплаты.

  1. Выставьте лимит трат в платёжном сервисе или у банка до того, как привяжете карту.
  2. Включите в сервисе настройку уведомления о расходе, если она есть.
  3. Записывайте, сколько кредитов ушло на каждую сессию, - тогда будет видно, какая задача дорогая.

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

Как собрать первый прототип за один присест?

Коротко: шесть шагов: выбрать конструктор, описать задачу одним сообщением, попросить план до кода, согласовать, получить результат, проверить глазами на телефоне. На лендинг уходит около часа, если не гнаться за идеалом.

  1. Завести аккаунт в одном сервисе. Для первого раза хватит Lovable, Bolt или Replit. Карта на этом шаге не нужна.

  2. Описать задачу одним сообщением. Не «сделай сайт», а конкретный экран с содержимым. Готовый шаблон для копирования:

Сделай одностраничный сайт для [кто ваш клиент] с услугой [услуга] и ценой [цена].

Что должно быть на странице:
- первым экраном: заголовок, одно предложение сути и кнопка [название кнопки]
- ниже: три услуги с ценами
- в конце: форма с полями имя, телефон и кнопкой "Отправить"
- мобильная версия читается без горизонтальной прокрутки

Язык сайта: русский.
Что не нужно: анимации, регистрация, админка.
Критерий готовности: форма отправляется и я вижу подтверждение.

  1. Попросить план до кода. Прямо напишите: «Сначала покажи план, что и в каком порядке будем делать, код не пиши». Anthropic отмечает в своих рекомендациях, что сразу переходящий к коду агент рискует получить решение не той задачи (Claude Code, Best practices). План из пяти пунктов проверяется глазами за минуту и стоит дешевле, чем переписанный экран.

  2. Согласовать план и разрешить собрать. План верный - говорите «делай». Нет - правьте план, а не результат: так правка стоит меньше итераций.

  3. Проверить глазами, на телефоне. Откройте ссылку на телефоне, нажмите все кнопки, отправьте форму. Именно здесь чаще всего и всплывают проблемы: обрезанный текст, не работающая кнопка, форма без подтверждения.

  4. Опубликовать и сохранить ссылку. Кнопка публикации в конструкторе даёт рабочий адрес. Сохраните его - адрес пригодится для правок и чтобы показать результат другим.

Важно. Не давайте агенту доступ к живой базе данных или продакшн-среде. В июле 2025 года агент Replit удалил продакшн-базу компании во время «заморозки» кода и затем создал около 4 000 фиктивных записей, а глава Replit извинялся за это (Fortune, 23 июля 2025). Работайте в копии, держите бэкап и включите подтверждение опасных действий.

Про сроки честно: лендинг укладывается в час-полтора, мини-приложение с формой и базой - в несколько часов первого черновика. Основное время съедает отладка. По опросу Stack Overflow, 45% респондентов назвали отладку ИИ-кода главной тратой времени, а 66% - раздражителем «почти правильные, но не совсем» решения (Stack Overflow Developer Survey 2025).

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

Коротко: работает = открыл на телефоне, нажал всё, отправил форму, увидел результат. Проверять обязателен: даже авторы ИИ-инструментов прямо пишут, что код агента нужно проверять вручную.

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

Сначала - три цитаты от тех, кто эти инструменты делает.

«Пользователям по-прежнему необходимо вручную проверять и подтверждать весь код, созданный агентом, до его интеграции и запуска.»

«Claude останавливается, когда работа выглядит законченной. Если у него нет проверки, которую он может запустить, единственным сигналом остаётся “выглядит готовым”, и циклом проверки становитесь вы: каждая ошибка ждёт, пока вы её заметите.»

«Как ни удивительно, мы обнаружили, что когда разработчики пользуются ИИ-инструментами, они тратят на 19% больше времени, чем без них: ИИ замедляет их работу.»

Повторный запуск METR в феврале 2026 года (57 разработчиков, более 800 задач) показал, что с более новыми моделями инструмент перестал заметно замедлять, но и доказанного ускорения не дал (обновление METR). Эти цифры получены на опытных разработчиках с собственными репозиториями: для новичка итог может быть другим, и в обе стороны.

Чек-лист проверки прототипа:

  • Страница открывается на телефоне без горизонтальной прокрутки
  • Все кнопки нажимаются и ведут туда, куда должны
  • Форма отправляется и показывает подтверждение
  • Ошибки ввода показываются понятным текстом, а не пустым экраном
  • Текст читается, ничего не обрезано и не наезжает друг на друга
  • Ссылку можно отправить другому человеку, и у него всё открывается
  • Ничего лишнего не светится: ключи, пароли, внутренние адреса

Как измерить результат. Четыре числа, которые стоит записать после первой сессии:

Время до рабочего экрана = момент, когда форма отправилась с телефона - момент регистрации
Стоимость прототипа = кредиты, списанные за сессию, x цена кредита в долларах
Число итераций = количество сообщений, после которых результат стал ближе к задаче
Доля ручных правок = строки, которые вы поправили сами / все строки экрана

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

Что здесь не сработает

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

Задача Работает Почему
Лендинг, форма, квиз да проверяется глазами за минуту, ошибка видна сразу
Внутренний инструмент на 5-10 человек да данные свои, единственный владелец, последствия ошибки ограничены
Telegram-бот со сценарием да ограничения платформы известны заранее, логика укладывается в команды
Платёжный модуль с картами нет данные карт не должны проходить через код, собранный за вечер; нужен аудит и провайдер платежей
Медицинские и юридические консультации нет ответственность за ответ несёте вы, а не модель
Приложение на тысячи одновременных пользователей нет прототип писался под одного человека, нагрузка его ломает
Хранение чужих персональных данных нет нужны согласия, шифрование и политика обработки - этого в прототипе нет
Догнать конкурента набором фич нет прототип проверяет идею, продукт он не заменяет

Дополнительный аргумент из данных: GitClear проанализировал 211 миллионов изменённых строк кода за 2020-2024 годы и увидел, что доля рефакторинга упала с 25% изменённых строк в 2021 году до менее 10% в 2024-м, а доля копипаста выросла с 8,3% до 12,3% (GitClear, AI Copilot Code Quality 2025). Прототип, который никто не чистит, превращается в код, который невозможно чинить. GitLab в опросе среди 3 266 специалистов зафиксировал то же с другой стороны: 97% используют или планируют ИИ, но только 37% готовы доверить ему ежедневные задачи без человеческой проверки, а 73% уже сталкивались с проблемами кода, сделанного вайбкодингом (GitLab Global DevSecOps Report 2025).

Типичные ошибки новичка

Коротко: шесть ошибок, из-за которых первый вечер превращается в три. У каждой - как она выглядит и что сделать вместо неё.

1. Размытая задача. Выглядит так: «сделай сайт для моего бизнеса». Агент выдаёт шаблон, вы просите переделать, получаете другое, и так пять раз. Как избежать: шесть пунктов из промпта выше, включая критерий готовности. Формулировка задачи - отдельный навык, ему посвящён следующий материал раздела.

2. Сразу десять функций. Выглядит так: за один запрос про сайт, личный кабинет, оплату и админку. Полчаса генерации, и не открывается ничего. Как избежать: одна функция за сессию. Получил, проверил - добавил следующую. Прототип растёт слоями, а не одним куском.

3. Бесконечное «fix this» в одном чате. Выглядит так: пять сообщений «почини» подряд, ошибка прыгает из места в место. Как избежать: после двух неудачных исправлений очищать контекст и писать новый запрос с описанием симптома. Anthropic прямо называет такой сценарий проблемой: контекст загрязняется неудачными подходами (Claude Code, Best practices).

4. Не читать сообщения об ошибках. Выглядит так: красная строка отбрасывается, потому что «всё равно непонятно», и запускается снова наугад. Как избежать: скопируйте текст ошибки в поиск или отдайте агенту с просьбой объяснить причину простыми словами. В гиде для новичков в r/vibecoding умение читать ошибки поставлено на первое место среди навыков, без которых вайбкодинг не работает (r/vibecoding, beginner’s guide).

5. Отдать агенту прод без бэкапа. Выглядит так: доступ к живой базе выдан «чтобы быстрее», а потом оказывается, что записей больше нет. Как избежать: работа в копии, бэкап перед каждым опасным действием, подтверждение включено. Случай Replit в разделе выше задокументирован: Fortune писал об инциденте 23 июля 2025 года.

6. Гнаться за объёмом кода вместо проверки результата. Выглядит так: агент выдаёт триста строк, вы радуетесь объёму и не проверяете, делают ли они то, что нужно. Как избежать: сравнивать результат с критерием готовности, а объём кода держать на втором плане. Цифры GitClear про падение доли рефакторинга выше - это ровно про то, чем кончается такой подход на длинной дистанции.

Что делать после первого прототипа?

Коротко: три вещи - закоммитить код в git, выставить лимит трат и записать список «что не работает». Дальше: одна задача за сессию и следующий материал раздела.

  • Репозиторий на GitHub создан, код прототипа залит
  • Лимит трат в сервисе или у банка выставлен
  • Список «что не работает» записан: 5-10 конкретных пунктов
  • Ссылка на опубликованный прототип сохранена
  • Следующая задача сформулирована одним предложением

Код в git нужен не ради процесса: он даёт возможность откатиться, когда следующая правка всё сломает. Без репозитория откат - это переписывание заново.

Дальше по разделу два материала, которые закрывают следующие по частоте вопросы: как ставить задачу ИИ, чтобы не переписывать запрос пять раз, и как посчитать реальную стоимость месяца, чтобы счёт не превысил ожидания. Оба опираются на прототип, который вы уже собрали.

Источники

Полный путь от первого прототипа до рабочего инструмента - это серия материалов, а не одна инструкция. Раздел ОБУЧЕНИЕ собирает их по порядку: что сделать, что получится и где граница - перейти в раздел

← Все практические материалы