VIBE CODINGБлок 01 · Основы1.1

ПЕРВЫЙ УРОК

Введение
в вайбкодинг

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

Схема: идея проходит через AI-агента и становится работающим цифровым продуктом
ИдеяAI-агентРезультат

Главная мысль

Для прототипов, автоматизаций, лендингов и других типовых задач важен результат.

Теория: Введение в вайбкодинг

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

И если для долгосрочной поддержки сложных систем программисты будут нужны всегда, то для быстрого старта и практически любой автоматизации можно обойтись без них. Это стало возможным благодаря большим языковым моделям, совмещенным с обвязкой (говорят harness), которая позволяет не только общаться с моделью на высокие темы, но и выполнять практически любые технические задачи.

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

У программистов даже есть такое выражение "навайбкодили" в негативном ключе, которое означает, что качество получившегося кода очень низкое. И это правда: ИИ делают решения рабочими, но техническая реализация часто страдает. Поэтому у вайбкодинга есть физическое ограничение, лимит по объему кода, после которого сложно вносить изменения и приходится постоянно бороться с ошибками. Другой вопрос, что для прототипов, разнообразной автоматизации, лендингов и других типовых задач, качество кода вообще не имеет никакого значения. Главное — результат.

Какие задачи можно выполнять без программистов

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

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

Еще идеи → Правда, есть одно "но". Из-за хайпа все забыли про любые другие решения и рассуждают только в контексте AI и вайбкодинга, а между тем решения есть и часто они лучше, потому что очень хорошо решают определенные типы задач. В таком случае AI лучше использовать как способ управления этими инструментами, а не их замену. Придется решать слишком много общих проблем, в которых можно потонуть. В первую очередь мы говорим про инструменты no- и low-code, такие как Tilda, n8n, Albato и другие. Об этом мы не раз будем говорить в курсе.

Какие способы вайбкодинга существуют

Все подходы можно разбить на три большие группы.

ТРИ ПОДХОДА

Способы вайбкодинга

01

Онлайн-сервисы

lovable, repl.it, v0

Среда
Все в браузере, ничего ставить не надо
Порог / потолок
Порог низкий
Потолок низкий
Контроль
Закрытая экосистема
02

AI-редакторы

Cursor, Antigravity, Windsurf, Zed

Среда
Локальный редактор кода с агентом
Порог / потолок
Порог средний
Потолок высокий
Контроль
Полный контроль над кодом
03

Кодинг-агенты

Claude Code, Codex, OpenCode

Среда
Терминал, GUI или облако
Порог / потолок
Порог средний
Потолок высокий
Контроль
Полный контроль над кодом

Первая группа — это специализированные сервисы типа repl.it или lovable.

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

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

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

Другой способ — это использовать специализированные редакторы типа Cursor или Antigravity.

Cursor — это форк популярного редактора VS Code с глубоко вшитой языковой моделью. Снаружи он выглядит как привычный редактор кода, только справа открыт чат с моделью, а внутри есть режим, где агент сам правит файлы во всем проекте, запускает команды и проверяет результат. Кроме Cursor в эту же группу попадают Windsurf, Trae от ByteDance и Zed.

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

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

Ну и последний — это агенты типа Claude Code.

К этой группе относятся Claude Code, OpenCode, Codex, Copilot и еще несколько похожих инструментов. По сути, это сама модель плюс обвязка (та самая harness), которая дает агенту доступ к файловой системе, командной строке, браузеру и другим инструментам компьютера. Никакого собственного редактора у них нет, есть только сам агент и интерфейс для общения с ним. Код при этом может быть локальным, а может находиться в облачной инфраструктуре, что позволяет работать из любого места и уходит необходимость что-то настраивать на своем компьютере.

Этот вариант выбран для курса по нескольким причинам. Из всех трех способов он самый универсальный. Сервисы типа lovable отлично подходят для прототипа, но дальше упираются в платформу, а Cursor требует ориентации в редакторе кода и местами все же показывает программистскую кухню. Claude Code в браузере и приложении дает максимум возможностей агента без необходимости лезть в код руками. Плюс именно эту связку Anthropic развивает активнее всего, и она отлично интегрируется со всем, что мы будем проходить дальше, от GitHub до публикации сайта в интернете.

Если Claude Code в какой-то момент окажется недоступен, почти все, что мы проходим на курсе, повторяется в альтернативных агентах, например, Codex от OpenAI или OpenCode. Конкретные команды и кнопки в них будут немного другими, но сами идеи остаются теми же. Формулировка задач, контекст-инжиниринг, безопасность — это все универсальные принципы, и большая часть курса переносится на любой из этих инструментов без потери смысла. Меняются только сама модель и мелкие нюансы поведения.

Что нужно знать для того, чтобы вайбкодить

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

ШКАЛА ЗНАНИЙ

Чем больше технического контекста, тем увереннее работа с агентом

01

Полный ноль

Не знает слова HTML и API

Долго, много итераций
02

Базовый веб

Слышал про HTML и API, верстал в Tilda

Стартует быстро, но путается
03

Уверенный

Понимает, как все устроено, не пишет код

Работает эффективно с агентом
04

Программист

Пишет код сам

Использует агента для скорости

Комфортный уровень для вайбкодинга — это где-то между "слышал" и "понимает". Совсем с нуля тоже можно, но первые шаги будут даваться тяжелее.

При этом есть минимальный уровень, без которого начинать совсем тяжело. И связан он скорее с окружением программ, чем с самим кодом. С тем миром, в котором приложения живут и общаются между собой. Что такое HTML и CSS, как страница превращается из текста на экране в дизайн с кнопками и формами. Что такое API и как одна программа вызывает другую через интернет. Что такое форматы данных вроде JSON или YAML, и зачем они нужны для обмена. Что такое база данных и почему она живет отдельно от приложения. Что такое ключ доступа и почему его никогда не кладут в публичный репозиторий. Что такое DNS, домен и хостинг, и как одно с другим связано.

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

Самостоятельная работа

Перед началом курса настройте окружение и попробуйте Claude в действии.

Аккаунт Claude

Зайдите на claude.ai и заведите аккаунт. Скачайте десктопное приложение Claude (https://claude.ai/download) и войдите тем же аккаунтом: на следующих уроках пара заданий с MCP-коннекторами и skills делается через десктоп. Claude Code в курсе мы запускаем в облачной версии, ставить его в терминал не понадобится. По желанию поставьте мобильное приложение — пригодится, когда захотите спросить Claude в дороге.

Ожидаемый результат: вы вошли в claude.ai (а на macOS или Windows и в десктопное приложение) под своим аккаунтом и видите пустой чат.

Первые промпты

Откройте новый чат и попробуйте три типовых сценария.

Обычный промпт без дополнительных инструментов: "Объясни простыми словами, что такое HTTPS". Claude отвечает на основе своих знаний.

Промпт с веб-поиском: "Найди 5 главных трендов в no-code и AI-автоматизации рабочих процессов на 2026 год, собери в таблицу: тренд, краткое описание, пример инструмента или сервиса". Claude сам сходит в интернет и принесет ресерч под тему курса.

Анализ картинки или документа: сфотографируйте чек из магазина или скачайте любой PDF (например, образец договора), загрузите в чат и попросите выделить ключевые поля: дату, сумму, стороны, важные условия.

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

Дополнительные материалы

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

ИИ и нейросети для начинающих

VIBE CODINGБлок 01Урок 1.1