Разумный вайб-кодинг
Веб-разработка с использованием нейросетей от Дмитрия Лаврика
[MEDIA=youtube]bjXtbtlI_-c[/MEDIA]
Для кого этот курс
Исключительно для тех, кто уже умеет программировать и хочет работать с ИИ системно и грамотно. Главные критерии для участников:
- Понимание клиент-серверного взаимодействия
Курс именно по веб-разработке. Не так важно, заходите вы со стороны бэкенда или фронтенда, главное, чтобы было понимание общих принципов и терминологии этой сферы.
- Умение писать работающий код, решающий задачи
Конкретный стек технологий не важен. Node или PHP, Vue или React — не принципиально. Главное, уже быть адекватным программистом, а необходимый минимум знаний по конкретным стекам дадут дополнительные видео.
- Любовь к строгому порядку в коде
Прежде всего — строгая типизация: Type Hinting в PHP или TypeScript вместо JS. Один лишь TypeScript убирает добрую половину проблем нейросетей.
- Реалистичные ожидания от ИИ
Мы не мечтаем, что нейросетка напишет за нас весь код, мы просто получаем помощника — сообразительного и неутомимого джуна, которому можно делегировать массу задач.
Спойлер: Программа курса — 01
Основы работы с Claude
Начало работы и настройка Claude Code
- —Создание аккаунта Anthropic и выбор тарифного плана
- —Установка Claude Code CLI
- —Рабочий процесс только через CLI, минусы GUI
- —Плагин VS Code: установка и подключение
Сессии: как Claude запоминает контекст
- —Что такое сессия и как она работает
- —Очистка сессии: когда и зачем
- —Возврат к предыдущей сессии
- —Просмотр истории и статистики сессий
Контекстное окно
- —Что такое контекстное окно и почему оно важно
- —Как контекст заполняется во время сессии
- —Стратегии контроля размера контекстного окна
Технические файлы
- —.claude/settings.json — настройки проекта
- —.claudeignore — убираем ненужные файлы из контекста
- —CLAUDE.md — стабильные инструкции для Claude
Эффективность промптов
- —Как работают ограничения на тарифах
- —Примеры задач, которые быстро съедают лимиты
- —Как формулировать задачи, чтобы оставаться в рамках
Выбор подходящей модели
- —Opus, Sonnet, Haiku — обзор возможностей и стоимости
- —Изменение модели в Claude Code
- —Мощь или скорость — выбор модели в зависимости от задач
— 02
Продвинутая настройка Claude
Вложенные файлы CLAUDE.md
- —Как Claude читает и объединяет инструкции
- —Инструкции на уровне проекта и на уровне подкаталога
- —Общие правила и переопределения на основе контекста
Память и CLAUDE.md
- —Как работает система постоянной памяти Claude
- —Явная инструкция CLAUDE.md vs накопленный контекст / память
- —Практические правила: что кладём в память, а что в CLAUDE.md
Субагенты
- —Что такое субагенты и когда Claude их запускает
- —Субагенты и контекстное окно
- —Обзор популярных готовых субагентов
Пользовательские субагенты
- —Управление поведением и областью видимости субагентов
- —Принципы создания пользовательских субагентов
- —Написание эффективных промптов для субагентов
Навыки, команды и воркфлоу
- —Что такое навыки (skills) и как Claude их применяет
- —Встроенные и кастомные слэш-команды
- —Компоновка субагентов и навыков в воркфлоу
MCP серверы
- —Что такое MCP и как он расширяет возможности Claude
- —Подключение MCP-сервера через settings.json
- —Популярные MCP-серверы для веб-разработки
Хуки
- —Что такое хуки и когда они срабатывают
- —Практические сценарии: автоформатирование, логирование
- —Написание и регистрация собственных хуков
Понимание мышления Claude
- —Внутренний цикл рассуждений Claude: планирование → вызовы инструментов → синтез
- —Структурирование запросов для минимизации расхода токенов
— 03
Выравнивание знаний участников
Архитектура: монолит или отдельные репозитории
- —Раздельная разработка фронтенда и бэкенда
- —Что такое монорепозиторий и когда это имеет смысл
- —Как этот выбор влияет на разработку с ИИ
Главная серверная триада
- —Валидация: проверка и очистка входных данных
- —Сериализация: фильтрация и проверка ответа
- —Документация: понятное описание API для клиента
DTO и документация
- —Что такое DTO: request DTO vs response DTO
- —Почему важно разделять схемы запроса и ответа
- —Виды документирования: DTO, OpenAPI, типы TypeScript
TypeScript как лучший друг Claude
- —Почему типизированный код резко улучшает результаты ИИ
- —Как Claude читает типы для определения интерфейса
- —Правильные привычки: строгий режим, явные типы, ноль any
Шаринг типов между сервером и клиентом
- —Ручная сборка и автотрансформеры
- —Типизированные fetch-клиенты
- —Выбор подхода в зависимости от архитектуры
Основы безопасности: что может пойти не так
- —ENV в клиентских бандлах и публичных репозиториях
- —SQL-инъекции и подводные камни ORM
- —Claude как ассистент при аудите безопасности
—04
Принципы разработки с ИИ
Ограничения снижают количество ошибок ИИ
- —Организуем жёсткие архитектурные рамки
- —Объясняем структуру проекта, описываем ключевые сущности
- —Пишем инструкции так, чтобы у типичных задач был ровно один стиль решения
По образцу ИИ делает лучше, чем без него
- —Сами строим скелет приложения, затем призываем Claude
- —Показываем на одной доменной сущности, как кодим сами
- —Для любых велосипедов (например, свои хуки / композаблы) создаём примеры использования
Начинаем с контрактов, размещаем их отдельно
- —Определяем механику взаимодействия клиента и сервера
- —Создаём абстракцию, отвечающую только за взаимодействие
- —Изменение API начинается с контракта, а не с кода
Декларативный стиль — друг нейросетки
- —Описание результата, а не процесса проще для ИИ
- —Предпочитаем схемы, конфиги, декораторы и т.п.
- —Декларативные фреймворки (Vue / React) — короли фронтенда
Маленькие шаги — предсказуемый результат
- —С увеличением контекста нейросетки теряют точность
- —Разбиваем задачу на шаги, затем делегируем
- —Каждый шаг должен иметь понятный и проверяемый результат
Большие задачи — режим планирования
- —Просим нейросетку составить план
- —Изучаем, редактируем, обсуждаем с Claude
- —Выполняем шаг за шагом, оценивая промежуточные результаты
—05
Идеальный бэкенд-стек на Node.js
JSON Schema для Fastify и AJV
- —Нативная валидация и сериализация по JSON Schema
- —Синтаксис JSON-схем и неудобства их ручного описания
- —JSON Schema vs OpenApi: небольшие различия
Единый источник истины
- —Что такое TypeSpec и какие выгоды он нам приносит
- —Определение моделей, создание общих типов
- —Описание маршрутов и схем для запросов и ответов
От TypeSpec к OpenAPI и JSON Schema
- —Компиляция TypeSpec в спецификацию OpenAPI
- —Автоматический вывод интерактивной документации
- —Компиляция и доработка JSON-схем из лаконичного описания
Слой базы данных — Drizzle ORM
- —Как Drizzle вписывается в философию ограничений
- —Schema First без генерации тонны типов (привет Prisma)
- —Как Claude работает с Drizzle — схема как достаточный контекст
Архитектура вокруг Fastify
- —Реализация ключевых плагинов
- —Контроллеры и сервисный слой
- —Создание инструкций для Claude под стек
Экономия контекста: почему этот стек хорош для ИИ
- —TypeSpec как полная замена главной серверной триады
- —Сравнение размеров TypeSpec и файла OpenAPI
- —Как производные TypeSpec сокращают контекст каждой задачи
—06
Фронтенд на примере React
Организация базового каркаса
- —Структура папок, выделение ключевых частей приложения
- —Стартовый код для router и store
- —Продумывание системы работы с авторизацией пользователей
- —Выбор и подключение инструментов для UI
Паттерн репозиторий вокруг OpenAPI
- —OpenAPI-спецификация бэкенда как источник истины
- —Генерация полностью типизированного fetch-клиента
- —Паттерн репозиторий как обёртка над fetch-клиентом
- —Создание модулей для каждой доменной сущности
Реализация важнейших хуков
- —Создание хуков для DI ключевых сервисов через контекст
- —Создание хука для получения данных — useAsyncData
- —Создание хука для контроля форм — useForm
- —Документирование всех велосипедов для Claude
Подготовка компонентов
- —Правила по именованию компонентов и их props
- —Правила использования хуков внутри компонентов
- —Реализация помощника для хука useAsyncData
- —Создание AuthGuard компонентов
Типичные инструкции для Claude на фронтенде
- —Описание паттернов применения хуков и компонентов
- —Явные запреты на прямое использование fetch
- —Предотвращение типичных ошибок Claude: избыточный useEffect, создание компонентов во время рендеринга и др.
Организация плавного старта
- —Реализация UI для одной доменной сущности вручную
- —Создание хуков на стыке сложного UI и API
- —Пробный запуск Claude, оценка результатов
- —Доработка инструкций до приемлемого результата
—07
Claude в монолите
Монолит как серьёзный вызов для ИИ
- —Почему монолиты сложнее для Claude
- —Больший контекст и тесная связанность частей системы
- —Примерная оценка количества файлов и объёма кода для типичной CRUD-операции
Стек: Laravel + Inertia + Vue + Vuetify
- —Специальный выбор наиболее громоздкого стека технологий
- —Разные языки в одном проекте: PHP и JavaScript
- —Inertia вместо API, сервер напрямую передаёт props страницам
- —Vue с тяжёлой библиотекой компонентов Vuetify
Улучшение Laravel с помощью laravel-data
- —Laravel Data: типизированные DTO для запросов и ответов
- —Валидация и сериализация на основе единого инструмента
- —Правила для полей DTO через декларативные атрибуты
- —Автоматическая конвертация DTO в TypeScript-типы
Нюансы инструкций для Claude в монолите
- —Почему корневой CLAUDE.md должен быть особенно точным
- —Вложенные CLAUDE.md по модулям и сущностям
- —Реализация навыков (skills) для решения точечных задач
- —Как не дать Claude перепутать слои бэкенда и фронтенда
Типизированные роуты с Wayfinder
- —Генерация TypeScript-хелперов из роутов Laravel
- —Устранение захардкоженных адресов на стороне Vue
- —Инструкции по своевременному перезапуску генераторов
От построения каркаса к настоящей магии
- —Усиление Laravel: Spatie Query Builder и Spatie Permission
- —Создание хелперов и инструкций на стыке бэкенда и фронтенда
- —Генерация более 2000 строк рутинного кода за 10 минут
—08
Место программиста в процессе вайбкодинга
Начинаем каждый проект, считая Claude джуниором
- —Claude изначально ничего не знает о наших предпочтениях
- —Роль программиста на старте: наставник, а не босс
- —Без образца от нас Claude не угадает стиль и требования — скелет и примеры реализуем сами
Цикл улучшений
- —Рабочий режим: задача → ошибка → обратная связь → результат → новое правило в CLAUDE.md
- —Когда цикл правильный, Claude делает всё меньше ошибок
- —Инструкции накапливаются, образуя полноценный гайд
Ловушка shift-tab
- —Что происходит, когда Claude становится достаточно хорош, чтобы ревью казалось ненужным
- —Незаметная деградация разработчика: от доверия Claude к лени проверять его результат
- —На дистанции нейросетка ошибётся. Не если, а когда.
Ответственность никогда не переходит к Claude
- —Claude может писать код, а уволить могут только программиста
- —Относимся к результату ИИ как к PR джуниора — всегда стоит окинуть критическим взглядом
- —Как оставаться искренне вовлечённым в процесс, даже если Claude не ошибался давным-давно
Взгляд в будущее
- —Траектория развития возможностей моделей
- —Оценка риска полной замены программистов
- —Глубокое понимание инструмента по мере роста его мощи
Риски внезапного повышения цен
- —Математика ИИ-компаний: пузырь или путь к AGI
- —Что может произойти с воркфлоу, полностью построенными вокруг дорогой модели
Цена ранней записи 18 000 ₽
Продажник >>