00:00:00Если вы используете Claude Code для создания веб-приложений, вам стоит обратить внимание на GSD —
00:00:04это open-source фреймворк для разработки на основе спецификаций, который специализируется на оркестрации
00:00:08различных субагентов для выполнения проектов в рамках методологии Spec-Driven Development (SDD).
00:00:12В отличие от традиционных SDD-фреймворков, которые мы рассматривали на канале,
00:00:15таких как Beemap Method, SpecKits, Taskmaster и многих других, все старые подходы
00:00:20должны следовать строгому правилу: всё должно выполняться в рамках одного
00:00:24единого окна контекста. Например, планирование, исследование, разработка, проверка —
00:00:29всё это должно происходить в одном контексте. Но это порождает серьезную проблему —
00:00:33раздувание контекста. Чем выше потребление токенов в одном окне, тем ниже точность.
00:00:38Решение заключается в использовании субагентов для делегирования задач планирования,
00:00:42исследования, разработки и верификации отдельным исполнителям,
00:00:47где у каждого субагента будет свой «чистый» контекст для пошагового выполнения задачи.
00:00:51GSD здесь выступает в роли оркестратора, который управляет этими агентами согласно спецификации,
00:00:55ведя ИИ от сырой идеи до готового к продакшну приложения шаг за шагом.
00:01:00Это означает, что мы потратим больше токенов, но уровень точности,
00:01:04который мы получим, будет намного выше по сравнению с работой в одном окне контекста.
00:01:07Поэтому в этом видео я покажу, как именно настроить GSD в связке с Claude Code.
00:01:11Я продемонстрирую, как взять идею и развить её на базе существующего или нового приложения,
00:01:15как придать форме вашей задумке с помощью исследовательских агентов
00:01:19и агентов-планировщиков, которые есть в системе. А когда идея обретет форму, мы перейдем
00:01:23к реализации, где специальный исполнитель будет запускать параллельных агентов для выполнения задач.
00:01:27У каждого агента — свое свежее окно контекста, и он фиксирует (commit) каждую выполненную задачу.
00:01:32Кроме того, после завершения задачи система запускает еще одного агента,
00:01:37чтобы проверить результат на соответствие целям. И что самое важное,
00:01:41я покажу, как зациклить каждый этап — обсуждение, планирование, исполнение и проверку —
00:01:45шаг за шагом, цикл за циклом, пока вся веха (milestone) не будет завершена
00:01:49полностью автономно, без использования циклов обратной связи вручную. В общем, именно это
00:01:55мы и разберем сегодня. Если вам интересно — поехали! Итак, прежде чем начнем,
00:02:00коротко представлюсь для новичков: меня зовут Эрик. Я много лет работал старшим инженером
00:02:04в таких компаниях, как Amazon, AWS и Microsoft. Я завел этот канал, чтобы делиться
00:02:09всем, чему научился: от ИИ-программирования до автоматизации, Web3 и карьеры.
00:02:15Всё это я упаковываю в практические туториалы. Так что, если готовы прокачаться,
00:02:22обязательно загляните на канал и подпишитесь. А теперь вернемся к теме.
00:02:27Первым делом мы переходим в репозиторий GSD. Здесь подробно описано,
00:02:32как установить его на локальную машину. Я просто скопирую эту команду,
00:02:36вернусь в терминал своего текущего проекта и введу команду для установки.
00:02:40Нажимаю «yes» для подтверждения. Здесь нужно выбрать,
00:02:44что мы будем использовать: Claude Code, Open Code или оба варианта. Для демонстрации выберу только Claude Code.
00:02:49Далее вопрос: куда установить? Я предпочитаю глобальную установку,
00:02:53чтобы инструмент был доступен во всех проектах. Окей. После выбора мы видим,
00:02:57что GSD включает строку состояния с именем модели, текущей задачей и расходом контекста.
00:03:02Оставить старую или заменить её на статусную строку GSD? Честно говоря,
00:03:07я еще не видел версию от GSD, так что выберу второй вариант, чтобы посмотреть,
00:03:12как она выглядит. Теперь открываю сессию Claude Code. Вот так сейчас
00:03:17выглядит строка состояния GSD. Конечно, если вам она не нравится,
00:03:22вы можете использовать мою версию — у меня есть отдельное видео о том,
00:03:26как кастомизировать строку состояния именно так. Но пока остановимся на варианте GSD.
00:03:31Когда GSD установлен, мы просто вводим команду «gsd». Как видите,
00:03:37все кастомные команды теперь доступны прямо в терминале Claude Code. Отлично.
00:03:41Следующий шаг после установки — инициализация проекта. Если вы начинаете с нуля,
00:03:46просто введите «gsd new project». Но если у вас уже есть проект,
00:03:49то сначала нужно запустить вот эту команду. Она активирует
00:03:54нескольких субагентов для анализа стека, архитектуры, стандартов написания кода и проблемных мест.
00:03:58Затем мы сможем использовать эту команду, чтобы ИИ полностью изучил кодовую базу
00:04:02и мог отвечать на вопросы о том, что вы планируете добавить или изменить. В данном случае
00:04:06я сначала запускаю команду для маппинга (картирования) всей кодовой базы. Смотрите,
00:04:10запускаются четыре параллельных агента-картографа. Они изучают техстек,
00:04:15архитектуру, конвенции и риски — анализируют абсолютно всё в нашем приложении.
00:04:20Давайте немного подождем, пока эти параллельные агенты завершат свою работу.
00:04:24Итак, маппинг завершен, кодовая база проанализирована. Теперь я сброшу
00:04:28сессию Claude Code, потому что окно контекста уже заполнено наполовину. Я завершу процесс,
00:04:32очищу терминал и перезапущу Claude Code. Теперь мы начинаем с нуля,
00:04:38но не волнуйтесь: результаты маппинга сохранены. Вы можете найти их
00:04:42в папке «.planning». Там есть файл «codebase», где суммировано всё,
00:04:46что есть в приложении: архитектура, проблемные зоны, стандарты, интеграции.
00:04:50Всё это хранится здесь, так что мы не потеряем текущее состояние анализа.
00:04:54Когда с маппингом закончено, пора инициализировать проект. Система
00:04:59задаст мне ряд вопросов, чтобы понять мою идею: какие функции мы добавим?
00:05:04Затем она запустит параллельных субагентов для исследования предметной области,
00:05:09поможет извлечь требования и составить дорожную карту с этапами реализации.
00:05:13Именно это мы сейчас и сделаем. Копирую команду, вставляю в терминал.
00:05:17Начинается инициализация. Система видит, что это «brownfield» проект (существующий код),
00:05:23карта кодовой базы уже есть, Git-репозиторий на месте, но файла «project.md» пока нет.
00:05:28ИИ говорит: «Вижу ваш проект и карту кода. В файле Claude.md я вижу
00:05:32бизнес-контекст». И спрашивает: «Что вы хотите построить дальше?»
00:05:36У меня уже есть задумка — создание панели управления для админов.
00:05:39Это небольшой MD-файл, набросанный с помощью ИИ. Нам нужна минимальная админ-панель —
00:05:43новая вкладка в боковом меню, где будут инструменты для управления пользователями
00:05:47и обработки тикетов поддержки. Как видите, я прописал нужные функции,
00:05:51MVP-фичи, мокапы интерфейса, фреймворки и прочие детали. Всё очень подробно.
00:05:56Очень рекомендую использовать Claude для предварительного наброска плана,
00:06:00чтобы он просмотрел приложение и составил черновик того, что вы хотите реализовать.
00:06:05Хотя бы список изменений в UI или функций, чтобы был четкий план
00:06:10для реализации в Claude Code. Конечно, я мог бы просто отдать этот план Claude,
00:06:14но я хочу, чтобы управление взял на себя GSD и провел исследование,
00:06:18запустив субагентов для ресерча и разбиения этой большой задачи на мелкие,
00:06:23которые проще внедрить. Поэтому я открываю терминал и указываю,
00:06:29что именно мы будем строить, ссылаясь на этот файл. Пишу:
00:06:34«Я планирую построить следующее», ввожу данные и позволяю GSD
00:06:39заняться планированием. Он читает бэклог, который мы хотим реализовать
00:06:42для этого приложения. Видите, запускается опрос, чтобы уточнить спецификацию.
00:06:47Меня спрашивают: «Спека включает 4 фичи: список пользователей, кредиты, уровни и имперсонацию.
00:06:52Делаем всё сразу или выделим приоритеты для первой итерации?» Заметьте,
00:06:56система сразу начала дробить одну гигантскую задачу на части. Я отвечу:
00:07:00«Давайте начнем с простого: списка пользователей и кредитов». Подтверждаю.
00:07:04Следующий вопрос: «Как вы хотите проверять работу админки?» Проект совсем свежий,
00:07:08так что пока я тестирую вручную, но ИИ уже предлагает варианты покрытия тестами.
00:07:13Например, тесты API-эндпоинтов или полное покрытие: юнит-тесты,
00:07:20интеграционные и сквозные (E2E). Я выберу только ручное тестирование
00:07:25на первом этапе, а позже мы расширим покрытие. Пишу «yes» для ручного теста
00:07:28и отправляю ответ. Посмотрим, что GSD сделает дальше. Система продолжает
00:07:33задавать вопросы. «Когда админ-панель должна быть готова?» В моих документах
00:07:40от бизнес-аналитика указана дата запуска — 30 января. ИИ это заметил
00:07:44и спрашивает: «Нужно ли успеть до запуска v2, то есть к 30 января?»
00:07:48Отвечаю: «Да, определенно хочу получить результат до этой даты».
00:07:52Затем вопрос: «Переходим к созданию файла project.md?»
00:07:58Нет, я хочу еще немного исследовать и позадавать вопросы. Один из них —
00:08:02попытаться найти пробелы в нашей спецификации и в том, что мы планируем делать.
00:08:07И вот запускается целая группа субагентов для исследования безопасности, UX,
00:08:11лучших практик и технических пробелов в реализации, которые мы могли упустить.
00:08:16Перед нами таблица, охватывающая все эти пробелы. К примеру,
00:08:21отсутствие защиты Middleware для админа, проблемы с Cookie, лимиты запросов
00:08:25в памяти, а также действия админа при удалении пользователей. Еще выяснилось,
00:08:30что функция «is admin» работает некорректно для других пользователей. Нужно устранить
00:08:34эти пробелы в текущем проекте. А здесь приведен список исправлений,
00:08:38которые система предлагает внедрить. Мы можем изучить их и решить,
00:08:43насколько они обоснованы. Если всё верно — переходим к созданию
00:08:46файла project.md и реализации. ИИ снова уточняет: «Найдена критическая
00:08:50уязвимость в безопасности. Как поступим?» Я рекомендую: «Исправь критические ошибки».
00:08:56Отправляю это Claude Code, чтобы убедиться, что наш план и спецификация
00:09:01идеальны перед созданием project.md. Теперь всё готово, и я говорю:
00:09:05«Да, переходим к файлу project.md». Claude Code приступает к его созданию
00:09:10для всего проекта. Подождем немного, пока процесс завершится.
00:09:14А пока небольшое отступление — хочу поблагодарить спонсора этого видео, Testbrite.
00:09:19Testbrite — это ИИ-агент, созданный специально для тестирования ПО. С выходом
00:09:22Testbrite MCP вы можете использовать его прямо в вашей IDE: Cursor, Windsurf,
00:09:28Claude Code и других. Настройка очень простая: добавьте конфигурацию в настройки MCP,
00:09:32и готово. Что мне нравится в Testbrite — он не запускает тесты вслепую.
00:09:37Сначала он изучает кодовую базу, документацию и проверяет результаты,
00:09:43выданные вашими ИИ-агентами. Он автоматически создает план тестирования на основе PRD,
00:09:49генерирует тест-кейсы и обеспечивает покрытие — и всё это без ручного ввода.
00:09:52Затем он выполняет тесты и присылает детальные отчеты, наглядно показывая,
00:09:57что сломано и на что обратить внимание. Большинство современных ИИ-кодеров
00:10:02имеют точность около 42%. С Testbrite MCP команды повышают точность
00:10:06доставки фич до 93%. Если интересно, посмотрите мое видео о нем или
00:10:11кликните по ссылке в описании. Возвращаемся к теме. Итак, когда мы
00:10:15определили рамки проекта и создали project.md, нам нужно выбрать режим.
00:10:20Есть режим «YOLO», который будет автоматически всё одобрять и выполнять,
00:10:24или интерактивный режим, где после каждого шага нужно подтверждать изменения.
00:10:29Я выберу YOLO, чтобы полностью довериться системе и позволить ей сделать всё самой.
00:10:33Нажимаю Enter. Теперь вопрос о глубине (depth): насколько детальным
00:10:38должно быть планирование? Можно выбрать «быстрый» вариант для оперативной отгрузки
00:10:42(3-5 фаз по 1-3 плана в каждой), либо «стандартный» — сбалансированный подход
00:10:46с 5-8 фазами по 3-5 планов в каждой. Я выберу стандартный вариант,
00:10:51так как нам нужен качественный результат, а не спешка. Выбираю номер 2.
00:10:57Отправляю ответ. Теперь нам предлагают способ исполнения (execution).
00:11:02Запускать планы параллельно (независимые задачи идут одновременно) или
00:11:07выполнять их последовательно. Моя рекомендация: если время терпит,
00:11:11выбирайте последовательный (sequential) режим. Так мы будем разбираться с планами
00:11:16по очереди. В параллельном режиме, если закончатся кредиты, вы можете застрять
00:11:21с двумя недоделанными задачами. А при последовательном выполнении часть задач
00:11:26уже будет готова. Даже если кредиты исчерпаны, можно дождаться завтрашнего дня
00:11:32и продолжить с того же места. По крайней мере, проект не будет брошен
00:11:38на полпути во всех направлениях сразу. Выбираю «sequential» — идем шаг за шагом.
00:11:42Далее — трекинг в Git. Нужно ли коммитить документы планирования? Да,
00:11:47я определенно хочу сохранять историю планов в Git. Отвечаю «yes»
00:11:52и отправляю. И еще пара вопросов: проводить ли исследование перед планированием?
00:11:56Я ответил «да». Проверять ли, что планы ведут к цели, перед началом работы?” —
00:12:01тоже «да». Что касается верификатора — проверять ли соответствие требованиям
00:12:04после каждой фазы? Снова «да». И предпочтения по модели: я выбираю
00:12:09максимальное качество — Opus для ресерча и дорожной карты, несмотря на стоимость.
00:12:14В итоге все эти настройки были сохранены в файл «config.json».
00:12:18Это файл конфигурации, который можно вручную поправить в любой момент.
00:12:22Чтобы не затягивать видео, перейдем к этапу исследования. GSD запускает
00:12:26синтезатор ресерча: сначала работает группа субагентов-исследователей,
00:12:30а когда они заканчивают, система собирает все данные воедино и формирует
00:12:34финальный отчет по нашему проекту. Как только мы его одобряем,
00:12:38GSD переходит к составлению пошаговой дорожной карты для всего проекта.
00:12:42Итак, дорожная карта готова. В ней 5 фаз и 36 требований, которые покрывают
00:12:46все условия версии V1. Например, база данных, схема, бэкенд и пользовательский интерфейс.
00:12:51Меня спрашивают: «Вас устраивает структура дорожной карты?» Вы можете
00:12:57изучить её, проверить, не упущено ли что-то. Если всё в порядке,
00:13:01я пишу «approve», и система начинает вносить изменения. После инициализации
00:13:06перед нами полный набор артефактов для MVP в папке «planning».
00:13:10Все 5 фаз и 36 требований готовы к реализации. Дальше, если нас всё
00:13:14устраивает, мы начинаем с первой фазы, проходя их одну за другой. При создании
00:13:18плана для первой фазы GSD также задействует субагентов для планирования
00:13:22второй и третьей фаз — всё это происходит в комплексе. Агенты могут
00:13:27создавать новые планы для каждого этапа. Когда план готов, мы переходим
00:13:31к реализации. Как я уже говорил, мы хотим делать это последовательно
00:13:35и с чистым контекстом. И я не хочу, чтобы после каждого плана меня просили
00:13:40проверить результат вручную. Я хочу, чтобы система сначала сделала всё,
00:13:46а потом я проверю весь объем сразу, не отвлекаясь на каждой фазе.
00:13:52GSD позволяет настроить этот процесс максимально гибко.
00:13:58Обратите внимание на то, как субагенты взаимодействуют между собой.
00:14:03Оркестратор передает контекст следующему агенту только в необходимом объеме.
00:14:07Это как раз и решает проблему потери точности из-за огромного контекста.
00:14:12Давайте посмотрим, как выполняется первая задача из списка.
00:14:16Агент-исполнитель открывает нужные файлы, вносит правки и делает коммит.
00:14:21Каждое изменение сопровождается четким описанием того, что было сделано.
00:14:26Если в процессе возникнет ошибка, верификатор это заметит и отправит
00:14:30задачу на доработку. Всё это происходит без вашего прямого участия.
00:14:34Такой подход экономит массу времени при разработке сложных фич.
00:14:39В файле project.md вы можете в реальном времени наблюдать за прогрессом.
00:14:43Выполненные пункты отмечаются галочками автоматически.
00:14:49Сейчас мы видим, как завершается настройка схемы базы данных.
00:14:54Это фундамент для нашей будущей админ-панели.
00:14:59Следующим шагом будет создание API-эндпоинтов для получения списка пользователей.
00:15:03GSD уже подготовил план для этого этапа в фоновом режиме.
00:15:08Давайте перейдем к просмотру кода, который сгенерировал наш ИИ-агент.
00:15:13Все они находятся в папке planning. Так что все 5 фаз и все 36 требований готовы к сборке.
00:15:18Итак, если нас всё устраивает, мы начнем с первой фазы,
00:15:21будем проходить их одну за другой. И как только вы создадите план для первой фазы,
00:15:25вы увидите, что здесь также задействовано несколько субагентов для создания плана второй фазы,
00:15:29третьей фазы и так далее. То есть у вас есть субагенты для очистки,
00:15:34создания нового плана или плана для каждой имеющейся фазы. Создав фазу,
00:15:38теперь вы можете перейти непосредственно к реализации. Как мы уже упоминали,
00:15:41мы хотим запускать это последовательно с чистым контекстом, и я не хочу, чтобы система
00:15:46заканчивала один план и просила меня его подтвердить. Я хочу, чтобы она завершила всё полностью,
00:15:52и только после этого мы всё проверим. Я не хочу делать верификацию на каждой фазе.
00:15:55Мне нужно проверить результат, когда все фазы будут завершены. Для этого вы можете
00:15:59сообщить Claude следующее: «Я хочу выполнить фазы GSD последовательно с чистым контекстом».
00:16:03В этом случае система выполнит каждую фазу по очереди, создавая свежий
00:16:08контекст сессии для каждого плана. По сути, вы увидите, что произойдет следующее:
00:16:13запустятся новые субагенты через GSD executor. И каждый агент здесь получает
00:16:18200 тысяч токенов чистого контекста, чтобы он не смешивался с предыдущим планом другого субагента.
00:16:23Затем произойдет выполнение всех 13 планов полностью
00:16:27автономно с помощью GSD. У нас есть схема базы данных, бэкенд, интерфейс, управление кредитами,
00:16:34а также просмотрщик логов аудита. Всё это выполняется по порядку. И сейчас я просто
00:16:39очищу контекст, обойду разрешения и запущу выполнение одного за другим. Итак, теперь вы
00:16:44видите запуск реализации первой фазы админ-панели.
00:16:48Давайте немного подождем, пока всё не будет полностью внедрено. Итак, после того как все
00:16:53фазы были реализованы через GSD, вот как выглядит результат. Прямо здесь, вы видите, я нахожусь
00:16:57во вкладке администратора, в разделе управления пользователями. Здесь мы можем просматривать всех
00:17:03пользователей нашей текущей платформы. Я могу выполнить поиск. Например, если я введу
00:17:07«test», то увижу первый результат прямо здесь. И допустим, если я
00:17:12удалю это, то снова отобразится весь список. Я также могу фильтровать по
00:17:17тарифам. Я могу посмотреть, кто использует бесплатные тарифы, увидеть их,
00:17:21проверить использование кредитов, дату регистрации, а также скорректировать баланс,
00:17:25верно? Я могу просмотреть детали аккаунта, как здесь, или же могу
00:17:29изменить количество кредитов. Я могу помочь пользователям скорректировать события,
00:17:33установить кредит, задать кастомные лимиты, а также увидеть текущее
00:17:38использование и указать причину. И в логе аудита мы можем всё это отслеживать.
00:17:42Например, выберем все тарифы. Сейчас я вошел под этим пользователем,
00:17:48который является администратором. Допустим, я нажму сюда и попробую изменить кредиты,
00:17:52скажем, я увеличу их количество на 50. То есть,
00:17:57с текущих 510 до 560 кредитов. Всё, что нам нужно сделать ниже,” — это
00:18:03просто добавить причину. Например, я напишу «test», и это будет нашим обоснованием,
00:18:07а затем применю изменения. И посмотрите, что произойдет: появилось
00:18:11уведомление о том, что баланс увеличен с 510 до 560, и это также вызвало
00:18:17перерисовку компонента. Вы видите, что в таблице данные тоже обновились,
00:18:21с 510 до 560 — именно столько у нас теперь. Таким образом, мы подтвердили, что функция
00:18:27полностью работает. Мы также можем заглянуть в раздел админ-аналитики, где можно увидеть
00:18:31данные по всему, что есть в нашем приложении. Видно время последнего обновления,
00:18:36а также статистику: общее число пользователей, платных подписчиков,
00:18:40распределение по тарифам, использование кредитов и самых активных юзеров. Также нам
00:18:46доступны логи аудита, что означает, что все события и действия, которые мы совершали
00:18:51для корректировки кредитов, мы можем увидеть прямо здесь, внутри
00:18:55этого раздела. Например: изменение кредитов, синхронизация, целевой пользователь и
00:19:00подробности операции. Всё это есть в истории аудита. В общем,
00:19:05именно так вы можете использовать GSD, чтобы пройти весь цикл разработки и завершить фичу.
00:19:09Если вам понравилось это видео, обязательно поставьте лайк. И, конечно,
00:19:13если вам интересно, как мне удалось заставить этот компонент перерисовываться после
00:19:16применения кредитов без перезагрузки страницы, то краткий ответ — я использовал Zustand.
00:19:21Это библиотека управления состоянием для централизации данных всего приложения, чтобы
00:19:26при обновлении одной части компонента изменения тут же отражались в текущем состоянии.
00:19:30Если вы хотите узнать, как добавить такое управление состоянием в свои
00:19:34приложения, я настоятельно рекомендую мой семичасовой курс, в котором я показал,
00:19:38как создать полноценное, готовое к продакшну приложение на NestJS — масштабируемое и пошаговое.
00:19:44На этом всё. Если видео было полезным, ставьте лайк.
00:19:47Подписывайтесь, так как в будущем я поделюсь новыми уроками и приемами,
00:19:51которые помогут вам создавать серьезные проекты, используя ИИ для написания кода,
00:19:55чтобы строить такие же крутые приложения. Увидимся в следующем видео!