Веб-разработка с Claude Code

7 участников

О чём курс

Дмитрий Лаврик разбирает системную интеграцию нейросетей в процесс веб-разработки: от настройки консольного интерфейса 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 года.

Программа обучения

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

Теги курса

Инструменты

Другие материалы автора 12

ДЛ Дмитрий Лаврик Все материалы
2 880 ₽ 16 800 ₽