Вайб-кодинг: создавай продукты с помощью AI, даже если никогда не писал код
- -
- 100%
- +
2.5. Ограничения AI: что он не может (пока)
Было бы нечестно рассказывать только о достоинствах. У AI-моделей есть реальные ограничения, которые вайбкодер должен знать, чтобы не попасть в ловушку.
Галлюцинации. Иногда модель уверенно генерирует код, который использует несуществующие функции или библиотеки. Например, она может придумать метод array.removeDuplicatesInPlace(), которого нет в JavaScript. Она не врёт намеренно — она генерирует «правдоподобное продолжение», и иногда это продолжение не соответствует реальности.
Как с этим бороться? Всегда запускайте код. Если он не работает — покажите ошибку Claude, и он исправит.
Отсутствие памяти между сессиями. Каждый новый чат — это чистый лист. Claude не помнит, что вы обсуждали вчера, если только вы не используете специальные инструменты для сохранения контекста (мы поговорим о них позже). Это значит, что в начале каждого рабочего дня нужно заново «ввести в курс дела» — показать файлы проекта, объяснить, над чем работаете.
Нет доступа к интернету в реальном времени. Claude при работе через Cursor не ходит в интернет, чтобы проверить, существует ли библиотека или какая у неё актуальная версия. Он полагается на знания, полученные при обучении. Иногда эти знания устаревают. Новая библиотека, вышедшая на прошлой неделе, может быть ему неизвестна.
Как с этим бороться? Если Claude предлагает использовать библиотеку, быстро проверьте на npmjs.com или pypi.org, что она существует и поддерживается. Это занимает 30 секунд и может сэкономить часы отладки.
Ограниченная «логическая цепочка». Модели хороши в генерации кода по паттернам, но могут ошибаться в сложной бизнес-логике. Если у вас система скидок с десятью условиями — лучше разбить задачу на части, а не просить всё сразу. AI отлично справляется с каждым шагом, но может запутаться в сложной комбинации.
Не понимает ваш бизнес. AI знает, как написать код. Он не знает, кто ваши клиенты, что им нужно и как устроен ваш рынок. Продуктовое мышление — это ваша работа. AI — исполнитель, вы — продюсер.
2.6. Этика и ответственность: кто автор кода?
Этот вопрос звучит философски, но имеет вполне практические последствия.
Авторское право. На момент написания книги (2026) юридический статус кода, сгенерированного AI, остаётся в серой зоне. В большинстве юрисдикций AI не может быть автором — авторские права принадлежат человеку, который сформулировал задачу и направлял процесс. То есть вам. Но законодательство продолжает развиваться, и в разных странах ситуация может отличаться.
Что это значит на практике? Если вы создаёте коммерческий продукт с помощью AI — вы имеете на это право. Вы можете продавать код, созданный при участии Claude. Но стоит следить за обновлениями в законодательстве вашей страны.
Ответственность за качество. Вот здесь принципиально важный момент. Код написал AI, но ответственность за его работу несёте вы. Если ваш сайт взломали, потому что AI оставил уязвимость — виноваты вы, не Anthropic. Если бот отправил клиентам неправильную информацию — отвечаете вы.
Это не повод бояться. Это повод быть внимательным. В главе 10 мы подробно разберём практики безопасности и тестирования, которые помогут минимизировать риски.
Этичное использование. AI — мощный инструмент, и его можно использовать по-разному. Создавать полезные продукты, автоматизировать рутину, помогать людям — это прекрасно. Создавать спам-сайты, копировать чужие продукты, генерировать обманчивый контент — это не путь вайбкодера.
Мы все формируем культуру вайбкодинга прямо сейчас. От того, как мы используем эти инструменты, зависит, как к ним будут относиться завтра.
Прозрачность. Стоит ли говорить клиентам, что вы используете AI? Мнения расходятся. Моя позиция: это ваш инструмент, как Photoshop для дизайнера. Дизайнер не обязан говорить клиенту: «Я использовал Photoshop». Но если клиент спрашивает напрямую — лучше быть честным. Честность укрепляет доверие, а доверие — основа долгосрочного бизнеса.
Итоги главы 2
В этой главе мы заглянули под капот AI:
— LLM — это модель, обученная на огромном массиве текстов, которая предсказывает наиболее уместное продолжение на основе вашего запроса.
— Токены, контекст и механизм внимания — три концепции, которые объясняют, как модель обрабатывает ваши промпты.
— Claude выделяется среди конкурентов точностью следования инструкциям, чистотой кода и длинным контекстом.
— У AI есть реальные ограничения: галлюцинации, отсутствие памяти, незнание свежих данных. Зная о них, вы можете их компенсировать.
— Юридически вы — автор кода. Этически вы — ответственны за результат.
В следующей главе мы наконец перейдём от теории к практике. Установим Cursor, подключим Claude и напишем первый код — вернее, попросим AI написать его за нас.
Задание к главе: Откройте claude.ai и проведите небольшой эксперимент. Задайте один и тот же вопрос — например, «Напиши функцию на JavaScript, которая считает факториал числа» — и посмотрите на ответ. Затем спросите: «Объясни этот код построчно, как будто мне 10 лет». Обратите внимание, насколько по-разному модель может объяснять одно и то же в зависимости от вашего запроса. Это и есть сила промптинга, которую мы освоим в главе 4.
Глава 3. Ваше рабочее место: Cursor + Claude
«Дайте мне шесть часов, чтобы срубить дерево, и первые четыре я буду точить топор.»
— приписывается Аврааму Линкольну
Хороший инструмент — половина успеха. В этой главе мы установим и настроим всё, что нужно для продуктивной работы. К концу главы вы напишете — вернее, попросите AI написать — ваш первый работающий проект.
3.1. Что вам понадобится
Давайте начнём с хорошей новости: вам не нужен мощный компьютер. Cursor — это редактор кода, а не видеоигра. Весь «тяжёлый» AI-вычислительный процесс происходит на серверах Anthropic и Cursor, а не на вашем компьютере.
Минимальные требования:
Компьютер. Любой ноутбук или настольный ПК, выпущенный после 2018 года. Windows 10/11, macOS 11+, или Linux. Минимум 4 ГБ оперативной памяти (рекомендуется 8 ГБ). Минимум 2 ГБ свободного места на диске.
Интернет. Стабильное подключение обязательно — без него AI работать не будет. Скорость не критична: хватит даже мобильного интернета, хотя за Wi-Fi вы будете благодарны, когда начнёте загружать библиотеки.
Аккаунты. Вам понадобится создать аккаунт на Cursor (cursor.com) и, опционально, на Anthropic (claude.ai). Cursor предоставляет доступ к Claude через свою подписку, так что отдельный аккаунт Claude нужен скорее для экспериментов и чтения документации.
Бюджет. Cursor предлагает бесплатный тариф с ограниченным количеством запросов — этого хватит для обучения. Для серьёзной работы потребуется подписка Pro ($20/месяц на момент написания книги). Считайте это инвестицией: один оплаченный заказ на лендинг окупит подписку на год.
3.2. Установка и настройка Cursor: пошаговая инструкция
Cursor — это редактор кода, построенный на основе VS Code (популярный бесплатный редактор от Microsoft), но с глубоко встроенным AI. Если вы когда-нибудь видели VS Code — интерфейс покажется знакомым. Если нет — не волнуйтесь, мы всё разберём.
Шаг 1. Скачайте Cursor.
Зайдите на cursor.com и нажмите кнопку загрузки. Сайт автоматически определит вашу операционную систему и предложит нужную версию.
Шаг 2. Установите.
На Windows: запустите скачанный .exe файл и следуйте инструкциям установщика. На macOS: откройте .dmg файл и перетащите Cursor в папку Applications. На Linux: загрузите .AppImage или .deb файл, в зависимости от вашего дистрибутива.
Шаг 3. Первый запуск.
При первом запуске Cursor предложит:
— Импортировать настройки из VS Code (если он у вас был — соглашайтесь).
— Создать аккаунт или войти через Google/GitHub.
— Выбрать тему оформления (тёмную или светлую — это чисто эстетический выбор, но большинство разработчиков предпочитают тёмную, она меньше утомляет глаза).
Шаг 4. Активируйте подписку (опционально).
Бесплатный тариф даёт ограниченное количество «быстрых» запросов к AI в день. Для обучения этого хватит. Когда почувствуете, что упираетесь в лимит — время перейти на Pro.
3.3. Подключение Claude к Cursor
По умолчанию Cursor может использовать несколько моделей. Нам нужно убедиться, что Claude — наша основная модель.
Откройте настройки Cursor: нажмите Cmd + , на Mac или Ctrl + , на Windows/Linux. Перейдите в раздел «Models» или «AI Settings».
Здесь вы увидите список доступных моделей. Убедитесь, что Claude Sonnet выбран как модель по умолчанию для Composer и Chat. Для сложных задач можно переключаться на Claude Opus — он мощнее, но медленнее и дороже по квоте.
Рекомендация для начала: используйте Claude Sonnet для повседневной работы. Он быстрый и достаточно умный для 90% задач. Переключайтесь на Opus, когда сталкиваетесь с по-настоящему сложной архитектурной задачей или когда Sonnet не справляется.
3.4. Первое знакомство с интерфейсом
Интерфейс Cursor может показаться пугающим, если вы никогда не работали с редактором кода. Давайте разберём его по частям.
Боковая панель (слева). Здесь отображается структура вашего проекта — папки и файлы, как в проводнике Windows или Finder на Mac. Вы кликаете на файл — он открывается в центральной области.
Центральная область. Здесь вы видите и редактируете код. Каждый открытый файл — это вкладка наверху, как в браузере. Вы можете открыть несколько файлов одновременно.
Терминал (внизу). Это командная строка. Звучит страшно, но на практике вы будете использовать её для простых вещей: запуск проекта, установка библиотек, деплой. И даже эти команды вам обычно подскажет Claude.
Чтобы открыть терминал, нажмите ` Ctrl + `` (клавиша с обратной кавычкой, слева от цифры 1).
AI-панель (справа или снизу). Это чат с Claude. Здесь вы будете проводить большую часть времени. Открывается по Cmd + L (Mac) или Ctrl + L (Windows/Linux).
Не пытайтесь запомнить все горячие клавиши сразу. Запомните три:
— Cmd/Ctrl + L — открыть чат с AI
— Cmd/Ctrl + I — открыть Composer (мультифайловое редактирование)
— Ctrl + `` — открыть терминал
Остальное придёт с практикой.
3.5. Tab, Chat, Composer, Agent: четыре режима работы
Cursor предлагает четыре способа взаимодействия с AI. Каждый подходит для своих ситуаций.
Tab (автодополнение).
Самый простой режим. Вы просто пишете код, и Cursor подсказывает продолжение серым текстом. Нажимаете Tab — подсказка вставляется. Это работает как «предиктивный ввод» на телефоне, только для кода.
Когда использовать: когда вы уже в процессе написания кода и нужно быстро дополнить строку или блок. Tab особенно хорош для рутины — импорт библиотек, типовые конструкции, повторяющиеся паттерны.
Chat (чат).
Разговор с Claude в боковой панели. Вы задаёте вопрос или описываете задачу, Claude отвечает — объясняет, предлагает решение, генерирует код. Код из чата можно вставить в файл одним кликом.
Когда использовать: когда нужно обсудить подход, задать вопрос, разобраться в ошибке, попросить объяснение. Chat — это ваш «разговор с наставником».
Composer (композитор).
Это самый мощный инструмент для вайбкодера. Вы описываете, что хотите, и Composer вносит изменения сразу в несколько файлов одновременно. Он показывает diff — какие строки будут добавлены, удалены или изменены — и вы подтверждаете или отклоняете каждое изменение.
Когда использовать: когда нужно создать новый компонент, добавить фичу, исправить баг, который затрагивает несколько файлов. Composer — это ваш «главный рабочий инструмент».
Agent (агент).
Начиная с версии Cursor 3.0, появился режим Agent — AI, который работает более автономно. Он может сам читать файлы, выполнять команды в терминале, устанавливать библиотеки, запускать тесты и итеративно исправлять ошибки. Вы описываете задачу высокого уровня, а Agent сам решает, как её выполнить.
Когда использовать: для больших задач, где вы доверяете AI действовать самостоятельно. Например: «Добавь аутентификацию через Google в наш проект, используя Supabase Auth».
Background Agents идут ещё дальше — они работают в фоне, пока вы занимаетесь другими делами, и присылают результат, когда закончат.
Для новичка рекомендуемый путь освоения: Chat → Composer → Agent → Background Agents. Начните с простого, наращивайте доверие к AI постепенно.
3.6. Claude Code: работа через командную строку
Помимо Cursor, у Anthropic есть отдельный инструмент — Claude Code. Это способ работать с Claude прямо из терминала (командной строки), без графического интерфейса.
Зачем это нужно? Claude Code даёт максимальный контроль и гибкость. Он может читать файлы на вашем компьютере, выполнять команды, работать с Git — всё через текстовый диалог. Многие опытные вайбкодеры используют его для сложных задач, потому что он работает ближе к «сырому» Claude без ограничений интерфейса.
Для установки Claude Code на macOS или Linux откройте терминал и выполните:
npm install -g @anthropic-ai/claude-code
Для этого вам понадобится Node.js — мы установим его чуть позже, когда начнём работать над проектами.
На начальном этапе Claude Code вам не обязателен — Cursor покрывает все потребности. Но знать о его существовании полезно: когда вы вырастете как вайбкодер, он станет мощным дополнением к вашему арсеналу.
3.7. Настройка для комфортной работы
Несколько настроек, которые сделают вашу жизнь приятнее.
Размер шрифта. В настройках Cursor (Cmd/Ctrl + ,) найдите «Font Size» и установите комфортный размер. Стандарт — 14px, но если у вас большой монитор, можно увеличить до 16–18px. Не стесняйтесь делать шрифт крупным — глаза скажут спасибо.
Тема оформления. Зайдите в Cmd/Ctrl + K, Cmd/Ctrl + T и выберите тему. Для работы вечером рекомендуется тёмная тема (Dark+, One Dark Pro, GitHub Dark). Для дневной работы при ярком свете — светлая (Light+, GitHub Light).
Автосохранение. Включите автоматическое сохранение файлов: Settings → «Auto Save» → выберите «afterDelay». Это избавит от классической ситуации, когда вы забыли сохранить файл и не понимаете, почему изменения не работают.
Расширения. Cursor поддерживает расширения от VS Code. Несколько полезных для начала:
— Prettier — автоматическое форматирование кода. Нажали сохранить — код стал красивым.
— Error Lens — показывает ошибки прямо в строке кода, а не только в панели проблем.
— Auto Rename Tag — при переименовании HTML-тега автоматически переименовывает закрывающий тег.
Установка расширений: нажмите Cmd/Ctrl + Shift + X, найдите нужное по названию, нажмите Install.
3.8. Ваш первый проект: «Hello, World» по-вайбкодерски
Теория закончилась. Давайте создадим что-то реальное.
Традиционно первая программа каждого разработчика выводит на экран «Hello, World». Мы пойдём дальше и создадим полноценную персональную страницу-визитку. С нуля. За 10 минут. Не написав ни строчки кода вручную.
Шаг 1. Создайте папку для проекта.
Откройте терминал в Cursor (` Ctrl + ``) и выполните:
mkdir my-first-vibe-project
cd my-first-vibe-project
Это создаст новую папку и перейдёт в неё. Затем откройте эту папку в Cursor: File → Open Folder → выберите созданную папку.
Шаг 2. Откройте Composer.
Нажмите Cmd/Ctrl + I для открытия Composer. Это ваш главный инструмент.
Шаг 3. Напишите промпт.
Вот ваш первый промпт. Скопируйте его в Composer:
Создай одностраничный сайт-визитку на чистом HTML + CSS.
Требования:
- Тёмная цветовая схема с акцентным цветом #6366f1 (индиго)
- В шапке: моё имя (подставь "Имя Фамилия"), должность "Вайбкодер"
- Секция "Обо мне" с коротким текстом-заглушкой
- Секция "Навыки" с 4 карточками: Cursor, Claude, React, Tailwind
- Секция "Контакты" с иконками email и Telegram
- Адаптивный дизайн (хорошо выглядит на телефоне)
- Плавные анимации при прокрутке (CSS-only)
- Файл: index.html (всё в одном файле, включая CSS)
Нажмите Enter (или кнопку отправки).
Шаг 4. Наблюдайте магию.
Claude прочитает ваш промпт и создаст файл index.html. Вы увидите, как появляется код — HTML-разметка, CSS-стили, всё в одном файле. Composer покажет вам превью изменений. Нажмите «Accept» (принять).
Шаг 5. Посмотрите результат.
Откройте файл index.html в браузере. В Cursor кликните правой кнопкой на файл → «Open with Live Server» (если установлено расширение Live Server). Или просто перетащите файл из папки в окно браузера.
Вы увидите стильный, адаптивный сайт-визитку. С анимациями, карточками, правильной типографикой. Ни одной строчки вы не написали вручную.
Шаг 6. Доработайте.
Теперь самое интересное — итерация. Вернитесь в Composer и напишите:
Измени визитку:
- Имя: [ваше настоящее имя]
- Добавь градиентный фон в шапку
- В секцию навыков добавь прогресс-бары с процентами
- Добавь кнопку "Скачать резюме"
Claude внесёт точечные изменения. Обновите браузер — и увидите обновлённый сайт.
Поздравляю. Вы только что создали свой первый проект как вайбкодер.
Обратите внимание на процесс: вы ни разу не задумались о синтаксисе HTML или CSS. Вы думали о том, что хотите увидеть, а не о том, как это сделать. Вы были продюсером, а AI — исполнителем. Это и есть суть вайбкодинга.
Итоги главы 3
В этой главе мы перешли от теории к практике:
— Установили и настроили Cursor — наш основной инструмент для вайбкодинга.
— Подключили Claude как модель по умолчанию.
— Разобрали интерфейс: боковая панель, центральная область, терминал, AI-панель.
— Изучили четыре режима работы: Tab, Chat, Composer, Agent — и когда использовать каждый.
— Узнали о Claude Code как альтернативном инструменте для продвинутых.
— Настроили редактор для комфортной работы.
— Создали первый проект — персональный сайт-визитку — без единой строчки кода.
Вы теперь вайбкодер. Начинающий, но уже вайбкодер. В следующей главе мы освоим ваш главный навык — промпт-инженерию. Именно от качества ваших промптов зависит, будет ли AI создавать то, что вам нужно, или что-то «примерно похожее».
Задание к главе: Возьмите сайт-визитку, которую мы создали, и проведите три итерации доработки через Composer. Например: (1) поменяйте цветовую схему, (2) добавьте секцию с портфолио из трёх карточек, (3) добавьте анимацию появления элементов при прокрутке. Каждый раз формулируйте запрос чётко и конкретно. Замечайте, как качество результата зависит от качества вашего промпта.
Часть II. ИСКУССТВО ПРОМПТИНГА
Глава 4. Основы промпт-инженерии
«Качество вашего вывода прямо пропорционально качеству вашего ввода.»
— Старейшее правило программирования, переосмысленное для эпохи AI
Если бы мне нужно было выбрать одну главу из этой книги, которую обязательно нужно прочитать, — это была бы она. Промпт-инженерия — это ваша суперсила как вайбкодера. Два человека могут использовать один и тот же инструмент (Cursor + Claude), но один получит блестящий результат, а другой — посредственный. Разница — в промптах.
4.1. Что такое промпт и почему он решает всё
Промпт — это текст, который вы пишете AI. Буквально «подсказка», «затравка». Но за этим простым словом скрывается целое искусство.
Вот аналогия. Представьте, что у вас есть волшебный джинн, который исполняет желания. Но джинн буквален — он делает ровно то, что вы попросили, а не то, что вы имели в виду.
«Хочу дом» — и вы получаете картонную коробку. Формально — дом.
«Хочу двухэтажный дом с тремя спальнями, кухней-гостиной, гаражом, на участке 10 соток, в стиле скандинавского минимализма, с панорамными окнами, выходящими на юг» — и вы получаете дом мечты.
AI работает так же. Чем точнее вы описываете, что хотите, тем ближе результат к вашему видению.
Но промпт-инженерия — это не только про «писать длинно». Иногда короткий промпт работает лучше длинного. Искусство в том, чтобы дать AI правильное количество правильной информации.
4.2. Анатомия хорошего промпта
Хороший промпт для генерации кода обычно содержит несколько компонентов. Не все из них обязательны в каждом случае, но знать о них полезно.
Роль / контекст. Кто AI в этом диалоге? Что он должен знать о проекте?
Пример: «Ты — опытный фронтенд-разработчик, специализирующийся на React и Next.js. Мы строим SaaS-платформу для управления задачами.»
Задача. Что конкретно нужно сделать?
Пример: «Создай компонент модального окна для подтверждения удаления задачи.»
Требования. Какие есть ограничения и условия?
Пример: «Используй Tailwind CSS для стилей. Компонент должен принимать props: isOpen, onConfirm, onCancel, taskTitle. Добавь анимацию появления. Должен быть доступен с клавиатуры (Escape для закрытия).»
Формат вывода. Как должен выглядеть ответ?
Пример: «Код одним файлом, TypeScript, с комментариями на русском.»
Примеры (опционально). Показать, что вы хотите, на примере.
Пример: «Вот похожий компонент в нашем проекте — придерживайся такого же стиля: [вставка кода]»
Давайте соберём всё вместе:
Ты — опытный React-разработчик. Мы строим SaaS для управления задачами
на Next.js + Tailwind CSS + TypeScript.
Создай компонент ConfirmDeleteModal.
Требования:
- Props: isOpen (boolean), onConfirm (function), onCancel (function), taskTitle (string)
- Tailwind CSS для стилей
- Анимация появления (fade + scale)
- Закрытие по Escape и клику вне модалки
- Иконка предупреждения (используй Lucide React)
- Кнопки "Отмена" (серая) и "Удалить" (красная)
- Доступность: aria-labels, фокус-менеджмент
Стиль кода: TypeScript, комментарии на русском, именование переменных на английском.
Этот промпт даст предсказуемый, качественный результат с первой попытки. Сравните с «Сделай модалку для удаления» — результат тоже будет, но потребуются три-четыре итерации доработки.
4.3. Пять золотых правил промптинга для кода
За год практики вайбкодинга я вывела пять правил, которые работают всегда.
Правило 1: Будьте конкретны, а не абстрактны.
Плохо: «Сделай красивую форму.»
Хорошо: «Сделай форму регистрации с полями: имя, email, пароль, подтверждение пароля. Валидация в реальном времени. Кнопка неактивна, пока все поля не заполнены корректно. Стиль: rounded-xl, тени, градиентная кнопка.»
Конкретика не отнимает время — она экономит его. Вы потратите 2 минуты на подробный промпт вместо 20 минут на переделки.
Правило 2: Одна задача — один промпт.
Плохо: «Создай лендинг, подключи базу данных, настрой аутентификацию и добавь платежи.»
Хорошо: Разбейте на четыре отдельных промпта и выполняйте последовательно.
AI лучше справляется с фокусированными задачами. Когда вы просите всё и сразу, качество каждого элемента падает. Разбивайте большие задачи на шаги — это главный навык вайбкодера.
Правило 3: Давайте контекст.
Плохо: «Добавь кнопку.»
Хорошо: «В компонент Header.tsx добавь кнопку "Выйти" в правом верхнем углу. При клике вызывай функцию handleLogout из контекста AuthContext. Стиль как у остальных кнопок в проекте.»
AI не видит вашего экрана. Он не знает, какой файл вы сейчас смотрите, если вы ему не сказали. Через Cursor можно прикрепить файлы к промпту с помощью @ — используйте это.