Веб-разработка с Claude Code
О чём курс
Дмитрий Лаврик разбирает системную интеграцию нейросетей в процесс веб-разработки: от настройки консольного интерфейса Claude Code до архитектурных ограничений и автоматического тестирования кода. Обучение рассчитано на четыре недели и выстроено по спиральному принципу: разработка проекта с нуля сопровождается постоянным разбором механик Claude, формулированием промптов и контролем качества.
Программа не замыкается на конкретном стеке технологий. Основной акцент сделан на выстраивании предсказуемого процесса, в котором нейросеть берёт на себя рутину в роли младшего разработчика, а ответственность за архитектуру и ревью остаётся на программисте.
Для кого
Курс рассчитан на действующих специалистов:
- веб-разработчиков фронтенда или бэкенда, понимающих принципы клиент-серверного взаимодействия;
- программистов, умеющих писать рабочий код вне зависимости от фреймворка (Vue, React или другие инструменты);
- сторонников строгого порядка в коде и строгой типизации (TypeScript вместо JS) в сочетании с линтерами;
- тех, кто реалистично оценивает возможности ИИ и планирует делегировать задачи помощнику под личным контролем.
Что внутри
Материал охватывает технические и архитектурные аспекты взаимодействия с Claude:
- организация рабочего окружения через Claude Code CLI и расширение для VS Code;
- управление сессиями, контекстным окном, техническими файлами
.claude/settings.jsonи инструкциямиClaude.md; - продвинутые механики: многоуровневая память, субагенты, кастомные скилы, команды, хуки и подключение MCP-серверов;
- особенности выбора моделей Opus, Sonnet и Haiku, лимиты тарифов и контроль расхода токенов;
- синхронизация контрактов между клиентом и сервером, DTO, OpenAPI и аудит безопасности;
- документирование проекта, ролей пользователей и жизненного цикла доменных сущностей;
- подходы к тестированию: тесты бэкенда и фронтенда как спецификация, E2E-проверки в headless-режиме браузера и перекрёстное ревью кода другой нейросетью.
Об авторе
Дмитрий Лаврик — практикующий веб-разработчик с опытом более 15 лет в создании интерфейсов и серверной части проектов на базе Vue, React, PHP и Node.js. Занимается преподаванием веб-разработки с 2011 года.
Программа обучения
- Основы работы с Claude
- Начало работы и настройка Claude Code
- Создание аккаунта Anthropic и выбор тарифного плана
- Установка Claude Code CLI
- Рабочий процесс только через CLI, минусы GUI
- Расширение для VS Code: установка и подключение
- Сессии: как Claude запоминает контекст
- Что такое сессия и как она работает
- Очистка сессии: когда и зачем
- Возврат к предыдущей сессии
- Просмотр истории и статистики сессий
- Контекстное окно
- Что такое контекстное окно и почему оно важно
- Как контекст заполняется во время сессии
- Стратегии контроля размера контекстного окна
- Технические файлы
- .claude/settings.json — настройки проекта
- Как закрыть от Claude ненужные и секретные файлы
- Claude.md — стабильные инструкции для Claude
- Эффективность промптов
- Как работают ограничения на тарифах
- Примеры задач, которые быстро съедают лимиты
- Как формулировать задачи, чтобы оставаться в рамках
- Выбор подходящей модели
- Opus, Sonnet, Haiku — обзор возможностей и стоимости
- Изменение модели в Claude Code
- Мощь или скорость — выбор модели в зависимости от задач
- Продвинутая настройка Claude
- Вложенные файлы Claude.md
- Как Claude читает и объединяет инструкции
- Инструкции на уровне проекта и на уровне подкаталога
- Общие правила и переопределения на основе контекста
- Память и Claude.md
- Как работает система постоянной памяти Claude
- Явная инструкция в Claude.md или накопленный контекст / память
- Практические правила: что кладём в память, а что в Claude.md
- Субагенты
- Что такое субагенты и когда Claude их запускает
- Субагенты и контекстное окно
- Обзор популярных готовых субагентов
- Пользовательские субагенты
- Управление поведением и областью видимости субагентов
- Принципы создания пользовательских субагентов
- Написание эффективных промптов для субагентов
- Скилы, команды и воркфлоу
- Что такое скилы и как Claude их применяет
- Встроенные и кастомные слэш-команды
- Компоновка субагентов и скилов в воркфлоу
- MCP-серверы
- Что такое MCP и как он расширяет возможности Claude
- Подключение MCP-сервера к проекту
- Популярные MCP-серверы для веб-разработки
- Хуки
- Что такое хуки и когда они срабатывают
- Практические сценарии: автоформатирование, логирование
- Написание и регистрация собственных хуков
- Понимание мышления Claude
- Внутренний цикл рассуждений Claude: планирование → вызовы инструментов → синтез
- Структурирование запросов для минимизации расхода токенов
- Выравнивание знаний участников
- Архитектура: отдельные репозитории или монорепозиторий
- Раздельная разработка фронтенда и бэкенда
- Что такое монорепозиторий и когда это имеет смысл
- Как этот выбор влияет на разработку с ИИ
- Главная серверная триада
- Валидация: проверка и очистка входных данных
- Сериализация: фильтрация и проверка ответа
- Документация: понятное описание API для клиента
- DTO и документация
- Что такое DTO: request DTO и response DTO
- Почему важно разделять схемы запроса и ответа
- Виды документирования: DTO, OpenAPI, типы TypeScript
- TypeScript как лучший друг Claude
- Почему типизированный код резко улучшает результаты ИИ
- Как Claude читает типы для определения интерфейса
- Правильные привычки: строгий режим, явные типы, ноль any
- Шаринг типов между сервером и клиентом
- Ручная сборка и автотрансформеры
- Типизированные fetch-клиенты
- Выбор подхода в зависимости от архитектуры
- Основы безопасности: что может пойти не так
- ENV в клиентских бандлах и публичных репозиториях
- SQL-инъекции и подводные камни ORM
- Claude как ассистент при аудите безопасности
- Принципы разработки с ИИ
- Ограничения снижают количество ошибок ИИ
- Организуем жёсткие архитектурные рамки
- Объясняем структуру проекта, описываем ключевые сущности
- Пишем инструкции так, чтобы у типичных задач был ровно один стиль решения
- По образцу ИИ делает лучше, чем без него
- Сами строим скелет приложения, затем призываем Claude
- Показываем на одной доменной сущности, как кодим сами
- Для любых велосипедов (например, свои хуки / композаблы) создаём примеры использования
- Начинаем с контрактов, размещаем их отдельно
- Определяем механику взаимодействия клиента и сервера
- Создаём абстракцию, отвечающую только за взаимодействие
- Изменение API начинается с контракта, а не с кода
- Декларативный стиль — друг нейросетки
- Описание результата, а не процесса проще для ИИ
- Предпочитаем схемы, конфиги, декораторы и т. п.
- Декларативные фреймворки (Vue / React) — короли фронтенда
- Маленькие шаги — предсказуемый результат
- С увеличением контекста нейросетки теряют точность
- Разбиваем задачу на шаги, затем делегируем
- Каждый шаг должен иметь понятный и проверяемый результат
- Большие задачи — режим планирования
- Просим нейросетку составить план
- Изучаем, редактируем, обсуждаем с Claude
- Выполняем шаг за шагом, оценивая промежуточные результаты
- Начало проекта: выбор стека и архитектуры
- Какой стек удобен для Claude
- TypeScript — один язык на сервере и клиенте
- Популярные технологии — их больше в обучающих данных
- Декларативный фреймворк на фронтенде, Node.js на бэкенде
- Архитектура, которая держит ИИ в рамках
- Структура проекта, понятная с первого взгляда
- Отдельные фронтенд и бэкенд или монорепозиторий
- Типизированные контракты между фронтендом и бэкендом
- Диалог с нейросетью
- Поиск популярных скилов под выбранные стеки
- Обсуждение с Claude полезности инструкций и архитектуры
- Сборка каркаса инструкций под выбранный стек шаг за шагом
- Что умышленно не раскрывается до курса
- Конкретика стека: Next, Nuxt или Nest / Vue, React или Angular
- Мы изучаем приёмы взаимодействия с Claude, не привязывая их к конкретному стеку
- Документирование проекта
- Техническая документация
- Структура, стиль кода, прямые запреты
- Где что хранить: CLAUDE.md, правила, скилы
- Обновление документации после реализации задач
- Жизненный цикл сущностей
- Состояния доменных сущностей и переходы между ними
- Сценарии изменения состояний
- Как описание lifecycle удерживает Claude от лишних шагов
- Бизнес-процессы для агента
- Зачем ИИ понимать, что делает продукт и для кого
- Описание ключевых сценариев и ролей пользователей
- Бизнес-правила, которые нельзя вывести из кода
- Ключевые точки тестирования
- Критические сценарии, которые мы обязаны тестировать
- Как описывать процессы, чтобы Claude сочинял проверки сам
- MCP для упрощения запуска тестов
- Автоматизация проверки результатов
- Тесты бэкенда и фронтенда
- Что тестировать в первую очередь, а что лишь улучшает статистику code coverage
- Тесты как обязательный шаг каждой задачи
- Тесты как спецификация
- Первичная реализация тестов на уровне идеи
- Выполнение задачи: Claude пишет код, не меняя смысла тестов
- Перекладка идеи на конкретный код и проверка гипотезы
- E2E-тесты в браузере
- Скил, который запускает приложение в headless-режиме
- Скриншоты и сравнение с макетом
- Проверка ключевых сценариев перед сдачей задачи
- Перекрёстное ревью нейросетей
- Натравливаем одну модель на код другой
- Свежий контекст замечает то, что пропустил автор
- Что ревьюер-ИИ ловит хорошо, а что всё равно остаётся на нас
- Место программиста в процессе вайб-кодинга
- Начинаем каждый проект, считая Claude джуниором
- Claude изначально ничего не знает о наших предпочтениях
- Роль программиста на старте: наставник, а не босс
- Без образца от нас Claude не угадает стиль и требования — скелет и примеры реализуем сами
- Цикл улучшений
- Рабочий режим: задача → ошибка → обратная связь → результат → новое правило в Claude.md
- Когда цикл правильный, Claude делает всё меньше ошибок
- Инструкции накапливаются, образуя полноценный гайд
- Ловушка shift-tab
- Что происходит, когда Claude становится достаточно хорош, чтобы ревью казалось ненужным
- Незаметная деградация разработчика: от доверия Claude к лени проверять его результат
- На дистанции нейросетка ошибётся — вопрос не «если», а «когда»
- Ответственность никогда не переходит к Claude
- Claude может писать код, а уволить могут только программиста
- Относимся к результату ИИ как к PR джуниора — всегда стоит окинуть критическим взглядом
- Как оставаться искренне вовлечённым в процесс, даже если Claude не ошибался давным-давно
- Взгляд в будущее
- Траектория развития возможностей моделей
- Оценка риска полной замены программистов
- Глубокое понимание инструмента по мере роста его мощи
- Риски внезапного повышения цен
- Математика ИИ-компаний: пузырь или путь к AGI
- Что может произойти с воркфлоу, полностью построенными вокруг дорогой модели
Теги курса
Другие материалы автора 12
ДЛ Дмитрий Лаврик Все материалыОтзывов пока нет. Будьте первым!
Этот курс сейчас в процессе организации складчины. Нажмите кнопку «Записаться» и ожидайте старта — вам придёт уведомление. Когда складчина стартует, в карточке курса будет указан актуальный взнос. Текущая цена пока в процессе формирования и может отличаться от финальной.
Да, мы стремимся, чтобы финальный взнос был не больше ≈10% от оригинальной цены курса. Чем больше участников записывается в складчину, тем ниже выходит взнос для каждого.
Нажмите кнопку «Записаться» и авторизуйтесь на сайте через email (через ту же почту, которую будете использовать для входа). В личном кабинете вас будут ждать инструкции, как пригласить других участников — чем больше людей записалось, тем быстрее стартует складчина и тем ниже взнос. Как только складчина готова к приобретению, вам придёт уведомление.