Вайб-кодинг с нуля: с чего начать и как научиться вайбкодить
Вайб-кодинг — это когда код пишет нейросеть, а вы ставите задачу словами. Расскажу, какой ИИ выбрать и как за пять шагов собрать свой первый ИТ-продукт — страницу, которую можно открыть в браузере.
Вокруг вайб-кодинга много шума и мало конкретики. Одни обещают, что программисты больше не нужны, другие говорят, что нейросеть выдаёт мусор и всё придётся переписывать.
Расскажу, какой ИИ выбрать и как за пять шагов собрать свой первый ИТ-продукт — страницу, которую можно открыть в браузере.
Первый проект — это одна страница в одном файле, поэтому на нём вам не понадобится ничего, кроме самого ИИ. Node.js, терминал и гит нужны со второго проекта, когда появятся телеграм-бот, вход по паролю или база данных. Про них — отдельный блок в конце статьи.
Что такое вайб-кодинг
Вайб-кодинг (vibe coding) — это способ делать программы, когда вы описываете задачу обычными словами, а код пишет нейросеть. Вы формулируете, что должно получиться, ИИ-помощник создаёт файлы, ставит библиотеки и правит ошибки, а вы проверяете результат и говорите, что доделать.
Термин ввёл Андрей Карпатый в феврале 2025 года. Смысл простой: вы формулируете задачу, а синтаксис языка пишет модель. Роль человека смещается с набора текста на постановку задачи и проверку.
Важно понимать, что именно меняется. Программирование никуда не исчезает — исчезает необходимость помнить наизусть синтаксис и часами гуглить, почему не собирается проект. А вот понимать, что вы делаете и зачем, придётся по-прежнему.
Вайб-кодинг — это не «нейросеть сделает всё сама, пока я пью кофе». Это диалог. Чем точнее вы объясните задачу, тем меньше придётся переделывать. Расплывчатый запрос вроде «сделай мне сайт» даёт расплывчатый результат — красивый мусор, который непонятно как чинить.
Что нужно, чтобы начать вайбкодить
Список короче, чем кажется. Никакого мощного компьютера и профильного образования не нужно.
Компьютер — подойдёт любой ноутбук, на котором открывается браузер. Мак, Windows, Linux — без разницы.
ИИ-инструмент — тот, который будет писать код. Какой выбрать, разбираю ниже отдельным разделом.
Аккаунт с оплаченной подпиской на выбранный ИИ-инструмент. Бесплатные лимиты есть почти везде, но их хватает буквально на пробу.
Понимание, что вы хотите сделать. Это самый дефицитный пункт из четырёх.
Знание языка программирования в список не входит. Оно ускоряет работу, но начать можно без него.
Больше ничего ставить не нужно. Первый проект — одна страница, и откроется она в Chrome, Safari или любом другом браузере, который уже стоит на вашем компьютере.
Какой ИИ-инструмент выбрать: Cursor, Copilot, Claude Code, Codex или OpenCode
На сентябрь 2026 года у новичка пять разумных вариантов: Cursor, GitHub Copilot, Claude Code, Codex и OpenCode. Выбирать между ними по принципу «окно или чёрный экран» бессмысленно: у каждого из пяти есть и приложение с окном, и расширение для редактора, и работа из командной строки. Ставите вы одно и то же, а запускаете так, как вам удобнее.
Это легко проверить в документации каждого. У Claude Code - приложение для компьютера, расширения для VS Code и JetBrains, работа в браузере и терминал; в приложении он уже внутри, отдельно ставить командную строку не нужно. У Codex - командная строка, расширение для редактора, приложение ChatGPT, веб и облако. OpenCode описывает себя ровно так же: терминал, приложение для компьютера или расширение для редактора. У Cursor есть свой редактор, его же можно запускать из командной строки и плагины для JetBrains и Xcode. У Copilot - расширения для редакторов, своё приложение для компьютера под macOS, Linux и Windows и своя команда в терминале.
Работают все пять одинаково: вы пишете задачу словами, инструмент сам создаёт и правит файлы, запускает проверки и показывает, что получилось. Различаются они ценой, размером бесплатного лимита и мелочами интерфейса.
На простой задаче это видно сразу. Пишете «добавь на страницу кнопку „Наверх“» - любой из пяти сам найдёт нужный файл, впишет кнопку и покажет, что изменил. Ваша работа - открыть страницу и проверить, что кнопка появилась и работает.
Поэтому берите тот, до которого проще дотянуться: где у вас уже есть аккаунт и где вы сможете оплатить подписку. Ставьте его как обычное приложение и работайте в окне - файлы и папки будут перед глазами. На выборе не застревайте: первый проект одинаково получается на любом из пяти.
Все перечисленные сервисы зарубежные, и российская карта у них напрямую не проходит. Актуальные тарифы и способы оплаты меняются часто, поэтому проверяйте их на официальном сайте инструмента перед покупкой — цифры годичной давности из чужих статей верить не стоит.
Шаг 1. Опишите задачу до того, как открыли редактор
Прежде чем жать кнопки, сделаем домашку. Откройте обычный блокнот и ответьте на четыре вопроса:
Что за продукт вы делаете — сайт, телеграм-бот, приложение?
Кто им пользуется и какую его проблему решает?
Какие экраны или команды в нём есть — просто списком?
Что считается готовым результатом? Формулировка «работает» не годится, нужна проверяемая: «страница открывается в браузере, и кнопка «Написать мне» ведёт в телеграм».
Эти четыре ответа — уже половина работы. Дальше они пойдут прямо в первый промпт.
Шаг 2. Создайте папку проекта
Заведите пустую папку как обычно — правой кнопкой в проводнике или в Finder. Назовите её латиницей без пробелов, например my-first-project.
Дальше откройте эту папку в редакторе: «Файл» → «Открыть папку». Всё, что нейросеть сделает, окажется внутри.
Одна папка — один проект. Свалка из десяти проектов в одной директории собьёт с толку и вас, и ИИ-помощника.
Шаг 3. Дайте первый промпт
Первый запрос задаёт тон всему проекту, поэтому не экономьте на нём. Хороший промпт содержит четыре части: что делаем, на чём делаем, что должно получиться и чего делать не надо.
Собери страницу-визитку в одном файле index.html. Что на странице: - первый экран: имя, одна строка о том, чем я занимаюсь, кнопка «Написать мне»; - блок «Что я делаю» — три карточки с заголовком и парой предложений; - внизу контакты и ссылка на телеграм. Ограничения: - всё в одном файле index.html, стили внутри него же; - ничего не устанавливать: файл должен открываться двойным щелчком в браузере; - никаких сборщиков и библиотек, которые ставятся командой.
Обратите внимание на две последние строки — они здесь главные. Без них ИИ-помощник почти наверняка заведёт проект на React с установкой зависимостей, и вы застрянете на первом же шаге вместо готовой страницы.
Шаг 4. Откройте и проверьте
Запускать нечего: зайдите в папку проекта и щёлкните по файлу index.html два раза. Он откроется в браузере — это и есть ваш сайт.
Проверяйте руками по результату: пройдите страницу сверху донизу, нажмите каждую кнопку, проверьте, что ссылки ведут куда надо. Код может выглядеть идеально и при этом не работать.
Дальше цикл короткий: сказали, что поправить, редактор сохранил файл, вы обновили вкладку браузера: F5 на Windows, Cmd+R на маке. Пересобирать ничего не нужно.
Шаг 5. Правьте маленькими шагами
Дальше начинается настоящий вайб-кодинг: вы гоняете продукт и говорите, что поправить. Одна правка — один запрос.
Плохо: «переделай страницу, добавь форму, поменяй все тексты и почини кнопки».
Хорошо: «кнопка «Написать мне» на первом экране никуда не ведёт — привяжи её к ссылке на телеграм».
Когда очередная версия заработала — сохраните её. На первом проекте хватит копии папки рядом: my-first-project-v2, my-first-project-v3. Тогда следующая неудачная правка не будет стоить вам всего проекта.
Взрослый способ хранить версии — гит, но он живёт в терминале и на первом проекте только мешает. Про него отдельный блок в конце статьи.
Что делать, когда всё сломалось
Сломается обязательно, это нормальная часть процесса. Страница может открыться пустой, кнопка — не нажиматься, нейросеть — не дописать код.
Алгоритм такой:
Скопируйте текст ошибки целиком и отдайте его ИИ-помощнику. Не пересказывайте своими словами — вставляйте как есть.
Не помогло — скажите, что именно вы сделали перед поломкой и что ожидали увидеть.
Всё ещё не помогло — вернитесь к последней сохранённой копии папки и зайдите с другой стороны.
Проект запутался окончательно — соберите заново с нуля. С готовым описанием задачи из шага 1 это займёт минуты, а не дни.
Первая: гигантский запрос на весь проект разом — нейросеть теряет нить и выдаёт полуфабрикат. Вторая: работать без сохранённых рабочих версий - одна правка ломает неделю работы. Третья: соглашаться с любым ответом, не проверяя результат руками. Модель уверенно пишет и правильный, и неправильный код одинаковым тоном.
Сколько времени занимает научиться
Первый работающий проект реально собрать за один вечер — страница-визитка делается за час-полтора вместе с регистрацией в ИИ-инструменте.
На то, чтобы перестать бояться терминала и начать понимать, что происходит в проекте, уходит несколько недель регулярной практики. Не курсов — именно практики на своих задачах.
Быстрее всего выходит, когда рядом есть человек, который это уже делал: он видит, где вы промахнулись с постановкой задачи, и вы не тратите вечер на один и тот же тупик. Дальше уже сами.
Когда захочется дальше: терминал, Node.js и гит
Одной страницей дело не кончится. Как только понадобится телеграм-бот, вход по паролю или база данных, проект перестанет быть одним файлом — и вот тогда пригодится всё, что мы отложили.
Node.js — среда, в которой запускается почти всё сложнее статической страницы. Ставится с официального сайта в два клика, берите версию LTS: это та, которую поддерживают дольше остальных.
Терминал — то самое чёрное окно, оно встроено в любой редактор. Команд на старте ровно две: одна ставит зависимости проекта, вторая запускает его локально, на адресе вида http://localhost:3000.
Файл .env — текстовый файл в папке проекта, куда кладут ключи и токены: токен бота, доступ к платному API. В код их не вписывают: код уезжает в гит и к подрядчику, а ключ должен остаться у вас.
Гит — история версий вместо копий папки. Одной командой сохраняете рабочее состояние, другой возвращаетесь к нему, когда сломали.
npm install npm run dev git add . git commit -m "рабочая версия: страница открывается"
Порядок здесь важнее скорости. Пока первый проект не открылся в браузере и не сделал одну вещь целиком, ставить Node.js и разбираться с гитом не нужно — это лишние поводы бросить на середине.
С чего начать: чек-лист на первый вечер
Поставьте выбранный ИИ-инструмент и заведите в нём аккаунт.
Напишите в блокноте четыре абзаца про свой проект из шага 1.
Соберите первую версию по промпту из шага 3.
Доведите до состояния «открывается в браузере и делает одну вещь целиком».
Сохраните копию папки и покажите результат кому-нибудь.
Не пытайтесь сделать сразу большой продукт. Задача первого проекта — увидеть своими глазами, что оно работает.