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

Илья Трикоз уже публиковал отличный кейс о том, как его жена навайбкодила сервис SignDog с помощью Claude Code, не написав ни строчки кода.

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

Важнейший промпт для погружения в вайбкодинг (шутка)

Краткий экскурс: что такое вайбкодинг

Выражение vibe coding предложил Андрей Карпаты в посте от 2 февраля 2025 года. Он в шутку описал программирование, при котором «забываешь, что код вообще существует»: говоришь модели, чего хочешь, запускаешь результат и реагируешь на то, что видишь. Vibe здесь — настроение, ощущение. Вы ведёте проект по ощущению от работающей вещи, а написание кода отдаёте ИИ. Термин прижился, и теперь его часто используют шире исходной шутки.

На практике всё выглядит так: вы описываете поведение программы, ИИ пишет код, вы открываете результат и просите исправить то, что не совпало с задумкой. Чтобы собрать и запустить первый небольшой проект, знать язык программирования необязательно.

Кто тогда вайбкодер? Всё просто: если вы поручаете модели написать программу, запускаете её и направляете правки словами — вы вайбкодите. Разработчик тоже может так работать. Если модель только объяснила синтаксис, а программу вы написали сами, это скорее обычная разработка с ИИ-помощником.

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

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

Создай браузерную игру в стиле Марио, только с Трампом в главной роли, где он собирает монетки в виде биткоинов, а его враги — клоны Байдена.

Результат может отличаться. Для запуска нажмите кнопку Run в интерфейсе чат-бота.

Вот и всё. Подобная игра — аналог программы Hello, World! в мире вайбкодинга. Это только первый шаг, зато сразу видно главное: мы описали результат словами и получили работающую программу. Теперь соберём инструмент, которым можно пользоваться самому.

А что вообще можно навайбкодить самостоятельно?

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

• Для себя: персональный сайт, заметки или таск-менеджер, приложение для тренировок, каталог одежды с поиском, планировщик поездки или трекер привычек.
• Для работы и хобби: простой корпоративный сайт, обработчик входящих писем, счётчик очков любительского матча, расписание занятий, расчёт стоимости услуги или панель для небольшой команды.
• Чтобы показать идею другим: лендинг, викторина, интерактивный прототип или браузерная игра. Результат можно показать сразу, даже если за ним пока нет большого сервиса.

За идеями можно заглянуть на сабреддит r/vibecoding с проектами участников или посмотреть готовые шаблоны игр, веб-сайтов и арт-презентаций в GPTunneL CodeBlocks.

Хорошо видно, откуда берутся идеи: «вот эта задача решается неудобно — сделаю инструмент под себя».

Ну и, конечно, ещё раз рекомендуем наш кейс о SignDog, который собрали с помощью Claude Code: всё началось с работы с PDF, затем появились оплата, редактор печатей и другие функции.

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

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

Для новичков: открыли браузер и начали

• Чат GPTunneL с GromGPT и DeepSeek
  Подойдут, чтобы придумать правила, получить код простой страницы или игры и обсудить правки. Это самый понятный старт: общаемся как в обычном чате. Если модель вернула код текстом без предпросмотра, его придётся сохранить в HTML-файл и открыть самостоятельно.

• GPTunneL CodeBlocks
  Собирает интерактивную HTML-страницу и сразу показывает её в браузере. Можно попросить таймер, калькулятор, лендинг или мини-игру, проверить кнопки, продолжить правки словами, а затем скачать всё одним файлом. Здесь страница открывается сразу, без сохранения HTML-файла.

• Google AI Studio в режиме Build
  Подходит, когда одной страницы уже мало и хочется собрать веб-приложение с живым предпросмотром. Начать можно с обычного описания, но по мере роста проекта появятся файлы, серверная логика и настройки публикации.

• Bolt
  Быстро собирает сайты и приложения с несколькими экранами прямо в браузере. Удобен для прототипа, который хочется сразу увидеть и покликать. Чем больше в проекте данных и интеграций, тем внимательнее придётся разбираться, что именно агент создал внутри.

• Lovable
  Ориентирован на веб-приложения с готовым интерфейсом, базой данных и входом пользователей. Первую версию можно описать словами. Перед публикацией уже придётся проверить доступы, хранение данных и поведение приложения для разных пользователей.

• Replit Agent
  Здесь рядом находятся агент, файлы проекта и запущенное приложение. Не нужно отдельно настраивать локальную среду, поэтому переход от простого прототипа к проекту из нескольких файлов получается мягче. Ошибки работающего приложения агент всё равно не угадает: их нужно воспроизвести и описать.

Средний уровень: агент работает с файлами проекта

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

• Cursor Agent
  Удобен, если хотите видеть рядом чат, файлы и изменения кода. Для такого старта установите редактор Cursor, войдите в аккаунт и откройте папку проекта. Можно попросить агента собрать основу приложения, затем разбирать правки прямо в редакторе. Понадобится освоиться с его интерфейсом и запуском проекта.

• Cline
  Можно установить расширением в редактор, например VS Code, и выбрать, через какого провайдера обращаться к модели. Подойдёт, если хотите самостоятельно управлять этим выбором. Для старта нужны редактор, расширение и настроенный доступ к модели — через Cline или ключ своего провайдера. Следите за расходами и разрешениями на выполнение команд.

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

• Codex
  Агент OpenAI, с которым можно создавать проект и разбирать изменения в существующем коде. Для работы рядом с файлами есть расширение редактора, а для командной строки — Codex CLI. В варианте CLI установите инструмент, откройте папку проекта и войдите через ChatGPT или другой поддерживаемый способ. Кроме написания кода, можно поручить ему отдельную проверку уже сделанных изменений.

Продвинутый уровень: добавляем нейросеть внутрь приложения

До этого ИИ помогал нам писать программу. На следующем шаге сама программа может обращаться к модели: например, пользователь описывает цель тренировки, а приложение предлагает план занятий. Для этого нужен API — способ отправлять запросы нейросети из своего кода. Сложному приложению без таких функций API нейросети не требуется.

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

Уровень здесь означает только порог входа. Опытный разработчик вполне может собрать полезную страницу в CodeBlocks, а новичок — запустить проект в Replit. Главное, чтобы сложность инструмента не мешала проверить саму идею.

Краткий алгоритм: от идеи до ссылки

1. Выберите инструмент. В обзоре выше есть варианты для одной страницы, приложения с несколькими экранами и проекта, который уже лежит в папке с кодом.
2. Опишите результат. Например: «Сделай сайт записи на тренировки: посетитель выбирает время и получает подтверждение». Как написать код, решит ИИ.
3. Запустите первую версию. Считайте её черновиком: проверьте, что работает, прежде чем обсуждать цвет кнопок.
4. Дорабатывайте по одной функции. После каждой правки снова пройдите основной сценарий.
5. Проверьте проект перед публикацией. Пройдите его как обычный посетитель, а если есть аккаунты и данные — проверьте доступы.
6. Опубликуйте для всех, если это нужно. Способ зависит от того, получили вы один HTML-файл, проект в онлайн-сервисе или папку с кодом.

Первый проект: интервальный таймер

Теперь соберём таймер для тренировки в чате GPTunneL с GromGPT. Открываем модель и вставляем такой запрос:

Создай одну интерактивную HTML-страницу на русском языке: интервальный таймер для тренировки.

Пользователь задаёт длительность работы и отдыха в секундах (целые числа от 1 до 3600) и число раундов (от 1 до 50). По кнопке «Старт» начинается работа первого раунда. После работы начинается отдых, затем следующий раунд. После работы последнего раунда таймер показывает «Тренировка завершена» и не запускает лишний отдых.

На экране крупно показывай оставшиеся секунды, текущий этап и номер раунда. Добавь кнопки «Старт», «Пауза / Продолжить» и «Сброс». Во время паузы отсчёт стоит на месте. «Сброс» возвращает к настройкам и первому раунду. Не позволяй начать таймер с пустыми полями, нулём или числами вне диапазона: покажи понятное сообщение об ошибке.

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

Результат выдай в виде готовой html страницы.

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

Первый экран таймера, получившегося по этому запросу.

Как запустить таймер на компьютере и телефоне

В чате. Когда GromGPT выдаст HTML-код, нажмите «Просмотр» рядом с «Код» над ответом. Страница запустится прямо в интерфейсе: можно сразу нажать «Старт» и проверить таймер.

На компьютере. Чтобы открыть таймер отдельно от чата, скопируйте HTML-код без пояснений вокруг. Вставьте в редактор обычного текста, например в Блокнот, и сохраните в отдельной папке под именем index.html. В Windows при сохранении выберите тип «Все файлы», чтобы не получить index.html.txt. Откройте файл двойным щелчком — таймер запустится в браузере.

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

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

Проверяем результат и просим исправить ошибки

Для первой проверки выставляем 5 секунд работы, 3 секунды отдыха и 2 раунда. Долго ждать не придётся, а вся логика будет перед глазами:

1. Первый рабочий отрезок.
2. Отдых.
3. Второй рабочий отрезок.
4. Сообщение «Тренировка завершена».

Если после второго рабочего отрезка начался ещё один отдых, таймер ошибся. Затем проверяем паузу: останавливаем отсчёт на пару секунд и продолжаем. Пропущенное время не должно внезапно исчезнуть со счётчика. Кнопка «Сброс» должна вернуть нас к настройкам и первому раунду.

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

Если вместо таймера открылась пустая страница или кнопка ничего не делает, загляните в консоль браузера. В Chrome на компьютере её можно открыть сочетанием Ctrl+Shift+J (на Mac — ⌘+Option+J). Если там есть сообщение об ошибке, скопируйте его и напишите модели, после какого действия оно появилось: «Нажимаю „Старт“, отсчёт не начинается. В консоли ошибка … Исправь её, сохрани остальные функции». Консоль Chrome показывает ошибки, которые не всегда видны на самой странице.

Если нашли проблему, фраза «почини всё» мало поможет. Модели нужен конкретный случай:

При настройках 5 секунд работы, 3 секунды отдыха и 2 раунда после второго рабочего этапа появляется лишний отдых. Нужно сразу показать «Тренировка завершена». Исправь только переключение этапов, сохрани кнопки и оформление. После правки проверь этот сценарий и сценарий с одним раундом.

В таком запросе есть настройки, ожидаемое поведение и место ошибки. После исправления ещё раз проходим сценарий 5/3/2 и отдельно пробуем один раунд. С переключениями этапов легко починить один случай и случайно сломать соседний.

Добавляем новую функцию

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

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

После изменения снова проверьте тренировку с двумя раундами и отдельно — с одним. Если всё на месте, можно двигаться дальше.

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

Перед публикацией: короткая проверка

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

• Пройдите основные действия как обычный пользователь. Для формы проверьте пустой ввод, для записи — весь путь до подтверждения.
• Если есть аккаунты, проверьте приложение под двумя разными пользователями: один не должен видеть чужие записи и настройки.
• Если подключили API, не вставляйте секретный ключ в HTML и не отправляйте его модели в чате. Код, который выполняется в браузере, доступен посетителю: секретам место на сервере.
• Если приложение вызывает платный API или использует платный хостинг, проверьте лимиты и расходы до того, как ссылку получат все желающие.

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

Как опубликовать проект для всех

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

• Один HTML-файл из чата или CodeBlocks. Для нашего таймера откройте Netlify Drop и перетащите туда папку с index.html. Получите ссылку, которую можно открыть на телефоне и отправить другим. Чтобы обновить ту же ссылку, перетащите изменённую папку в зону загрузки на вкладке Deploys созданного сайта.
• Проект в браузерном конструкторе. В Google AI Studio Build, Bolt, Lovable и Replit есть публикация из самого сервиса. Найдите Publish, проверьте, кому будет доступна страница, и пройдите подсказки сервиса. Для некоторых вариантов могут понадобиться платёжные настройки.
• Проект в Cursor, Cline, Claude Code или Codex. Эти инструменты помогают работать с файлами, а адрес в интернете даёт отдельный хостинг. Для веб-проекта можно, например, сохранить код в репозитории на GitHub — хранилище файлов с историей изменений — и подключить его к Vercel или Netlify. Проверьте, поддерживает ли площадка ваш проект, и настройте команды сборки и запуска. После успешного развёртывания она выдаст ссылку. Секретные ключи задают в настройках серверного окружения; они не должны попадать в код, который отправляется браузеру.

Если не знаете, какие настройки нужны вашему проекту, попросите агента разобраться в его файлах:

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

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

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

Распространённые ошибки

• Задача звучит как «сделай что-нибудь полезное». Назовите действие пользователя и результат: что он вводит, что нажимает и что должен увидеть.
• Несколько новых функций добавляются одним запросом. Когда что-то сломается, будет трудно найти причину. Добавляйте по одной и сохраняйте рабочую версию файла или проекта перед большой правкой.
• Проблему описывают словами «не работает». Покажите ИИ настройки, действие, ожидаемый результат и то, что произошло на самом деле. Если браузер показывает ошибку, добавьте её текст.
• Сложный сервис пытаются вести как один HTML-файл. Для общих данных, аккаунтов и оплаты нужен проект с серверной частью. Выберите подходящий инструмент из раздела выше и отдельно проверьте доступы перед публикацией.

Когда одной страницы уже мало

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

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

Если вы уже не можете объяснить, кто имеет доступ к данным или как восстановить работу после ошибки, подключите разработчика. Подготовьте для него описание проекта, шаги запуска и список известных проблем. Так будет проще разобраться, что готово, а что ещё требует внимания.

Часто задаваемые вопросы

Нужно ли знать программирование, чтобы начать вайбкодить?

Для первой страницы или игры — нет. Важно суметь описать задачу и проверить результат. Чем больше в проекте данных и пользователей, тем полезнее понимать, что ИИ изменил и как это проверить.

За что придётся платить при создании и после публикации?

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

Если ИИ только написал код, готовая программа не обязана обращаться к нейросети при каждом запуске. Но если вы добавили внутрь приложения генерацию ответов через API, запросы посетителей тоже будут расходовать средства или лимиты. Поэтому оценивайте отдельно создание проекта и его дальнейшую работу.

Что делать, если ИИ исправляет одну ошибку и создаёт другую?

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

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

Можно ли показать результат всему интернету?

Да. Выберите подходящий способ в разделе о публикации и настройте публичный доступ. Проверьте ссылку без входа в свой аккаунт: посетитель должен открывать приложение без доступа к вашему редактору. Общедоступный сайт при этом может содержать личные кабинеты — данные внутри них должны оставаться доступны только владельцам.

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