Вайбкодинг: что это и как начать на небольшой задаче
Что такое вайбкодинг и как попробовать его на небольшом приложении: задача, запрос к ИИ, проверка поведения и исправление ошибок.
Вайбкодингом обычно называют создание программы через описание желаемого результата ИИ: человек задаёт задачу, смотрит работающую версию и уточняет изменения. У термина нет единой технической спецификации. Для практики полезнее заранее определить, какую часть работы вы поручаете модели и как будете проверять результат.
Начните с приложения, которое легко проверить целиком. Например, локальный список идей для статей без регистрации, платежей и внешних сервисов.
Мой подход. Я бы выбирал первый проект так, чтобы самому понимать, что значит «работает». Список идей удобен: запись добавляется, сохраняется и удаляется. Если результат нельзя проверить без второго эксперта, для первого опыта задача слишком велика.
Выберите среду для первого проекта
Если хотите работать с файлами и видеть изменения кода, попробуйте редактор с агентом, например Cursor. Если важнее быстро описать веб-приложение и посмотреть результат, можно проверить Lovable. Их официальные руководства помогут уточнить доступные режимы в текущей версии. Cursor, Lovable.
Выбор среды не отменяет проверки. Красивое приложение может терять данные при обновлении страницы или сохранять пустые записи.
Для редактора с агентом заранее выделите отдельную папку проекта. Сформулируйте задачу и попросите объяснить способ запуска. Если инструмент предлагает новые библиотеки, сервер и базу данных для простого списка, уточните, какую потребность закрывает каждый компонент. На первом круге достаточно проверить основное поведение.
Опишите поведение до внешнего вида
Сделай локальный список идей для статей в одном HTML-файле.
Поле ввода, кнопка «Добавить», список, удаление отдельной идеи.
Пустые и состоящие только из пробелов записи не добавляются.
Одинаковые названия допустимы; у каждой записи свой идентификатор.
Сохраняй данные в localStorage и восстанавливай при открытии.
Не подключай внешние библиотеки и сервер. Объясни, как открыть файл.После первой версии попросите объяснить, где хранятся записи и что происходит при удалении. Локальное хранение в браузере не означает синхронизацию между устройствами. Очистка данных браузера может удалить список; для настоящей рабочей базы позже понадобится экспорт или другое хранилище.
Для сравнения есть готовое приложение в одном HTML-файле. В архиве — index.html и инструкция запуска. Оно добавляет и удаляет идеи, хранит список в браузере и экспортирует записи в JSON. Можно сначала пройти проверки на готовом варианте, затем попросить ИИ создать свою версию по тому же заданию.
Пройдите шесть проверок
Добавьте «Промпты для интервью», обновите страницу и найдите запись. Попробуйте добавить пробелы. Создайте два одинаковых названия и удалите одно: второе должно остаться. Добавьте строку <b>идея</b>: она должна отображаться как текст, а не превращаться в HTML. Затем откройте страницу на узком экране и добавьте запись клавиатурой.
Описывайте ошибку наблюдением: «после удаления первой из двух одинаковых записей исчезли обе». Просьба «почини всё» не сообщает, какое поведение считать правильным.
| Проверка | Что должно произойти |
|---|---|
| Добавить только пробелы | Запись не создаётся, появляется понятное сообщение |
| Обновить страницу | Сохранённые идеи остаются |
| Удалить одну из двух одинаковых | Удаляется только выбранная запись |
| Ввести HTML-тег | Показывается обычный текст |
| Добавить с клавиатуры | Клавиша Enter отправляет форму |
| Экспортировать список | Скачивается JSON с текущими записями |
Если хранение недоступно, интерфейс должен сообщить об этом. «Добавлено» без сохранения опасно: пользователь ожидает найти запись после закрытия вкладки. В готовом примере изменение списка применяется после успешной записи в хранилище.
Моя оценка. Самая полезная привычка в вайбкодинге — описывать ошибку через действие и наблюдаемый результат. «Нажал удалить первую запись, исчезли две» даёт модели конкретный дефект. «Всё сломалось» оставляет слишком много вариантов для догадок.
Сохраняйте рабочие версии
Перед заметным изменением сохраните копию файла или зафиксируйте версию в Git. Вносите одну функциональную правку за раз: сначала экспорт, затем фильтр, затем оформление. После каждой правки повторяйте проверки сохранения и удаления — новая функция может затронуть старую.
Когда приложение начнут использовать другие люди, отдельно разберите доступы, хранение и восстановление данных. Это следующий масштаб задачи: сохранение в одном браузере уже не отвечает требованиям командной работы.
В комплекте задания есть спецификация и тестовые сценарии, а готовый вариант приложения помогает сравнить поведение. Следующий шаг — выбрать инструмент для программирования под вашу среду и добавить одну полезную функцию, сохранив предыдущие проверки.
Преврати ИИ-инструменты в рабочую систему
«Быстрый старт в AI»: практические воркшопы по AI-инструментам, прототипам и автоматизации. Собираем результат, который можно применить в работе.
21 практических воркшопов · записи · вопросы автору в чате
Посмотреть программу курса ↗