00:00:00Se você usa o Claude Code para construir aplicações web, precisa conferir o GSD,
00:00:04que é um framework de desenvolvimento orientado a especificações e de código aberto,
00:00:08especializado em orquestrar diferentes subagentes para concluir projetos seguindo esse modelo.
00:00:12Diferente dos frameworks tradicionais que já mostramos no canal,
00:00:15como o Método Beemap, SpecKits, Taskmaster e tantos outros, todos eles
00:00:20precisam seguir uma regra rígida onde tudo deve ser feito em uma
00:00:24única janela de contexto. Por exemplo: planejamento, pesquisa, desenvolvimento e verificações
00:00:29devem ocorrer em um só contexto. Mas isso traz um problema crucial:
00:00:33o esgotamento do contexto, o que significa que quanto maior o consumo de tokens em uma janela,
00:00:38menor a precisão. A solução para isso é usar subagentes para basicamente
00:00:42delegar o planejamento, pesquisa, desenvolvimento e verificações, cada um para seu próprio agente,
00:00:47onde cada subagente terá seu próprio contexto limpo para realizar as tarefas uma a uma.
00:00:51O GSD atua como um orquestrador que guia esses subagentes seguindo o desenvolvimento
00:00:55orientado a especificações, levando a IA de uma ideia bruta a uma aplicação pronta
00:01:00para produção passo a passo. Isso significa que, sim, vamos consumir mais tokens,
00:01:04mas o nível de precisão que teremos será muito maior do que se usássemos
00:01:07tudo em um único contexto. É por isso que, neste vídeo, vou mostrar
00:01:11exatamente como configurar o framework GSD no seu Claude Code, mostrando como
00:01:15pegar uma ideia e construir sobre aplicações novas ou já existentes,
00:01:19moldando a ideia que você quer construir usando os agentes de pesquisa
00:01:23 e planejamento que ele possui. Após moldarmos a ideia, passamos para a
00:01:27implementação, onde há um executor próprio para realizar as tarefas com agentes paralelos
00:01:32rodando ao mesmo tempo. Cada agente tem sua própria janela de contexto e faz o commit
00:01:37de cada tarefa concluída. Além disso, sempre que uma tarefa termina, ele cria outro agente
00:01:41para verificar o trabalho em relação aos objetivos. E o mais importante: após concluir
00:01:45uma fase, vou mostrar como podemos iterar por cada etapa,
00:01:49como discussão, plano, execução e verificação, ciclo por ciclo, até que todo
00:01:55o marco seja concluído de forma autônoma, sem intervenção manual. É basicamente isso
00:02:00que vamos cobrir hoje. Se você se interessou, vamos lá. Antes de começarmos,
00:02:04uma introdução rápida para quem é novo aqui: meu nome é Eric. Fui engenheiro de software sênior
00:02:09por anos em empresas como Amazon, AWS e Microsoft. Criei este canal para compartilhar
00:02:15tudo o que aprendi, de IA e programação a automação, Web3 e carreira,
00:02:22tudo dividido em tutoriais práticos que você pode seguir de verdade. Se você quer
00:02:27subir de nível, conheça o canal e se inscreva. Agora, de volta ao vídeo.
00:02:32A primeira coisa que faremos é navegar até o repositório do GSD.
00:02:36Aqui ele explica exatamente como instalar na sua máquina local. Vou copiar
00:02:40este comando, voltar para o terminal do meu projeto atual
00:02:44e digitar o comando para instalar no meu projeto local. Vou confirmar
00:02:49a instalação. Agora, vamos escolher se vamos usar
00:02:53Claude Code, Open Code ou ambos. Vou escolher apenas o Claude Code para esta demonstração.
00:02:57Aqui pergunta onde desejo instalar. Prefiro instalar globalmente
00:03:02para que esteja disponível em todos os meus projetos. Ok.
00:03:07Depois de escolher isso, o GSD oferece uma linha de status mostrando o modelo,
00:03:12a tarefa atual e o uso da janela de contexto. Ele pergunta se deve manter a atual
00:03:17ou substituir pela do GSD. Como ainda não vi a linha de status do GSD,
00:03:22vou escolher a opção número dois. Vamos dar uma olhada
00:03:26em como ela é. Vou abrir minha sessão do Claude Code e, bem aqui,
00:03:31você pode ver a linha de status atual do GSD. É claro que, se você não gostar,
00:03:37pode usar a minha versão. Tenho outro vídeo onde mostro
00:03:41exatamente como customizar sua linha de status para ficar igual àquela.
00:03:46Mas se quiser seguir com a do GSD, pode continuar com essa opção.
00:03:49Com o GSD instalado, basta digitar "gsd". Veja que temos todos
00:03:54os comandos customizados aqui dentro do terminal do Claude Code. Certo.
00:03:58Agora o próximo passo é tentar inicializar nossos projetos.
00:04:02Se for um projeto novo, basta usar "gsd new project". Mas se já
00:04:06tiver um projeto existente, vamos rodar este comando aqui primeiro.
00:04:10Ele inicia vários subagentes para analisar a stack, arquitetura, convenções
00:04:15e preocupações. Assim, podemos usar o comando para mapear toda a base de código
00:04:20e tirar dúvidas sobre o que você quer adicionar e planejar a aplicação.
00:04:24Vou usar este comando primeiro para mapear toda a base de código. Veja
00:04:28que ele vai iniciar quatro agentes mapeadores simultâneos para entender a stack,
00:04:32a arquitetura, as convenções e as preocupações, analisando tudo
00:04:38em nossa aplicação. Vamos aguardar um pouco
00:04:42até que os agentes terminem o processamento em paralelo. Tudo pronto.
00:04:46O mapeador concluiu a análise da base de código. Agora vou
00:04:50reiniciar minha sessão do Claude Code porque a janela de contexto atual
00:04:54já está pela metade, certo? Vou encerrar esta sessão, limpar
00:04:59o terminal e rodar novamente. Assim começamos do zero após o mapeamento,
00:05:04mas não se preocupe, pois o mapeamento já foi salvo em um estado. Você pode ver
00:05:09uma pasta chamada ".planning". Dentro dela, há informações sobre a base de código.
00:05:13Isso resume tudo o que temos na aplicação, como arquiteturas
00:05:17e preocupações. Convenções e integrações, está tudo armazenado
00:05:23nesta pasta para não perdermos o progresso do mapeamento. Certo.
00:05:28Mapeada a base de código, vamos inicializar nosso projeto.
00:05:32O que vai acontecer é que ele me fará algumas perguntas importantes
00:05:36para entender minha ideia e as novas funcionalidades. Depois, ele vai disparar
00:05:39vários subagentes em paralelo para investigar o domínio que queremos construir.
00:05:43Isso ajudará a extrair requisitos e o roteiro, definindo exatamente
00:05:47quais fases são necessárias para fazer acontecer. Então, vou
00:05:51copiar este comando e colar aqui para inicializar nosso projeto atual.
00:05:56Aqui ele identifica que é um projeto já existente (brownfield),
00:06:00com código e mapa da base de código prontos, além do repositório Git, mas sem
00:06:05o arquivo de planejamento ainda. Ele pergunta: "Vejo que você tem um projeto existente
00:06:10com o código mapeado. Olhando o arquivo MD do Claude, entendo o contexto
00:06:14do negócio. O que você quer que eu construa agora?". Como eu já tenho
00:06:18uma funcionalidade em mente, que é construir um painel de controle para
00:06:23o sistema administrativo... este é um arquivo MD curto que rascunhei com IA
00:06:29para criar um painel administrativo mínimo como uma nova aba na barra lateral,
00:06:34com ferramentas essenciais para gerenciar usuários e suporte no lançamento.
00:06:39Aqui listei algumas funcionalidades que eu queria, as do MVP,
00:06:42mockups de UX e tudo mais, bem detalhado.
00:06:47Recomendo muito que vocês usem a IA, o Claude, para analisar
00:06:52as aplicações e rascunhar um plano do que pretendem construir,
00:06:56pelo menos as mudanças de UX ou as funcionalidades incluídas, para termos
00:07:00um plano claro do que o Claude deve implementar. Agora,
00:07:04eu poderia simplesmente dar esse plano para o Claude implementar, mas quero
00:07:08que o GSD assuma e faça a investigação ou pesquisa inicial, iniciando
00:07:13vários subagentes para pesquisar por nós e quebrar essa grande tarefa em partes
00:07:20menores e mais fáceis de implementar. Vou abrir o terminal
00:07:25e dizer que é exatamente isso que vamos construir, referenciando este arquivo.
00:07:28Vou dizer: "Estou planejando construir isso em seguida". Vou inserir
00:07:33essa informação e deixar o GSD nos ajudar com o planejamento.
00:07:40Ele vai ler esse item do backlog que queremos implementar para a aplicação.
00:07:44Então, ele vai disparar perguntas para que eu confirme
00:07:48a especificação exata. Ele diz que as especificações incluem quatro funções,
00:07:52como lista de usuários, créditos, níveis e personificação, e pergunta se deve
00:07:58fazer tudo junto ou priorizar algo na primeira iteração. Veja que ele começou
00:08:02a quebrar essas quatro grandes funções em partes menores.
00:08:07Vou sugerir começarmos pelo mais simples, como a lista de usuários e créditos.
00:08:11Vou confirmar. Depois pergunta como validar se o painel está funcionando.
00:08:16Como o projeto é novo, eu costumo fazer testes manuais, mas ele está sugerindo
00:08:21cobertura de testes, como testes de integração para as rotas da API
00:08:25ou cobertura total, incluindo testes unitários, de integração e ponta a ponta.
00:08:30Vou focar apenas nos testes manuais por enquanto e aumentar a cobertura depois.
00:08:34Vou confirmar os testes manuais agora e enviar a resposta.
00:08:38Vamos ver o que o GSD fará em seguida.
00:08:43Ele continua com o questionário. Pergunta quando o painel precisa estar pronto,
00:08:46pois no meu documento de análise de negócios o planejamento do cronograma
00:08:50menciona o dia 30 de janeiro como a data oficial de lançamento.
00:08:56Ele me pergunta se é necessário antes do lançamento da v2,
00:09:01em 30 de janeiro. Vou responder que sim, com certeza quero
00:09:05ter isso antes de 30 de janeiro. Então ele pergunta se queremos prosseguir com o arquivo MD.
00:09:10Ainda quero explorar e fazer mais perguntas. Certo.
00:09:14Uma das perguntas que fiz foi para descobrir quais lacunas faltam
00:09:19na nossa especificação e no que faremos. Ele iniciou vários subagentes para
00:09:22pesquisar segurança, UX, boas práticas e lacunas técnicas de implementação
00:09:28que poderiam estar faltando. Aqui temos uma tabela completa
00:09:32mostrando essas lacunas. Por exemplo: falta de proteção de middleware para o admin,
00:09:37cookies ausentes, limite de taxa em memória e ações de admin para excluir usuários.
00:09:43Além disso, a função "is admin" está quebrada para outros usuários. Queremos garantir
00:09:49que essas lacunas sejam resolvidas na implementação atual.
00:09:52Aqui ele apresenta a lista de correções sugeridas. O que podemos
00:09:57fazer é revisar isso e ver se essas correções fazem sentido.
00:10:02Se estiver tudo certo, podemos criar nosso arquivo MD do projeto
00:10:06e partir para a implementação. Ele vai me perguntar:
00:10:11"A pesquisa encontrou falhas críticas de segurança. Como devo lidar com isso?"
00:10:15Vou dizer para corrigir as críticas, que é minha recomendação.
00:10:20Vou enviar e deixar o Claude Code garantir que nosso plano e especificação
00:10:24não esqueçam nada antes de irmos para o arquivo MD do projeto. Com tudo certo,
00:10:29podemos criar o arquivo MD. Vou confirmar o avanço.
00:10:33O Claude Code vai criar o arquivo de projeto para todo este trabalho.
00:10:38Vamos aguardar a conclusão. Antes de irmos para a próxima seção,
00:10:42quero agradecer ao patrocinador de hoje, Testbrite.
00:10:46O Testbrite é um agente de IA focado especificamente em testes de software.
00:10:51Com o lançamento do MCP do Testbrite, você pode usá-lo direto na sua IDE,
00:10:57como Cursor, Windsurf ou Claude Code. A configuração é supersimples.
00:11:02O diferencial do Testbrite é que ele não roda testes às cegas.
00:11:07Ele lê sua base de código, entende a documentação e valida
00:11:11os resultados dos seus agentes de IA. Ele gera planos de teste a partir do PRD,
00:11:16cria casos de teste e garante a cobertura sem entrada manual.
00:11:21Depois, executa os testes e envia relatórios detalhados mostrando o que quebrou
00:11:26e o que precisa de atenção. A maioria dos agentes de código tem cerca de 42% de precisão.
00:11:32Com o Testbrite MCP, as equipes aumentaram essa precisão para até 93%.
00:11:38Confira o link na descrição ou o vídeo que fiz sobre ele. Voltando ao vídeo.
00:11:42Concluído o escopo e criado o arquivo MD do projeto, o sistema
00:11:47pergunta sobre o modo de operação. Podemos usar o modo "YOLO",
00:11:52que aprova e executa tudo automaticamente, ou o modo interativo.
00:11:56Neste último, a cada passo concluído, confirmamos as mudanças feitas
00:12:01antes de seguir. Vou escolher o modo YOLO para deixar ele agir sozinho
00:12:04e completar tudo sem minha intervenção. Vou dar Enter aqui no modo YOLO.
00:12:09Agora pergunta sobre a profundidade: quão detalhado deve ser o planejamento.
00:12:14Podemos escolher o modo rápido para entregar logo, com três a cinco fases,
00:12:18ou o modo padrão, com escopo mais equilibrado de cinco a oito fases
00:12:22e três a cinco planos por fase. Vou escolher o modo padrão,
00:12:26que é mais equilibrado. Não estou com pressa para entregar,
00:12:30prefiro algo mais sólido no escopo. Vou selecionar a opção dois.
00:12:34Certo, vou enviar a resposta agora. Como resultado,
00:12:38somos questionados sobre a execução. Podemos rodar os planos
00:12:42em paralelo, o que significa que planos independentes rodam ao mesmo tempo,
00:12:46ou de forma sequencial. Minha recomendação é que, se o tempo não for problema,
00:12:51usem o modo sequencial. Assim abordamos um plano de cada vez.
00:12:57Se rodar em paralelo e acabarem os seus créditos, você pode ficar travado
00:13:01com várias tarefas incompletas. No modo sequencial, você garante algumas
00:13:06tarefas prontas. Caso os créditos acabem, você pode esperar
00:13:10ou voltar no dia seguinte para continuar a execução
00:13:14uma por uma, sem deixar o projeto todo pela metade. Vou de sequencial
00:13:18porque quero fazer um passo de cada vez. Sobre o rastreamento do Git,
00:13:22pergunta se deve fazer commit do documento de planejamento. Sim,
00:13:27com certeza quero manter o histórico desses documentos no Git. Vou dizer que sim.
00:13:31Ele me fez perguntas adicionais: se queremos pesquisar antes do planejamento
00:13:35e se deve verificar se os planos atingem o objetivo antes da execução.
00:13:40Respondi sim para ambas. E sobre o verificador, se deve validar
00:13:46se o trabalho atende aos requisitos após cada fase. Também disse que sim.
00:13:52Quanto à preferência de modelo, escolhi os de maior qualidade: Opus para pesquisa e roteiro.
00:13:58Isso significa custo maior, mas com análise mais profunda. O que aconteceu
00:14:03foi que ele salvou todas essas configurações no arquivo config.json.
00:14:07Podemos modificar esse arquivo literalmente para qualquer mudança futura.
00:14:12Para não estender muito o vídeo, o GSD passou para a fase de pesquisa.
00:14:16Ele iniciou o sintetizador de pesquisa, que primeiro dispara vários subagentes.
00:14:21Quando essa pesquisa inicial termina, ele sintetiza tudo
00:14:26o que foi descoberto para criar nosso relatório de pesquisa baseado
00:14:30no projeto que estamos desenvolvendo. Após concordarmos,
00:14:34o GSD passa para a criação do roteiro passo a passo do projeto.
00:14:39Agora você pode ver que ele gerou o roteiro completo,
00:14:43com cinco fases e 36 requisitos mapeados, cobrindo tudo da v1.
00:14:49Isso inclui banco de dados, esquema, backend e a experiência do usuário.
00:14:54Ele pergunta se a estrutura do roteiro está boa. Você pode revisar
00:14:59e ver se falta algo. Se estiver tudo bem,
00:15:03vou aprovar e começar as mudanças. Com o projeto inicializado,
00:15:08vemos todos os artefatos do MVP que ele criou na pasta de planejamento.
00:15:13Então, tudo está na pasta de planejamento, certo? Todas as 5 fases e os 36 requisitos estão prontos para construir.
00:15:18O próximo passo, se estivermos de acordo, é começar com a fase um,
00:15:21começar com a fase um, uma por uma. E assim que criar um plano para a fase um,
00:15:25aqui você pode ver que também foram acionados múltiplos subagentes para criar este plano para a fase dois,
00:15:29fase três, tudo de uma vez, certo? Então você pode ter todos os subagentes aqui para criar,
00:15:34criar um novo plano ou um plano para cada fase que temos, certo? Assim que criar uma fase,
00:15:38o que você pode fazer agora é basicamente passar para a implementação. Agora, como mencionamos, certo,
00:15:41queremos executar isso sequencialmente com um contexto novo, e não quero que ele termine
00:15:46um plano e me peça para verificar, certo? Quero que ele complete tudo depois disso,
00:15:52e então poderemos verificar tudo, certo? Não quero verificar a cada fase.
00:15:55Quero verificar depois que todas as fases forem concluídas. O que você pode fazer aqui é comunicar
00:15:59isso ao Claude e dizer: "Ok, quero executar as fases do GSD sequencialmente com um contexto novo".
00:16:03E aqui o que ele vai fazer é basicamente executar cada fase uma por uma com um contexto
00:16:08de sessão novo para cada plano. E basicamente você pode ver que o que vai acontecer é que ele
00:16:13vai executar novos subagentes usando o executor GSD. E então cada agente aqui recebe 200K
00:16:18de contexto limpo. Para que não se misture com o plano anterior que o outro subagente concluiu.
00:16:23E então o que vai acontecer aqui é que ele vai executar todos os 13 planos
00:16:27de forma autônoma usando o GSD. Então temos nosso esquema de banco de dados, nosso backend, nossa UI, nossa gestão de créditos,
00:16:34e também o visualizador de registros de auditoria, ok? Tudo em um só lugar, executando um por um. E aqui eu só
00:16:39vou limpar o contexto, ignorar as permissões e executar isso um por um. Tudo bem, agora você
00:16:44pode ver que ele vai executar a fase um aqui do painel de administração para a implementação.
00:16:48E vamos esperar um pouco até que tudo esteja totalmente implementado. Certo, depois que todas
00:16:53as fases forem implementadas usando o GSD, aqui está como ficou o resultado. Bem aqui, você pode ver que estou
00:16:57na aba de administração e aqui estamos na aba de gestão de usuários. Aqui podemos visualizar todos os usuários
00:17:03que temos em nossas plataformas atuais. Eu posso pesquisar por um usuário. Por exemplo, se eu digitar
00:17:07"test", e aqui você pode ver que temos o primeiro resultado aparecendo bem aqui. E digamos que se eu
00:17:12remover isso, você pode ver que ele vai mostrar a lista inteira novamente. Também posso filtrar pelos
00:17:17níveis. Quais são as pessoas que estão usando os níveis gratuitos? Eu consigo ver isso, e
00:17:21consigo ver o uso de créditos, quando se cadastraram pela última vez, e também ajustar os créditos,
00:17:25certo? Então posso ver os detalhes da conta, que você vê aqui, ou também posso
00:17:29ajustar os créditos, como pode ver aqui, ok? Posso ajudar as pessoas a ajustar os eventos,
00:17:33definir o crédito, definir limites de crédito personalizados e também o uso
00:17:38correto, além de fornecer um motivo. E aqui no log de auditoria, podemos acompanhar isso.
00:17:42Por exemplo, digamos que se eu selecionasse todos os níveis, e atualmente estou logado como este usuário
00:17:48bem aqui, definido como administrador. E digamos que se eu clicasse aqui e tentasse ajustar os créditos,
00:17:52digamos que eu vá aumentar esse valor de crédito, por exemplo, para 50 créditos, certo? Então
00:17:57do que temos agora, que são 510 créditos, para 560 créditos. E tudo o que temos que fazer aqui
00:18:03embaixo é apenas adicionar um motivo. Por exemplo, vou apenas colocar "teste", e basicamente esse
00:18:07é o motivo aqui, e vou aplicar o ajuste. E o que aconteceu aqui, você pode ver
00:18:11que temos uma notificação mostrando que aumentamos de 510 para 560, e também disparou
00:18:17a renderização automática para esse componente. E você pode ver na tabela aqui, que também reflete isso,
00:18:21de 510 para 560, que é o que temos agora, ok? Então podemos verificar que o recurso aqui está
00:18:27totalmente funcional. Também podemos dar uma olhada na parte de análise administrativa, onde podemos ver
00:18:31as métricas de tudo o que temos em nossas aplicações. Você pode ver quando foi a última
00:18:36atualização, bem como todas as estatísticas que temos para as aplicações, como total de usuários, usuários pagantes,
00:18:40além de diferentes níveis, diferentes usos de crédito, e também os usuários mais ativos. Também podemos
00:18:46ver os logs de auditoria, o que basicamente significa que todos os eventos, todas as ações que tomamos
00:18:51para fazer ajustes nos créditos dos usuários, podemos realmente ver isso bem aqui dentro
00:18:55do log de auditoria. Por exemplo, ajustar créditos, sincronizar os créditos, quem são os usuários de destino e
00:19:00quais são os detalhes do que fizemos. Podemos ver isso na trilha do log de auditoria. Basicamente,
00:19:05é assim que você pode usar o GSD aqui para seguir todo o espectro do desenvolvimento para concluir
00:19:09um recurso. Agora, se você gostou deste vídeo, por favor, deixe seu like. E, claro,
00:19:13se você estiver curioso sobre como eu consegui fazer este componente renderizar novamente após o crédito
00:19:16ser aplicado sem atualizar a página, bem, a resposta curta é que eu estava usando o Zustand, que é uma
00:19:21gestão de estado para basicamente centralizar o estado de toda a nossa aplicação, para que sempre que
00:19:26uma parte do componente seja atualizada, isso dispare as atualizações também neste estado atual.
00:19:30Então, se você estiver curioso sobre como pode adicionar essa gestão de estado em suas
00:19:34aplicações atuais, bem, eu recomendo fortemente que você confira este curso de sete horas que eu fiz sobre como
00:19:38você pode construir aplicações NestJS completas e prontas para produção, que sejam escaláveis e passo a passo.
00:19:44Dito isso, se você gostou deste vídeo, por favor, deixe seu like.
00:19:47Considere se inscrever porque, no futuro, compartilharei todas as lições e técnicas que você pode
00:19:51usar para basicamente construir uma aplicação pronta para produção usando IA para programar e construir
00:19:55aplicações prontas para produção como esta. Então, dito isso, vejo você no próximo vídeo.