Claude Acaba de Lançar Algo para Corrigir a Programação com IA

AAI LABS
Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00O Claude Code é realmente incrível, mas a nossa equipe começou a usá-lo para tudo.
00:00:03A Anthropic percebeu isso e, há um tempo, introduziu o conceito de “skills”.
00:00:07Mas com o lançamento do Nano Banana Pro, as pessoas começaram a seguir um caminho totalmente diferente,
00:00:12usando produtos do Google como o Anti-Gravity para criar sites melhores.
00:00:15Nós testamos o Anti-Gravity, mas na nossa opinião ele está muito instável no momento.
00:00:19Sabemos que quem gosta do Anti-Gravity vai querer nos criticar.
00:00:21Mas isso é assunto para outro vídeo, porém as imagens que ele gera são gratuitas.
00:00:25Então pensamos: por que não deixar o Claude cuidar do código e o Anti-Gravity apenas das imagens?
00:00:30Mas o detalhe é o seguinte.
00:00:31Para esses diferentes casos de uso, você não deveria re-promptar o Claude todas as vezes.
00:00:35Você deveria treiná-lo e criar uma skill dedicada.
00:00:37Recentemente, o Claude lançou um guia sobre como as skills realmente devem ser construídas.
00:00:41E a parte mais importante é o teste e a iteração.
00:00:44Sinceramente, esse guia mudou a forma como pensamos sobre essas skills.
00:00:48Você talvez já tenha ouvido falar do Skill Creator.
00:00:50É a skill oficial do Claude Code que orienta na criação de skills eficazes.
00:00:55Mas um membro da nossa equipe descobriu que ele ainda está desatualizado
00:00:58em relação ao novo guia que publicamos.
00:01:00Então, nós o atualizamos e muita coisa mudou
00:01:02seguindo as novas diretrizes, trazendo melhorias bem legais.
00:01:05Usando este Skill Creator atualizado e após muita iteração penosa,
00:01:09criamos esta nova skill de UI para o Nano Banana.
00:01:12Mas a skill com a qual começamos e a que terminamos são coisas completamente diferentes.
00:01:16Ambas as skills estarão disponíveis no AI Labs Pro.
00:01:19Para quem não sabe, é a nossa comunidade lançada recentemente,
00:01:22onde você encontra templates prontos para plugar direto nos seus projetos,
00:01:26tanto deste vídeo quanto de todos os anteriores.
00:01:28Se você vê valor no que fazemos e quer apoiar o canal,
00:01:31esta é a melhor forma. O link está na descrição.
00:01:34Já tínhamos o processo de coordenação entre o Claude Code e o Anti-Gravity resolvido.
00:01:38Então abrimos o mesmo diretório tanto no Claude Code quanto no Anti-Gravity.
00:01:42O Claude inicializou o projeto e o Anti-Gravity só precisava focar nesta pasta pública,
00:01:47que conteria todas as imagens.
00:01:49O Claude nos forneceria os prompts e os nomes de arquivo para as imagens que
00:01:53o Anti-Gravity precisava produzir. Esses prompts foram para o Anti-Gravity.
00:01:56Ele ativou sua ferramenta de geração de imagens e, usando processamento paralelo,
00:02:00gerou várias imagens ao mesmo tempo.
00:02:03Como podem ver, ele gerou três imagens e todas foram colocadas nesta pasta de imagens.
00:02:08Assim que foram salvas, o Claude soube automaticamente que estavam lá e pôde trabalhar com elas.
00:02:12Mas assim que começamos a gerar as imagens, várias coisas começaram a dar erro.
00:02:17Você já deve ter ouvido isso muitas vezes, mas a engenharia de descrição é um dos
00:02:21pontos mais importantes ao criar esses fluxos repetitivos. Essas descrições são o
00:02:26front matter em YAML que é sempre carregado no contexto do Claude Code ao abri-las.
00:02:30É assim que o Claude decide se precisa carregar sua skill ou não.
00:02:34Mas muitos usuários relataram skills sendo carregadas sem necessidade.
00:02:38E isso acontece porque a maioria das descrições só diz o que a skill faz.
00:02:41Uma boa descrição responde a duas perguntas:
00:02:44O que a skill faz? E quando o Claude deve usá-la?
00:02:46É aqui que entram as frases de ativação. Elas são o que realmente chamam a skill,
00:02:51como “criar uma landing page” ou quando mencionamos “nano banana”. Mas não é só quando usar.
00:02:57O guia também menciona gatilhos negativos, que dizem ao Claude quando NÃO usar a skill.
00:03:01Por exemplo, definimos que ela não deve carregar para correções simples de bugs ou trabalho em banco de dados.
00:03:05Portanto, a diferença entre uma descrição boa e uma ruim é clara.
00:03:08Vejam que esta skill do novo Skill Creator tem várias frases de ativação e gatilhos negativos,
00:03:13enquanto esta do antigo apenas descreve o que a skill faz.
00:03:17Há também instruções puramente quantitativas e relacionadas à sintaxe,
00:03:21mas vocês não precisam se preocupar com elas agora.
00:03:23Além disso, se estiverem gostando do conteúdo, considerem clicar no botão de destaque,
00:03:27pois isso nos ajuda a criar mais vídeos assim e a alcançar mais pessoas.
00:03:31Normalmente, ao gerar diferentes imagens, a maioria precisava ter
00:03:35dimensões variadas para se ajustarem a diferentes casos de uso.
00:03:39E era isso que o prompt especificava antes de fazermos as alterações.
00:03:42Mas o que acontecia sempre era que, ao tentarmos usar essas dimensões personalizadas,
00:03:46a ferramenta de geração de imagens no Anti-Gravity só criava imagens quadradas.
00:03:50Normalmente, isso não é um problema com o modelo simples do app Gemini ou do Google AI Studio.
00:03:55Mas aqui tivemos que mudar o processo e modificar a skill adequadamente.
00:03:58Isso foi referenciado em todo o skill.md nas etapas apropriadas,
00:04:02e também nas regras de prompt: sempre que ele fosse escrever um prompt,
00:04:06não deveria especificar dimensões ou proporção, pois isso não importava tanto.
00:04:10E se ele precisasse cortar a imagem para um uso específico,
00:04:12deveria fazer isso depois usando sua ferramenta de corte de imagem.
00:04:15E é por isso que a pasta de scripts é tão importante.
00:04:18Ela abriga ferramentas executáveis que o Claude pode chamar com argumentos específicos,
00:04:22e você descobre essas ferramentas de acordo com seus diferentes casos de uso.
00:04:25Um bom script possui esses argumentos de CLI com diferentes modos,
00:04:29para que o Claude possa chamá-lo facilmente.
00:04:31E algo que descobrimos ser muito necessário são os modos de visualização,
00:04:35que ajudam o Claude a prever o resultado antes de realizar operações destrutivas.
00:04:40Vamos fazer uma pausa para falar do patrocinador de hoje.
00:04:42Depois, vamos ver o erro estrutural número um
00:04:45que a maioria das pessoas comete ao construir suas skills.
00:04:47CREAM
00:04:47Para desenvolvedores e fundadores de SaaS, a maior dor de cabeça não é construir.
00:04:50É o pesadelo dos impostos globais e da conformidade com o IVA.
00:04:53A CREAM é um “merchant of record” que assume todo esse fardo, deixando você focar no desenvolvimento.
00:04:58Feita para a próxima onda de negócios digitais,
00:05:00a CREAM oferece uma configuração rápida para aceitar pagamentos em mais de 100 países no primeiro dia.
00:05:05Eles eliminaram a confusão das taxas ocultas,
00:05:07oferecendo uma taxa fixa transparente de 3,9% + 40 centavos.
00:05:11É só isso.
00:05:11A mesma taxa, esteja o cliente em Tóquio ou no Texas, use American Express ou Google Pay.
00:05:16Você ganha recursos poderosos, como divisões automáticas de receita, para garantir um lançamento tranquilo.
00:05:20Sempre use o modo de teste isolado deles e o SDK dedicado em TypeScript.
00:05:23Além disso, a CREAM oferece skills oficiais de agentes de IA para Claude Code, Cursor e WinSurf.
00:05:28Basta dizer ao seu assistente de IA para integrar a CREAM,
00:05:30e ele gerará instantaneamente código seguro e pronto para produção, baseado nas melhores práticas da API deles.
00:05:36Só lembre-se: nunca envie suas chaves de API para o controle de versão.
00:05:39Se você está pronto para uma solução de pagamento, clique no link no comentário fixado.
00:05:42Pare de se preocupar com impostos e comece a escalar com CREAM.io.
00:05:45Você talvez já tenha nos ouvido falar sobre divulgação progressiva em vários de nossos
00:05:50vídeos anteriores, pois ela não serve só para skills, mas é vital para a janela de contexto.
00:05:55Isso significa que o agente só deve saber de algo se precisar daquilo naquele momento.
00:05:59Você já sabe que a descrição é sempre carregada no contexto do Claude Code.
00:06:03E é por isso que essas skills usam uma estrutura de três níveis,
00:06:06onde o primeiro nível está sempre dentro do contexto do Claude.
00:06:09O segundo nível é o corpo do skill.md, que deve ter referências para o nível 3,
00:06:14incluindo o fluxo de trabalho completo e instruções de como usar essas referências.
00:06:18E dentro dessa estrutura, o guia oficial define algo chamado de seção crítica.
00:06:23Você deve listar as informações mais importantes logo no início,
00:06:26e não deixá-las escondidas sob várias instruções diferentes.
00:06:29Dá para ver claramente que esta skill só tem o skill.md e não possui a estrutura de nível 3.
00:06:34Isso porque todo o fluxo, dicas, as diversas recomendações,
00:06:38e diretrizes de solução de problemas estão em um único arquivo.
00:06:41Não é assim que deve ser estruturado,
00:06:43pois ele pode não precisar dessas diretrizes no momento atual.
00:06:45Ele deve carregar apenas o fluxo de trabalho primeiro,
00:06:47e só buscar as regras de prompt quando for a hora de escrever ou usá-las.
00:06:51Por outro lado, esta skill está claramente estruturada com referências
00:06:54e os diferentes scripts que ela necessita.
00:06:56E junto com o fluxo, o arquivo tem gatilhos claros de quando rodar cada script
00:07:01e quando verificar as referências para as diferentes diretrizes.
00:07:04Assim, no skill.md, há apenas o fluxo de trabalho para a skill nano banana.
00:07:08Depois disso, na seção de referências, estão as diferentes diretrizes,
00:07:12onde as regras de prompt contêm as 13 regras de teste diferentes
00:07:15que encontramos após nossos testes de iteração.
00:07:17Mas mesmo com toda essa estrutura, o Claude Code ainda dava um jeito de pular etapas.
00:07:22Após gerar o primeiro lote de imagens,
00:07:24elas certamente precisariam ser regeradas,
00:07:26pois o Nano Banana nem sempre gera o resultado mais preciso.
00:07:29O surpreendente é que o Claude não verificava isso por conta própria.
00:07:33Tivemos que perguntar se as imagens estavam boas conforme o design que ele queria criar.
00:07:37Caso contrário, ele teria apenas implementado as que foram produzidas.
00:07:41Novamente, é por isso que dizemos que a iteração é o segredo ao construir essas skills.
00:07:45Nós já tínhamos uma etapa para validar ativos, que usava o script de validar imagens,
00:07:49mas ele só validava se as imagens estavam estruturalmente corretas,
00:07:52não se estavam esteticamente adequadas.
00:07:55Não tinha nada a ver com a estética.
00:07:57Para a estética, o Claude precisava fazer uma revisão visual por si mesmo,
00:08:00analisando certas questões e decidindo se a imagem passava ou não.
00:08:04E se falhasse, ele precisava fornecer um motivo também.
00:08:07Isso porque, se a imagem falhasse na revisão visual,
00:08:09ele precisava deletá-la e escrever um novo prompt corrigido.
00:08:13E dependendo do modo, se estivesse no modo Anti-Gravity,
00:08:16ele forneceria um novo prompt, incluindo o motivo da falha anterior,
00:08:20para que o Anti-Gravity pudesse gerar imagens novas e melhores.
00:08:23E é por isso que o Anti-Gravity diz que regenerou a imagem do vidro,
00:08:27e que desta vez ela segue os requisitos.
00:08:29Por isso, ao criar um fluxo de trabalho, é essencial ter essas barreiras de validação.
00:08:34Barreiras de validação são bloqueios explícitos que definem o que deve ser concluído
00:08:39antes de seguir para a próxima parte do fluxo.
00:08:41Como vocês viram, se depender do Claude, ele vai criar a UI com imagens corrompidas ou ausentes,
00:08:46sem verificar nada a menos que você mande.
00:08:48Por exemplo, nesta skill,
00:08:50vocês veem claramente que o fluxo tem várias etapas a serem seguidas.
00:08:54E entre outros erros,
00:08:55não foi escrita nenhuma barreira de validação antes de passar para o próximo passo.
00:08:59Essas barreiras de validação ainda são prompts.
00:09:01Não são como comandos mágicos de bash.
00:09:04Mas se for algo que será reutilizado sempre, sem variação,
00:09:08você deve criar uma ferramenta e listá-la como a barreira de validação.
00:09:11Mas neste caso, entre as várias etapas, temos estas barreiras
00:09:15que não só impedem o avanço desordenado no processo,
00:09:19mas também formam um mini-processo dentro de cada fluxo de trabalho.
00:09:22Ao experimentar e iterar seu processo repetidamente,
00:09:26você encontrará muitos erros, alguns dos quais já mostramos.
00:09:30Por exemplo, imagens ausentes ou corrompidas, saídas parciais de API,
00:09:34ou scripts que fecham devido a uma falha parcial.
00:09:36E durante esse processo de iteração da skill,
00:09:39um bom criador de skills deve notar o tratamento de erros para cada caso e defini-los claramente.
00:09:44Pois se já aconteceu uma vez, pode acontecer de novo.
00:09:46E deve ser tratado neste formato:
00:09:48Defina o erro, depois a causa, para que o Claude saiba,
00:09:51e então os passos para realmente corrigir o problema.
00:09:54Novamente, quando pedimos para criar uma landing page, ele carrega a skill e lê seus arquivos.
00:09:58Se você já tem um projeto Next.js, ele detecta e faz perguntas,
00:10:02como o objetivo da página e se você quer imagens geradas por IA ou não.
00:10:06Se você disser que não quer, ele apenas usa seus recursos de front-end para criar a página.
00:10:11Isso porque, enquanto construíamos, também pedimos ao Claude para finalizar
00:10:16esta skill de design front-end, que tem várias diretrizes incríveis
00:10:19para implementar sites realmente bonitos.
00:10:22E após terminarmos toda a experimentação, foi isto que ele gerou para nós.
00:10:27Como podem ver, esta é a imagem que geramos,
00:10:29e ela tem esse efeito de animação sutil.
00:10:32Fora isso, é uma landing page com visual bem limpo, e as imagens não estão exageradas.
00:10:36Elas só foram aplicadas onde eram realmente necessárias.
00:10:39Mas quando foi gerada pela primeira vez, houve problemas com a fonte usada.
00:10:43Simplesmente não estava funcionando bem.
00:10:44Então fomos atrás desta fonte tipográfica específica que eles testaram,
00:10:48e foi isso que realmente resolveu os problemas de tipografia para nós.
00:10:51Então, novamente, estamos apenas recrutando diferentes recursos
00:10:54que nem estão relacionados a esta skill de design nano banana,
00:10:57e os colocamos lá para que ela tenha as capacidades necessárias.
00:11:00Sobre divulgação progressiva, já discutimos os arquivos adicionais com referências e scripts.
00:11:06Agora estamos aprofundando nas referências, que são inteligências específicas de domínio.
00:11:09E embora sua skill esteja pronta para um domínio específico,
00:11:12ela pode ter esses pequenos pacotes de conhecimento como componentes separados também.
00:11:16Por exemplo, nestas referências, listamos padrões de design,
00:11:19estética de front-end e regras de prompt.
00:11:21Desta forma, podemos expandir a base de conhecimento da skill sem poluir a janela de contexto.
00:11:26Até agora, todos os conselhos que você viu ensinam como treinar o Claude para fazer tarefas melhor.
00:11:31Mas não ensinam como realmente usá-lo da forma correta.
00:11:33Para isso, temos outro vídeo onde mostramos as 10 formas mais
00:11:36atualizadas de obter vantagem com o Claude Code.
00:11:39Você verá o vídeo na tela final,
00:11:41então é melhor clicar nele em vez de pesquisar.
00:11:43Isso nos traz ao fim deste vídeo.
00:11:45Se você quiser apoiar o canal e nos ajudar a continuar fazendo vídeos assim,
00:11:49pode fazer isso usando o botão de “Valeu demais” abaixo.
00:11:51Como sempre, obrigado por assistir, e vejo você no próximo!

Key Takeaway

O segredo para dominar a programação com IA reside na criação de skills estruturadas no Claude Code que utilizam iteração contínua, validação rigorosa e uma hierarquia de contexto inteligente.

Highlights

Introdução do Claude Code e a integração estratégica com o Google Anti-Gravity para geração de imagens.

A importância de criar "skills" (habilidades) dedicadas em vez de repetir prompts genéricos.

Nova estrutura de três níveis para otimização da janela de contexto e divulgação progressiva de informações.

Uso de frases de ativação e gatilhos negativos para evitar o carregamento desnecessário de habilidades.

Implementação de barreiras de validação para garantir a qualidade estética e técnica antes de avançar no fluxo de trabalho.

Tratamento estruturado de erros definindo erro

Timeline

Integração Claude Code e Anti-Gravity

O vídeo começa explorando como a Anthropic introduziu o conceito de habilidades para o Claude Code. A equipe demonstra uma técnica de colaboração onde o Claude cuida da lógica do código enquanto o Google Anti-Gravity é responsável pela geração de imagens gratuitas. É enfatizado que o usuário não deve re-promptar o modelo constantemente, mas sim treiná-lo através de guias de iteração. O apresentador menciona o lançamento de uma comunidade chamada AI Labs Pro, que oferece templates prontos para projetos. Este segmento estabelece a base para um fluxo de trabalho mais eficiente e automatizado na criação de sites.

Configuração Técnica e Fluxo de Imagens

Nesta parte, é detalhado o processo de coordenação entre as ferramentas dentro de um mesmo diretório. O Claude inicializa o projeto e direciona o Anti-Gravity para uma pasta pública específica onde as imagens serão geradas. O Anti-Gravity utiliza processamento paralelo para criar múltiplas imagens simultaneamente com base nos prompts fornecidos pelo Claude. Assim que os arquivos são salvos, o Claude os detecta automaticamente para prosseguir com o desenvolvimento. Esta integração demonstra como softwares distintos podem operar em sincronia para acelerar a produção de ativos visuais.

Engenharia de Descrição e Gatilhos

O palestrante discute a importância vital da engenharia de descrição usando YAML no front matter das skills. Uma boa descrição deve responder não apenas o que a habilidade faz, mas precisamente quando ela deve ser ativada. São introduzidos os conceitos de frases de ativação e, crucialmente, os gatilhos negativos, que impedem o Claude de carregar ferramentas em contextos irrelevantes, como correções simples de bugs. Isso resolve o problema comum de sobrecarga de contexto relatado por muitos usuários. O foco aqui é a precisão cirúrgica no acionamento das capacidades da IA.

Scripts, Ferramentas de CLI e Dimensões

Este trecho aborda as limitações técnicas encontradas ao gerar imagens com dimensões personalizadas, que muitas vezes resultavam em formatos quadrados indesejados. A solução apresentada foi modificar a skill para que o Claude não especificasse proporções no prompt inicial, optando por realizar cortes posteriores com ferramentas de script. A importância da pasta de scripts é destacada como um local para executáveis que o Claude pode chamar com argumentos de CLI específicos. Modos de visualização também são recomendados para que a IA possa prever resultados antes de realizar alterações destrutivas nos arquivos. Essa abordagem modular permite contornar limitações de modelos de imagem específicos.

Parceria CREAM.io e Conformidade Global

O vídeo faz uma pausa para apresentar a CREAM.io, um merchant of record focado em desenvolvedores e fundadores de SaaS. O serviço resolve problemas complexos de impostos globais e conformidade com IVA em mais de 100 países com uma taxa fixa de 3,9%. Um diferencial importante mencionado é a oferta de skills oficiais para agentes de IA como Claude Code e Cursor, facilitando a integração de pagamentos via código. O apresentador reforça a necessidade de usar o modo de teste isolado e nunca enviar chaves de API para sistemas de controle de versão. É uma solução estratégica para quem deseja escalar negócios digitais sem burocracia financeira.

Estrutura de Três Níveis e Divulgação Progressiva

O conceito de divulgação progressiva é detalhado como uma técnica vital para gerenciar a janela de contexto da IA. A estrutura de três níveis organiza as informações de modo que o Claude só acesse dados detalhados quando for estritamente necessário. O primeiro nível contém a descrição essencial, o segundo o corpo do fluxo de trabalho e o terceiro as referências e scripts específicos. O guia oficial recomenda o uso de seções críticas no início dos arquivos para destacar informações fundamentais. Esta organização impede que a janela de contexto seja "poluída" com diretrizes que não são úteis no momento atual da tarefa.

Barreiras de Validação e Revisão Visual

A iteração é apresentada como o segredo final para o sucesso das skills, com foco especial nas barreiras de validação. O palestrante observa que, sem instruções explícitas, o Claude pode tentar implementar ativos corrompidos ou esteticamente desagradáveis. É necessário configurar processos onde a IA realiza uma revisão visual e fornece motivos detalhados em caso de falha antes de regerar o conteúdo. Essas barreiras funcionam como bloqueios manuais ou automatizados que garantem que cada etapa do fluxo de trabalho atinja o padrão de qualidade exigido. O objetivo é evitar que o agente avance de forma desordenada no desenvolvimento da interface.

Tratamento de Erros e Resultado Final

Na conclusão, o vídeo mostra como definir erros de forma estruturada, detalhando a causa e os passos para a solução. É demonstrado o resultado final: uma landing page com design limpo, tipografia corrigida e animações sutis, tudo gerado através do fluxo otimizado. O apresentador reforça que conhecimentos de domínios específicos podem ser plugados como referências separadas para enriquecer a skill. O vídeo termina incentivando o uso correto da ferramenta e direcionando para conteúdos adicionais sobre o Claude Code. O foco final é a demonstração de que a estrutura correta produz resultados profissionais superiores.

Community Posts

View all posts