Как перестать бояться и начать Вайбкодить:Воркшоп для менеджеров
Александр Ваничев
Solution Architect | AI/LLM Expert
🏆 100+ ИИ-внедрений
⏱️ Миллионы сэкономленных часов
⚡ 10+ пилотов выведены в прод
💼 MCP & ROI-кейсы
🎤 Речь спикера: «Приветствую всех! Сегодня мы разберёмся, как изменилась разработка с приходом ИИ, и за полтора часа пройдём путь от идеи до опубликованного сайта.»
Часть 1. Теория · 5 мин
🧠 1. Как было раньше
🗣️ Вчера
— «Сергей, помнишь логику скидок?»
— «Конечно, сделаю.»
📦 Контекст жил в головах людей.
💰 Бюджет: 80% зарплаты (аналитик+4дева+2теста).
📊 Метрики: строки кода, задачи, часы в Jira.
🤖 А что сейчас?
— «ChatGPT, сделай как в прошлый раз!»
— «Я не помню прошлый раз. Опиши заново.»
❗ У нейронки нет памяти. Документация — не «потом», а ТОПЛИВО.
🎤 Речь спикера: «Друзья, давайте честно
Теория · 3 мин
🎭 2. Контекст решает всё
Главная боль 2025: если нет документации — ИИ начинает фантазировать.
❓ Вопрос к залу: «Кто уже получал от нейросети сюрпризы, которые не заказывал? Ну, там телеграм-бота вместо кнопки или аналитику на 100 страниц?» 😂
Вывод: У ИИ нет офисной кулерной беседы. Только то, что вы записали — существует. Без документации ваш проект — игра в испорченный телефон с роботом.
🎤 Речь: «Коллеги, поднимите руки, если нейросеть вам однажды выдала функционал "с запасом"? Лично мне она как-то добавила админку для выгула собак, хотя я просил просто форму обратной связи. Это потому что я не объяснил границы. Отсюда правило: чем точнее и подробнее описан контекст, тем меньше сюрпризов. Сегодня контекст — валюта разработки.»
Теория · 4 мин
📚 3. Три слоя документации
| Слой | Для кого | Зачем |
| 1. Для людей | Команда, новички | Не запутаться, быстрый онбординг |
| 2. Для нейронки | ChatGPT, Claude, Cursor | Генерирует то, что нужно, а не "своё" |
| 3. Для связи (shared state) | Человек + нейронка | Не терять контекст между сессиями |
🔗 Глубокий материал: shared state между ИИ и человеком
🎤 Речь: «Документация — это не скучно, это нано-топливо. Первый слой — чтобы вы сами через месяц не забыли, зачем вам эта кнопка. Второй — чтобы нейронка не придумывала лишнего. Третий — это как общая тетрадь, где вы с ИИ ведёте общий дневник. Без этого нейросеть будет каждое утро знакомиться заново. А вы этого хотите? Нет!»
# WAL — Состояние процесса
## Метка времени
2026-04-03T19:30:00Z
## Текущая фаза
Базовый калькулятор ГОТОВ. Консольный калькулятор с четырьмя арифметическими
операциями, разбором ввода и обработкой ошибок. Rust binary crate с
юнит-тестами на граничные случаи (деление на ноль, переполнение, некорректный ввод).
История вычислений ГОТОВА. Последние 10 вычислений хранятся в памяти, команда
`history` для их вывода. История сохраняется в `~/.calc/history.json`
между сессиями через serde_json.
## Завершено
- Каркас спецификаций: ГОТОВО (BOOT, SPEC-PROTOCOL, WAL-PROTOCOL)
- PROP-CALC-000 (Базовые решения): ПРИНЯТО — Rust, CLI, без внешних математических библиотек
- Настройка Cargo-проекта: ГОТОВО (один binary crate `rcalc`)
- Базовый REPL-цикл: ГОТОВО (чтение stdin, приглашение `> `, команды `quit`/`exit`)
- Парсер выражений: ГОТОВО (инфиксная запись двух чисел: `<число> <оператор> <число>`)
- Поддерживает: `+`, `-`, `*`, `/`
- Разбирает целые и дробные числа (f64)
- Тип ошибки: enum `CalcError` с вариантами `ParseError`, `DivisionByZero`, `Overflow`
- Вычислительный движок (`eval.rs`): ГОТОВО
- `evaluate(expr: &Expression) -> Result<f64, CalcError>`
- Проверка деления (знаменатель == 0 → DivisionByZero)
- 14 юнит-тестов: базовые операции, отрицательные числа, дробные, граничные случаи
- Форматирование вывода: ГОТОВО — обрезка хвостовых нулей, максимум 10 знаков после запятой
- История вычислений: ГОТОВО — Vec<HistoryEntry> в памяти, команда `history`,
JSON-персистенция в `~/.calc/history.json`, загрузка при старте
## В работе
- FEAT-CALC-002 (Выражения со скобками): В РАБОТЕ — нужна переработка парсера
## Известные проблемы
1. **Нет приоритета операций** — `2 + 3 * 4` вычисляется слева направо как 20, а не 14
2. **Только однострочные выражения** — нет многострочного или цепочечного ввода
3. **Нет отрицательных литералов** — `-5 + 3` падает, обходной путь: `0 - 5 + 3`
### Решённые проблемы (2026-04-02)
- **~~Мусор при выводе float~~** — ИСПРАВЛЕНО: `format!("{:.10}")` + trim_end_matches('0')
- **~~Файл истории не создавался~~** — ИСПРАВЛЕНО: `std::fs::create_dir_all` перед первой записью
## Ожидающие решения
- Приоритет операций: алгоритм сортировочной станции (shunting-yard) vs рекурсивный спуск?
Человек склоняется к рекурсивному спуску из-за читаемости, но shunting-yard проще
для текущей грамматики из двух чисел. Решение отложено до следующей сессии.
## Следующие шаги
1. Определиться с подходом к парсеру для приоритета операций (см. Ожидающие решения)
2. Реализовать поддержку скобок в выражениях (FEAT-CALC-002)
3. Добавить операторы `%` (остаток от деления) и `^` (возведение в степень)
4. Рассмотреть присваивание переменных (`x = 42`, затем `x + 1`)
5. Добавить команду `clear` для очистки истории
## Контекст сессии
Только что завершена история вычислений. Парсер сейчас обрабатывает только
`<число> <оператор> <число>` — нужна переработка для FEAT-CALC-002
(скобки и выражения с несколькими операторами).
Модуль `eval.rs` чистый и хорошо покрыт тестами, парсер — узкое место.
Человек в обсуждении выбрал рекурсивный спуск, но окончательно не подтвердил —
уточнить в начале сессии.
**Структура проекта:**
```
rcalc/
├── src/
│ ├── main.rs — REPL-цикл, загрузка/сохранение истории
│ ├── parser.rs — токенизатор + построение AST выражений
│ ├── eval.rs — evaluate(Expression) → Result<f64>
│ ├── history.rs — HistoryEntry, сохранение/загрузка JSON
│ └── error.rs — enum CalcError (thiserror)
├── tests/
│ └── integration.rs — сквозные тесты REPL (перехват stdin/stdout)
├── Cargo.toml
└── specs/
├── BOOT.md
├── WAL.md
└── proposals/
├── PROP-CALC-000.md — базовые решения
└── FEAT-CALC-002.md — выражения со скобками (ЧЕРНОВИК)
```
Запуск:
```
cargo run # запустить REPL калькулятора
cargo test # запустить все тесты (14 юнит + 3 интеграционных)
```
Теория · 3 мин
⚡ 4. Скорости и бюджеты: новый расклад
Код пишется в 10 раз быстрее. Узкое место — не написание, а проектирование + приёмка.
| Статья расходов | Вчера | Сегодня |
| Команда (люди) | 80% | 30-40% |
| Инфраструктура | 15% | 20% |
| Инструменты | 5% | 10% |
| API / токены / GPU | 0% | 30-40% |
🎤 Речь: «Раньше мы говорили "сколько у нас разработчиков?". Теперь говорим "сколько у нас контекста и токенов в месяц?". Вдумайтесь: вместо пяти человек вы платите за миллион токенов в день. Это меняет всю экономику. Кто быстрее адаптирует бюджеты — тот и выигрывает гонку.»
Теория · 3 мин
📈 5. Новые метрики эффективности
| ❌ Устаревшие метрики |
✅ Новые KPI эпохи ИИ |
| 📏 Строки кода (LOC) |
⏱️ Время от идеи до прототипа |
| ⏰ Часы в Jira/Trello |
🔄 Количество итераций с ИИ |
| 📋 Закрытые задачи |
🧪 Покрытие тестами |
| 📊 Velocity (story points) |
💰 Стоимость API/токенов/мес |
| 🎯 Фокус-фактор |
🚀 Время онбординга новичка |
| 📈 Коэффициент занятости |
💬 Качество промтов (prompts) |
| 🐛 Время отклика на баги |
🔗 Консистентность кода |
🎤 Речь: «Скажите честно: кто измеряет успех по "количеству строк кода"? В мире ИИ это бессмысленно, нейросеть напишет тысячу строк за минуту. Новые метрики — скорость превращения идеи в продукт и число итераций. Если вы три часа правите промт — проблема не в нейросети, а в контексте. А ещё важнее — тесты: они становятся главным свидетелем качества.»
🛠️ Практика · 10 мин
🚀 Этап 1: Развиваем идею
Промт для ИИ (скопируйте и вставьте в ChatGPT/Claude/DeepSeek):
«Ты — опытный продакт-менеджер. Я расскажу тебе свою идею для сайта, а ты поможешь её докрутить.
Моя идея: [опишите в 1–2 предложениях, например: лендинг для стартапа доставки еды / портфолио фотографа / блог о путешествиях]
Проведи анализ и выдай результат в следующем формате:
1. Название проекта — предложи 3 варианта названия
2. Цель — одно предложение: что пользователь должен сделать на сайте
3. Целевая аудитория — кто придёт, откуда, возраст, интересы
4. Структура главной страницы — пронумерованный список из 4–6 блоков (например: герой-секция, о нас, услуги, отзывы, контакты)
5. Настроение и стиль — 3–4 прилагательных (например: минималистичный, тёплый, современный)
6. Призыв к действию (CTA) — главная кнопка сайта
Не пиши код. Только структуру и смыслы.»
✅ Чек-пойнт: у каждого есть название и структура сайта.
🎤 Речь: «Давайте зажжем! Сейчас вы — продюсер. Кидаете в чат свою сырую идею, а нейросеть помогает её докрутить. Не стесняйтесь: хоть "сайт для продажи кактусов", хоть "личная страница супергероя". Главное — получить внятную структуру. Поехали! У вас 10 минут, музыка в голове.»
Практика · 10 мин
📄 Этап 2: Упаковываем контекст
«На основе нашего предыдущего обсуждения создай формализованное описание проекта — description.md. Это документ, который будет использоваться как контекст для ИИ при дальнейшей разработке.
Структура документа:
```markdown
# [Название проекта]
## Цель
[Одно предложение]
## Целевая аудитория
[Кто, откуда, зачем]
## Структура главной страницы
1. [Блок 1] — [назначение]
2. [Блок 2] — [назначение]
...
## Контент
- Заголовок hero-секции: [текст]
- Подзаголовок: [текст]
- Текст кнопки CTA: [текст]
- 2–3 отзыва (имя, текст, роль)
## Настроение
[3–4 прилагательных]
## Технические требования
- Одностраничный сайт (landing page)
- Адаптивный дизайн (mobile-first)
- Один файл index.html (HTML + CSS + JS)
- Без внешних зависимостей
```
Выдай только Markdown-код, без пояснений.»
💾 Сохраните как description.md — это ваш Слой 1 (для людей) и одновременно shared state.
✅ Чек-пойнт: файл description.md готов.
🎤 Речь: «Теперь превращаем структуру в настоящий документ. Это не для галочки — это будет наш договор с нейросетью. Если потом ИИ начнёт чудить, вы покажете ему description.md и скажете: "Читай, тут всё написано". Поверьте, это лучше, чем каждый раз объяснять заново.»
Практика · 10 мин
🎨 Этап 3: Стиль + брендбук
«Ты — UI/UX-дизайнер. На основе description.md создай брендбук проекта — style-guide.md. Это визуальная инструкция для ИИ-генератора кода.
Структура документа:
```markdown
# Брендбук: [Название проекта]
## Цветовая палитра
| Роль | Цвет | HEX | Пример использования |
|------|------|-----|---------------------|
| Основной | [название] | #XXXXXX | Заголовки, кнопки CTA |
| Вторичный | [название] | #XXXXXX | Фоны секций |
| Акцент | [название] | #XXXXXX | Иконки, hover-эффекты |
| Текст | [название] | #XXXXXX | Основной текст |
| Фон | [название] | #XXXXXX | Body, карточки |
## Типографика
- Заголовки: [шрифт], [начертание], [размеры для h1–h3]
- Основной текст: [шрифт], [размер], [межстрочный интервал]
## Компоненты
### Кнопки
- Основная: [цвет фона], [цвет текста], [скругление], [padding]
- Hover-эффект: [описание]
### Карточки
- Фон, скругление, тень, padding
## Общие принципы
- Скруглённые углы (border-radius: [значение])
- Минимальные отступы между секциями: [значение]
- Стиль иконок: [заливные/линейные]
```
Выдай только Markdown-код, без пояснений.»
💾 Сохраните как style-guide.md (Слой 1 и 2 одновременно).
🎤 Речь: «Теперь давайте сделаем сайт красивым. Цвета, шрифты — это визуальный язык. ИИ нарисует дизайн, если вы скажете "используй палитру из style-guide.md". Без этого сайт будет выглядеть как "школьная лаборатория 2007". А нам нужен вайб современного продукта, верно?»
Практика · 20 мин
💻 Этап 4: Генерируем полноценный сайт
«Ты — senior frontend-разработчик. Создай одностраничный сайт на основе description.md и style-guide.md.
Требования к коду:
- Один файл index.html (HTML5 + встроенный CSS + встроенный JS)
- Mobile-first адаптивная вёрстка (медиа-запросы для 768px и 1024px)
- Семантическая разметка (header, main, section, footer)
- Цвета, шрифты и компоненты — строго из style-guide.md
- Плавная прокрутка (scroll-behavior: smooth)
- Hover-эффекты на кнопках и карточках
- Все тексты из description.md (никакого Lorem ipsum)
- Оптимизация под retina-дисплеи
Структура файла:
<!DOCTYPE html> → <head> (meta, title, style) → <body> (header с навигацией, hero-секция, секции из description.md, footer) → <script>
JS-функционал:
- Плавная прокрутка к секциям по клику в навигации
- Анимация появления элементов при скролле (IntersectionObserver)
- Мобильное меню (гамбургер)
Выдай полный рабочий HTML-код. Только код, без пояснений.»
📁 Сохраните код в index.html, откройте в браузере. Если нужно что-то поправить — используйте уточняющий промт: «Внеси правки: ... Выдай полный обновлённый код».
🎤 Речь: «Волшебный момент! Копируем промт, вставляем в нейросеть — и через минуту у нас в руках готовый HTML. Открываем в браузере, любуемся. Если что-то не нравится, просто просим поправить. Теперь вы чувствуете мощь: раньше на это ушла бы неделя, а тут — 20 минут.»
Практика · 10 мин
🌍 Этап 5: Выкладываем на GitHub Pages
Инструкция (показываем экран):
- Заходим на github.com, создаём репозиторий (Public) →
my-site.
- Загружаем файлы:
index.html, description.md, style-guide.md.
- Settings → Pages → Branch: main → Save.
- Через 1-2 минуты сайт доступен по ссылке:
https://[username].github.io/my-site/
✅ У каждого есть живая ссылка на опубликованный сайт!
🎤 Речь: «Мы не просто сделали сайт — мы выложили его в интернет. Теперь можно кидать ссылку друзьям, инвесторам, бабушке. GitHub Pages — бесплатный хостинг, который делает из вашего кода настоящий веб-сайт. И да, поздравляю: вы только что прошли полный цикл — от идеи до публикации.»
Практика · 5 мин
🤝 Этап 6: Делимся результатами
📌 Что показываем: ссылку на сайт + название проекта + один инсайт.
Вопросы для обсуждения:
- Сколько итераций с ИИ потребовалось?
- Понял ли ИИ стиль из брендбука?
- Что добавите в документацию в следующий раз?
🎤 Речь: «Окей, у кого уже есть ссылка? Давайте в чат кидайте. Посмотрим, у кого самый стильный сайт? А кто больше всего итераций потратил? Это и есть та самая метрика качества контекста. Чем меньше итераций — тем точнее были ваши промты и документация.»
Итоги
🎁 Что у вас осталось после воркшопа
✅ Живой сайт на GitHub Pages
✅ Документация (description.md + style-guide.md) — слои 1 и 2
✅ Shared state — можно продолжать работу с ИИ, подгружая эти файлы
✅ Понимание новых бюджетов и метрик: сколько итераций, стоимость контекста
🎤 Речь: «Смотрите, у вас в руках не просто сайт. У вас есть система: описание, стиль, код, опубликованный продукт. Это и есть новая разработка — где документация и контекст правят бал. Завтра вы сможете попросить ИИ добавить новый блок, просто скинув description.md. Вы теперь не просто менеджеры — вы архитекторы контекста.»
Главный вывод
🧭 Раньше боялись, что ИИ заменит разработчиков. Теперь понимаем: он заменит тех, кто не умеет управлять контекстом.
Документация. Архитектура. Тесты. Бюджет на токены. Новые метрики.
Финал
🙌 Благодарю за работу!
Ваничев Александр / ваш спикер
Почта: Akvanichev@gmail.com
📌 Вопросы? Обсуждение метрик и бюджетов — в открытом микрофоне.
🎤 Речь: «Друзья, вы супер! Полтора часа пролетели, а у нас уже 14 слайдов, куча кода и живые сайты. Если остались вопросы по метрикам, бюджетам или как уговорить начальника перераспределить деньги на API — подходите, обсудим. Всем прорывного вайб-кодинга и чистых промтов!»