Что такое вайбкодинг и где его пределы
Сначала договоримся, кто что делает. Агент пишет код, а решения и проверка остаются за тобой. Урок объясняет слова, которые будут в отчётах агента, и места, где он ошибается.
Вайбкодинг — это когда ты ставишь задачу словами, а код пишет агент. Программировать не нужно, но отвечать за результат придётся тебе. Здесь: кто что делает и где агент ошибается.
Что такое вайбкодинг
Сквозной пример курса — сайт-визитка кофейни «Зерно» в Алматы. Кофейня учебная, адреса и цифры в примерах выдуманные. Свой проект подставишь на практике: цель — живая страница по ссылке.
Способ делать сайты и программы, описывая задачу обычными словами. Код пишет нейросеть, а человек проверяет результат и направляет. Нужен, чтобы получить рабочую вещь без многолетней учёбы на программиста.
ПримерПишешь: «сделай страницу кофейни: название, три строки о нас, меню, адрес и кнопка WhatsApp». Через несколько минут смотришь, что получилось.
Программа на основе нейросети, которая работает в папке проекта: читает файлы, создаёт и правит их, запускает команды. От обычного чата отличается тем, что делает изменения сам, а не только советует.
ПримерClaude Code. Скажешь «поменяй цвет кнопки», он найдёт нужный файл и поправит.
Текстовые файлы, из которых собирается сайт. Нужен, чтобы сайт можно было менять, хранить и переносить. Читать каждую строку необязательно, но помнить, что сайт лежит в файлах, а не «где-то в нейросети», нужно.
ПримерПапка zerno-site с файлами страниц, стилями и картинками.
Кто что делает
Роли делятся жёстко. Отдашь агенту решения — получишь сайт, который никому не нужен. Возьмёшь на себя код — потратишь недели.
- Ты решаешь, зачем нужен сайт, что на нём будет и как ты поймёшь, что готово
- Агент пишет и правит файлы, запускает проект, чинит ошибки сборки
- Ты смотришь результат глазами, на телефоне и на компьютере, и говоришь, что не так
- Ты решаешь, что выкатывать: наружу идёт только проверенное
Проверка результата по условиям, названным заранее: что открывается, где какой текст, как выглядит на телефоне. Нужна, потому что агент пишет «готово» и тогда, когда сделано не всё.
ПримерПриёмка главной «Зерна»: сверху название, меню из пяти позиций, кнопка WhatsApp открывает чат, на телефоне текст не вылезает за экран.
Из чего состоит сайт
Код агент пишет сам, но слова из его отчётов надо узнавать, иначе не поймёшь, что он сделал.
Язык разметки. Говорит браузеру, что на странице есть заголовок, абзац, картинка, кнопка. Это скелет страницы.
ПримерЗаголовок «Зерно» и абзац «Обжариваем кофе в Алматы» — элементы HTML.
Правила внешнего вида: цвета, шрифты, отступы, перестройка под телефон. Нужен, чтобы страница выглядела как твой бренд.
ПримерФон тёмный, кнопка жёлтая, на узком экране меню идёт в один столбец.
Язык, который оживляет страницу: открывает меню, отправляет форму, считает. На визитке его немного, но он есть.
ПримерКнопка «Показать меню» на телефоне работает на JavaScript.
Готовый каркас для сайтов: в нём уже есть структура папок, запуск и сборка. Нужен, потому что с нуля агент пишет дольше и чаще ошибается.
ПримерNext.js — один из популярных фреймворков. Если агент предложил его, структура проекта будет сложнее одного файла, и это нормально.
Шаг, на котором проект превращается в готовые файлы для публикации. Если сборка падает, сайт не выложится. Поэтому её запускают перед каждой выкаткой.
ПримерКоманда сборки обычно называется npm run build. Завершилась без ошибок — можно выкатывать.
Режим, когда сайт работает на твоём компьютере и виден только тебе, по адресу вроде localhost:3000. Нужен, чтобы смотреть правки до публикации.
ПримерАгент запустил проект, ты открыл localhost:3000 в браузере и видишь страницу «Зерна».
Где пределы
Агент быстрый, но ошибается по-своему. Знать эти места заранее дешевле, чем ловить ошибки на живом сайте.
Когда нейросеть уверенно пишет то, чего нет: выдуманный адрес, часы работы, несуществующую функцию. Опасна тем, что на странице выглядит как обычный текст.
ПримерАгент написал «Работаем с 7:00 до 23:00», хотя ты такого не говорил. Часы, адреса и цены сверяй всегда.
Когда новая правка ломает то, что раньше работало. С агентом случается часто: он правит один файл и задевает другой. Лечится маленькими шагами и проверкой после каждого.
ПримерДобавили страницу меню — и на главной пропала кнопка WhatsApp.
Всё, что агент сейчас держит в рабочей памяти: твои сообщения и прочитанные файлы. Он ограничен, поэтому в длинной работе забывает начало. Важное повторяй или записывай в файл правил проекта.
ПримерЧерез час работы агент перестал использовать фирменный шрифт: о нём сказали только в начале.
Вайбкодинг хорошо подходит для визитки, лендинга, страницы с меню, простой формы заявки и личного сайта. С осторожностью — для оплаты, личных кабинетов и баз клиентов: там ошибка стоит денег и доверия, и код должен прочитать человек, который в нём разбирается.
За тобой остаётся то, что агент решить не может: зачем сайт бизнесу, какие тексты правдивы, какие данные людей ты вообще собираешь и где хранятся ключи.
- Просят «сделай сайт» без цели и получают случайный шаблон
- Верят отчёту «готово» и не открывают страницу
- Просят весь сайт одним запросом и не могут понять, что сломалось
- Не сверяют факты: часы работы, адрес, телефон
- Считают, что код писать не нужно, значит и отвечать не нужно
- Ты можешь объяснить, кто что делает: что решаешь ты, что пишет агент
- Знаешь, что такое HTML, CSS, сборка и localhost, и узнаёшь эти слова в отчёте агента
- Заранее записал, как поймёшь, что страница готова
- Факты на странице (адрес, часы, телефон) сверены с реальными
Агент пишет, ты отвечаешь. Любая строка на твоём сайте — твоя, даже если её написала нейросеть.