Александр Ваничев

Как перестать бояться и начать Вайбкодить:Воркшоп для менеджеров

Александр Ваничев
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 / токены / GPU0%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

Инструкция (показываем экран):

  1. Заходим на github.com, создаём репозиторий (Public) → my-site.
  2. Загружаем файлы: index.html, description.md, style-guide.md.
  3. Settings → Pages → Branch: main → Save.
  4. Через 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. Вы теперь не просто менеджеры — вы архитекторы контекста.»
🎯

Архитекторы контекста

Главный вывод

🧭 Раньше боялись, что ИИ заменит разработчиков. Теперь понимаем: он заменит тех, кто не умеет управлять контекстом.

Документация. Архитектура. Тесты. Бюджет на токены. Новые метрики.

Gemini Generated Documentation
Финал

🙌 Благодарю за работу!

Ваничев Александр / ваш спикер

Почта: Akvanichev@gmail.com

📌 Вопросы? Обсуждение метрик и бюджетов — в открытом микрофоне.

🎤 Речь: «Друзья, вы супер! Полтора часа пролетели, а у нас уже 14 слайдов, куча кода и живые сайты. Если остались вопросы по метрикам, бюджетам или как уговорить начальника перераспределить деньги на API — подходите, обсудим. Всем прорывного вайб-кодинга и чистых промтов!»