Agentic Engineering

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

Лекция 1 (вводная)

Вводная лекция с живым демо

Представление

Добавьте фото по пути ../../assets/avatar.jpg

Кто выступает

ГТЛ в направлении СиВ
Процессный менеджер во Взыскании
ИИ Евангелист
Человек с веником в ...кхм голове (с) по мнению коллег

Формат: вводная лекция с живым демо, разбором ошибок и практическими правилами.

Содержание

1. Что такое вайбкодинг

Откуда термин, почему это больше чем мем

2. Живое демо

Собираем работающее приложение с нуля

3. Границы подхода

Что получается, где проблемы, примеры провалов

4. Набор выживания

Git, коммиты, .env, безопасность ключей

5. Спектр подходов

От чата до инженерного процесса

6. Карта курса

Что будем строить, как лекции связаны

Раздел 01

Что такое вайбкодинг

Откуда термин, почему это больше чем мем

Определение

Суть подхода

Описываете на обычном языке, что хотите
AI генерирует весь код за вас
Работает — принимаете. Не работает — говорите, что не так

Откуда термин

Андрей Карпатый — один из создателей OpenAI
Февраль 2025: пост в X завирусился мгновенно
Из шутки стал названием целого подхода

"Есть новый вид программирования — vibe coding. Ты отдаёшься вайбу, принимаешь экспоненциальность и забываешь, что код существует."

Почему это больше чем мем

Порог входа = 0

Не нужно знать языки, фреймворки, инструменты. Достаточно уметь формулировать мысли.

Скорость

От идеи до рабочего прототипа за минуты вместо недель.

Доступность

Всё в браузере. Ничего не нужно устанавливать.

Экономика

Стоимость прототипа упала с тысяч долларов до нуля.

Не замена разработке. Третий вариант: вместо «нанять» или «научиться» — «описать и получить».

Кто уже пользуется

Стартапы

Проверяют гипотезу до инвестиций в разработку.

Менеджеры

Живые демо вместо слайдов и документов.

Дизайнеры

Интерактивные прототипы вместо макетов.

Аналитики

Дашборды и визуализации за минуты.

Разработчики

Быстрые утилиты, скрипты, эксперименты.

Раздел 02

Живое демо

Собираем работающее приложение с нуля, показываем процесс и ход мысли

Задача для демо

Что делаем

Риск-реестр проекта — инструмент для PM и техлидов, который обычно живёт в Excel и быстро устаревает.

Инструмент: bolt.new (запасной: Lovable, v0)

Один запрос

"Сделай риск-реестр: таблица рисков, вероятность, влияние, план митигации, ответственный, статус. Цветовая индикация, фильтрация, тёмная тема."

Один запрос → 30 секунд → работающий риск-реестр. Ни одной строчки кода вручную.

Переключаемся на bolt.new

Демо: первый запрос

Вставляем промпт → ждём ~30 секунд → смотрим риск-реестр

Что произошло за 30 секунд

Выбрал стек

Технологии, библиотеки, 10+ файлов проекта

Написал код

Таблица рисков, цветовая индикация, фильтры, форма

Собрал и запустил

Компиляция, деплой, готовый URL

Вы не видите ни одной строчки кода. Только работающий результат.

Продолжаем в bolt.new

Демо: итерации

Улучшаем шаг за шагом — редактирование, матрица рисков, экспорт PDF

Итерации: шаг за шагом

#	Промпт	Результат
1	Основной запрос (риск-реестр с полями, фильтрацией, тёмной темой)	Рабочая таблица + форма + цветовая индикация
2	«Добавь редактирование и удаление рисков. Данные сохраняются в браузере между перезагрузками»	Инлайн-редактирование + localStorage
3	«Добавь автоматический расчёт уровня риска: вероятность × влияние. Покажи матрицу рисков 3×3 рядом с таблицей»	Матрица рисков, риски распределяются по ячейкам
4	«Добавь сортировку таблицы по любой колонке»	Клик на заголовок сортирует ↑↓
5	«Добавь кнопку "Экспорт в PDF" — чтобы можно было распечатать для совещания»	Кнопка генерирует PDF с таблицей и матрицей

Каждая итерация — 10-30 секунд. Весь инструмент — около 5 минут.

Что наблюдать

Точная формулировка

«Сделай удобнее» — плохо.
«Добавь выпадающий список с выбором колонки» — хорошо.

Описание проблем

«Не работает» — плохо.
«При загрузке файла > 1 МБ страница зависает» — хорошо.

Один запрос = одна функция

Мелкие шаги дают лучший результат, чем одно сообщение на 30 строк.

70% с первого раза

Первый запрос часто даёт большую часть того, что нужно. Остальное — итерации.

Раздел 03

Границы подхода

Что получается хорошо, где начинаются проблемы, примеры провалов

Где работает отлично

Прототипы

Проверить идею за минуты, а не недели.

Внутренние инструменты

Калькуляторы, формы, дашборды.

Одноразовые задачи

Конвертация, отчёт, скрипт.

Лендинги

Посадочная страница за час.

Хакатоны

Максимум результата за минимум времени.

Обучение

Быстро попробовать новую технологию.

Где начинаются проблемы

Проблема	Что происходит
Масштаб	Проект растёт → AI теряет контекст. Конфликты, дублирование, несогласованность.
Сложная логика	Транзакции, бизнес-правила — AI делает «почти правильно», что хуже, чем «очевидно неправильно».
Безопасность	Захардкодит пароль, пропустит валидацию, оставит SQL-инъекцию. AI не думает об этом сам.
Поддержка	Нет тестов, нет документации, нет архитектуры. Через месяц никто не понимает, как это работает.

Примеры провалов

Провал 1: Нагрузка

Дашборд работает на 100 записях. В реальности 500 000 строк — браузер крашится. AI оптимизировал для «выглядит», а не «работает».

Провал 2: Откат

После 10-го запроса AI «улучшил» и сломал авторизацию. Без Git — нет возможности вернуться. Всё с начала.

Провал 3: Утечка

AI вставил API-ключ прямо в код. Проект на GitHub. Что дальше — разберём в разделе 4.

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

Раздел 04

Практический набор выживания

Три правила, которые спасут от 90% проблем

Git как страховка

Зачем Git, если вы не разработчик

Каждый запрос к AI — лотерея
Git позволяет вернуться к любой версии
2 минуты на настройку, 5 секунд на сохранение

Как подключить за 2 минуты

git init
git add -A
git commit -m "начало проекта"

macOS: brew install git · Windows: git-scm.com

Главное правило: AI сделал что-то хорошее → немедленно сохраните. Следующий запрос — лотерея.

Промпт-правило для Git

Скопируйте в начале работы с AI или добавьте в rules агента

Правила работы с Git в этом проекте:

1. После каждого успешного изменения — делай git add
   и git commit с понятным сообщением на русском.
2. Не объединяй несколько изменений в один коммит.
   Одна задача = один коммит.
3. Перед рискованным изменением — сначала сделай коммит
   текущего рабочего состояния.
4. Если что-то сломалось — не чини поверх. Скажи мне,
   и я сделаю git checkout -- . для отката.
5. Не коммить .env, node_modules, dist.

Это правило можно добавить в CLAUDE.md, .cursorrules или настройки любого AI-агента.

Безопасность: .env для ключей

Правило

Секреты хранятся отдельно от кода, в файле .env. Этот файл не попадает в Git.

Как выглядит

# .env (не в Git)
API_KEY=sk-proj-abc123xyz

# .gitignore
.env

Промпт-правило для секретов — в конспекте. Копируете и вставляете в начале работы.

Промпт-правило для секретов

Скопируйте в начале работы с AI или добавьте в rules агента

Правила работы с секретами в этом проекте:

1. Никогда не вставляй пароли, токены или API-ключи
   прямо в код. Используй переменные окружения.
2. Все секреты — в файле .env. Я создам его сам.
3. В коде: process.env.ИМЯ_ПЕРЕМЕННОЙ.
4. Файл .env должен быть в .gitignore. Проверь.
5. Если нужен ключ — не придумывай. Напиши мне,
   какую переменную ты ожидаешь.
6. Создай .env.example с названиями переменных
   без значений.

Демо ужаса: API-ключ в публичном репо

AI вставляет ключ

Прямо в код файла

→

Пуш на GitHub

Ключ становится публичным

→

15 секунд

Боты находят и используют ключ

Последствия

Счёт за облако: $5 000 – 50 000
Украденные данные
Скомпрометированные аккаунты

Защита

.env в .gitignore до первого коммита
Промпт-правило для секретов
Утёк ключ → немедленно отзовите
GitHub Secret Scanning

Раздел 05

Спектр подходов

От «просто чат» до инженерного процесса — куда движется индустрия

Пять уровней использования AI

Уровень	Описание	AI делает	Для кого
Чат-подсказки	Спрашиваете AI, пишете код сами	Отвечает на вопросы	Разработчики
Автодополнение	AI дописывает код в редакторе (Copilot)	Дописывает строки	Разработчики
Вайбкодинг	Описываете задачу, AI делает всё	Весь код целиком	Все
Агентский режим	AI работает по правилам, вы одобряете	Код + проверки по правилам	Продвинутые
Мультиагенты	Несколько AI планируют и проверяют	Планирование + код + ревью	Инженеры

Куда движется индустрия

Сегодня

Вайбкодинг для прототипов. Ручная работа для продакшена.

Ближайшее будущее

Агенты, которые сами пишут тесты, проверяют безопасность и следуют стандартам.

Дальше

Мультиагентные системы: архитектура, код, ревью, тесты — разные AI.

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

Раздел 06

Карта курса

Что будем строить к финалу и как лекции связаны между собой

Карта курса: 9 лекций

#	Тема
1	Введение в вайбкодинг ← вы здесь
2	Prompt Engineering, Skills & Rules
3	Субагенты, оркестрация и Hooks
4	Tools и MCP
5	Безопасность агентов
6	Context Management
7	RAG
8	Debugging и наблюдаемость
9	Agent Team

На следующей лекции

Лекция 2: Prompt Engineering

Почему одни промпты работают, а другие нет. System prompt, chain-of-thought, rules, skills, антипаттерны.

Ответим на вопрос

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

Попробуй сам: домашнее задание

Выберите задание ближе к вашим задачам. Промпты — в конспекте. Каждое — 10-15 минут.

1. Runbook для инцидентов

Конструктор пошаговых инструкций: шаги с чекбоксами, таймер инцидента, поле для заметок. Тёмная тема, крупный шрифт для стрессовых ситуаций.

Затем: «Добавь шаблоны: падение БД, откат релиза, утечка данных»

2. Дашборд KPI команды

5 метрик с прогресс-барами, цветовые статусы (зелёный/жёлтый/красный), график динамики за 12 месяцев, редактирование значений.

Затем: «Добавь фильтр по отделам и выгрузку в PDF»

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

Выбор инструмента

	Бесплатный	Продвинутый	Open Source / On-Premise
Инструмент	bolt.new	Cursor + Claude / Claude Code	OpenCode / Kilo Code + локальная модель
Что нужно	Только браузер	Редактор + подписка	Инструмент + модель (Ollama, LM Studio)
Когда лучше	Попробовать впервые	Доработать до реального инструмента	Данные не должны уходить наружу

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

Что дальше

Следующий шаг: Лекция 2

Prompt Engineering, Skills & Rules

Слайды · Лекция 2 Конспект · Лекция 1 Конспект · Лекция 2