Вайб-кодинг с Claude Code: первый проект с нуля — пошаговая инструкция для начинающих

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

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

Что такое вайб-кодинг простыми словами

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

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

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

	Классическое программирование	Вайб-кодинг
Кто пишет код	Человек, строка за строкой	ИИ-агент по описанию человека
Главный навык	Знание языка и инструментов	Умение чётко поставить задачу и проверить результат
Скорость первой версии	Часы или дни	Минуты
Понимание кода	Полное	Зависит от вас: от нулевого до полного
Где работает лучше всего	Сложные и ответственные системы	Прототипы, личные инструменты, учебные проекты

Почему Claude Code подходит для вайб-кодинга

Вайб-кодить можно в разных инструментах, и они делятся на три группы:

Тип инструмента	Примеры	Кому подходит
Браузерные конструкторы	Lovable, v0, Replit	Тем, кто хочет результат без установки программ
Редакторы с ИИ-агентом	Cursor, VS Code с GitHub Copilot	Тем, кто уже пишет код и хочет ускориться
Агенты, которые работают с вашими файлами	Claude Code, OpenAI Codex	Тем, кто хочет настоящий проект на своём компьютере

Claude Code относится к третьей группе. Вы открываете папку проекта, пишете задачу — и агент сам создаёт файлы, редактирует их, запускает команды и показывает изменения на подтверждение. Для первого проекта это даёт три преимущества:

• Проект настоящий. Файлы лежат у вас на компьютере, а не внутри чужого сервиса. Их можно открыть, прочитать, сохранить в Git и выложить в интернет.
• Вы видите каждый шаг. Агент спрашивает разрешения перед изменением файлов и запуском команд, поэтому ничего не происходит «за спиной».
• Навыки переносятся в работу. Точно так же с Claude Code работают разработчики на реальных проектах — вы учитесь не игрушечному процессу.

Подробно о возможностях инструмента — в нашем материале «Claude Code: полное руководство в 2026 году», а о том, как он выглядит рядом с Cursor, Codex и Copilot, — в обзоре AI-инструментов для программистов.

Что можно вайб-кодить, а что не стоит

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

Хорошо подходит	Лучше не начинать с этого
Личные инструменты: трекеры, калькуляторы, заметки	Всё с оплатой и банковскими картами
Простые сайты-визитки и лендинги	Регистрация, пароли, личные данные пользователей
Браузерные игры	Медицинские, юридические, финансовые расчёты
Прототип идеи, чтобы показать её другим	Большие системы, которые кто-то будет поддерживать годами
Скрипты, автоматизирующие вашу рутину	Код, который вы не сможете проверить и никто не проверит за вас

Что нужно перед началом

• Компьютер с Windows, macOS или Linux и современный браузер.
• Аккаунт Claude с платным тарифом. Claude Code входит в подписки Pro, Max, Team и Enterprise либо оплачивается по факту использования через Claude Console. Бесплатный тариф claude.ai доступа к Claude Code не даёт.
• Git — чтобы сохранять версии проекта. Если ещё не работали с ним, поможет гайд по Git для начинающих.
• 30–60 минут спокойного времени.

Установите Claude Code. На macOS, Linux или в WSL выполните в терминале:

curl -fsSL https://claude.ai/install.sh | bash

В Windows откройте PowerShell и выполните:

irm https://claude.ai/install.ps1 | iex

Проверьте, что всё установилось:

claude --version

Первый проект: трекер привычек за 7 шагов

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

Шаг 1. Опишите результат, а не код

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

• Для кого и зачем? Для себя, чтобы не забывать о ежедневных привычках.
• Что видно на экране? Поле для новой привычки, список привычек, под каждой — семь дней.
• Что можно сделать? Добавить привычку, отметить день, удалить привычку.
• Какие ограничения? Без сервера, без библиотек, работает после двойного клика по файлу.

Это и есть ваше техническое задание. Умение так разложить идею — половина успеха в вайб-кодинге.

Шаг 2. Создайте папку и запустите Claude Code

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

mkdir habit-tracker
cd habit-tracker
git init
claude

Первая команда создаёт папку, вторая переходит в неё, третья включает в ней Git, четвёртая запускает Claude Code. При первом запуске он попросит войти в аккаунт Claude — следуйте подсказкам на экране.

Шаг 3. Сначала попросите план

Не просите код сразу. Пусть агент покажет, как он понял задачу, — исправить план намного дешевле, чем переписывать готовое приложение.

Я новичок и хочу сделать свой первый проект — трекер привычек.

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

Ограничения: только HTML, CSS и JavaScript без библиотек и без сервера.
Три файла: index.html, style.css, app.js. Интерфейс на русском,
должен удобно выглядеть на телефоне.

Пока не пиши код. Составь короткий план и задай мне вопросы,
если что-то непонятно.

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

Шаг 4. Получите первую версию

Когда план вас устраивает, дайте команду:

План подходит. Создай первую версию. В конце коротко напиши,
какие файлы ты создал и как мне открыть приложение.

Claude Code попросит разрешения создать файлы — прочитайте, что именно он собирается сделать, и подтвердите. Через минуту-две в папке появятся три файла. Откройте index.html двойным кликом — приложение запустится в браузере.

Шаг 5. Проверьте руками

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

• Добавьте привычку. Появилась ли она в списке?
• Попробуйте добавить пустое название. Есть ли понятное сообщение об ошибке?
• Добавьте одну и ту же привычку дважды. Что происходит?
• Отметьте сегодняшний и вчерашний день. Показывает ли серия «2»?
• Обновите страницу. Сохранились ли привычки и отметки?
• Сузьте окно браузера до ширины телефона. Всё ли читается?
• Удалите привычку. Запросило ли приложение подтверждение?

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

Есть проблема. Я отметил вчера и сегодня, но серия показывает 1,
а должна быть 2. Найди причину, объясни её простыми словами и исправь.

Шаг 6. Сохраните рабочее состояние в Git

Как только версия работает — зафиксируйте её. Это ваша страховка: если следующее изменение всё сломает, вы вернётесь назад за одну команду.

Сделай git commit с текущим состоянием проекта. Сообщение — короткое
и понятное, на русском.

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

Шаг 7. Улучшайте маленькими шагами

Теперь развивайте проект. Правило одно: одно изменение — один промпт — одна проверка. Если попросить пять вещей сразу и одна из них сломается, вы не поймёте, какая именно.

Добавь тёмную тему с переключателем в правом верхнем углу.
Выбор темы должен сохраняться после обновления страницы.

Добавь под заголовком строку со статистикой: сколько привычек
выполнено сегодня из общего количества.

Сделай так, чтобы название привычки можно было отредактировать
двойным кликом по нему.

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

Как читать код, который написал Claude

Приложение работает — и именно сейчас лучший момент, чтобы начать учиться. Откройте app.js в любом редакторе. В нашей версии трекера сохранение данных выглядит так:

const STORAGE_KEY = "habits";

function loadHabits() {
  try {
    const saved = JSON.parse(localStorage.getItem(STORAGE_KEY));
    return Array.isArray(saved) ? saved : [];
  } catch {
    return [];
  }
}

function saveHabits() {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(habits));
}

Даже без опыта здесь можно догадаться о главном: одна функция читает список привычек из хранилища браузера, вторая — записывает его туда. Остальное объяснит сам агент:

Объясни файл app.js так, будто я впервые вижу JavaScript.
Иди функция за функцией: что она делает и зачем нужна.
Не меняй код.

Ещё три полезных запроса для обучения:

• «Какие три вещи в этом коде мне стоит изучить в первую очередь и почему?»
• «Что в этом коде может сломаться и как бы ты это проверил?»
• «Дай мне маленькое упражнение: что я могу изменить в коде сам, чтобы лучше его понять?»

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

Шаблон промпта для вайб-кодинга

Сохраните этот шаблон — он подходит для любого маленького проекта:

Кто я: [новичок / знаю основы HTML / пишу на Python].

Что делаю: [одно предложение о проекте и для кого он].

Что должно уметь:
- [действие 1]
- [действие 2]
- [действие 3]

Ограничения: [технологии, без сервера, язык интерфейса, устройства].

Как я проверю, что готово: [2–3 конкретные проверки].

Сначала составь план и задай вопросы. Код пиши после моего подтверждения.

Самая важная строка — «Как я проверю, что готово». Когда у агента есть чёткая финишная черта, он сам проверяет свою работу и реже останавливается на полпути.

Типичные ошибки начинающих в вайб-кодинге

Ошибка	Что происходит	Что делать вместо этого
Размытый промпт	Агент строит не то, что вы представляли	Описывайте экран, действия и ограничения
Слишком большой первый проект	Проект разрастается, и вы теряете контроль	Начинайте с одной страницы без сервера
Несколько изменений в одном промпте	Непонятно, что именно сломалось	Одно изменение — одна проверка
Работа без Git	Неудачное изменение стирает рабочую версию	Коммит после каждого рабочего шага
Подтверждение не читая	Агент выполняет команды, которых вы не понимаете	Читайте запрос на разрешение; не знаете — спросите
Слепое доверие к «готово»	Ошибки находят уже пользователи	Проверяйте руками по списку
Бесконечное «исправь ещё раз»	Агент ходит по кругу, код портится	Вернитесь к последнему коммиту и переформулируйте задачу
Секреты в промптах и коде	Пароли и ключи попадают в чужие руки	Никогда не вставляйте их в чат и в репозиторий

Нужно ли учить программирование, если есть вайб-кодинг

Короткий ответ: да, и вайб-кодинг — отличный способ начать. Он снимает страх чистого листа: через час у вас есть работающий результат, а не три главы теории. Но у него есть потолок.

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

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

Что учить дальше

Куда двигаться после первого проекта, зависит от цели.

Хотите уверенно работать с Claude и ИИ-агентами. В формате курсов по подписке Prog Academy есть целая линейка коротких практических курсов:

• Claude Code: практический курс для начинающих — от первой сессии до собственных настроек, CLAUDE.md, MCP, навыков, хуков, субагентов и плагинов.
• Claude Chat: практический курс для начинающих — если ещё не работали с Claude и хотите начать с обычного чата.
• Claude Cowork: поручайте ИИ целые задачи — агентная работа с файлами и документами без кода.
• Claude in Chrome: ИИ-агент в браузере для начинающих — как поручать агенту веб-задачи и контролировать его.
• Claude Design: визуальная работа без дизайнерского образования — чтобы ваши проекты ещё и хорошо выглядели.
• Как работает веб: от URL до HTTPS, API и безопасности — база, без которой трудно понять, что именно строит агент.
• Кибербезопасность с ИИ — как безопасно работать с искусственным интеллектом и не подвергать риску себя и пользователей.

Хотите зарабатывать на автоматизации и AI-решениях. Курс AI Automation ведёт от ChatGPT и Claude к Make, n8n, AI-агентам и вайб-кодингу с Claude Code и OpenAI Codex. Что это за профессия — в гиде «AI Automation: полный гид по профессии».

Хотите понимать код. Начните с бесплатных курсов JavaScript, Python и Git, а если захочется сделать следующий шаг от вайб-кодинга к собственному агенту — попробуйте туториал «Как создать первого AI-агента на Python».

Частые вопросы

Что такое вайб-кодинг простыми словами?

Вайб-кодинг (vibe coding) — это способ создавать программы, когда человек описывает желаемый результат обычным языком, а код пишет ИИ-агент. Вы ставите задачу, смотрите на результат и говорите, что изменить. Термин предложил Андрей Карпати в начале 2025 года.

Можно ли вайб-кодить без знаний программирования?

Да, простой проект — трекер, калькулятор, сайт-визитку — можно собрать без опыта, если чётко описать результат и проверять его руками. Но чтобы развивать проект, исправлять ошибки и отвечать за безопасность, понадобятся основы: как работает веб, HTML, CSS, JavaScript или Python и Git.

Claude Code бесплатный?

Отдельной платы за Claude Code нет, но он доступен только с платным тарифом Claude — Pro, Max, Team или Enterprise — либо с оплатой по факту использования через Claude Console. Бесплатный тариф claude.ai доступа к Claude Code не даёт.

Какой инструмент выбрать для вайб-кодинга новичку?

Если нужен результат без установки программ, подойдут браузерные конструкторы вроде Lovable, v0 или Replit. Если вы хотите настоящий проект на своём компьютере и навыки, которые переносятся в работу, выбирайте агента, который работает с вашими файлами, — например, Claude Code.

Какой первый проект выбрать для вайб-кодинга?

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

Чем вайб-кодинг отличается от обычного программирования?

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

Безопасен ли код, написанный ИИ?

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

Заменит ли вайб-кодинг программистов?

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

Заключение

Вайб-кодинг — это не способ обойтись без знаний, а самый быстрый способ начать их получать. За один вечер вы прошли полный цикл разработки: сформулировали задачу, получили план, собрали первую версию, проверили её, сохранили в Git и сделали несколько улучшений. Именно так — маленькими проверенными шагами — с Claude Code работают и опытные разработчики.

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