Веб-разработка с использованием нейросетей от Дмитрия Лаврика

Концепция курса
Далеко не все разработчики, которые пробуют использовать ИИ при написании кода, остаются в восторге от первой попытки. Дело даже не в плохих промптах, чаще всего они оставляют нейросети слишком много свободы. Курс учит простому — строй архитектуру так, чтобы у нейросетки не было пространства для импровизации, а потом отдай ей рутинную работу. Чем строже правила, тем меньше ошибок.
Мы освоим Claude Code с нуля: сессии, контекстное окно, файлы CLAUDE.md, субагенты, хуки и навыки, и применим эти знания в трёх технологических стеках.

Для кого этот курс
Исключительно для тех, кто уже умеет программировать и хочет работать с ИИ системно и грамотно. Главные критерии для участников:

• Понимание клиент-серверного взаимодействия
  Курс именно по веб-разработке. Не так важно, заходите вы со стороны бэкенда или фронтенда, главное, чтобы было понимание общих принципов и терминологии этой сферы.
• Умение писать работающий код, решающий задачи
  Конкретный стек технологий не важен. Node или PHP, Vue или React — не принципиально. Главное, уже быть адекватным программистом, а необходимый минимум знаний по конкретным стекам дадут дополнительные видео.
• Любовь к строгому порядку в коде
  Прежде всего — строгая типизация: Type Hinting в PHP или TypeScript вместо JS. Один лишь TypeScript убирает добрую половину проблем нейросетей.
• Реалистичные ожидания от ИИ
  Мы не мечтаем, что нейросетка напишет за нас весь код, мы просто получаем помощника — сообразительного и неутомимого джуна, которому можно делегировать массу задач.

Что даёт курс
За восемь недель вы построите workflow на трёх стеках и получите чёткую модель действий для каждого следующего проекта с ИИ. По итогу вы сможете:

• Грамотно работать с Claude Code
  Сессии, контекстное окно, постоянная память и Claude.md, субагенты, хуки и навыки — всё это перестанет быть абстрактными словами.
• Создавать архитектуру, которая не позволяет ИИ тупить
  Бэкенд, фронтенд или монолит — нужны точные инструкции и ограничения. Если у нейросети будет возможность сделать лишний шаг в сторону, то она найдёт, где ошибиться. Вопросам архитектуры мы посвятим очень много времени.
• Эффективно организовывать рабочий процесс
  Claude это джун, а мы наставники. Его вход в проект должен быть плавным. Задача, ошибки, обратная связь, исправление инструкций — только так можно обучить нашего джуна.
• Правильно относиться к месту ИИ в разработке
  Как бы ни был хорош Claude, ответственность за код остаётся на программисте. Сбросить рутину на помощника и забить на ревью — большой соблазн, которого мы не допустим.

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

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
• Что может произойти с воркфлоу, полностью построенными вокруг дорогой модели

Преподаватель курса - Дмитрий Лаврик
Профессиональный веб-разработчик
Более 15 лет опыта в веб-разработке — от вёрстки до серверной части. Основной стек: Vue, React на фронтенде, PHP, Node.js на бэкенде.
Опытный преподаватель
С 2011 года под его руководством тысячи учеников прошли путь от новичков до уверенных веб-разработчиков. Если вы ещё не знакомы с Дмитрием — загляните на его YouTube-канал (@dmitrylavrik), там много полезных видео и можно получить впечатление о стиле преподавания.

Старт 27 мая

ИСТОЧНИК

СКАЧАТЬ