Разумный вайб-кодинг [Дмитрий Лаврик]

Bot

Администратор
Команда форума
23 Янв 2020
208,713
3,150
113
204832.jpg

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