00:00:00Большинство из вас уже знают shad cn как одну из самых широко используемых UI-библиотек,
00:00:04но использование AI-агента для разработки с ней может быть проблематичным.
00:00:08Если вы создаете одностраничные лендинги,
00:00:10у вас не будет серьезных проблем,
00:00:11но если вы разрабатываете новое приложение или внедряете новую функцию — всё ломается,
00:00:15и это ломает другие части приложения.
00:00:17Но это не новость — эта проблема уже решена,
00:00:19и именно так сейчас инженеры создают приложения.
00:00:22AI-агенты всегда тестируют код,
00:00:23который пишут,
00:00:24но эти агенты становятся ненадежными при больших контекстах.
00:00:27Поэтому нам нужен способ гарантировать,
00:00:29что агенты завершают порученную им работу.
00:00:31Здесь в игру вступает концепция агентных циклов,
00:00:33и Anthropic решает это с помощью ralph-цикла.
00:00:36Чтобы решить свою UI-проблему,
00:00:37я попытался реализовать ralph-цикл,
00:00:39и сначала он полностью провалился.
00:00:40Но вскоре я понял,
00:00:41что дело было не в ralph-цикле — дело было в процессе,
00:00:44который я реализовал вместе с ним.
00:00:46Итак,
00:00:46ralph — это на самом деле новый плагин,
00:00:48выпущенный самой Anthropic,
00:00:49но это не была их оригинальная идея.
00:00:51Он основан на технике другого человека,
00:00:53а Anthropic реализовала и выложила её в открытый доступ.
00:00:56По сути,
00:00:56ralph — это цикл,
00:00:57и если вы знаете о клод-код-хуках,
00:00:59он использует эти стоп-хуки,
00:01:00которые срабатывают,
00:01:01когда Клод прекращает выводить ответ.
00:01:03Как только он останавливается,
00:01:05AI-агенту снова подается его исходный файл-промпт,
00:01:07и это позволяет ему итеративно улучшать свою работу.
00:01:10Теперь важный вопрос: когда же он выходит из цикла?
00:01:12Существует так называемое обещание завершения — это может быть любое слово,
00:01:16которое вы введете.
00:01:17Когда Клод чувствует,
00:01:18что его задача выполнена,
00:01:19он сам выводит это обещание.
00:01:20Например, в этом случае обещанием является слово complete.
00:01:23Если обещание есть в возвращаемом промпте,
00:01:25цикл не запускается снова.
00:01:27Таким образом,
00:01:27пока Клод не выведет обещание,
00:01:29он не остановится.
00:01:30Это гарантирует,
00:01:31что Клод не завершит работу просто по собственному желанию.
00:01:34После установки плагина у вас будет три команды: команда ralph loop,
00:01:37команда отмены и команда помощи.
00:01:39В команде loop вам нужно указать промпт,
00:01:41который снова и снова подается агенту.
00:01:42Иногда он может получить невыполнимую задачу,
00:01:45которую не может решить,
00:01:46и может застрять в бесконечном цикле,
00:01:48поэтому установка максимального количества итераций — действительно хорошая практика.
00:01:52Я оставлю ссылку на репозиторий ниже,
00:01:54потому что там есть хорошие лучшие практики для промптов,
00:01:56которые вы можете давать ralph-циклу,
00:01:58но в этом видео я буду обсуждать только те,
00:02:00что связаны с UI-рабочим процессом,
00:02:02который я собираюсь вам показать.
00:02:04Допустим,
00:02:04мы хотим реализовать две функции в этом приложении.
00:02:07Одна — командная палитра,
00:02:08где мы добавляем меню для поиска по приложению и выполнения других команд.
00:02:12Чтобы убедиться,
00:02:12что эта новая функция не сломает другие части приложения,
00:02:15вы начнете с тестов.
00:02:16Это называется разработка через тестирование (TDD).
00:02:19Если вы не знакомы с этим,
00:02:20можете попросить Клод-код настроить TDD-структуру для вас,
00:02:23где он создаст папку для end-to-end тестов,
00:02:25папку для скриншотов для проверки UI-проблем и соответствующие тесты.
00:02:28Другая функция,
00:02:29которую мы собираемся реализовать — это представление в виде доски в базе данных,
00:02:33подобное тому,
00:02:34что Notion позволяет делать со своими базами данных.
00:02:36Если вы уловили суть — разработка через тестирование это подход,
00:02:40при котором тесты пишутся до того,
00:02:41как реализован код.
00:02:42Но это означает,
00:02:43что изначально тесты всегда будут проваливаться.
00:02:45Поэтому если я внедряю функцию командной палитры,
00:02:48я не буду просто начинать писать для неё код.
00:02:50Вместо этого я сначала напишу подробные тесты для неё.
00:02:53Затем мы пишем минимальное количество кода,
00:02:55необходимое для прохождения этих тестов.
00:02:57Как только это сделано,
00:02:58мы рефакторим и добавляем больше функциональности,
00:03:00и с каждым добавлением убеждаемся,
00:03:02что тесты всё ещё проходят.
00:03:03Ещё один интересный момент — эти тесты автоматизированы,
00:03:06и Playwright можно импортировать и использовать для визуальной верификации.
00:03:10Если вы думаете,
00:03:11что мы используем Playwright MCP для автономной верификации через браузер — вы ошибаетесь.
00:03:15При TDD для каждого функционального поведения можно делать скриншоты.
00:03:18Например,
00:03:19если функциональное поведение — добавление карточки,
00:03:22то скриншот покажет карточку,
00:03:23добавленную на доску.
00:03:24Так что теперь всё,
00:03:25что должен сделать AI-агент — это посмотреть на эти скриншоты и убедиться,
00:03:29что нет проблем в том,
00:03:30как были реализованы эти shad cn компоненты.
00:03:32Эти тестовые файлы гарантируют,
00:03:33что всякий раз,
00:03:34когда что-то новое добавляется или пока создается функция,
00:03:37все наши поведенческие требования выполняются.
00:03:39Но в нашем случае мы хотим использовать скриншоты исключительно для UI-верификации.
00:03:43Но если у нас уже есть TDD, зачем нам нужен ralph-цикл?
00:03:46Как я уже говорил,
00:03:47при больших задачах и почти заполненных контекстных окнах эти модели резко прекращают свои задачи и требуют постоянного человеческого участия.
00:03:54Поэтому я могу заранее написать тесты для любого типа функции,
00:03:57которую я хочу,
00:03:58затем использовать цикл,
00:03:59чтобы проинструктировать его о том,
00:04:01что делать,
00:04:01и он может работать автономно,
00:04:03указывая ему,
00:04:03какому рабочему процессу следовать,
00:04:05а затем давая ему условие,
00:04:06при котором он может вывести обещание.
00:04:08Он завершает задачу и выходит из цикла,
00:04:10что в этом случае происходит,
00:04:11когда он проходит все 25 уникальных тестов.
00:04:14Итак,
00:04:14используя слэш-команду ralph,
00:04:15я дал ему промпт,
00:04:16чтобы он итеративно создал функцию командной палитры.
00:04:19В промпте мы в основном говорили ему реализовать функцию вместе с некоторыми базовыми требованиями,
00:04:24которые не очень важны,
00:04:25потому что требования также можно найти в тестах,
00:04:27но мы действительно описали весь рабочий процесс.
00:04:30В этом рабочем процессе он должен был начать с запуска тестов.
00:04:33Он знает,
00:04:33что тесты провалятся,
00:04:34и после этого ему нужно реализовать компоненты,
00:04:37чтобы заставить их пройти.
00:04:38Вот и вся цель.
00:04:39Теперь,
00:04:39если бы это была гораздо более широкая задача,
00:04:41есть вероятность,
00:04:42что когда контекстное окно заполнится или Клод запутается,
00:04:45он автоматически завершит работу.
00:04:47Он никогда не выведет обещание завершения,
00:04:49и поскольку он не выводит обещание,
00:04:50промпт будет подан снова,
00:04:52и ему придется начать всё сначала,
00:04:53то есть он будет итеративно продолжать работать над этим.
00:04:56Но поскольку это была меньшая задача,
00:04:58он на самом деле смог реализовать всё за один раз — написать все компоненты и заставить все тесты пройти.
00:05:03Теперь,
00:05:04после того как тесты прошли,
00:05:05рабочий процесс говорит ему проверить все скриншоты для командной палитры.
00:05:09Это скриншоты,
00:05:09сделанные на разных этапах,
00:05:11чтобы убедиться,
00:05:12что UI,
00:05:12будь то shad cn или любая другая библиотека компонентов,
00:05:15которую вы используете,
00:05:16реализован правильно и что нет никаких мелких проблем.
00:05:19После этого он должен снова запустить тесты и убедиться,
00:05:21что они всё ещё проходят после изменений UI.
00:05:24Поскольку все тесты проходили и скриншоты были проверены,
00:05:26он вывел обещание завершения.
00:05:28Здесь цикл остановился и больше не продолжился.
00:05:30Но была действительно большая проблема с этим,
00:05:32которую я не заметил в функции командной палитры,
00:05:35потому что было очень мало шансов на UI-ошибки.
00:05:37Однако когда я перешел к реализации представления доски,
00:05:40я понял,
00:05:40что в системе была огромная ошибка.
00:05:42Я начал с реализации доски с тем же промптом.
00:05:44Требования,
00:05:45конечно,
00:05:45были другими,
00:05:46но рабочий процесс был практически тем же.
00:05:48Теперь я был несколько удивлен,
00:05:50когда он выполнил все требования за один раз.
00:05:52Не поймите меня неправильно — он действительно следил за тем,
00:05:55чтобы все тесты проходили,
00:05:56но пока он это делал,
00:05:57были случаи,
00:05:58когда количество успешных тестов на самом деле уменьшалось,
00:06:01потому что,
00:06:01изменяя что-то,
00:06:02он ломал что-то ещё,
00:06:03и именно поэтому TDD действительно важен — из-за этого рекурсивного тестирования и обеспечения того,
00:06:08что всё работает.
00:06:08Но главная проблема заключалась в том,
00:06:10что после того как он подтвердил,
00:06:12что закончил,
00:06:13и я пошел проверять UI,
00:06:14большинство вещей были реализованы правильно,
00:06:16но он полностью пропустил некоторые UI-ошибки,
00:06:18например,
00:06:19вот эту.
00:06:19Я также проверил скриншоты,
00:06:20и ошибки отображались и на этих скриншотах.
00:06:23Поэтому я спросил его,
00:06:24и мы проанализировали,
00:06:25что на самом деле пошло не так.
00:06:26Реальная проблема была в сбое процесса,
00:06:28конкретно в плане исправления UI.
00:06:30Что произошло — он действительно прошел все тесты,
00:06:32потому что должен был снова и снова запускать тестовые файлы,
00:06:35но не было специального теста для UI,
00:06:37кроме скриншотов.
00:06:38Он бегло просмотрел несколько из них и даже проигнорировал некоторые UI-ошибки,
00:06:42которые видел.
00:06:42Некоторые файлы были полностью проигнорированы.
00:06:45Поэтому главная проблема заключалась в том,
00:06:47что он вывел своё обещание преждевременно и не проверил,
00:06:50действительно ли UI исправлен.
00:06:51Мы провели целую мозговую штурм-сессию о том,
00:06:53как мы можем это исправить,
00:06:55и я даже дал лучшие практики написания промптов из репозитория Клоду-коду,
00:06:58но в итоге мы придумали некоторые конкретные правила и изменение в процессе,
00:07:02которые гарантировали бы,
00:07:03что UI всегда правильный.
00:07:05Теперь это не имело ничего общего с тестами,
00:07:07потому что они всегда будут запускаться.
00:07:09Промпт,
00:07:09который мы использовали для командной палитры,
00:07:12действительно полезен,
00:07:13когда функция или реализация очень большая,
00:07:15где Клод не галлюцинирует,
00:07:16что выполнил задачу,
00:07:17а вместо этого из-за полного контекстного окна или сложности задачи резко завершает работу.
00:07:22Теперь Клод-код уже действительно автономен,
00:07:24в этом нет сомнений,
00:07:25но всё ещё есть такие проблемы,
00:07:26которые нам нужно исправить.
00:07:28Поэтому мы изменили ряд вещей в основном промпте.
00:07:30Первым был протокол верификации скриншотов.
00:07:32Мы добавили простой префикс к каждому изображению,
00:07:35который сообщал Клоду,
00:07:36прочитал ли он скриншот или нет.
00:07:37Но когда я впервые реализовал это,
00:07:39он всё равно не прочитал все изображения.
00:07:41Он читал несколько,
00:07:42писал "verified" поверх них и,
00:07:43как и прежде,
00:07:44завершал работу рано.
00:07:45Поэтому,
00:07:46чтобы решить это,
00:07:46мы подтолкнули его думать по-другому.
00:07:48Мы сказали ему,
00:07:49что после того как он переименовал все скриншоты,
00:07:51он ещё не должен выводить обещание,
00:07:53то есть не должен считать задачу завершенной,
00:07:55и должен позволить следующей итерации подтвердить завершение.
00:07:58Так что должно пройти как минимум два цикла.
00:08:00Что происходит при следующей верификации — Клод проверяет,
00:08:03что у всех файлов есть префикс "verified".
00:08:05Конечно,
00:08:06это означало,
00:08:06что нам пришлось изменить тесты и отделить верификацию изображений от функциональных тестов.
00:08:11Следующая итерация убеждается,
00:08:12что все изображения имеют результаты "verified",
00:08:15и если Клод что-то пропустил,
00:08:16он снова смотрит на них и исправляет вывод.
00:08:18С этим изменением небольшие UI-ошибки,
00:08:20с которыми мы сталкивались,
00:08:22наконец были исправлены,
00:08:23и он смог правильно реализовать все эти функции.
00:08:25Поэтому,
00:08:26когда он вошел в следующий цикл,
00:08:27он снова запустил тесты.
00:08:28Поскольку он обнаружил некоторые ошибки,
00:08:30он их исправил,
00:08:31и поскольку во всех файлах было слово "verified",
00:08:34он запустил финальный тест.
00:08:35На этот раз он завершил свою задачу за два цикла и смог исправить все основные UI-ошибки в приложении.
00:08:40Давайте теперь поговорим об Automata.
00:08:42После обучения миллионов людей тому,
00:08:43как создавать с AI,
00:08:44мы начали применять эти рабочие процессы сами.
00:08:47Мы обнаружили,
00:08:47что можем создавать лучшие продукты быстрее,
00:08:50чем когда-либо прежде.
00:08:51Мы помогаем воплотить ваши идеи в жизнь,
00:08:53будь то приложения или веб-сайты.
00:08:54Возможно,
00:08:55вы смотрели наши видео и думали: у меня есть отличная идея,
00:08:58но у меня нет технической команды,
00:08:59чтобы её реализовать.
00:09:00Именно здесь мы и появляемся.
00:09:02Думайте о нас как о вашем техническом со-пилоте.
00:09:04Мы применяем те же рабочие процессы,
00:09:06которым научили миллионы,
00:09:07непосредственно к вашему проекту,
00:09:09превращая концепции в реальные работающие решения без головной боли найма или управления командой разработчиков.
00:09:14Готовы ускорить превращение вашей идеи в реальность?
00:09:17Свяжитесь с нами по адресу hello@automata.dev.
00:09:19Если вы хотите поддержать канал и помочь нам продолжать создавать подобные видео,
00:09:23вы можете сделать это,
00:09:24используя кнопку Super Thanks ниже.
00:09:26Как всегда,
00:09:26спасибо за просмотр,
00:09:27и увидимся в следующем видео..