Вайб-кодинг с нуля

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

Я делаю сайты с 2015 года и преподаю с 2023-го. Через мои занятия прошли люди без технического бэкграунда: учителя, дизайнеры, маркетологи, фотографы. Сценарий почти всегда одинаковый: два часа эйфории от первых результатов, потом ступор перед непонятной ошибкой, потом либо рост, либо заброшенный проект. Разница между теми, кто доходит до своего сайта, и теми, кто бросает, почти никогда не в способностях — она в порядке шагов.

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

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

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

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

Обучение через нейросеть идёт циклами, а не лекциями. Цикл короткий: ставите задачу → получаете код или текст → открываете результат в браузере → находите расхождение с задуманным → формулируете правку. Один такой круг занимает 10–20 минут, и именно на нём растёт навык.

Что здесь осваивается по-настоящему:

• Формулировка задачи. Нейросеть не угадывает контекст. Чем точнее описан блок, его содержимое и поведение, тем меньше переделок.
• Проверка результата. Нужно уметь посмотреть на страницу глазами посетителя: где не хватает отступа, что ломается на телефоне, куда ведёт кнопка.
• Локализация ошибки. Не «переделай всё», а «вот этот блок на этой странице ведёт себя так-то» — тогда правка занимает минуты, а не часы.
• Понимание базы. HTML, CSS и немного JavaScript нужны не для того, чтобы писать код руками, а чтобы читать чужой и замечать, что в нём не так.

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

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

Отсюда главная ловушка: без базы вайб-кодер упирается в потолок. Пока проект простой, нейросеть справляется сама. Как только появляются формы, аналитика, адаптив под мобильные и правки заказчика, нужен человек, который понимает, что происходит в коде. Поэтому нормальное обучение — это вайб-кодинг плюс минимальная база: как устроена страница, что такое HTML-структура, зачем нужен CSS и что делает JavaScript.

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

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

Не подходит, если нужен результат без участия: «нажму кнопку — получу бизнес». Нейросеть ускоряет работу, но не отменяет её. И не подходит, если вы рассчитываете, что через неделю будете брать проекты за 300 тысяч: первые заказы обычно гораздо скромнее и приходят после нескольких сделанных сайтов.

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

Всё остальное — редакторы, плагины, генераторы картинок — подключается по мере необходимости. На старте лишние инструменты только мешают.

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

• День 1. Поставить инструмент, создать папку проекта и пустую страницу. Ничего не настраивать «идеально».
• День 2. Собрать первый экран: заголовок, подзаголовок, кнопка. Добиться, чтобы это выглядело прилично на ноутбуке.
• День 3. Добавить три смысловых блока: о себе, услуги, контакты. Тексты писать своими словами, а не просить «придумай что-нибудь».
• День 4. Проверить на телефоне и починить то, что разъехалось. Это самый полезный день: именно здесь появляется понимание вёрстки.
• День 5. Подключить форму или ссылку на мессенджер, проверить, что заявка доходит.
• День 6. Опубликовать сайт и открыть его на чужом устройстве.
• День 7. Отдохнуть и записать список того, что непонятно. С этого списка начнётся следующая неделя.

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

Инструменты делятся на два типа. Первые живут в браузере и собирают сайт по описанию: Claude, ChatGPT, Gemini. Вторые работают с файлами проекта: Cursor, OpenCode, Claude Code. Для обучения важнее второй тип — там видно структуру файлов и можно править конкретный блок, а не пересобирать всё заново.

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

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

Промпт — это техническое задание, а не заклинание. Плохой промпт: «сделай красивый сайт». Хороший отвечает на четыре вопроса: что делаем, для кого, из каких блоков состоит и что нельзя менять.

Рабочая формула, которой я пользуюсь сам:

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

Второй приём — правки по одному пункту. Не «переделай всё», а «в блоке с ценами сделай две колонки и уменьши отступы сверху». Так вы видите, что именно изменилось.

Первая страница должна быть маленькой. Не интернет-магазин, не личный кабинет, а один экран плюс три-четыре блока. Цель — пройти весь путь целиком: от пустой папки до сайта в интернете.

Порядок такой:

• папка проекта и файл index.html с пустым каркасом;
• первый экран: заголовок, подзаголовок, кнопка;
• три смысловых блока с текстом;
• стили: шрифт, цвета, отступы, адаптив;
• проверка на телефоне;
• публикация.

Если на каком-то шаге нейросеть выдаёт ошибку — не переписывайте всё. Скопируйте текст ошибки и опишите, что делали:

Точное описание проблемы — половина решения. «Не работает» нейросеть понимает плохо, «пустой экран и вот такая ошибка в консоли» — хорошо.

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

• страница открывается на телефоне и текст не вылезает за экран;
• все ссылки и кнопки ведут туда, куда обещают;
• форма действительно отправляет заявку, а не просто показывает «спасибо»;
• шрифты и картинки загружаются, а не висят пустыми квадратами;
• в коде нет чужих счётчиков, рекламы и странных скриптов;
• заголовок страницы и описание — человеческие, а не «Document».

Последний пункт часто забывают. Сайт может выглядеть отлично и при этом называться «New Page 1» — в поиске и в мессенджерах он будет выглядеть так же.

Публикация — это не страшный этап, а три действия: залить файлы в репозиторий, включить бесплатный хостинг (GitHub Pages или Netlify), привязать домен. Первый раз занимает час, второй — пятнадцать минут.

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

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

Сначала техническая база, без неё нейросеть бесполезна:

• у каждой страницы свой title и description, а не «Document»;
• заголовки выстроены по смыслу: один H1, дальше H2 по разделам;
• есть sitemap.xml и robots.txt, сайт добавлен в Яндекс.Вебмастер и Search Console;
• страница быстро открывается на телефоне и не «прыгает» при загрузке.

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

Чего ИИ не сделает за вас:

• не добудет ссылки и упоминания — это руками;
• не заменит реальный опыт, который видно в тексте;
• не спасёт сайт, где нечего читать.

Практический минимум после публикации: 10–15 страниц под конкретные запросы, у каждой свой интент, внутренние ссылки между статьями и обновление раз в месяц-два. Смотреть по делу: показы и клики в Вебмастере, позиции по кластерам, заявки. Если через два-три месяца показов нет — проблема в семантике или технике, а не в «плохом ИИ».

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

По деньгам: инструмент с ИИ — от 0 до 2 000 ₽ в месяц в зависимости от тарифа, домен — около 200–1 000 ₽ в год, хостинг для статичного сайта — бесплатно. То есть стартовать можно почти без бюджета, а основные затраты — время.

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

Я учу не «нажимать кнопки в нейросети», а делать сайты: от структуры и текста до публикации и первых заявок. Занятия индивидуальные, один на один, по вашему проекту — своему или учебному, но обязательно настоящему.

Что разбираем: как устроена страница, как ставить задачу ИИ, как проверять код, как делать дизайн без дизайнерского образования, как публиковать сайт и что делать, чтобы его находили. Формат — два занятия в неделю плюс задания между ними; дома вы делаете то же самое, что и на уроке, но самостоятельно.

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

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

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

Пять вопросов по статье. Отвечайте честно — это не экзамен, а проверка, что стоит перечитать.