Todos os Níveis de Engenharia de Loop do Claude Code

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

스크립트

00:00:00A engenharia de loops basicamente se tornou essencial para como usamos agentes de IA agora, e isso porque
00:00:04os agentes podem realmente rodar sozinhos por muito mais tempo e continuar funcionando. Então vamos
00:00:09mostrar três loops diferentes e os organizamos em níveis para facilitar.
00:00:13O nível um mostra a unidade básica e como usá-la de forma eficiente. O nível dois mostra como transformar
00:00:18essa unidade em uma fábrica e o nível três finalmente libera a maior parte do seu tempo e torna o processo
00:00:23verdaderamente autônomo. Como este vídeo está cheio de informações, colocamos carimbos de tempo abaixo para que
00:00:28você possa pular para qualquer momento se precisar voltar a este vídeo. Além disso, vamos
00:00:33usar o Claude Code neste vídeo, mas os sistemas que vamos mostrar também funcionarão com o Codex
00:00:38e, quanto às ferramentas, estamos usando o Warp e o VS Code. Ambos são fáceis de instalar e você só precisa
00:00:43abrir uma única pasta em ambos e começar a nos acompanhar. Antes de passarmos para como você
00:00:48implementa a engenharia de loops no Vibe Coding, precisamos explicar o que é um loop. Antigamente, quando você
00:00:53estava construindo algo, você já estava em um loop. Você dava um comando ao agente e ele começava
00:00:57a construir. Depois, quando terminava, ele basicamente pedia para você verificar e, se estivesse errado, você dava
00:01:02outro comando ao agente e ele começava a construir novamente. Você já estava em um loop. Agora, um loop de agente
00:01:07ocorre quando você se retira desse processo e essa parte de verificação passa a ser feita pelo próprio agente. E
00:01:12esse é naturalmente o caminho que estávamos seguindo, porque, se for pensar bem, construir com agentes não é
00:01:17o que consome mais tempo. Eles fazem isso de forma autônoma em segundo plano. O que realmente exige
00:01:21sua atenção é verificar se o agente obteve sucesso ou não. Mas seu agente só pode fazer a
00:01:26verificação se souber qual é a saída correta. Essa é a parte central do loop. Mas existem
00:01:30outras partes também. Primeiro, há algo que precisa iniciar o loop. Depois, há o próprio loop.
00:01:35E no final de cada loop, basicamente precisa haver uma verificação que decide se o
00:01:41agente terminou ou não. E essa verificação precisa ser decidida por você. Portanto, em um loop de agente,
00:01:46a parte que você mantém é aquela que sempre seria sua. É a parte que decide
00:01:50se você desliga o agente ou se precisa que ele trabalhe mais. Você não pode realmente delegar isso. Agora,
00:01:55você pode estar pensando: por que estamos mudando de repente para a engenharia de loops e por que isso não funcionava
00:01:59um ano atrás? A resposta é que os modelos não conseguiam rodar por tanto tempo. E agora, com os novos
00:02:04modelos que estão saindo, eles basicamente conseguem trabalhar sem você por horas. Então aqui está o que
00:02:08estamos rodando com tudo isso: é um aplicativo de agendamento para um salão de beleza. Alguém entra no site,
00:02:13escolhe um profissional e pode ver os horários livres desse profissional em diferentes dias e agendar
00:02:17um compromisso. E então há o login da equipe, porque cada salão que usar isso terá um
00:02:22recepcionista operando o sistema. Eles aprovam ou recusam as solicitações recebidas e gerenciam o calendário
00:02:27para os diferentes profissionais do salão. No momento, falta muita coisa aqui. Não há página inicial
00:02:31e há outros recursos importantes que ainda precisamos adicionar. Esta é a sessão do Claude Code
00:02:36onde o construímos. Criamos esta pasta “loop engineering” e, dentro dela, pedimos ao Claude
00:02:41Code para configurar o projeto. O aplicativo em si fica nesta pasta “loop salon” e é apenas um aplicativo Next.js.
00:02:46Se esta é a primeira vez que você ouve falar disso, não se preocupe. Você apenas diz ao modelo que deseja
00:02:51criar um aplicativo Next.js e começa a construir a partir daí, e ele lida com isso para você. É uma
00:02:55das maneiras mais populares de construir sites reais, como o que estamos construindo aqui. Agora existem
00:03:00algumas coisas que você precisa ter na sua pasta. Primeiro, temos o nosso arquivo Claude.md e tudo o que ele diz é para ir
00:03:04olhar o arquivo Agents.md. Isso porque podemos precisar rodar mais de um agente neste repositório,
00:03:09e não apenas o Claude Code. Usamos este arquivo porque quase todos os outros agentes usam as instruções em
00:03:14Agents.md como regras do que fazer sempre que uma nova sessão for aberta. Apenas o Claude Code usa o arquivo Claude.md.
00:03:21E dentro de Agents.md, nós realmente não tivemos que escrever nada sozinhos. Depois, temos este arquivo
00:03:27chamado design.functional.md, que cobre todas as partes clicáveis do aplicativo com as quais o usuário realmente
00:03:33tem que interagir. E o design delas vem deste arquivo. E se você notar,
00:03:36o aplicativo se parece com o Duolingo. Isso porque copiamos o design do Duolingo para ele.
00:03:41Em seguida, há algumas habilidades que você deve conhecer. A primeira é o “Grill Me”, que usamos enquanto
00:03:45estávamos construindo esta primeira versão. Ele continua te fazendo perguntas até que o agente realmente tenha clareza
00:03:50sobre o que você quer. Há outras habilidades aqui também, e chegaremos a elas mais tarde. E você vai notar
00:03:55que este projeto já está construído. Fizemos isso de propósito. Quando você começa algo novo,
00:03:59a primeira coisa que você faz é um MVP, que é basicamente a versão funcional mais simples do seu
00:04:04produto que faz apenas a função principal e mais nada. E você não quer construir isso com um loop.
00:04:08Um MVP é rápido de construir de qualquer forma. Mas para colocar um loop nele, você teria que decidir como é o resultado final
00:04:13antes mesmo de o agente começar. E nesse ponto, você ainda não sabe para onde o produto está indo.
00:04:18Portanto, planejar isso acaba levando mais tempo do que simplesmente construir a primeira versão você mesmo.
00:04:23Mas antes de começarmos o nível um, seria ótimo se você se inscrevesse no canal e curtisse
00:04:27o vídeo. Esse pequeno gesto de apoio faz uma grande diferença para nós. Então isso nos traz ao nível um de
00:04:33engenharia de loops. Aqui estamos trabalhando com um loop que tem um objetivo e a verificação
00:04:37basicamente sai de você e passa para o agente. E o lugar onde estamos fazendo isso é na página inicial,
00:04:42o que na verdade parece o lugar errado para isso, porque uma página inicial é apenas uma tela.
00:04:47O agente pode basicamente construí-la em uma única execução e, se algo estiver errado, pode ser corrigido com um único
00:04:51comando e não com vários. Colocar um loop em torno de uma página inicial daria mais trabalho do que a própria página.
00:04:57Mas aqui queremos uma página inicial rica em animações usando a habilidade GSAP. Tudo se movimenta na tela,
00:05:02e se você pensar bem, essa é a parte que você não consegue verificar apenas olhando para ela uma vez. Com animações,
00:05:07há tantos lugares onde o agente pode errar que isso exige muito vai e vem. Esta é
00:05:12na verdade uma ótima maneira de verificar se algo precisa de um loop: se exigir muito vai
00:05:16e vem com o agente. Agora, antes de configurarmos um, há um detalhe de nomenclatura que confunde as pessoas e
00:05:21você vai esbarrar nele no momento em que abrir o menu de comandos no Claude Code. Há um comando chamado
00:05:25loop e há um comando chamado goal, e a engenharia de loops usa basicamente o de goal. O comando loop
00:05:30executa um comando em um temporizador, então a cada cinco minutos ou a cada hora ele dispara novamente, quer algo tenha mudado
00:05:35ou não. Mas o comando goal é o que continua funcionando até que a coisa que você pediu esteja realmente
00:05:40pronta. Portanto, quando dizemos engenharia de loops, estamos usando o comando goal. O comando loop também é usado em
00:05:45algumas formas de fluxos de trabalho de engenharia de loops, mas não o usaremos aqui. O comando goal em si é bem
00:05:51simples. Você digita /goal e escreve o objetivo que deseja alcançar, além de dizer ao
00:05:56modelo como verificar se ele o alcançou ou não. Então, no final de cada turno, um modelo menor lê
00:06:00a conversa e decide se o agente precisa trabalhar nisso novamente ou se a condição
00:06:05foi atendida ou não. Então, para iniciar a página inicial, usamos a habilidade Grill Me novamente e dissemos que precisávamos de
00:06:11um arquivo de especificação para este recurso. Agora, antes de entrarmos no que dissemos, você precisa ver a pasta
00:06:16de recursos dentro do projeto. Cada pasta nela é um recurso que o agente precisa concluir e
00:06:21cada uma dessas pastas contém duas coisas. Há um arquivo de especificação, que é onde tudo sobre esse
00:06:25recurso é anotado, e há uma pasta de verificação que começa vazia e se preenche enquanto o
00:06:31agente está executando o loop para esse recurso. Em seguida, dissemos quais habilidades usar. A primeira é
00:06:35a habilidade GSAP, que é a que proporciona essas páginas iniciais lindamente animadas, mas animações
00:06:41tão pesadas deixam a página muito lenta. Então dissemos para usar a habilidade de otimização também, que revisa
00:06:45a página e recupera a velocidade sem remover a animação. Também fornecemos uma referência de imagem
00:06:50para seguir, que era esta página inicial com ilustrações nela. E a última coisa que
00:06:55dissemos foi sobre a verificação. Normalmente, esta é a parte em que você e o agente vão e voltam,
00:06:59onde você olha para a página, diz a ele o que está errado e ele vai e conserta. Então dissemos que, para
00:07:04verificar o design de fato, ele tinha que usar a ferramenta específica nomeada em nosso Claude.MD global, que é
00:07:11a que se aplica a todos os projetos na máquina em vez de apenas a este. Portanto, o que ele escreveu foi
00:07:15as duas coisas ao mesmo tempo. É a especificação para construir a página e é a lista de verificação que
00:07:20é executada contra essa página. E é por isso que a ferramenta de captura de tela do arquivo global acabou entrando lá,
00:07:25já que essa ferramenta tira capturas de tela muito mais rápido do que abrir um navegador completo todas as vezes.
00:07:30Você pode pausar aqui e ler o comando inteiro, se quiser. Isso deixa tudo muito mais claro.
00:07:34Depois disso, o Grill.me fez suas perguntas e nos fez uma série delas sobre a página inicial.
00:07:39Em seguida, dissemos mais uma coisa, e foi isso que transformou a especificação em um objetivo. Pedimos que ele escrevesse o arquivo
00:07:45de especificação como um objetivo para podermos executá-lo com o comando goal, e ele fez algumas outras alterações com base
00:07:50nisso, o que significava que, a partir de então, tudo o que precisávamos fazer era executar o comando goal e passar o arquivo
00:07:55de especificação da página inicial. E fazer tudo isso de novo para cada recurso é o trabalho que você não quer repetir.
00:08:00Então criamos a habilidade de criação de objetivos. Ela tem tudo o que acabamos de ver dentro dela, incluindo aquela linha.
00:08:06E o que ela faz é criar as pastas dentro da pasta features com os arquivos de especificação já escritos como objetivos.
00:08:11Em seguida, começou a trabalhar, passou pela primeira etapa e depois por uma segunda, onde tinha a
00:08:16o checklist de novo e ficou avaliando a si mesmo com base nele várias e várias vezes. Depois disso, parou e, a essa altura,
00:08:21já tinha rodado por 38 minutos e voltado com um único erro, que era o piscar de um dos mascotes.
00:08:26Então foi isso que ele criou. Depois de dar mais um comando de correção, os mascotes estão piscando do
00:08:31jeito que a gente queria, e aquele único erro é a única coisa que a verificação nunca ia pegar, porque uma
00:08:36captura de tela só pega um único momento, e o intervalo entre uma piscada e outra é curto demais para
00:08:42duas capturas de tela pegarem. Fora isso, as ilustrações ficaram muito boas e estão
00:08:46dentro da identidade do estilo do Duolingo que a gente queria, que é o mesmo estilo que já está no
00:08:50aplicativo principal. Ele também seguiu a referência de perto e clicar em reservar agora te leva direto para o
00:08:55aplicativo para você poder começar a usá-lo. Agora tem um pouco de configuração em cima da qual tudo daqui para frente roda.
00:09:00Há três coisas que este aplicativo precisa que o seu próprio computador não consegue fazer sozinho e você não vai
00:09:05operar nenhuma delas sozinho, então não se preocupe com essa parte. Então agora tudo o que você construiu está
00:09:10em uma pasta no seu computador e essa é a única cópia disso em qualquer lugar. Seu computador estraga ou
00:09:15você apaga a coisa errada e o projeto inteiro vai junto. Essa é a primeira coisa que tem que
00:09:20mudar e o GitHub é o que conserta isso. O Claude escreve o código do projeto na sua pasta e o GitHub pega esse
00:09:25código online e o mantém em um repositório, que é basicamente aquela mesma pasta vivendo no site deles em vez de
00:09:31ficar apenas na sua máquina. A segunda coisa é que o aplicativo ainda não lembra de nada. Pessoas de verdade
00:09:36vão usar isso, então essas reservas precisam ser salvas em algum lugar, caso contrário, alguém agenda um
00:09:41compromisso, atualiza a página e tudo simplesmente somem. Então você precisa de um banco de dados e o que estamos
00:09:45usando é o Supabase. E a última coisa é que mais ninguém consegue acessar o seu app de fato porque ele só
00:09:50roda no seu próprio computador. Então ele precisa ser publicado, o que significa apenas que ele é colocado em algum lugar na internet
00:09:55onde outras pessoas possam abri-lo, e a Vercel é o que faz isso. Agora, tudo o que você realmente faz nessas três
00:09:59plataformas é criar uma conta, acessando cada site e clicando em entrar com o Google.
00:10:04Não há nada para configurar e nada para preparar. Tudo depois disso passa pelo agente e
00:10:08o motivo pelo qual isso funciona é que todas as três possuem uma CLI. Seu agente não pode clicar por aí em um site
00:10:14do jeito que você faz. Então a CLI é um aplicativo para o agente usar a plataforma. Normalmente, portanto, você precisaria
00:10:20criar um repositório no GitHub e um projeto no Supabase e na Vercel, mas o Claude pode fazer isso usando as CLIs.
00:10:26Então, depois de criar suas contas em todas as três, você volta para o agente e diz a ele que
00:10:31quer que o agente use todas as três usando a CLI. Ele vai te dar um comando para cada uma e você precisa
00:10:37executá-los em outro terminal. Seu agente já está aberto no seu terminal, então você abre um
00:10:41segundo e cola esse comando lá dentro. Ele vai instalar a CLI para você e depois para
00:10:46entrar na sua conta, ele abre uma página no seu navegador. Depois você aprova e essa é a
00:10:51autenticação concluída. A partir daí, seu agente pode fazer tudo nessa plataforma e você nunca mais
00:10:56precisa abrir esses sites de novo. E você realmente não precisa lembrar de nada disso porque colocamos um
00:11:00arquivo de configuração gratuito lá na descrição. Você só entrega esse arquivo para o agente e ele basicamente configura o
00:11:05aplicativo Next.js para você e depois te guia por todo o resto que você precisa para deixar todas essas três
00:11:10conectadas. Além disso, como as regras nessas plataformas vivem mudando, essas plataformas lançaram
00:11:16habilidades para o agente. O GitHub não precisa realmente de uma habilidade. Ele não mudou muito
00:11:21e continua não mudando, então não temos uma para isso. Mas temos esta habilidade de implantação na Vercel que basicamente
00:11:26ensina o agente a usar a CLI da Vercel para publicar seu projeto automaticamente. E então temos a
00:11:31do Supabase e a de melhores práticas do Supabase. E novamente, elas são acionadas automaticamente, então sempre que seu agente
00:11:37precisar usar qualquer uma dessas duas plataformas, ele simplesmente vai usá-las sozinho e você realmente
00:11:42não precisa fazer nada. E este banco de dados do Supabase vai ser preenchido com dados e o seu projeto
00:11:47vai entrar no ar na Vercel. Deixaremos os links para essas habilidades na descrição abaixo. Mas antes
00:11:52de passarmos para o próximo nível, vamos dar uma palavra do nosso patrocinador, a Hedra. E é fácil colocá-la no mesmo saco
00:11:57com agentes como o Manus, que pesquisam algo e planejam um projeto. A Hedra faz isso também. A diferença é
00:12:02o que acontece depois que ela te entrega um vídeo pronto, não um documento, não uma apresentação de slides. Pense em Claude com Canva.
00:12:08Você conversa com ela e ela constrói junto com você. Nós testamos dentro de um espaço e pedimos um pequeno vídeo de
00:12:13promoção para um aplicativo. A parte interessante não foi o vídeo, foi ver como o agente chegou lá.
00:12:18Primeiro vieram algumas perguntas de esclarecimento, depois um plano proposto. Em vez de adivinhar, a Hedra pesquisou
00:12:23o tópico por conta própria e trouxe descobertas reais. A partir daí, o roteiro completo apareceu no canvas,
00:12:28o agente nos guiou por ele e o promo finalizado saiu. Esta é realmente para qualquer um que esteja
00:12:33fazendo seu marketing sozinho, sem editor e sem redator por trás. A Hedra basicamente permite que uma pessoa faça
00:12:38o que antes exigia uma equipe inteira. Você pode testá-la de graça em Hedra.com e usar nosso código para ter 50% de desconto
00:12:43no seu primeiro mês. O link e o código estão na descrição abaixo. Então isso nos traz para o próximo
00:12:48nível. O nível dois se chama o loop da fábrica de software. Neste nível, você planeja coletivamente múltiplos
00:12:53recursos e os coloca em um loop para que seu agente possa continuar trabalhando durante a noite em uma lista de recursos e
00:12:59não parar depois que um recurso estiver pronto. Como esses loops podem ser muito longos, ele precisa de um rastreador para dizer
00:13:04a ele se a lista de recursos que lhe foi dada foi concluída ou não. Seu loop de metas é concluído assim que
00:13:09todos os recursos da lista forem marcados. Agora, quando você estiver planejando novos recursos,
00:13:13você não deve apenas escrever o que fazer, você deve realmente criar a interface. Isso se chama
00:13:18protótipo e é uma versão totalmente clicável do aplicativo que não funciona de verdade. Existem dois grandes
00:13:23motivos para construir um protótipo de interface antes de começar a programar. O primeiro motivo é que, com um
00:13:28protótipo, você pode descobrir se a coisa que você estava imaginando construir era realmente a coisa
00:13:33que você queria construir. E o segundo motivo é que esse protótipo se torna uma forma para o agente,
00:13:37que está trabalhando em um loop, verificar se o que ele construiu está correto ou não. Agora, na fábrica,
00:13:42você tem a lista e o agente está executando a lista em um loop, trabalhando em cada item um por um. Mas como
00:13:48ele trabalha em cada item individual? Quando o agente principal escolhe um item, ele não faz a construção
00:13:53sozinho. Ele entrega a tarefa a um subagente e o subagente conclui o recurso. Mas e se o
00:13:58subagente fizer besteira na construção e seu aplicativo for arruinado? É por isso que o agente principal faz uma cópia
00:14:03da pasta chamada de branch (ramificação) e o agente trabalha nela. Quando o agente termina, ele não se verifica
00:14:07a si mesmo. Isso nos traz outra regra muito importante na engenharia de loops. O agente que faz o trabalho
00:14:13nunca deve verificá-lo. A verificação deve sempre ir para outro agente com uma janela de contexto limpa.
00:14:18Como é exatamente assim que os subagentes funcionam, o agente principal entrega a branch a um agente de revisão
00:14:24adversária. Isso significa que o agente precisa sempre acreditar que há algum erro no trabalho feito.
00:14:29É assim que ele é útil para capturar bugs. Portanto, se houver algum problema apontado pelo agente de revisão
00:14:34adversária, o agente principal tem que reiniciar o agente de construção e isso continua em um loop até que o recurso
00:14:39seja marcado na lista. Depois de concluir esse recurso, ele precisa colocar o trabalho daquela branch
00:14:44no aplicativo publicado para que os usuários possam começar a usar o novo recurso. Então, caso você não saiba,
00:14:48a versão principal do código no GitHub é o que realmente aparece no aplicativo publicado na Vercel.
00:14:53Portanto, se a branch for mesclada com a versão principal, o recurso nessa branch irá para o aplicativo
00:14:58publicado. É aqui que entra a sua aprovação final. Quando um recurso termina, um pull request é feito.
00:15:03Um pull request é um pedido para mesclar a branch de recursos com a branch principal. Nesse pull request,
00:15:08o agente também anexará capturas de tela. Mas se você quiser ter certeza absoluta, pode testar se o recurso
00:15:13realmente funciona no seu computador, na pasta, pedindo para o Claude mudar para aquela branch e então
00:15:18testando-o. Se estiver correto, você pode mesclar o pull request. Então, se olharmos para as nossas habilidades novamente,
00:15:22você pode ver que agora temos esta nova habilidade de recurso. Quando você aciona esta habilidade, ela basicamente vai
00:15:27dizer ao agente que uma pasta precisa ser criada aqui dentro e cada pasta precisa ter um spec.md
00:15:33e outras coisas para sua verificação. Então, como você pode ver, nós basicamente definimos dois recursos aqui.
00:15:38Um recurso no qual agora deve haver uma página de serviços com cada pessoa no salão. E então o
00:15:43segundo é que, sempre que uma pessoa tiver uma sessão com um cabeleireiro do salão, ela possa basicamente adicionar uma
00:15:48avaliação através da recepcionista, que é o administrador. Agora, em vez de usar a habilidade de novo recurso aqui,
00:15:53nós usamos diretamente a habilidade de redator de metas. Agora, todas essas habilidades são interconectadas. Portanto, se
00:15:58não quisermos que um recurso se torne uma meta, se quisermos apenas trabalhar no recurso sem um loop,
00:16:03não usamos o redator de metas. Mas se usarmos o redator de metas, ele vai acionar esta habilidade de novo recurso e
00:16:08vai adicionar as regras para transformar um arquivo de especificação em uma meta executável também. Agora, como já
00:16:13discutimos, você deve criar a interface do recurso antes de começar a implementá-lo. É por isso que
00:16:18a habilidade de novo recurso chama a habilidade de IU funcional, que basicamente diz a ele que uma pasta
00:16:23chamada mocks deve estar presente dentro do aplicativo e que o arquivo HTML dentro dessa pasta mocks será
00:16:29um protótipo totalmente funcional de todo o aplicativo. E ele vai ter as visualizações para
00:16:33tanto a recepcionista quanto o cliente também. Agora, deve haver apenas um destes em cada
00:16:37pasta, e a habilidade de IU funcional só criará isso se ele ainda não tiver sido criado. E
00:16:42obviamente, como ela é acionada sempre que um novo recurso é criado, dentro de cada pasta de recurso,
00:16:47ele também vai adicionar um arquivo HTML. Agora ele vai pegar o aplicativo já clonado e pegar apenas
00:16:53a parte que o recurso está alterando e mostrar apenas isso. Então, por exemplo, temos este recurso de serviços
00:16:58aqui. E se abrirmos o protótipo dele, você pode ver que vamos adicionar uma página de serviços completa ao aplicativo,
00:17:04e ela será acessível por meio deste botão. E se você clicar em agendar agora e escolher um profissional,
00:17:08ele primeiro perguntará qual serviço você deseja realizar com o profissional. Agora, isso não foi realmente
00:17:13implementado no aplicativo e não foi implementado dentro do clone, mas está implementado neste protótipo
00:17:19de recurso. Então, ele ajuda você a visualizar se o que você está construindo é realmente o que você queria. E isso também
00:17:24se torna uma forma de o loop verificar de fato se o que está construindo está correto ou não. Então, depois disso,
00:17:29dissemos para ele escrever os dois recursos, e ele basicamente criou as pastas para avaliações de sessões
00:17:33e serviços. Esta é a interface de usuário para as avaliações de sessões. E, novamente, você pode visualizá-la tanto como
00:17:38cliente quanto como recepcionista. A recepcionista adicionará as avaliações em nome do cliente,
00:17:43porque é assim que estamos imaginando que o site funciona agora. Isso não aconteceria em um site real,
00:17:47mas como este é um site de demonstração, estamos apenas criando recursos. Como temos vários recursos para
00:17:52trabalhar agora, precisamos basicamente ter uma lista para acompanhá-los. É por isso que temos esta habilidade
00:17:57de lote de recursos, que basicamente usa este arquivo Markdown de fila, que é apenas uma única tabela na
00:18:02qual os recursos estão listados. Por exemplo, agora, o loop ainda está em execução e está construindo
00:18:06o primeiro, e o segundo ainda está pendente, e ele simplesmente os marcará um por um. Então você
00:18:11só precisa invocar a habilidade e dizer a ela para adicionar os recursos que você deseja. E então, como você pode ver,
00:18:16ele disse que estava escrevendo ambos os arquivos e adicionou esses recursos. Em seguida, uma vez adicionados,
00:18:21ele basicamente fornece o comando de objetivo para você executar. Nós alteramos um pouco e executamos o arquivo de fila
00:18:26dentro de um objetivo, e ele só iria parar quando não houvesse nenhuma linha pendente ou em construção, o que significa que
00:18:31todos foram concluídos e movidos para concluídos. E basicamente começou a funcionar. Ele ainda está trabalhando
00:18:36no primeiro recurso e, como já dissemos, ele primeiro usaria um subagente para construir de fato as
00:18:41coisas e, em seguida, para verificar e validar seu trabalho, ele lançaria um agente adversário. Ele ainda está em andamento,
00:18:46já se passaram cerca de três horas e vamos mostrar o resultado final assim que estiver concluído. Então, como você pode
00:18:51ver, abrimos o GitHub e temos nosso projeto loop salon aqui mesmo. Se você não conseguir encontrá-lo,
00:18:55você pode simplesmente pedir ao agente para lhe dar este link e você poderá abri-lo. Então aqui,
00:19:00você verá esta aba de pull request e, após abri-la, você verá o pull request que o
00:19:04agente criou para sua revisão. Então, se você olhar para isso, ele nos deu todo o resumo e depois
00:19:09realmente nos deu as capturas de tela das páginas, fornecendo provas de que o trabalho que precisava ser
00:19:13feito foi realmente feito. Assim que revisarmos tudo isso, podemos simplesmente mesclar o pull request. E como
00:19:18você pode ver, temos a versão hospedada ao vivo aqui mesmo. Ela não tem um domínio, e é por isso que termina
00:19:23em Vercel. Mas como você pode ver, queríamos que esse recurso de serviços fosse adicionado. E agora, se formos
00:19:27para o recurso de serviços, obtemos todos os serviços que o salão oferece. E se formos para a opção
00:19:33agendar agora, podemos ver que cada profissional tem seus próprios serviços. E antes de poder agendá-los,
00:19:37você basicamente precisa selecionar o serviço. E a mesma coisa vai acontecer quando mesclarmos este
00:19:42segundo pull request também. E tudo o que analisamos aqui, nós basicamente explicamos
00:19:47de uma forma que você pode ir e construir você mesmo. Uma habilidade é realmente apenas instruções escritas armazenadas
00:19:51em um arquivo. Então não há nada aqui que você não possa realmente fazer sozinho. Mas se você não
00:19:56não quiser passar por tudo isso, o repositório inteiro está no AI Labs Pro, que é a nossa comunidade.
00:20:01Esse é basicamente o sistema todo, do jeito que você acabou de ver, com cada habilidade já instalada
00:20:05lá. Então, se você encontrou valor no que fazemos e quer apoiar o canal, essa é a
00:20:10maneira certa de fazer isso. O link vai estar na descrição. Então, só restam duas coisas
00:20:14para você fazer em todo esse processo. Agora você só precisa planejar a funcionalidade e dar a
00:20:19permissão final antes que a funcionalidade ou alteração seja enviada para os seus usuários. Nenhuma dessas coisas exige
00:20:24de fato que você esteja no seu notebook, especialmente a parte do planejamento. Você descreve o que quer, ele te faz
00:20:28perguntas até entender e constrói o protótipo para você, e tudo isso pode ser feito pelo
00:20:33celular. Se for uma alteração pequena, você também pode dar a permissão final pelo celular.
00:20:37É aqui que entra o nível três, cujo principal objetivo é remover a sua dependência do notebook.
00:20:43Para esse propósito, encontramos um aplicativo muito bom chamado Paseo. Ele executa o seu agente no seu próprio notebook e
00:20:48fornece uma janela para ele a partir do seu celular. Assim, o seu agente continua na sua máquina com todos
00:20:52os seus arquivos, todas as suas habilidades e todas as suas CLIs já conectadas. E tudo o que você construiu neste
00:20:57vídeo continua funcionando. O Claude Code também pode fazer isso usando o recurso integrado de controle remoto,
00:21:03mas muitas coisas nele não funcionam direito. Como as habilidades, você não tem realmente um menu para executar as
00:21:07habilidades no recurso de controle remoto do Claude. Então este é o aplicativo gratuito e vamos deixar o link
00:21:12abaixo. Não vamos nos aprofundar em tudo o que ele faz, apenas o essencial para você começar
00:21:17a usá-lo. O aplicativo possui um sistema de espaço de trabalho onde cada espaço de trabalho é basicamente uma pasta e você abre
00:21:22diferentes chats dentro dele e ele executa o próprio Claude Code para que você não precise de outra
00:21:26assinatura separada para isso. Depois há outra parte muito interessante, que é o fato de que ele não roda
00:21:31apenas no seu notebook, ele também pode rodar em um Mac mini que você tenha conectado. Então, do seu notebook você pode
00:21:35controlar o seu Mac mini e do seu celular você pode controlar esse Mac mini também. E em vez de
00:21:40toda aquela interface de terminal, é algo muito mais polido. Parece o Cursor, mas todos os recursos ainda
00:21:45estão aqui. O comando de objetivo funciona, assim como todos os outros comandos de barra que criamos. Então abrimos
00:21:49a pasta do Loop Engineering aqui, criamos uma sessão nela e estamos definindo uma nova funcionalidade.
00:21:54Há uma nova habilidade aqui também, que é a de visualização móvel, e já vamos falar sobre ela.
00:21:59Agora, para mostrar como isso fica no celular, espelhamos a tela bem aqui e esta é
00:22:03exatamente a mesma interface que você tem no computador. Você obtém todos os recursos do Claude Code e seus comandos
00:22:09de barra prontos para uso também; então, para iniciar uma nova funcionalidade, basta executar o comando de barra
00:22:14de nova funcionalidade bem ali no seu celular. Implementamos o fluxo de login do lado do cliente, que não
00:22:18estava implementado antes. Depois há uma parte muito interessante. É claro que ele vai escrever
00:22:22todo o arquivo da funcionalidade, mas para mostrar como ficam os rascunhos, ele pode nos fornecer imagens direto
00:22:27na interface e essas imagens aparecem no seu celular também, para que você possa verificar a interface ali mesmo,
00:22:32no seu telefone. Mas o motivo de termos executado essa habilidade de visualização móvel é que ela publica os rascunhos HTML em links
00:22:37e essas são publicações gratuitas na Vercel; o que isso proporciona é que, quando você clica no link, ele
00:22:42o leva ao protótipo real e você pode clicar por aí e usar o aplicativo adequadamente em vez de apenas olhar
00:22:47para imagens, e é exatamente isso que você quer quando está operando essa fábrica pelo celular.
00:22:51Isso nos traz ao final deste vídeo. Se você quiser apoiar o canal e nos ajudar a continuar fazendo
00:22:56vídeos como este, pode fazer isso usando o botão de valeu demais abaixo. Como sempre, obrigado por assistir
00:23:01e vejo você no próximo.

핵심 요약

A adoção da engenharia de loops com o Claude Code automatiza o ciclo completo de desenvolvimento de software, permitindo que agentes gerenciem testes, controle de versão e implantação por meio de comandos de objetivos e revisões adversárias.

하이라이트

  • A engenharia de loops permite que agentes de IA operem de forma autônoma por horas, transferindo a verificação de resultados do usuário para o próprio agente.

  • O comando goal no Claude Code executa tarefas continuamente até que a condição de sucesso estipulada seja alcançada, diferenciando-se de disparos baseados em temporizadores.

  • A integração de ferramentas externas como GitHub, Supabase e Vercel via CLI viabiliza a persistência de dados, controle de versão e publicação automatizada do aplicativo Next.js.

  • O nível dois implementa uma fábrica de software em loop, onde um agente principal delega tarefas a subagentes e submete o código a revisões adversárias antes de criar pull requests.

  • O aplicativo Paseo viabiliza o controle e a execução de fluxos de agentes de IA diretamente a partir de dispositivos móveis, removendo a dependência de notebooks.

타임라인

Fundamentos e Conceitos da Engenharia de Loops

  • A engenharia de loops transfere o processo de verificação de sucesso do usuário para o agente de IA.
  • O desenvolvimento utiliza ferramentas como Claude Code, Codex, Warp e VS Code em um projeto Next.js de salão de beleza.
  • O planejamento inicial foca na criação de um MVP funcional antes de introduzir fluxos de loops autônomos.

O avanço dos modelos de IA viabiliza execuções contínuas sem intervenção humana por longos períodos. O sistema centraliza a validação na definição clara de uma saída correta, enquanto o usuário retém apenas a decisão final de encerramento. O repositório inicial utiliza arquivos de configuração como Claude.md e Agents.md para padronizar o comportamento de múltiplos agentes.

Nível 1: Automação da Página Inicial e Integração com Infraestrutura

  • O comando goal orienta o agente a executar tarefas até que os objetivos específicos e os critérios de validação sejam atingidos.
  • Ferramentas de linha de comando (CLI) conectam o agente ao GitHub para controle de versão, Supabase para banco de dados e Vercel para implantação.
  • A otimização de páginas complexas com animações GSAP garante alto desempenho sem perda visual.

O primeiro nível aplica loops em elementos complexos como animações GSAP na página inicial. A validação automatizada utiliza capturas de tela rápidas baseadas em diretrizes globais. A integração com CLIs de plataformas externas permite que o agente configure repositórios, bancos de dados e ambientes de produção de forma independente.

Nível 2: Fábrica de Software e Validação Adversária

  • O sistema de fábrica de software processa múltiplos recursos em lote utilizando filas em arquivos Markdown.
  • Protótipos de interface (mocks) criados previamente fornecem parâmetros visuais para o agente verificar as implementações.
  • Agentes de revisão adversária analisam o código gerado por subagentes em ramificações isoladas (branches) antes de submeter pull requests.

O segundo nível dimensiona a produção para gerenciar listas extensas de funcionalidades de forma contínua durante a noite. O agente principal delega a codificação a subagentes e utiliza uma revisão adversária com contexto limpo para capturar bugs. As alterações são validadas por meio de pull requests que contêm capturas de tela e provas do funcionamento.

Nível 3: Operação Autônoma via Dispositivos Móveis

  • O aplicativo Paseo permite executar e monitorar o agente de IA diretamente pelo celular.
  • A visualização móvel publica rascunhos HTML em links temporários na Vercel para testes interativos em tempo real.
  • O fluxo remoto elimina a necessidade de supervisão física em computadores para o planejamento e aprovação de alterações.

O terceiro nível remove a dependência de computadores locais ao integrar o ambiente de desenvolvimento com o aplicativo Paseo. A interface espelhada preserva todos os comandos de barra e recursos do Claude Code. A publicação instantânea de protótipos em HTML possibilita a validação interativa de funcionalidades diretamente em telas móveis.

커뮤니티 글

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

이 영상에 대해 글쓰기