Читать книгу: «Комфортный вайб-кодинг для новичков»

Name: Комфортный вайб-кодинг для новичков
Author: Сабир Алмасов

Сабир Алмасов

Шрифт:

Комфортный вайб-кодинг для новичков

Практическая книга о создании сайтов, ботов, приложений и собственных цифровых продуктов в Cursor AI

Введение

Ещё недавно путь от идеи до работающего приложения начинался с нескольких месяцев изучения синтаксиса. Человек осваивал переменные, циклы, функции, затем выбирал фреймворк, настраивал среду и только после этого собирал что-то, что можно показать другому человеку. Сейчас этот порядок изменился. Cursor Ai способен прочитать проект, предложить план, создать несколько связанных файлов, запустить команды, найти ошибку и проверить результат. Новичок может начать не с заучивания конструкций языка, а с понятной задачи.

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

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

Мы начнём с пустой папки и небольшого сайта. Затем намеренно столкнёмся с ошибками, научимся пользоваться Git, создадим Telegram-бота, веб-приложение, мобильное приложение и микро-SaaS. Технические понятия будут появляться тогда, когда без них нельзя сделать следующий шаг, но все непонятные новичку слова и действия мы будем разбирать простым языком. Вам не придётся заранее учить отдельный словарь.

Основная ценность книги — рабочий процесс. Конкретная кнопка может переехать после обновления Cursor, название режима может измениться, а популярная модель уступит место новой. Но основа вайб-кодинга ближайшие несколько лет останется неизменной: сначала уточнить задачу, затем изучить проект, составить короткий план, начать разработку, запустить проверку и сохранить рабочее состояние.

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

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

Что вам понадобится?

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

Создайте отдельную папку для проектов книги. Не храните её в случайной папке загрузок. Подойдут, например, C:\projects\vibe-book в Windows или ~/projects/vibe-book в macOS и Linux. Внутри каждый проект получит собственную папку.

Ещё одно правило действует с первой страницы: не вставляйте в чат пароли, платёжные данные и действующие секретные ключи. Позже мы настроим файлы .env, но запомнить это надо сейчас.

Часть первая. Первые часы с

Cursor

Установка

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

После запуска вы увидите знакомые элементы любого редактора: дерево файлов, центральную область, нижнюю панель с терминалом и боковую панель Agent. Расположение может меняться между версиями, поэтому ищите не конкретную иконку, а назначение элемента.

Дерево файлов показывает содержимое открытой папки. Центральная область открывает выбранный файл. Терминал выполняет команды в папке проекта. Agent получает задачу обычным языком, изучает нужные файлы, редактирует их и при необходимости запускает команды. В актуальных версиях Agent также умеет искать по проекту и в интернете, использовать браузер для проверки интерфейса и работать с подключёнными инструментами. Набор доступных действий зависит от версии, настроек и тарифа.

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

Первое безопасное поручение

Не начинайте с команды «создай приложение». Сначала попросите Agent объяснить рабочую область и предложить минимальное действие.

Промпт 1. Знакомство с пустым проектом

Я впервые работаю в Cursor и раньше не программировал. Сейчас открыта пустая папка проекта.

Сначала коротко объясни, какие файлы понадобятся для простой локальной веб-страницы.

Затем предложи план из 3–5 шагов. Пока ничего не создавай и не выполняй команды.

Все технические термины объясняй простыми словами при первом упоминании.

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

Теперь разрешите создать минимальную страницу.

Промпт 2. Первые файлы

Создай в этой папке минимальную веб-страницу из трёх файлов: index.html, styles.css и script.js.

На странице должны быть заголовок «Мой первый проект», короткий текст и кнопка.

При нажатии кнопка меняет текст под ней.

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

HTML описывает содержание страницы, CSS отвечает за внешний вид, JavaScript — за поведение. Сейчас этого объяснения достаточно. Откройте index.html в браузере. В некоторых версиях Cursor Agent может сам запустить локальный просмотр и проверить страницу встроенным браузером. Если такой инструмент доступен, попросите его об этом. Если нет, откройте файл через проводник.

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

Как

Cursor

видит проект

Для вас проект может быть «сайтом для записи клиентов». Для Cursor это папка, файлы, зависимости, настройки и история изменений. Чем точнее эти материалы описывают продукт, тем меньше Agent вынужден угадывать.

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

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

В интерфейсе можно прикреплять файлы и другие источники через упоминания и элементы добавления контекста. Agent также умеет искать нужные места сам. Новичку полезно сочетать оба подхода: назвать известный файл и попросить найти остальные связанные части.

Промпт 3. Изучение проекта перед изменением

Изучи текущий проект, но пока не меняй файлы.

Определи:

1. с какого файла запускается страница;

2. где находятся стили;

3. какой код обрабатывает нажатие кнопки;

4. какие файлы связаны с этим поведением.

После анализа предложи одно небольшое улучшение, которое не усложнит проект.

Этот запрос формирует полезную привычку: сначала карта, затем движение. Если Agent неверно описал простой проект, не стоит поручать ему сложное изменение. Уточните, что он пропустил.

Поиск по кодовой базе

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

Промпт 4. Поиск нужного места

Найди все места в проекте, связанные с [ФУНКЦИЯ ИЛИ ЭЛЕМЕНТ].

Не вноси изменения.

Покажи путь каждого важного файла и объясни его роль.

Отдельно укажи, какие файлы точно придётся менять, а какие нужно только учитывать.

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

Agent

и режим планирования

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

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

Промпт 5. План без реализации

Нужно добавить в проект [ФУНКЦИЯ].

Сначала изучи существующую структуру и подготовь план реализации.

В плане укажи:

- какие файлы изменятся;

- какие новые файлы появятся;

- какие данные будут передаваться;

- как проверить результат;

- основные риски для уже работающих функций.

Не пиши код и не выполняй команды до моего подтверждения плана.

План проверяют не по красоте формулировок. Спросите себя: Agent понял задачу? Не предлагает ли переписать половину проекта? Есть ли способ проверить результат? Не хранится ли секрет в коде? Если ответ вызывает сомнения, попросите упростить план.

Терминал без страха и без слепого доверия

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

Команда npm install обычно устанавливает зависимости JavaScript-проекта, перечисленные в его настройках. npm run dev запускает режим разработки. npm run build проверяет, способен ли проект собраться для публикации. Значение конкретной команды хранится в файле package.json, поэтому одинаковое имя может выполнять разные действия в разных проектах.

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

Промпт 6. Объяснение команды до выполнения

Ты предлагаешь выполнить команду:

[КОМАНДА]

Пока не запускай её. Объясни простыми словами:

1. что она сделает;

2. какие файлы или данные может изменить;

3. можно ли безопасно отменить результат;

4. почему команда нужна именно сейчас.

Не разрешайте запуск команды, если объяснение остаётся туманным. Особенно внимательно относитесь к массовому удалению, принудительному перезаписыванию Git-истории, изменению прав доступа и командам, скопированным с неизвестного сайта.

Зависимости и менеджер пакетов

Зависимость — готовый программный модуль, который проект использует вместо повторного написания стандартной функции. Менеджер пакетов скачивает такие модули и фиксирует их версии. В JavaScript-проектах часто применяется npm, pnpm или yarn. На старте выберите один инструмент и не смешивайте файлы блокировки разных менеджеров без причины.

Больше зависимостей не означает лучше. Каждая библиотека добавляет обновления, возможные уязвимости и несовместимости. Просите Agent объяснить, зачем нужен новый пакет.

Промпт 7. Проверка необходимости зависимости

Перед установкой пакета [НАЗВАНИЕ ПАКЕТА] проверь текущий проект.

Объясни, какую конкретную задачу решает пакет, есть ли уже установленное средство с такой возможностью и можно ли обойтись без новой зависимости.

Если пакет нужен, предложи команду установки, но не выполняй её.

Изменение, проверка, следующий шаг

Комфортная работа с Cursor строится короткими циклами. Вы ставите одну проверяемую задачу. Agent изучает нужные файлы и вносит изменение. Затем запускаются проверки. Вы смотрите результат в браузере или приложении. Только после этого начинается следующий шаг.

Плохой запрос выглядит так:

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

Он не задаёт аудиторию, сценарий, ограничения и критерии готовности. Agent вынужден выбрать всё сам и создаёт много кода, который трудно проверить.

Улучшенный запрос:

Промпт 8. Одно ограниченное изменение

В существующей странице добавь форму заявки с полями «Имя» и «Телефон».

Требования:

- оба поля обязательны;

- под пустым полем показывается понятная ошибка;

- после корректной отправки появляется сообщение «Заявка принята»;

- данные пока никуда не отправляются и хранятся только до обновления страницы;

- существующий дизайн нужно сохранить.

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

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

Правила проекта

Повторять в каждом запросе «не меняй стек», «объясняй новичку», «проверяй сборку» неудобно. Для постоянных инструкций Cursor поддерживает правила пользователя, команды и проекта, а также файл AGENTS.md. Проектные правила обычно хранятся рядом с кодом, поэтому их можно включать в Git и передавать вместе с проектом.

Правило должно быть коротким, проверяемым и связанным с проектом. Фраза «всегда пиши идеальный код» ничего не меняет. Инструкция «после изменения TypeScript-файлов запускай проверку типов и сборку» задаёт наблюдаемое действие.

Промпт 9. Подготовка правил проекта

Изучи текущий проект и предложи короткий набор проектных правил для Cursor.

Учти:

- используемый стек и менеджер пакетов;

- запрет менять технологии без отдельного согласования;

- сохранение существующего стиля кода;

- обязательную проверку после изменений;

- запрет помещать секреты в код;

- требование объяснять мне новые технические решения простыми словами.

Не создавай файл автоматически. Сначала покажи текст правил и объясни каждое правило.

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

Как выбирать модель

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

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

Часть вторая. Учимся ставить задачи

Из идеи в техническое задание

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

Минимальный набор вопросов:

• Кто пользуется продуктом?

• Какую проблему он решает?

• Какое одно действие составляет основную ценность?

• Какие данные вводятся и что получается на выходе?

• Нужны ли учётные записи?

• Что входит в первую версию, а что откладывается?

• По каким сценариям вы поймёте, что всё работает?

Промпт 10. Интервью по идее

Помоги превратить идею в техническое задание.

Идея: [ОПИШИТЕ ИДЕЮ]

Предполагаемый пользователь: [КТО БУДЕТ ПОЛЬЗОВАТЬСЯ]

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

Не предлагай функции до моих ответов. Избегай профессионального жаргона или сразу объясняй его.

Промпт 11. Короткое техническое задание

На основе моих ответов составь техническое задание для первой версии проекта [НАЗВАНИЕ].

Структура:

1. цель продукта;

2. пользователи;

3. главный пользовательский сценарий;

4. функции первой версии;

5. что явно не входит в первую версию;

6. данные и правила их обработки;

7. критерии готовности;

8. основные риски и неизвестные вопросы.

Пиши понятным русским языком. Не выбирай технологии, пока требования не сформулированы.

Проверка идеи без выдуманной уверенности

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

Промпт 12. Критический анализ идеи

Проведи критический анализ идеи: [ИДЕЯ].

Целевая аудитория: [АУДИТОРИЯ].

Регион: [СТРАНА ИЛИ РЫНОК].

Раздели ответ на:

- какую конкретную проблему решает продукт;

- как люди решают её сейчас;

- почему они могут не перейти на новый продукт;

- какие предположения нужно проверить до разработки;

- самый дешёвый способ проверить интерес;

- признаки того, что идею стоит изменить или закрыть.

Не придумывай статистику и не изображай спрос как доказанный.

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

Как сократить замысел до

MVP

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

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