Вайбкодинг с чего начать: инструкция + 6 ошибок новичка

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

Что понадобится

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

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

1. Выбрать задачу, которую вы сможете проверить

Ключевое слово — проверить. Вы не читаете код, значит, единственный способ понять, что всё сделано верно, — посмотреть на результат.

Хорошие первые задачи:

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

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

2. Начать с веб-конструктора, а не с терминала

Соблазн сразу поставить Claude Code велик, и он же — причина половины брошенных попыток: вечер уходит на установку, ключи и настройку, а результата нет.

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

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

3. Поставить задачу так, чтобы её поняли

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

1. Что это. «Одностраничный сайт для мастера маникюра».
2. Что на нём. «Сверху имя и фото, дальше список услуг с ценами, внизу форма записи: имя, телефон, желаемая дата».
3. Как выглядит. «Спокойно, светлый фон, одна акцентная краска, читается с телефона».
4. Чего не надо. «Без анимаций, без всплывающих окон, без регистрации».

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

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

4. Смотреть на результат и говорить, что не так

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

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

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

5. Разобраться с ошибкой, не понимая кода

Рано или поздно вылезет красный текст. Порядок действий простой:

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

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

6. Проверить, прежде чем показывать людям

Минимальный список перед тем, как отдать ссылку кому-то, кроме себя:

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

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

7. Повторить на второй задаче

Навык ставится на втором-третьем проекте, а не на первом. Первый показывает, что это вообще работает; второй — что вы можете это повторить осознанно.

Хороший второй проект — та же задача, но в другом инструменте. Так становится видно, что переносится между средами (умение ставить задачу) и что нет (кнопки и меню).

Шесть ошибок новичка

1. Начинать с большого проекта. «Соберу себе CRM» — верный способ закончить ничем. Начинайте с того, что делается за вечер.

2. Ставить задачу одним предложением. «Сделай интернет-магазин» даёт что угодно. Четыре части из шага 3 — не формальность.

3. Не проверять на телефоне. Больше половины посетителей придут оттуда, а агент по умолчанию рисует под широкий экран.

4. Копить правки, не проверяя. Десять указаний подряд, потом смотрим — и непонятно, что из этого сломало результат.

5. Публиковать то, что не проверено на секреты. Ключ от платного API в открытом коде — это чужой счёт на ваше имя.

6. Считать, что понимать код теперь не нужно вообще. На простых задачах — правда. На всём, где есть чужие данные и деньги, — нет, и цена ошибки там другая.

Коротко о главном

• Начинайте с одной маленькой задачи, результат которой видно глазами.
• Первый инструмент — веб-конструктор в браузере, а не терминал: результат в тот же вечер важнее «правильности» выбора.
• Задача ставится в четыре части: что, из чего, как выглядит и чего не надо.
• Цикл «посмотрел — сказал конкретно — посмотрел» и есть весь метод.
• Ошибку отдавайте агенту целиком; три безуспешных круга — переформулируйте задачу.
• Перед публикацией проверьте телефон, неверный ввод и секреты в коде.

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