Каждый уровень инженерии циклов Claude Code

AAI LABS
컴퓨터/소프트웨어AI/미래기술

스크립트

00:00:00Инжиниринг циклов по сути стал неотъемлемой частью того, как мы используем ИИ-агентов сегодня, и все потому,
00:00:04что агенты теперь могут работать самостоятельно гораздо дольше и просто продолжать выполнение. Поэтому мы
00:00:09покажем вам три разных цикла, и для вашего удобства мы разбили их по уровням.
00:00:13Первый уровень показывает базовый блок и то, как эффективно его использовать. Второй уровень демонстрирует, как собрать
00:00:18этот блок в целое производство, а третий уровень наконец освобождает большую часть вашего времени и делает процесс
00:00:23по-настоящему автономным. Поскольку это видео наполнено огромным количеством информации, внизу мы оставили тайм-коды,
00:00:28чтобы вы могли вернуться к любому моменту, если вам понадобится пересмотреть видео. Кроме того, в этом видео
00:00:33мы будем использовать Claude Code, но системы, которые мы вам покажем, будут работать и с Codex,
00:00:38а в качестве инструментов мы используем Warp и VS Code. Их оба легко установить, и вам нужно всего лишь
00:00:43открыть одну и ту же папку в обоих приложениях и начать повторять за нами. Прежде чем мы перейдем к тому,
00:00:48как реализовать инжиниринг циклов в вайб-кодинге, нам нужно объяснить, что такое цикл. Раньше, когда вы
00:00:53что-то создавали, вы уже находились в цикле. Вы давали агенту промпт, и он начинал
00:00:57разработку. Затем, когда он заканчивал, он по сути просил вас проверить результат, и если что-то было не так, вы давали
00:01:02агенту новый промпт, и он снова начинал работу. Вы уже были в цикле. Теперь же цикл агента
00:01:07означает, что вы исключаете себя из этого процесса, и этап проверки перекладывается на самого агента. И
00:01:12это естественное направление нашего развития, ведь если подумать, программирование с помощью агентов — это вовсе не то,
00:01:17что отнимает больше всего времени. Они делают это автономно в фоновом режиме. То, что действительно требует
00:01:21вашего внимания — это проверка того, преуспел агент или нет. Но ваш агент может выполнить проверку,
00:01:26только если знает, каким должен быть правильный результат. Это ключевая часть цикла. Но существуют
00:01:30и другие составляющие. Во-первых, нужен компонент, который запускает цикл. Затем идет сам цикл.
00:01:35И в конце каждого цикла обязательно должна быть проверка, которая определяет, закончил работу
00:01:41агент или нет. И это решение о проверке должны принимать вы. Таким образом, в агентском цикле
00:01:46за вами остается та часть работы, которая всегда вам принадлежала. Это функция, которая решает,
00:01:50отключить агента или заставить его работать дальше. Переложить это на другого вы не можете. Теперь,
00:01:55вы можете подумать: почему мы внезапно переходим к инжинирингу циклов и почему это не работало
00:01:59год назад? Ответ в том, что модели тогда не могли работать так долго. А теперь, с появлением новых
00:02:04моделей, они способны трудиться без вашего участия часами. Итак, вот на чем мы
00:02:08все это запускаем. Это приложение для записи в салон красоты. Пользователь заходит на сайт,
00:02:13выбирает мастера, видит свободное время этого мастера в разные дни и бронирует
00:02:17встречу. Кроме того, здесь есть авторизация для персонала, ведь в любом салоне, использующем это решение, будет
00:02:22работать администратор. Он одобряет или отклоняет входящие запросы и управляет календарем
00:02:27для разных мастеров салона. Прямо сейчас здесь многого не хватает. Нет лендинга
00:02:31и других важных функций, которые нам еще предстоит добавить. Это сессия Claude Code,
00:02:36в которой мы все это создали. Мы создали папку loop engineering и внутри нее попросили Claude Code
00:02:41настроить проект. Само приложение находится в папке loop salon, и это просто приложение на Next.js.
00:02:46Если вы слышите об этом впервые, не переживайте. Вы просто говорите модели, что хотите
00:02:51создать приложение на Next.js, и начинаете разработку оттуда, а она справляется с этим за вас. Это один
00:02:55из самых популярных способов создания реальных веб-сайтов, вроде того, что мы строим здесь. Теперь вам
00:03:00нужно иметь в своей папке несколько файлов. Во-первых, у нас есть Claude.md, и в нем написано лишь то,
00:03:04что нужно обратиться к Agents.md. Это потому, что в этом репозитории нам может потребоваться запустить больше одного агента,
00:03:09а не только Claude Code. Мы используем этот файл, поскольку практически любой другой агент использует инструкции в
00:03:14Agent.md в качестве правил того, что делать при открытии новой сессии. Только Claude Code использует Claude.md.
00:03:21А внутри Agent.md нам почти ничего не пришлось писать самостоятельно. Затем у нас есть файл
00:03:27под названием design.functional.md, который охватывает все интерактивные элементы приложения, с которыми пользователь
00:03:33должен взаимодействовать. Дизайн для них берется из этого файла. И как вы могли заметить,
00:03:36приложение выглядит как Duolingo. Все потому, что мы скопировали дизайн Duolingo.
00:03:41Затем есть несколько навыков, о которых вам следует знать. Первый — это Grill Me, который мы использовали при
00:03:45создании этой первой версии. Он задает вопросы до тех пор, пока агенту не станет абсолютно понятно,
00:03:50что именно вам нужно. Здесь есть и другие навыки, к которым мы вернемся позже. И вы заметите,
00:03:55что этот проект уже построен. Мы сделали это намеренно. Когда вы начинаете что-то новое,
00:03:59первое, что вы создаете — это MVP, то есть самую грубую рабочую версию вашего
00:04:04продукта, которая выполняет только главную задачу и ничего больше. И вы не хотите строить это с помощью цикла.
00:04:08MVP в любом случае создается быстро. Но чтобы запустить вокруг него цикл, вам придется решить, как выглядит готовый результат,
00:04:13еще до того, как агент начнет работу. А в этот момент вы еще не до конца представляете, куда движется продукт.
00:04:18Поэтому проработка этого займет у вас больше времени, чем самостоятельное создание первой версии.
00:04:23Но прежде чем мы начнем с первым уровнем, было бы здорово, если вы подпишетесь на канал и поставите
00:04:27лайк. Этот небольшой жест поддержки очень важен для нас. Итак, мы переходим к первому уровню
00:04:33инжиниринга циклов. Здесь мы работаем с одним циклом, у которого есть одна цель, а проверка
00:04:37перекладывается с вас на агента. И место, где мы это делаем — это лендинг,
00:04:42что на самом деле звучит странно, ведь посадочная страница — это всего один экран.
00:04:47Агент может построить его за один прогон, и если что-то не так, это можно исправить с помощью одной
00:04:51команды, а не нескольких. Окружение лендинга циклом потребовало бы больше работы, чем сама страница.
00:04:57Но здесь нам нужна насыщенная анимацией посадочная страница с использованием навыка GSAP. Все анимируется,
00:05:02и если подумать, это именно та часть, которую нельзя оценить с первого взгляда. С анимацией
00:05:07связь может нарушиться во множестве мест, и это требует больших усилий и итераций. Это
00:05:12действительно отличный способ проверить, нужен ли для задачи цикл: если она требует множества правок и обмена репликами с агентом.
00:05:16Теперь, прежде чем мы настроим все, есть путаница в названиях, с которой вы столкнетесь
00:05:21в ту же минуту, как откроете меню со слешем в Claude Code. Там есть команда
00:05:25loop и есть команда goal, и инжиниринг циклов по сути опирается на goal. Команда loop
00:05:30запускает промпт по таймеру — каждые пять минут или каждый час он срабатывает снова, независимо от того, изменилось что-то
00:05:35или нет. А вот команда goal работает до тех пор, пока то, о чем вы просили, не будет действительно
00:05:40выполнено. Так что, когда мы говорим об инжиниринге циклов, мы используем команду goal. Команда loop тоже применяется
00:05:45в некоторых формах или рабочих процессах инжиниринга циклов, но здесь мы ее использовать не будем. Сама команда goal довольно
00:05:51проста. Вы вводите slash goal, затем пишете цель, которой хотите достичь, и также указываете модели,
00:05:56как проверить, достигнута ли она. Затем в конце каждого шага меньшая модель прочитывает
00:06:00всю беседу и решает, нужно ли агенту работать дальше или условие
00:06:05уже выполнено. Итак, чтобы запустить лендинг, мы снова использовали навык grill me и сказали, что нам нужен
00:06:11файл спецификации для этой функции. Прежде чем вдаваться в подробности того, что мы ему передали, вам нужно увидеть папку
00:06:16features внутри проекта. Каждая папка там — это одна функция, которую должен завершить агент, и
00:06:21каждая из таких папок содержит две вещи. Это файл спецификации (spec), в котором записано все об этой
00:06:25функции, и папка проверки, которая начинается с пустого состояния и заполняется по мере того, как
00:06:31агент выполняет цикл для этой функции. Затем мы указали, какие навыки использовать. Первый —
00:06:35это навык GSAP, который дает такие прекрасно анимированные лендинги, однако столь тяжелая анимация
00:06:41сильно замедляет работу страницы. Поэтому мы приказали ему использовать и навык optimize, который возвращает
00:06:45странице прежнюю скорость, не удаляя анимацию. Мы также передали ему в качестве образца картинку
00:06:50для примера — это был лендинг с иллюстрациями на нем. И последняя вещь, о которой мы
00:06:55ему сказали, касалась проверки. Обычно на этом этапе вы с агентом перебрасываетесь репликами:
00:06:59вы смотрите на страницу, указываете, что не так, а он идет это исправлять. Поэтому мы указали, что для
00:07:04реальной проверки дизайна ему нужно задействовать конкретный инструмент, прописанный в нашем глобальном Claude.MD,
00:07:11который применяется ко всем проектам на компьютере, а не только к этому. Таким образом, он написал
00:07:15и то, и другое одновременно. Это и спецификация для создания страницы, и проверочный список,
00:07:20применяться к этой странице. И именно поэтому инструмент создания скриншотов из глобального файла оказался там,
00:07:25потому что этот инструмент делает скриншоты гораздо быстрее, чем открытие полноценного браузера каждый раз.
00:07:30Вы можете поставить на паузу и прочитать весь промпт, если хотите. Это делает все происходящее намного понятнее.
00:07:34После этого Grill.me перешел к своим вопросам и задал нам целую серию вопросов о лендинге.
00:07:39Затем мы добавили еще одну вещь, и именно она превратила спецификацию в цель. Мы велели написать файл
00:07:45спецификации как цель, чтобы мы могли запустить ее с помощью команды goal, и на основе этого он внес
00:07:50еще несколько изменений. Это означало, что с тех пор все, что нам нужно было делать — это запускать команду goal и передавать ей
00:07:55файл спецификации лендинга. Повторение всего этого для каждой функции — это как раз та рутина, которую не хочется делать.
00:08:00Поэтому мы создали навык goal writer. Внутри него есть все, о чем мы только что рассказали, включая ту самую строку.
00:08:06И он создает папки внутри директории features, причем файлы спецификаций уже написаны в виде целей.
00:08:11Затем агент начал работу, прошел первый этап, а потом второй, на котором он снова сверялся
00:08:16чек-лист снова и проверял себя по нему снова и снова. После этого он остановился, и к тому моменту
00:08:21он проработал 38 минут и вернулся с одной ошибкой, которая заключалась в моргании одного из маскотов.
00:08:26Так что вот что у него получилось. После еще одной подсказки с исправлением маскоты моргают так,
00:08:31как мы хотели, и эта единственная ошибка — это то, чего проверка никогда бы не заметила, потому что
00:08:36скриншот фиксирует лишь один момент времени, а промежуток между морганиями слишком короткий для
00:08:42того, чтобы два скриншота могли его поймать. В остальном иллюстрации получились очень хорошими, и они
00:08:46соответствуют стилю Duolingo, к которому мы стремились, — это тот же стиль, который уже используется в
00:08:50главном приложении. Он также точно следовал референсу, и нажатие кнопки забронировать переносит вас прямо в
00:08:55приложение, так что вы можете начать им пользоваться. Теперь есть некоторая настройка, на которой работает все остальное.
00:09:00Этому приложению нужны три вещи, которые ваш собственный компьютер не может сделать сам, и вы не будете
00:09:05управлять ничем из этого самостоятельно, так что не беспокойтесь об этом. Прямо сейчас все, что вы создали,
00:09:10находится в одной папке на вашем компьютере, и это единственная копия везде. Ваш компьютер сломается или
00:09:15вы удалите не то, и весь проект исчезнет вместе с ним. Это первое, что должно
00:09:20измениться, и GitHub — это то, что все исправляет. Claude пишет код проекта в вашей папке, а GitHub переносит этот
00:09:25код в сеть и хранит его в репозитории, который по сути представляет собой ту же папку, живущую на их сайте, а не
00:09:31только на вашей машине. Второе — приложение пока ничего не помнит. Реальные люди
00:09:36будут этим пользоваться, поэтому эти бронирования должны где-то сохраняться, иначе кто-то бронирует
00:09:41встречу, обновляет страницу, и все просто исчезает. Так что вам нужна база данных, и мы
00:09:45используем Supabase. И последнее — никто другой не сможет добраться до вашего приложения, потому что оно
00:09:50работает только на вашем собственном компьютере. Поэтому его нужно развернуть, а это значит поместить куда-то в интернет,
00:09:55где другие люди смогут его открыть, и Vercel — это то, что делает именно это. Теперь все, что вам нужно сделать на этих трех
00:09:59платформах — это создать аккаунт, зайдя на каждый сайт и нажав кнопку войти через Google.
00:10:04Ничего не нужно настраивать или конфигурировать. Всё остальное делает агент, и
00:10:08причина, по которой это работает, заключается в том, что у всех трех есть CLI. Ваш агент не может кликать по сайту
00:10:14так, как это делаете вы. Поэтому CLI — это приложение для агента, чтобы использовать платформу. Обычно вам нужно
00:10:20создать репозиторий в GitHub, проект в Supabase и Vercel, но Claude может сделать это с помощью CLI.
00:10:26Поэтому после создания аккаунтов на всех трех вы возвращаетесь к агенту и говорите ему,
00:10:31что хотите, чтобы агент использовал все три через CLI. Он выдаст вам по команде для каждого,
00:10:37и вам нужно запустить их в другом терминале. Ваш агент уже находится в вашем терминале, поэтому вы открываете
00:10:41второй и вставляете туда эту команду. Он установит CLI для вас, а затем войдет
00:10:46в вашу учетную запись. Он откроет страницу в вашем браузере. Затем вы подтверждаете это, и на этом
00:10:51аутентификация завершена. С этого момента ваш агент может делать все на этой платформе, и вам больше никогда
00:10:56не придется открывать эти сайты. И вам не нужно ничего запоминать, потому что мы добавили
00:11:00бесплатный файл настройки в описание. Вы просто передаете этот файл агенту, и он в основном настраивает
00:11:05приложение Next.js для вас, а затем проводит через все остальное, что нужно для подключения всех трех.
00:11:10Кроме того, поскольку правила на этих платформах постоянно меняются, эти платформы выпустили
00:11:16навыки для агента. GitHub не особо нуждается в навыке. Он не сильно изменился и до сих пор
00:11:21не меняется, поэтому у нас его нет. Но у нас есть навык развертывания на Vercel, который по сути
00:11:26говорит агенту, как использовать Vercel CLI для автоматического развертывания вашего проекта. А еще у нас есть
00:11:31навык Supabase и навык лучших практик Supabase. И опять же, они вызываются автоматически, так что когда вашему агенту
00:11:37понадобится использовать любую из этих двух платформ, он просто воспользуется ими самостоятельно, и вам не нужно
00:11:42будет ничего делать. И эта база данных Supabase заполнится данными, а ваш проект
00:11:47окажется запущен на Vercel. Мы оставим ссылки на эти навыки в описании ниже. Но прежде чем
00:11:52мы перейдем к следующему уровню, давайте скажем пару слов о нашем спонсоре, Hedra. И легко спутать ее
00:11:57с такими агентами, как Manus, которые что-то исследуют и планируют проект. Hedra делает то же самое. Разница в том,
00:12:02что происходит после того, как он выдает вам готовое видео, а не документ или презентацию. Думайте об этом как о встрече Claude с Canva.
00:12:08Вы общаетесь с ним, и он создает контент вместе с вами. Мы попробовали это в пространстве и попросили короткое промо-видео
00:12:13для приложения. Самым интересным было не само видео, а то, как агент к нему пришел.
00:12:18Сначала было несколько уточняющих вопросов, затем предложенный план. Вместо того чтобы гадать, Hedra сама изучила
00:12:23тему и принесла реальные выводы. После этого полный сценарий оказался в холсте,
00:12:28агент провел нас по нему, и на выходе получилось готовое промо. Это действительно для всех, кто занимается
00:12:33маркетингом в одиночку, без редактора и без автора за спиной. Hedra по сути позволяет одному человеку делать
00:12:38то, на что раньше уходила целая команда. Вы можете попробовать ее бесплатно на Hedra.com и использовать наш код для получения скидки 50%
00:12:43на первый месяц. Ссылка и код находятся в описании ниже. Итак, это подводит нас к следующему
00:12:48уровню. Уровень 2 называется циклом фабрики программного обеспечения. На этом уровне вы коллективно планируете несколько
00:12:53функций и запускаете их в цикл, чтобы ваш агент мог продолжать работать всю ночь над списком функций и
00:12:59не останавливался после завершения одной функции. Поскольку эти циклы могут быть очень длинными, ему нужен трекер,
00:13:04чтобы сказать ему, выполнен ли предоставленный список функций или нет. Его цикл целей завершается, когда
00:13:09все функции из списка отмечены. Теперь, когда вы планируете новые функции,
00:13:13вам следует не просто расписывать, что сделать, но и фактически создать интерфейс. Это называется
00:13:18прототипом, и это полностью кликабельная версия приложения, которая на самом деле не работает. Есть две веские
00:13:23причины создать прототип пользовательского интерфейса до того, как вы начнете разработку. Первая причина заключается в том, что с
00:13:28прототипом вы можете выяснить, действительно ли то, что вы себе представляли для создания, было тем,
00:13:33что вы хотели построить. И вторая причина в том, что этот прототип становится способом для агента,
00:13:37работающего в цикле, проверить, правильно ли создано то, что он построил. Теперь на фабрике
00:13:42у вас есть список, и агент выполняет этот список в цикле, работая над каждым элементом по очереди. Но как
00:13:48он работает над каждым отдельным элементом? Когда главный агент выбирает элемент, он не занимается разработкой
00:13:53самостоятельно. Он передает задачу субагенту, и субагент завершает функцию. Но что, если
00:13:58субагент испортит сборку и ваше приложение сломается? Именно поэтому главный агент делает копию
00:14:03папки, называемую веткой, и агент работает в ней. Когда агент заканчивает, он не проверяет
00:14:07себя сам. Это подводит нас к другому очень важному правилу циклической инженерии. Агент, который выполняет работу,
00:14:13никогда не должен ее проверять. Проверка всегда должна передаваться другому агенту со свежим контекстным окном.
00:14:18Поскольку именно так работают субагенты, главный агент передает ветку агенту состязательного анализа.
00:14:24Это означает, что агент всегда должен полагать, что в проделанной работе есть какая-то ошибка.
00:14:29Именно так это помогает находить баги. Так что если со стороны агента состязательного анализа
00:14:34есть какая-то проблема, главному агенту приходится снова запускать агента сборки, и это продолжается в цикле до тех пор, пока функция
00:14:39не будет отмечена в списке. После завершения этой функции он должен перенести работу этой ветки
00:14:44в развернутое приложение, чтобы пользователи могли начать использовать новую функцию. Так что, если вы не знали,
00:14:48основная версия кода на GitHub — это то, что реально отображается в развернутом приложении на Vercel.
00:14:53Поэтому, если ветка объединяется с основной версией, функция из этой ветки попадет в развернутое
00:14:58приложение. Здесь в игру вступает ваше окончательное одобрение. Когда функция готова, создается pull request.
00:15:03Pull request — это запрос на слияние ветки функции с основной веткой. В этот pull request
00:15:08агент также прикрепит скриншоты. Но если вы хотите быть абсолютно уверены, вы можете протестировать, работает ли функция
00:15:13на вашем компьютере в папке, попросив Claude переключиться на эту ветку, а затем
00:15:18проверив ее. Если все верно, вы можете слить pull request. Если мы снова посмотрим на наши навыки,
00:15:22вы увидите, что теперь у нас есть этот навык новой функции. Когда вы вызываете этот навык, он по сути
00:15:27говорит агенту, что здесь нужно создать папку и каждая папка должна содержать файл spec.md
00:15:33и другие элементы для его проверки. Как видите, мы в основном определили здесь две функции.
00:15:38Первая функция заключается в том, что теперь должна быть страница услуг с каждым сотрудником салона. А
00:15:43вторая — в том, что всякий раз, когда у человека проходит сеанс со стилистом салона, он может добавить
00:15:48отзыв через администратора, то есть регистратора. Вместо того чтобы использовать здесь навык новой функции,
00:15:53мы напрямую используем навык автора целей. Все эти навыки взаимосвязаны. Если мы
00:15:58не хотим, чтобы функция становилась целью, если мы просто хотим работать над функцией без цикла,
00:16:03мы не используем автора целей. Но если мы используем автора целей, он запускает навык новой функции и
00:16:08добавляет правила для превращения файла спецификации в запускаемую цель. Как мы уже
00:16:13обсуждали, интерфейс функции следует создать до того, как вы начнете ее реализацию. Поэтому
00:16:18навык новой функции вызывает навык функционального интерфейса, который по сути указывает, что папка
00:16:23под названием mocks должна присутствовать внутри приложения, и что HTML-файл в этой папке mocks будет
00:16:29полностью функциональным прототипом всего приложения. В нем будут представления для
00:16:33администратора и для клиента. В каждой папке предполагается наличие только одного такого файла,
00:16:37и навык функционального интерфейса создаст его только в том случае, если он еще не был создан. И
00:16:42очевидно, поскольку он запускается при создании новой функции, внутри каждой папки функции он добавит и HTML-файл.
00:16:47теперь в него тоже будет добавляться HTML-файл. Берется уже клонированное приложение,
00:16:53выделяется только та часть, которую изменяет функция, и отображается исключительно она. Например,
00:16:58у нас есть эта функция сервисов. И если открыть её макет, видно, что в приложение
00:17:04будет добавлена полноценная страница услуг, доступная по этой кнопке. Нажав кнопку «Записаться»
00:17:08и выбрав стилиста, система сначала спросит, какую услугу вы хотите получить у этого мастера.
00:17:13реализовано в приложении, и этого не было в клоне, но это реализовано в этом прототипе функции
00:17:19но уже реализовано в прототипе этой функции. Это помогает визуализировать, действительно ли
00:17:24создается то, что вы задумали. Кроме того, цикл получает способ проверить корректность
00:17:29создаваемого продукта. После этого мы велели написать две функции, и агент фактически
00:17:33создал папки для отзывов о сеансах и сервисов. Перед вами пользовательский интерфейс для отзывов.
00:17:38Его снова можно просматривать как от лица клиента, так и администратора. Администратор будет
00:17:43добавлять отзывы от имени клиента, поскольку именно так мы сейчас представляем работу сайта.
00:17:47На реальном ресурсе такого бы не произошло, но поскольку это демо-сайт, мы просто придумываем функции.
00:17:52Поскольку теперь у нас в работе несколько функций, нам нужен список для отслеживания их состояния.
00:17:57Именно поэтому используется навык работы с очередью функций, который задействует файл утилит Markdown
00:18:02с единственной таблицей перечисления функций. Например, сейчас цикл ещё продолжается, создавая
00:18:06первую задачу, а вторая всё еще находится в статусе «сделать», и они будут отмечаться по очереди.
00:18:11Вам нужно лишь запустить навык и указать нужные функции. Затем, как вы можете видеть,
00:18:16система сообщила о создании обоих файлов и добавлении этих функций. Сразу после их добавления
00:18:21она выдает готовую команду для запуска. Мы немного изменили её и запустили файл очереди
00:18:26внутри цели, которая должна была остановиться только тогда, когда в статусе «сделать» или «в работе»
00:18:31не останется ни одной строки, то есть все они завершены и перенесены в готовые. Процесс пошел.
00:18:36Он всё ещё работает над первой функцией, и, как мы уже говорили, сначала для сборки материалов
00:18:41применяется субагент, а для проверки и верификации его работы запускается агент-противник.
00:18:46Процесс продолжается уже около трех часов, и мы покажем конечный результат после его завершения.
00:18:51Как видите, мы открыли GitHub, и вот наш проект пет-салона. Если вы не можете его найти,
00:18:55вы можете просто попросить агента дать вам эту ссылку, и вы сможете его открыть.
00:19:00Здесь вы увидите вкладку запросов на слияние, открыв которую, вы найдете пулл-реквест,
00:19:04созданный агентом для вашего ревью. Взглянув на него, мы увидим полную сводку,
00:19:09а также скриншоты страниц, служащие доказательством того, что требуемая работа действительно выполнена.
00:19:13Просмотрев всё это, мы можем просто объединить ветки. И как вы видите,
00:19:18у нас есть развернутая рабочая версия. У неё нет собственного домена, поэтому адрес заканчивается на Vercel.
00:19:23Но как вы можете видеть, мы хотели добавить функцию услуг. И теперь, переходя к ней,
00:19:27мы получаем все услуги, предлагаемые салоном. А если зайти в опцию бронирования,
00:19:33можно увидеть, что у каждого стилиста есть свои услуги. И прежде чем записаться к нему,
00:19:37обязательно нужно выбрать услугу. То же самое произойдет, когда мы объединим
00:19:42и второй пулл-реквест. Всё, что мы здесь рассмотрели, объяснено таким образом,
00:19:47чтобы вы могли повторить это самостоятельно. Навык — это по сути просто письменные инструкции,
00:19:51хранящиеся в файле. Так что здесь нет ничего такого, что вы не смогли бы сделать сами.
00:19:56Но если вы не хотите проходить через всё это, весь репозиторий находится в AI Labs Pro — нашем сообществе.
00:20:01Это та самая система, которую вы только что видели, со всеми уже встроенными навыками.
00:20:05Если вы находите нашу работу полезной и хотите поддержать канал, это лучший способ сделать.
00:20:10Ссылка будет в описании. В этом процессе вам осталось сделать всего два действия.
00:20:14Теперь нужно лишь спланировать функцию и дать окончательное разрешение до того,
00:20:19как функция или изменение будут отправлены пользователям. Для выполнения этих задач
00:20:24совсем необязательно находиться за ноутбуком, особенно на этапе планирования. Вы описываете пожелания,
00:20:28система задает вопросы до полного понимания и строит прототип — всё это можно сделать с телефона.
00:20:33Если изменение небольшое, вы также можете дать финальное разрешение прямо со смартфона.
00:20:37Здесь в игру вступает третий уровень, и его главная цель — избавиться от зависимости от ноутбука.
00:20:43Для этого мы нашли отличное приложение под названием Paseo. Оно запускает вашего агента на вашем ноутбуке и
00:20:48и предоставляет к нему доступ с телефона. Таким образом, ваш агент остается на машине
00:20:52со всеми файлами, навыками и авторизованными интерфейсами командной строки.
00:20:57Claude Code тоже умеет это делать с помощью встроенной функции удаленного управления,
00:21:03однако многое там работает нестабильно. Например, в меню удаленного управления Claude
00:21:07не хватает нормального запуска навыков. Это бесплатное приложение, и мы оставим ссылку ниже.
00:21:12Мы не будем углубляться во все его возможности, а разберем лишь самое необходимое для старта.
00:21:17В приложении есть система рабочих пространств, где каждое пространство представляет собой папку,
00:21:22внутри которой открываются разные чаты, запускающие Claude Code, так что отдельная подписка не нужна.
00:21:26Есть еще одна очень интересная особенность: инструмент работает не только на ноутбуке,
00:21:31но и на подключенном Mac mini. С ноутбука можно управлять этим Mac mini,
00:21:35и точно так же им можно управлять с телефона. Интерфейс гораздо более отполирован,
00:21:40чем стандартный терминал. Он похож на Cursor, но все функции на месте.
00:21:45Команда цели работает отлично, как и все созданные нами слэш-команды. Мы открыли здесь
00:21:49папку проектирования циклов, создали в ней сеанс и определяем новую функцию.
00:21:54Здесь появился еще один новый навык — предварительный просмотр на мобильных устройствах, о котором мы поговорим.
00:21:59Чтобы показать, как это выглядит на мобильном, мы вывели зеркалирование экрана телефона,
00:22:03и интерфейс полностью совпадает с компьютерным. Все функции Claude Code и слэш-команды готовы к использованию,
00:22:09поэтому для создания новой функции достаточно выполнить слэш-команду прямо с мобильного устройства.
00:22:14Мы внедрили процесс входа для клиентов, который ранее не был реализован.
00:22:18Затем следует очень интересный момент. Разумеется, будет написан весь файл функции,
00:22:22но для демонстрации макетов система может выводить изображения прямо в интерфейсе,
00:22:27и они отображаются на телефоне, позволяя проверять интерфейс на ходу.
00:22:32А смысл запуска навыка мобильного превью в том, что он развертывает HTML-макеты по ссылкам,
00:22:37используя бесплатное развертывание на Vercel. Это дает возможность при нажатии на ссылку
00:22:42переходить к реальному макету, кликать по нему и полноценно использовать приложение вместо просмотра картинок.
00:22:47Именно это и требуется при управлении такой фабрикой с телефона.
00:22:51На этом видео подходит к концу. Если вы хотите поддержать канал и помочь нам создавать
00:22:56подобные ролики, вы можете сделать это с помощью кнопки суперспасиба под видео. Как всегда, спасибо за просмотр,
00:23:01и до встречи в следующем ролике.

설명

Learn loop engineering in Claude Code across 3 levels, so AI agents build, verify and ship features while you sleep. Loop engineering explained: the next step past prompt engineering, and the base of real AI automation. Try Hedra at https://hedra.link/ailabs and use code AILABS50 for 50% off your first month. Free setup resources: https://drive.google.com/drive/folders/1pagLScBGfGXkfxYiqCpEkei9KDI8SdCs?usp=sharing Community with All Resources: ailabspro.io/?v=PLyRe6Zk--8 The Roundup, our daily newsletter covering the AI stories that matter. Join now: https://www.theroundup.so/ PASEO: https://paseo.sh/ Open Source Skills in this video: Grill Me: https://github.com/mattpocock/skills GSAP: https://github.com/greensock/gsap-skills Vercel: https://github.com/vercel-labs/agent-skills Supabase: https://github.com/supabase/agent-skills You were already running a loop before you knew what one was. You prompt, the agent builds, you check it, you prompt again. So what is loop engineering? It is handing that checking step to the agent and keeping only the one decision that was always yours: whether the agent is done or needs to keep working. This is the full guide, built on a real salon appointment app that goes from missing a landing page to shipping features overnight. Everything runs in Claude Code, on Warp and VS Code. Before the loop * Why loop engineering did not work a year ago, and what changed with models that run for hours * Why you should never loop your MVP, and what to build by hand instead * CLAUDE.md pointing to AGENTS.md, so the repo is not locked to one agent * design.functional.md for every clickable part of the app * The Grill Me skill, which keeps asking questions until the spec is actually clear Level 1: one loop, one goal (loop engineering in Claude Code) * The naming trap in the slash menu: /loop runs on a timer, /goal runs until the thing is done. Loop engineering is the goal command * How the goal command verifies: a smaller model reads the turn and decides continue or stop * A features folder where each feature holds a spec file and an empty verification folder * The real signal that something needs a loop: it takes a lot of back and forth * A motion heavy landing page with the gsap skill, then the optimize skill to win the speed back * Screenshot based verification pulled from the global CLAUDE.md instead of a full browser every pass * The goal-writer skill, so you never write the "make this a goal" line twice * A loop engineering example: 38 minutes unattended, one error left, and why a screenshot could never catch a blinking mascot Setup: GitHub, Supabase, Vercel * Why your project needs a repo, a database and a deployment, explained for non developers * You make three accounts with Google login and configure nothing * The agent does the rest through each platform's CLI, including the auth step you paste into a second terminal * The Vercel deploy skill and the Supabase skills that auto invoke when the agent needs them Level 2: the software factory loop engineering workflow * Planning several features at once and running them as one queue instead of one feature at a time * Why you build a clickable prototype first: to find out if you wanted the thing you described, and to give the loop something to verify against * The new-feature and functional-ui skills, and the mocks folder that holds a working fake version of the app * The rule that matters most: the agent that does the work never verifies the work * Subagent builds on a branch, adversarial review agent assumes there is a bug, main agent loops until the row is ticked * feature-batch and a queue.md table, with the goal running until nothing is left in todo or building * Pull requests with screenshots attached, plus how to check the branch locally before you merge * Merge to main, Vercel picks it up, and the feature is live for users Level 3: get off the laptop * The only two jobs left: plan the feature, approve the merge. Neither needs a keyboard * Paseo, a free app that runs Claude Code on your own machine and gives you a window into it from your phone, so your skills and logged in CLIs keep working * Why we skipped Claude Code's built in remote control: no skills menu. In Paseo, /goal and every slash command still work * The mobile preview skill, which deploys the HTML mocks as free Vercel links so you can click through a prototype on your phone instead of squinting at images 00:00 Intro 00:46 What A Loop Is 02:08 The Project 04:32 Level 1 07:58 The Goal Writer Skill 08:57 Setup 11:11 Platform Skills 11:53 Sponsor 12:46 Level 2 16:14 The Functional UI Skill 17:51 The Feature Batch Skill 20:13 Level 3 22:34 Mobile Preview Skill Hashtags: #ai #claude #claudeCode #codex #chatgpt #claudeAi #aiAutomation #loopEngineering

커뮤니티 글

아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!

이 영상에 대해 글쓰기