Вайбкодинг: как собрать первый проект с ИИ и проверить, что он работает

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

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

Инструмент выбирают по способу работы

Подход	Когда удобен	Что проверить
Браузерный конструктор, например Bolt или Lovable	Быстро увидеть прототип	Экспорт кода, ограничения проекта, размещение и отдельные расходы на работу приложения
Редактор с ИИ, например Cursor	Работать с локальными файлами	Доступные модели, права на команды и просмотр изменений
Агент разработки, например Codex или Claude Code	Поручать изменения и проверки в проекте	Доступ в выбранном плане, разрешения и ограничения запуска
Среда с собственным размещением	Собирать приложение рядом с инфраструктурой	Что оплачивается отдельно и можно ли перенести проект

Не путайте бесплатный чат, кредиты на сборку и ресурсы работающего приложения. Условия доступа и регионы меняются. Перед выбором проверьте официальные страницы Bolt, Lovable, Cursor, Codex или Claude. У российского сервиса SourceCraft также нужно различать действующие условия продуктов. Один список старых цен не поможет выбрать инструмент надолго.

Первый проект за семь шагов

1. Напишите небольшое задание

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

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

2. Подготовьте папку и понятный запуск

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

3. Соберите минимальную версию

Начните с содержимого и работающих переходов. Проверьте, что страница открывается по локальному адресу, а тексты соответствуют заданию. До сложной анимации убедитесь, что заголовки, услуги и контактный блок вообще на месте.

4. Меняйте по одному поведению

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

5. Сохраняйте рабочие версии

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

6. Проверьте поведение и данные

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

7. Примите локальный результат

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

Почему файл .env не делает ключ безопасным

Секрету недостаточно сменить место хранения. Если код отправляет его в браузер, посетитель сможет его получить. Например, документация Vite прямо предупреждает: переменные с префиксом VITE_ доступны клиентскому коду и не должны содержать секреты. Для секретных обращений нужен правильно настроенный серверный компонент.

В репозиторий добавляют пример переменных без значений, а реальные секреты исключают из отслеживания. Добавление файла в .gitignore не удаляет уже опубликованный ключ из истории. При утечке ключ отзывают или заменяют у поставщика; простого удаления строки недостаточно.

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

Десять проверок перед показом

1. Тексты и изображения соответствуют реальной задаче, учебные примеры обозначены.
2. Каждая кнопка делает именно то, что обещает.
3. Нет неожиданного горизонтального прокручивания на узком экране.
4. Основные действия доступны с клавиатуры.
5. Нет секретов в файлах, истории, браузерном коде и журналах.
6. Формы отсутствуют либо имеют проверенный путь обработки и понятные правила.
7. Внешние запросы и зависимости известны владельцу проекта.
8. Расходы наблюдаемы; ограничения настроены там, где сервис действительно их поддерживает.
9. Есть сохранённая версия и способ отката.
10. Другой человек может запустить проект по инструкции без ваших личных файлов.

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

В инструкции сохраните назначение проекта, команды установки и запуска, требуемые переменные без значений и известные ограничения. Если система работает только в уже открытой сессии автора, воспроизводимый запуск ещё не проверен.

Хороший итог первого опыта – небольшой проект, который вы умеете запустить, объяснить и исправить. В БАЗЕ практику можно строить на конкретных связках с ИИ-куратором, не подменяя проверку работоспособности эффектной демонстрацией.