Código da Claude para gerentes de produtos: criar e enviar com IA

1. Introdução ao código da Claude: Agora, imagine isso por um momento. Você é gerente de produto. Você passou uma semana escrevendo um PRD de dez páginas. Sua equipe de engenharia não está realmente interessada em ler o PRD. Sua equipe de design passou pelo PRD, mas na verdade criou algo muito diferente E no final, você sente que, Hmm. A saída ainda é muito ruim. Mas aqui está a verdade. Ninguém realmente se importa com seu PRD. Se você é um gerente de produto que vê que seus usuários estão enfrentando problemas, você conversou com alguns usuários e acha que pode criar algo super interessante, bem, vá em frente e construa-o. E se você quiser criar um produto real, nesse caso, você precisa entender o GlotCD E sim, há um cabo nele, mas essa ferramenta não é apenas para engenheiros. Se você é um gerente de produto que tem um entendimento decente sobre tecnologia, nesse caso, você pode usar o GlotCD para realmente criar um produto funcional e, em seguida, mostrar membros de sua equipe ou até mesmo para seus colegas de trabalho, e você pode simplesmente receber feedback e iterar o design para o E você pode realmente mostrar isso aos membros da sua equipe, às partes interessadas, e você pode obter mais informações e iterar esse recurso E depois da IA, quase todos os gerentes de produto estão usando essas ferramentas de IA, como código de coágulo e cursor antigravitacional, para realmente criar produtos Agora, como gerente de produto, você não está substituindo engenheiros, os ajudando a passar do protótipo ao recurso final com mais rapidez e economizando 30 pontos no tempo Então, ei, eu sou Navdeep. Trabalho como gerente de produto há quase seis anos. E neste curso, vou ajudá-lo a entender o que é o Código Claude Como você o usa de forma eficaz? E o que você pode criar usando o Claude Code? E eu sei que a maioria de vocês não são engenheiros e podem não ter um conhecimento técnico muito bom, mas está tudo bem. Neste curso, vou orientar você desde escrever sua primeira solicitação em Claude Code até realmente criar e enviar o produto, e então você pode compartilhar o link com seu amigo, e ele pode simplesmente dar uma olhada, dar um feedback e você pode iterar mais rápido em algumas horas, e você pode iterar mais rápido em vez de esperar semanas, design ou pelos recursos reais sua primeira solicitação em Claude Code até realmente criar e enviar o produto, e então você pode compartilhar o link com seu amigo, e ele pode simplesmente dar uma olhada, dar um feedback e você pode iterar mais rápido em algumas horas, em vez de esperar semanas, pelo design ou pelos recursos reais implementados de seu equipe de engenharia. Então, vamos passo a passo. Primeiro, vou ajudá-lo a entender como você instala o lote Cod em seu sistema como você escreve seu primeiro prompt E eu vou te dar algumas instruções básicas sobre contextos, o modelo que você deve escolher, como você usa o plano, como você implementa as coisas E onde exatamente você pode implantar seu produto para que possa realmente mostrá-lo aos membros da sua equipe. E não só isso, eu vou te mostrar um fluxo de trabalho que você pode usar para realmente criar um produto funcional. E vamos criar uma habilidade que pode ajudar você a otimizar todo o fluxo de trabalho. E adivinha? Você não precisa saber como escrever um código e nem precisa escrever uma única linha de código, mas precisa ter uma base técnica básica. Então, se você é alguém que sempre quis criar um produto e torná-lo vivo e quer que ele passe de ideia em produto mais rapidamente , este curso será perfeito para você. Ao final do curso, você poderá converter sua ideia em produto funcional real que poderá ser enviado, mostrado aos usuários, receber feedback e desenvolvê-lo. Então, se você é alguém que está empolgado em criar algo interessante e aprender código na nuvem , vamos direto 2. 1 o que é código Claude: Então, olá, pessoal. Este é o nosso primeiro vídeo do curso e, neste vídeo, vou mostrar o que é o Clot Code e como exatamente você pode instalá-lo Então, vou simplesmente escrever cães do Clot Code, e isso me levará à página de documentação do Cloud Code e, em seguida, vamos instalá-lo em nosso sistema Agora, se você estiver usando o macOS, nesse caso, você pode usar Homebrew para instalar o Claude Code em Se você estiver usando o Windows, você tem uma etapa de instalação diferente. A ideia principal é instalar uma interface de linha de comando ou CLI para o código Cloud para que possamos interagir com o Claude Code diretamente usando Portanto, esta é a documentação oficial do Código Claude. Se você passar de um a 2 minutos nesta página, entenderá muito mais sobre o Clot Code E vou ampliar e explicar algumas coisas. Então, como você pode ver na tela, o clot Code é uma ferramenta de codificação agente Isso significa que ele usa o agente para ler sua base de código, editar arquivos, executar algum comando e pode ser integrado às suas ferramentas de desenvolvimento. E o Claude Code está disponível em seu terminal. Portanto, se você estiver no Mac, se digitar terminal, ele abrirá um terminal. Este é um terminal muito chato que você pode encontrar pessoas usando muito hoje em dia Então você pode usar o Claude Code dentro deste terminal. Você pode usar em seu IDE. Portanto, caso você esteja usando Cursor, código VS ou qualquer ambiente de desenvolvimento integrado, você pode usar isso. Eles têm um aplicativo para desktop e você também pode usá-lo dentro do navegador. Então, se você acessar o Claude AI slash Download, você pode ver onde exatamente você pode usar Assim, você pode usar Claude dentro do Excel simplesmente instalando sua extensão Você pode usá-lo dentro do PowerPoint, Word. Eles têm nosso DixoApp. Você pode usar o Claude Code dentro do terminal dentro de todos esses IDEs, JetBrain Na verdade, você também pode fazer isso no Slack. E eles têm um aplicativo móvel, que está disponível na App Store e na Play Store, e têm uma extensão do Chrome. Portanto, neste curso, estamos nos concentrando apenas no Claude Code, que é sua ferramenta de codificação agêntica, e não na interface de bate-papo do Claude ou no Claude Cow, que trata mais de fazer seu trabalho diário na planilha do Excel ou em algum outro documento do plano Tão perfeito. Vamos ver como você pode usar e instalar o Claude Code 3. 2 — como instalar o código do Claude: Assim, você pode usar o Claude Code diretamente dentro do seu terminal a partir deste terminal Você pode usar o Claude Code dentro do VSCode. Portanto, o VSCode é um IDE popular da Microsoft. Você pode instalar o aplicativo para desktop deles. Você pode usá-lo no navegador da web e também pode usar alguns outros IDs. Agora, a maneira mais simples de usar o Claude Code ou instalá-lo em seu sistema é usando o terminal Assim, você pode usar a instalação nativa, que é simplesmente um comando curl para instalar o Claude Code E este é o instalador nativo deles. Acho que eles removeram o pacote NPM recentemente. Você também pode instalar o Claude Code usando o Homebrew. Homebrew é um instalador simples no Mac e, no Windows, eles têm inet Eu não uso o Windows. Espero que isso funcione no Windows também. Tão perfeito. Vou usar uma instalação nativa, que funciona muito bem no Mac e no Windows. Perfeito. Você quer copiar isso e entrar em qualquer terminal de sua escolha, agora, dentro do terminal, existem alguns comandos que são muito populares. Vou aumentar o tamanho do terminal para que fique visível para todos. Agora, no terminal, se você precisar ver exatamente onde você está atualmente, você pode digitar LS para lista e ela mostrará o local onde o terminal está aberto. Então você pode ver que meu terminal está na pasta raiz, onde posso ver meu livro didático, meu documento Digamos que eu queira criar uma pasta dentro do documento onde eu possa trabalhar com segurança com o clot Code Obviamente, você pode simplesmente digitar CD, que é um comando, e digitar a pasta que você deseja acessar. E agora você pode ver que estou dentro da pasta de documentos. Se você digitar LS, verá todo o documento ou subpasta dentro dessa pasta de documentos Assim, você pode instalar o Cloud Code em qualquer lugar. É uma instalação global, então vou pressionar o Command V para colar o curl que copiamos documentação oficial do Cloud e, em seguida, vamos simplesmente instalá-lo Novamente, você pode usar o Homebrew ou a instalação nativa para instalar o Claude Code Essas são apenas duas opções diferentes. Eles não fazem nada diferente. É um instalador nativo, que simplesmente fornece uma CLI para conversar com o Claude Code, que é uma ferramenta agente e perfeita Agora você pode ver que o Código Claude foi instalado, aqui está uma versão e aqui está um local Não importa de onde você instale, ele geralmente é instalado globalmente em seu sistema. Perfeito. Agora eu posso criar uma pasta, agora você não precisa se lembrar de todos esses comandos porque eu trabalho com o Claude Code há algum tempo Mas geralmente, se você precisar criar um diretório ou uma pasta, um comando bash muito curto é MKDIR, e agora você pode criar uma Vou chamá-lo de Cloud code porque estou criando um curso sobre Cloud Code. Agora, isso vai criar uma pasta. Se você fizer LS, que é listado novamente dentro da pasta, você verá uma nova pasta lá. Agora você pode simplesmente copiá-lo e digitar CD apenas para entrar na pasta. Perfeito. Opa, algo está errado, ou eu perco o E no final Aí. Então, agora estou dentro dessa pasta e estou perfeita. Podemos inicializar o código de coágulo. Então, se você voltar à documentação, e o motivo pelo qual estou apenas levando você de volta à documentação para que você entenda se algo dá errado ou se algo não está acontecendo corretamente, você sabe o lugar onde depurar Tão perfeito. Você também pode instalar o Claude Code usando o outro método e, em seguida, iniciar Claude Code em qualquer projeto fazendo um CD dentro da sua pasta e simplesmente digitando Cloud Assim, você pode simplesmente digitar Claude e a sessão do Código Claude será iniciada Novamente, isso é uma sessão. Tão perfeito. Agora você tem muita coisa nesta página, e eu vou explicar isso passo a passo. 4. 3 introdução à primeira sessão de código de claude: Portanto, há algumas coisas que você precisa entender primeiro ao inicializar sua quarta sessão no Cloud Code Então, eu já estou logado no Cloud Code. No seu caso, você pode estar desconectado. Então, deixe-me primeiro sair e depois vou mostrar como você faz o login novamente. Então, quando você abre o Claude Code pela primeira vez e digita Cloud, ele pergunta algumas coisas como: Ei, você quer um modo escuro, um modo claro e pode simplesmente pressionar tecla de seta para cima e para baixo para ver visualmente de qual você gosta mais Tipo, há um modo claro, há um modo escuro, há um modo claro. Acho que o Auto One parece bom para mim. Ele combina com o meu terminal e, em seguida, oferece três opções. Ei, você quer usar o Claude Code com sua assinatura, espero que 90% de vocês usem essa opção Mas eles também têm uma conta de console Enthropy que é simplesmente seu preço baseado em ABI, e você tem uma plataforma de terceiros como Badock, Microsoft No meu caso, estou usando a assinatura do Claude Code. Vou clicar aqui e, em seguida, ele me levará para uma conexão com a Terra, simplesmente vou autorizar e aperfeiçoar Agora, aí está. O Claude Code agora está pronto para ser usado. Perfeito. Vou pressionar Enter e seguida, ele me mostra uma nota de segurança. Vou pressionar Enter novamente e dizer: Ei, você quer usar a configuração do terminal Claude Code ou deseja alterar algumas Obviamente, examinaremos a parte das configurações um pouco mais tarde, mas deixe-me explicar o que você pode ver na tela, o que exatamente é isso? Acho que instalei um plug-in que fornece mais informações sobre um código normal do Cloud. Talvez você não veja isso. Acho que a interface também muda muito mais. Se você estiver assistindo a este vídeo depois de quatro, cinco ou seis meses, poderá encontrar uma interface completamente diferente de um modelo muito novo. Estou gravando este vídeo a partir de 14 de maio. Espero que, se você assistir até o final do ano, encontre uma interface diferente. Perfeito. Agora você pode ver o número da versão do Claude Code Estou na versão 2.1 0.141. Isso é simplesmente para garantir que, agora, você possa usar a versão mais recente sempre que a estiver usando. E sempre que você usa esse comando Bash, uma versão mais recente é instalada em seu sistema. Diz, bem-vindo de volta. Agora eu posso ver meu modelo Opus 4.7 com 1 milhão de janelas de contexto, e meu modo é muito alto. E eu estou no Plano Claude Max. Você pode escolher um plano de $20, se for isso que quiser. E eu estou dentro da pasta Claude Code da barra de documentos. Perfeito. Então, também me mostra o que há de novo no Claude Code Você não precisa se preocupar com isso. Geralmente, são pequenos lançamentos aqui e ali. Tão perfeito. Agora, deixe-me ajudá-lo a entender algumas coisas dentro do código do Cloud. Cada sessão na nuvem tem um contexto. Você pode ver que meu contexto atual é 0,0. Eu vou simplesmente perguntar, ei, você é. E ele vai me responder algo e você verá que esse contexto começará a ser preenchido lentamente. Apenas com a alta, o contexto diminuiu em 3%. Agora, esse é um custo com o qual você não precisa se preocupar porque estou em um plano de assinatura e essa é a duração da sua sessão há quanto tempo a sessão está em andamento? Agora, eu recomendo fortemente que você esteja na mesma sessão para ter uma boa quantidade de contexto. Então, isso é tudo sobre como você instala o Claude Code e como você o inicializa No próximo vídeo, explicarei todas as configurações do Claude Code e como exatamente você as usa 5. 4 ghostly a new terminal: Tão perfeito. Neste vídeo, vou mostrar todas as configurações que existem no Claude Code E, para ser muito honesto, você não precisa se preocupar com nada disso porque, na maioria dos casos, talvez você não os esteja usando. Mas estou apenas explicando isso porque você deve ter uma base sólida, caso queira verificar as coisas sozinho. Então, sempre que você digita barra dentro do Claude Code , você tem muito mais opções O motivo pelo qual estou mostrando como você usa o Claude Code dentro do seu terminal e não dentro do seu aplicativo de desktop É porque você pode ver tudo de uma forma muito crua e é fácil de usar. Na verdade, eu recomendaria que você instalasse um novo terminal que seja muito melhor do que o terminal nativo, e o nome desse aplicativo é Costi Na verdade, deixe-me fechar isso, o terminal que eu estava usando. Deixe-me usar Claude dentro de Kosti. Vou simplesmente digitar quit e ele sairá da CLI Minha CLI ou a CLI Claude já foi encerrada. Se eu digitar com clareza, tudo desaparecerá. Agora vou usar o Claude Code dentro de Kosti. Agora, se você não quiser usar a CLI, basta ir até a pasta do documento, entrar na pasta Claude Code ou simplesmente clicar com o botão direito nela e dizer: Ei, eu quero abrir uma nova janela aqui Agora, como você pode ver, eu tenho muitos tipos diferentes de terminal. Eu tenho meu terminal nativo, tenho o warp como um terminal diferente instalado no meu sistema Eu tenho sti e CMAC. No seu caso, você acabou de encontrar essas duas opções. E se você instalar osti, encontrará mais duas opções Eu tenho quatro tipos diferentes de terminais, então talvez eu esteja um pouco mais obcecado com o terminal, eu acho. É perfeito. Deixe-me ampliar um pouco para que você possa ver tudo, e vamos digitar LS para ver a lista. Onde exatamente estamos E então vou digitar Claude Code para entrar na pasta Não consigo entrar na pasta. Oh, eu já estou dentro da pasta Claude Code. Na verdade, se você quiser voltar, basta digitar o ponto duplo do CD e você voltará para fora da sua pasta. Então, vou entrar em Claude Code novamente porque acabei de sair e aperfeiçoar Agora eu posso digitar de forma clara e limpar tudo. E para inicializar Claude, vou digitar Claude. Perfeito. Agora você pode ver Claude dentro do seu CSTE, que é um dominó muito, muito melhor Como você pode ver, as coisas estão mais claras, mais nítidas. Eles parecem incríveis. Vou diminuir um pouco o zoom. Aí está. Este é o seu Código Claude 6. Configuração de código 6 claude: Eu estava explicando todas as diferentes opções que tenho dentro do Claude Code Agora, assim que você digitar barra, você verá várias dessas opções E se eu estou aprendendo Claude Code pela primeira vez, fico tipo, Whoa, o que exatamente é isso? Não tenho ideia do que está acontecendo lá. Tão perfeito. Uma ótima maneira começar é simplesmente aprender algumas configurações no Cloud Code Vou digitar slash config e ele abrirá o painel de configuração para Agora, isso é muito fácil de entender, e vou passar talvez 5 minutos explicando as coisas mais importantes e descansando, você pode aprender tudo sozinho. O primeiro é autocompacto. Agora, isso deve ser verdade na maioria dos casos, a compactação automática é um recurso que Claude construiu para que, quando o contexto estiver cheio, ele possa compactar o contexto e começar do zero O contexto é um cérebro temporário em que a CLI do código vangloria-se, armazena toda a sua base de código e instruções e executa com base nessa instrução Agora, uma vez que o cérebro está cheio, ele tem que comprimir essa memória e é isso que é a compactação automática O próximo é mostrar a fita. Isso é verdade. Você pode ter uma gorjeta. movimento avermelhado é basicamente uma funcionalidade da CLI para que não pisque Vou te contar as coisas mais importantes porque, caso contrário, passaremos horas aqui. O modo de pensar é basicamente uma forma de pensar de Claude Você quer ver isso na interface do usuário ou não? A sugestão imediata é que, ao digitar algo, você quer que Claude o ajude com sugestões diferentes para que você possa escrever sua próxima solicitação de uma maneira melhor Deixe-me ver o que mais é importante. Modo de permissão padrão. A árvore de trabalho é um conceito separado que vou explicar para você. Depois, há um clima automático que aprova tudo automaticamente. Seja ignorado. Acho que há muito mais coisas que posso explicar à medida que avançamos no curso. E deixe-me explicar as coisas mais importantes. Ao entrar na sua configuração, você pode pressionar Tab para passar das configurações para a configuração, do uso para as estatísticas Deixe-me mostrar algumas coisas que são importantes. Então, ao analisar o status, você pode ver o número da sua versão, as sessões em que você está agora, o método de login, a organização e outros detalhes básicos. Acho que vou esconder essa informação. Quando você analisa a configuração, essa é a configuração diferente que você pode personalizar de acordo com sua necessidade. O padrão é ótimo, então não vamos tocar nisso. Vou explicar o que exatamente é o modo compacto, o modo pensamento e tudo o mais que está dentro da configuração. Em seguida, você tem o uso que mostra quanto Claude você usou em seu limite atual de cinco horas ou no limite semanal Então, mostra seu limite semanal de todos os modelos, o modelo Sonnet. Eles também lançaram recentemente o design de coágulos Em seguida, ele mostra as estatísticas gerais. Então, como você pode ver, usei muito código do Cloud em abril e maio, e ele me mostra que meu modelo favorito é Opus 4.7, que é o mais recente Esse é o total de tokens que eu consumi, então só as estatísticas de alto nível. Então, vou sair disso e vou ajudá-lo a entender as coisas , construindo-as de fato. Então, em vez de perder mais tempo explicando quais são essas configurações, vamos realmente criar algo e depois usá-la 7. 23 claude vs. codex e cursor: Agora, antes de prosseguirmos no curso, quero que você aborde algo que é muito importante. Então, no momento, você só pode usar o Claude Code somente quando tiver uma assinatura Portanto, a assinatura deles começa em $20 por mês e vai para $200 por mês, dependendo do seu uso Agora, eu pessoalmente tenho uma assinatura máxima de $100, mas eu entendo Muitos de vocês realmente não querem pagar $20 apenas para usar o Claude Code Então, vou mostrar algumas alternativas que você pode usar, e você poderá fazer exatamente a mesma coisa com essas alternativas. A primeira alternativa é o Codex. Agora, o Codex tem um plano gratuito que permite que você use seu agente de codificação sem pagar muito dinheiro Agora, eles têm alguns outros planos como o plano Go na Índia, que custa apenas 400 rúpias Eles têm um plano plus, que custa cerca de $20, e também têm um plano de $100 Então, se você é alguém que só queria experimentar esses agentes de codificação de IA , o Chat GPT é um bom lugar para começar Eles oferecem um uso limitado do Codex em um plano gratuito, e acho que se você quiser criar algo muito pequeno, apenas para experimentar esses agentes de codificação de IA, você pode usar o Codex CLI, basta clicar no Codex e depois Isso vai funcionar exatamente da mesma maneira, assim como Claude, e vou mostrar como você usa o Codex, assim como o Claude Code assim como o Claude Então, basta acessar a documentação do desenvolvedor, clicar na CLI e instalar a CLI do Codex e começar a usá-la imediatamente Essa é a primeira alternativa. nível gratuito do Codex é bastante generoso e você pode criar algumas coisas sozinho Outra opção ou alternativa ao Claude e ao Codex é o Open Agora, o Open Cod é muito popular porque é de código aberto. Agora, você pode usar todos os modelos populares no OpenCD, como se eles tivessem Kimi k two, Quin Model, Deep Seek, e eles também têm OpenAI e modelo e eles também têm OpenAI e Se você acessar a página de preços deles, poderá realmente usar o Open Cord gratuitamente ou eles terão um plano a partir de $5 no primeiro mês Assim como qualquer outro agente de codificação, eles também têm uma CLI, então você pode simplesmente ir até os cães de desenvolvedores, clicar na CLI, instalar o OpenCOD e começar a usá-lo imediatamente Todos esses agentes de codificação de IA são muito bons, e eu não encontrei nenhuma grande diferença quando estava usando Claude versus Codex versus Open Cod Então essa é a terceira alternativa que você tem. O quarto é Cursor. Agora, o Cursor é um IDE. Isso significa que você pode instalar o Cursor em seu sistema. Mas se você quiser usar a CLI deles, bem, eles também têm uma CLI Você pode simplesmente ir em frente, instalar a CLI e começar a usá-la. Neste vídeo, vou escolher o Codex porque acho que nível gratuito do Codex Codex é bastante generoso e muitas pessoas podem realmente usá-lo E eles têm limites muito bons. Vou clicar na CLI e vou instalar a CLI Então você abre qualquer terminal, você pode simplesmente usar seu terminal nativo ou você pode usar nosso terminal como o Cost que eu instalei no meu sistema. Você pode instalar globalmente o Codex CLI simplesmente digitando NPMIGlobal e instalando o OpenAI Codex. É isso mesmo. Você poderá instalar a CLI deles e digitar Codex para simplesmente iniciar isso, e sim, se ele solicitar que você faça login, basta digitar slash login, slash Logout para fazer login e Logout, e você pode alterar o modelo digitando slash e você pode alterar o Agora, se você estiver usando o Codex, recomendo que use o modelo mais recente, mas reduza o esforço ou o raciocínio para médio, para que você não esgote seu limite muito Além disso, desative o modo rápido, se estiver ativado. Portanto, se você perceber que existe um modo rápido, basta desligá-lo. Basta digitar slash fast e você pode desativar o modo rápido. Perfeito. E agora você pode começar a usar o Codex como qualquer outro agente de codificação, seja código coágulo, código aberto ou Cursor CLI, todos eles são Mesmo que eu digite algo para você, você pode digitar slash e verá muitas opções exatamente iguais, assim como Claude Slash Model lhe dará acesso a todas as opções de modelo que você tem A permissão Slash permitirá que você edite a permissão do Codex. Memórias de Slash, habilidades de Sky Slash, análise de boatos. A maioria dos recursos e funcionalidades, o que quer que esteja no Claude Code será exatamente o mesmo Eu recomendo que você use o HatGPTS Codex se você é alguém que realmente não quer pagar E você também pode experimentar alguns outros CLIs. O Cursor oferece um limite muito bom no nível gratuito Portanto, o Cursor também tem um generoso nível gratuito. Perfeito. Vou digitar slash quid para fechar Codex ou cortar Logout para simplesmente desconectá-lo Da mesma forma, você pode simplesmente abrir o documento CLI do Open Cod e instalá-lo Você também pode fazer a mesma coisa com o Cursor. Perfeito. Essa é uma maneira de usar qualquer alternativa de nuvem se você realmente não quiser pagar. 8. 7 primeiro chat com o código Claude: Tão perfeito. Agora, quando você está criando algo no Claude Code, você precisa entender que é um agente de codificação Isso significa que ele pode fazer muitas coisas por você, mas você precisa especificá-las, aprová-las e orientar esse modelo para obter a saída desejada Isso significa que, se você der algo, ele fará um ótimo trabalho quando você especificar tudo e orientá-lo na direção certa Então, vamos começar criando um pequeno aplicativo para fazer. Aplicativo que quase todo mundo já usou e construiu. Então, vamos criar um aplicativo Todo usando o código clot. Agora, há duas maneiras de construí-lo. Ou você pode simplesmente digitar: Ei, você pode me ajudar a criar um aplicativo Todo? Agora, há mais uma funcionalidade interessante que Claude Code tem em sua CLI Se você pressionar e segurar a tecla de espaço no teclado, não precisará digitar nada. Você pode realmente falar e ele digitará para você. Então, vou dar permissão de áudio. Você será capaz de construí-lo para mim? Opa, nenhum microfone foi detectado ou eu tenho o problema Então, estou usando meu Macbook Pro em um modo fechado e conectei minha tela para que ela não detecte o microfone, mas você poderá fazer isso em seu próprio sistema Na verdade, estou usando outro recurso de voz para texto. Estou usando o Whisper flow, então também posso usá-lo. Oh, o mesmo problema. Acho que a tampa está fechada e é por isso que não consigo gravar nada. Está perfeitamente bem. Temos que digitar. Então, eu vou simplesmente fazer uma pergunta, e vamos ver como ele responde e o que ele pergunta? Portanto, se você observar cuidadosamente , está pensando em minhas instruções com muito esforço. E isso que você vê na tela é um modo de pensar. Isso significa que me mostra o que está pensando e como exatamente está pensando. Agora, assim que eu digito algo, em vez de me dar uma resposta, ele está me fazendo um monte de perguntas, o que é muito bom O Cloud Card é muito bom em entender o trade off. Isso significa que se houver cinco maneiras diferentes de construir algo, ele perguntará exatamente: Ei, eu tenho essas três opções. Você me ajuda a entender qual é bom para você. Por exemplo, está dizendo que, ei, como o aplicativo Todo deve armazenar os dados? Ele armazena os dados no armazenamento local? Isso significa que você simplesmente abrirá este aplicativo Todo dentro do seu sistema e, assim que atualizá-lo, os dados desaparecerão Agora, a razão pela qual disse que essa é uma forma recomendada é porque minha solicitação era muito genérica. Eu não especifiquei nada sobre qual tecnologia tex você deve usar, como você deve construí-la, quais recursos e funcionalidades devemos ter? Qual será meu login, autenticação e armazenamento? Como eu não especifiquei nada, ele está me fazendo várias perguntas como: Ei, você quer usar o armazenamento local, que é o site do cliente, e assim que você atualiza, seus dados desaparecem Você quer usar o Vercel para implantá-lo, postar cress para banco de dados ou quer tê-lo na memória Agora. Isso é só uma demonstração. Obviamente, não quero criar algo apenas com base em um prompt tão pequeno. Mas vamos verificar toda a pergunta. Vou pressionar a etapa para passar para a próxima pergunta. Então ele está me perguntando: Ei, qual estilo você quer usar Você quer usar o tailwind, que é uma forma CSS de estilizar seu aplicativo Você quer usar o componente SAD SN, CSS simples, e então eu tenho que enviá-lo. Agora, obviamente vou pressionar Escape. Como você pode ver, diz que você pode selecionar a guia e a seta para navegar por todas essas perguntas ou pressionar Escape para cancelar. Obviamente, vou pressionar escape porque esse é um prompt muito pequeno para criar qualquer coisa. Então, se você pressionar Escape, tudo isso desaparecerá. Aí está. Diz que o usuário se recusou a responder à pergunta. Perfeito. Agora, vou digitar o mesmo prompt e, se você quiser fazer isso, pode copiar e colar ou pressionar a tecla aero quando estiver dentro do terminal Aí está. Agora vou fazer uma pergunta. Só me diga se você pode ou não. Agora, eu mencionei explicitamente se você pode construir algo ou não, se sim, qual é a melhor opção Agora, a razão pela qual estou fazendo uma pergunta aberta é porque quero que Claude também me ajude a debater meu problema na sessão do Claude Code . Perfeito. Agora, se você puder ver a resposta de que, Ei, esta é a tecnologia textual que eu recomendo, você pode usar o Nextes, que é simplesmente uma estrutura baseada em react e tailwind e SACN e histórias locais para criar rapidamente um aplicativo de tarefas sofisticado para você, você quer que eu vá em frente e o construa ? Agora, se você ler com atenção, maioria dos PMs não tem ideia sobre o que será um roteador de aplicativos no próximo ano, o que é tailwin, o que é SAT CN, o que é armazenamento local E você realmente não precisa saber disso. Essa é apenas a estrutura de front-end, mas você precisa ter uma base técnica básica sobre todos os elementos que seu aplicativo To terá. E para fazer isso, você precisa usar um modo de plano. 9. Modo de plano de 8 no código Cluade: Então, vou usar o modo de plano. Tão perfeito. Agora estou fazendo uma pergunta muito simples. Você pode continuar, criar um plano para mim e criar o aplicativo Studio que eu possa usar no meu navegador todos os dias? Deve ter login, inscrição e outras funcionalidades básicas em vigor, e apenas me pergunte quando você realmente tem um encontro real de folga E eu simplesmente vou pressionar Enter. Agora, se você pensar com cuidado, mencionei criar um plano. Agora, Claude tem um modo de plano, que o levará para dentro do plano deles Primeiro, ele criará um plano, solicitará aprovação e só então começará a construí-lo. Porque lembre-se de que o problema com a abordagem acima é que ela foi iniciada diretamente na criação do aplicativo Studio. Tão perfeito. Agora ele entrou em um modo de plano, criou um plano para mim e, em seguida, ele vai me perguntar se você quer que eu crie este aplicativo para você com esse plano ou não. Então, agora está criando um plano. Não o finalizou. Então, como você pode ver, ele decidiu o textac sozinho. E, obviamente, podemos discutir por que ele escolheu o textck que é mais desejável para o código de coágulo Por exemplo, o do próximo ano é um teste de batalha pelo front-end. Drizzle ORM é muito popular ultimamente. PostCRS é o banco de dados mais desejado. Ele está usando um provedor da Oath e, como você pode ver, essa é sua tag de texto, essa é sua camada de autenticação Ele tem login de inscrição, saída, rota protegida, banco de dados, interface de usuário e pode implantar coisas para você Está fazendo muitas coisas. E se eu não sou uma pessoa técnica, minha primeira pergunta seria: Ei, eu absolutamente não tenho ideia sobre isso, mas deixe-me continuar lendo isso e ver o que Claude me sugeriu Ele diz que, para combinação de autenticação e banco de dados, essa é a maior escolha arquitetônica. Portanto, escolha um com cuidado. Você quer usar o banco de dados Clerk ou Neon, ou você quer usar o super Essas são duas combinações diferentes. Então, eu, como pessoa não técnica, não tenho ideia, mas ainda vou escolher o que Claude me sugeriu Portanto, a primeira opção é Clerk para autenticação de login e Não para escolher como banco de dados Digamos que eu escolha a primeira opção e, seguida, para V one, eu apenas a inclua no meu plano e vamos criar um plano. Novamente, respondi rapidamente à pergunta porque queria ver o plano e depois decidirei se queria mudar as coisas ou não. Então, eu vou dizer para entrar no Modo Plano. E crie um plano para mim. E então eu aprovarei esse plano. Portanto, o modo plano é um modo muito popular. Se você digitar Plano dentro do terminal Claude Code, isso mostrará que você pode ativar um modo de planejamento de sua sessão atual e planejar melhor as coisas, porque ninguém quer apenas que os agentes de EI comecem a executar coisas sem entender os negócios, a técnica e a compensação Então, como você pode ver, a nuvem está pensando agora. Ele está constantemente usando os tokens de entrada e saída e Yeah. Portanto, também oferece um processo de pensamento como: Ei, não há base de código para explorar. Estou indo direto para o plano e estou usando esse texto Tão perfeito. Como você pode ver, ele criou um plano para você e esse plano está no plano NOI dot Claude, e você pode realmente ver essa redução se entrar nessa Na verdade, você pode clicar nele pressionando tecla Command e abriremos isso dentro do ID, se você tiver instalado. Então, como você pode ver, este é um plano que estou vendo no meu terminal operacional. Portanto, essa é uma visão de redução e, como você pode ver, ela escreveu um bom plano para mim. Vou fechar isso porque você pode não ter um terminal b, e vou ler isso aqui. Tão perfeito. Este é o seu plano que Claude criou Como você pode ver, esse é um plano do seu aplicativo Todo que você está criando com autenticação. Então, você quer criar um aplicativo Todo que possa ser aberto em seu navegador e usá-lo todos os dias. Tem login, cadastro, login e tudo mais. Estamos usando o Clerk para autenticação, banco de dados Neon PosCrSF E, como você pode ver, esta é sua tag de texto que ela escolheu automaticamente e, em seguida, você pode ver como ela vai criar coisas em fases Primeiro, ele instalará tudo, como os pacotes, estruturas e bibliotecas mais recentes , instalará no próximo ano o front-end SAD CNF e inicializará os ENVs, front-end SAD CNF e inicializará onde você pode simplesmente inserir seu valor e , na segunda fase, começará a criar Clerk é simplesmente sua plataforma de infraestrutura de verificação de identidade plataforma de infraestrutura de verificação que permite criar login, inscrever-se e tudo mais. Então você pode ver que ele está construindo seu banco de dados, criando algumas ações do servidor para que ele possa realizar operações rudimentares, que são criar, ler , atualizar e excluir seus itens de tarefas, e então ele criará sua interface ou interface e, finalmente, ele a aperfeiçoará e implantará em algum lugar para que você possa usá-la Tão perfeito. Parece ótimo. Agora, você pode realmente escolher uma dessas três opções depois de ler seu plano. Digamos que eu queira fazer algumas mudanças no plano e, ei, não o implante em lugar nenhum. Deixe-me primeiro testá-lo. Então, vou ver que, quando você terminar seu desenvolvimento, não implante. Execute-o localmente. Isso significa que antes de implantar qualquer coisa em uma nuvem, eu só quero verificar isso primeiro Descanse, tudo parece bom. Então, o que estou fazendo é fazer alterações no plano antes que ele realmente implemente o plano. Então, a primeira opção era, ei, vá em frente. Entre no modo automático e comece a implementá-lo. A segunda opção era, ei, vá em frente e implemente, mas eu aprovarei manualmente a edição A quarta opção é que, ei, faça essa pequena mudança e me dê o plano novamente. Então, eu quero que ele faça algumas mudanças e crie um plano novamente. Tão perfeito. Então você pode ver essas linhas vermelhas e verdes. Vermelho é o que ele removeu e verde é o que ele adicionou. Agora, neste momento, estou atualizando meu plano, então ele está removendo coisas do plano e adicionando coisas novas com base nas instruções que dei. E ótimo. Agora diz que, ei, o resultado pretendido é executá-lo localmente primeiro para que o usuário possa vê-lo e depois fazer as coisas mais tarde. É perfeito. Eu tenho duas opções. Eu posso usar o automde , onde ele simplesmente aprova tudo e não me pergunta, ou posso usar uma Vou escolher o modo automático, mas no modo manual, preciso pressionar ou aprovar o botão de aprovação várias vezes Tão bom. Vou esperar alguns minutos e deixar que ele crie o aplicativo Studio. 10. 9 Como criar um aplicativo usando o código Claude: Tão perfeito. Vou explicar algumas coisas à medida que ele está sendo desenvolvido por meio deste produto. Por isso, criou uma tarefa que seguirá de acordo com o plano. Então, se você voltar ao plano, lembre-se de que ele criou fases. Fase um, ele vai instalar tudo, Fase dois, vai implementar a autenticação, depois a implementação do banco de dados, depois a interface do usuário, e então ele vai aperfeiçoar a interface do usuário e executá-la localmente, e então ele vai verificar tudo e, em seguida, você pode construí-lo aqui e, finalmente, você pode implantá-lo. Então, como você pode ver, ele está passando por tudo em fases e instalando a dependência, os pacotes e tudo Então, primeiro, ele será instalado no próximo ano, depois fará a reautenticação, depois o banco de dados, depois fará operação coletiva para garantir que tudo tenha sido configurado corretamente e, em seguida, criará uma tarefa. Tudo parece bom para mim. Voltarei em algum momento e depois verificaremos se ele é capaz de construir o aplicativo two do ou não Agora, sempre que estiver construindo coisas, você pode continuar fazendo alguma pergunta digitando slash Por exemplo, eu vi essa opção. O que exatamente é isso? Na verdade, você pode simplesmente copiar algo ou fazer algumas perguntas como: Ei, estou curioso para saber por que estamos usando o Clerk para fazer login e se inscrever Agora, essa é uma ótima maneira de aprender coisas sempre que Claude está construindo algo para você Agora, quando você tiver que digitar BTW, caso contrário, a solicitação será e isso será ruim Então, assim que eu digito BTW, ele está me perguntando, está me dando algumas respostas, e isso não está afetando o código que está escrevendo Como você pode ver, Claude fornece login e inscrição , redefinição de senha e verificação de e-mail em cerca de dez linhas de código Isso significa que, ao escrever dez linhas de código, você fará login, inscrição, senha, e-mail, login social e o agente de codificação LLM adorará economizar tempo. É por isso que, para resolver as coisas rapidamente, eles estão usando Ele tem componentes pré-estilizados e tem integração nativa com o Versal no próximo ano Ele oferece gerenciamento de usuários em tempo real. Portanto, ele lhe deu uma resposta muito rápida. Perfeito. Você pode pressionar Escape e essa resposta será descartada E estamos de volta ao agente de codificação de IA, que está criando e implementando coisas Tão perfeito. Agora tudo foi feito. Como você pode ver, todo o processo foi concluído e, se você quiser começar a usá-lo, ele criou um banco de dados para mim ou, na verdade, está pedindo que eu crie um, e então você pode executar seu aplicativo localmente Tão perfeito. Agora, ele está me pedindo para fazer algumas coisas que são importantes para que este aplicativo seja executado localmente. Então, está dizendo que, ei, pegue seu banco de dados Neon primeiro, então vá para este console, crie um projeto, copie a cadeia de conexão e, em seguida, coloque o banco de dados R aqui. Agora, uma pergunta que você pode ter em mente, agora, o que é esse exemplo de ENV Local e ENV Por que ele está me pedindo para criar um banco de dados, colar uma URL e algumas chaves de API? O que exatamente são e por que meu produto não está funcionando. Se você for para o host local 3.000, não verá nada. Algo está errado. Agora, eu queria mostrar mais algumas coisas antes voltarmos para Claude Dextropp, o que lhe dará uma interface de usuário muito melhor Então, primeiro vou clicar em Quit, que fechará minha sessão do Claude Code dentro da CLI e digitará novamente Cloud Agora, quando você digita Cloud novamente, ele inicializa uma nova sessão Mas eu não tenho ideia porque veja, se você olhar com cuidado, o contexto é zero, e eu literalmente não tenho ideia no que eu estava trabalhando. Para fazer isso, você precisa digitar currículo, e ele fornecerá toda a sua sessão anterior. Lembre-se de que esta foi minha sessão anterior qual eu estava criando um aplicativo de duas partes. Eu vou clicar. pressionar o heroky para baixo e não. E agora minha sessão foi retomada. Perfeito. Como você pode ver, eu estava usando o Opus 4.7, meu contexto era E se você quiser verificar tudo isso, você pode realmente mudar o modelo. Você pode digitar slash model para alterar seu modelo. Agora, obviamente, o padrão é 4,7 com 1 milhão de janelas de contexto, que é o melhor do setor, e a maioria de vocês não está criando um projeto complicado, mas se você está criando um projeto supercomplicado que tem vários microsserviços e uma grande base de código, então você tem um modo de esforço Quanto esforço você quer que esse modelo pense. Portanto, se você pressionar slash efFot, verá um máximo extra baixo, médio alto Agora, para você, o Medium vai funcionar muito bem. Se você está tentando criar algo novo do zero, medium é mais do que suficiente. Agora, vou voltar para Xi porque tenho muitos tokens para gastar, mas você deve estar no plano médio se estiver em um plano de $20 Outra coisa que você pode verificar é digitar usage para verificar quanto do código de coágulo você gravou Agora, eu adicionei essa barra interessante abaixo de cada sessão que me diz o uso imediatamente. Você também pode usar alguns plug-ins, como barra do Codex, para me dar o uso do Codex e do Cloud Code Você pode simplesmente acessar o navegador da web e instalar a barra Codex, e ela fornecerá a mesma coisa que a barra Codex Eu vou te dizer o uso do seu Cloud Code, Cursor, qualquer agente que você esteja usando, agente de codificação que você está usando Outra coisa que você pode usar é a configuração ou verificar o status E é isso. Eu vou sair disso novamente 11. 10 introdução ao aplicativo de desktop Claude: Vamos abrir isso dentro do IDE porque os terminais são muito ruins na interface. Na verdade, posso fechar isso e continuar a partir de um aplicativo de desktop Claude Então eu vou dizer, Ei, eu só quero sair. Não estou gostando da CLI, quero usar o Claude App Agora vou usar o aplicativo de desktop Claude. Baixe o aplicativo Cloud dextro. Você pode instalá-lo em seu sistema, basta fazer login, autorizar e usar Code dentro do Claude Dktoapp O motivo é que você terá uma interface muito melhor. Agora, eu já o estou usando para meu projeto múltiplo. Tão bom. Agora, deixe-me também fornecer uma pequena ferramenta para Claude DextoApp para que você saiba como ela é diferente Como isso lhe dará mais visual aparência mais visual se você não for uma pessoa técnica. Como você pode ver no aplicativo Claude dextro, você tem três modos: o modo de bate-papo, onde você pode conversar com Claude, o modo vaca, que ajuda principalmente nas tarefas do dia a dia, e o modo de codificação, onde você pode realmente escrever um código e ver todas as suas Então você pode ver seu perfil, estou em um plano máximo e você pode ver alguns modos aqui e ali. Então você verá que, ei, sua nuvem está sendo executada localmente ou na nuvem? Agora, nesse caso, meu código está sendo executado localmente, então eu escolhi localmente, e você pode então escolher onde exatamente seu código está. Meu código está dentro do meu documento e dentro dessa pasta, Claude Code, e eu estou em uma ramificação malvada Vou discutir mais sobre por que você precisa de uma ramificação e por que ela existe por que ela criou uma árvore e o que exatamente é uma árvore Então você pode ver que ele tem quatro modos diferentes. Você sempre pede permissão sempre que está realizando alguma ação no meu código, ou aceita automaticamente ou está em um modo de plano ou tem uma permissão perigosa de ignorar Vou explicar mais. Mas, basicamente, você pode estar no Automde que aprova automaticamente todo o seu código, e você não precisa clicar manualmente em sim, sim, sim, tantas Este é o seu bate-papo. Você tem um modo diferente. No momento, meu microfone não está funcionando. Este é o modelo que eu escolhi, que é seu oposto de 4,7 de Você pode trocá-lo como quiser. 12. 11 GUI melhor para Claude com cursor IDE: Portanto, esta é minha base Cord, e vou explicar nos próximos dez minutos o que existe na base Cord e o que faremos para integrar e executar esse produto localmente. Então, vou usar o Cursor para esse propósito. Você pode usar qualquer ID de sua escolha. Você pode instalar o VS Cord, Cursor, windsurf, op, o que quiser Então, começaremos de cima para baixo, e vou passar 10 minutos explicando toda a base de código, não para ensinar algo, mas apenas para lhe dar um entendimento de alto nível. Então, na parte superior, você pode ver uma árvore de trabalho, que foi criada porque eu abri o aplicativo de desktop Claude, onde uma caixa de seleção de árvore foi clicada e a árvore de trabalho é uma forma de trabalhar em vários recursos simplesmente criando um clone de sua parte de É isso mesmo. Você não precisa entender isso agora, mas voltaremos a isso mais tarde. Abaixo disso, você pode ver que há uma pasta Clerk, next, drizzle, node modules, public, SRC e vários desses Vamos entender sobre eles um por um. O arquivo mais importante para você, onde está sua base de código real, é o SRC O SRC é sua fonte onde reside a maior parte da sua base de código. Se você clicar no aplicativo, é aqui que fica a interface principal do seu aplicativo. Como você pode ver, estamos usando o NextGS app Router para que você tenha diferentes componentes dentro do seu aplicativo de tarefas Portanto, este é o seu componente de formulário pendente, onde ele tem todo o campo do formulário. Há uma guia de filtro, há uma guia de itens pendentes. Há um recurso de lista em andamento. Assim, você pode ver todos os componentes diferentes. Então você tem uma funcionalidade de login e inscrição em seu aplicativo. Onde estamos usando o Clerk para que não precisemos escrever muitos códigos desnecessários ou esse agente de IA não precise fazer isso por você Depois, há uma camada intermediária que autorizará cada solicitação e, em seguida, você terá o nwt local Isso é importante. Então, o que é ENVs Portanto, ENV significa variável de ambiente. Esses são os segredos que você tem que esconder de todos os outros. Portanto, este é um arquivo de exemplo que significa que o local real do ponto nv não foi criado, e eu tenho que colocar todo o meu segredo aqui Primeiro, vou até o Clerk Dashboard e inserirei minha chave publicável aqui Também vou inserir minha chave secreta aqui e vou inserir a URL do meu banco de dados. Então, vou para o console dot Neon dot tech e primeiro vou inserir a URL do meu banco de dados Você pode criar uma nova conta. 13. 12 configurando o envio e as chaves para seu produto: Primeiro, deixe-me explicar o que são variáveis de ambiente. Portanto, ao usar qualquer produto, você precisa se autorizar se tem a propriedade de usar esse produto ou não Por exemplo, se você entrar em um prédio, precisará dizer à pessoa de segurança que, ei, você trabalha aqui ou veio aqui para uma reunião. Então você tem que se autorizar. Então, quando você está usando um produto diferente, você precisa dizer ao sistema que, ei, pegue minhas chaves e autorize se eu sou a pessoa certa ou não Agora, neste produto, estamos usando o Clerk. Para autenticação e autorização, estamos usando o banco de dados Neon PoSCRS para armazenar nossos dados Portanto, se você abrir o Clerk, verá que é um produto SAS ou uma ferramenta que permite criar autenticação e autorização de usuários rapidamente Perfeito. Assim, você pode fazer login e simplesmente começar a usá-los. Para usá-los com sucesso, você obviamente precisa criar um aplicativo e fazer algumas coisas para poder pagar posteriormente por esse aplicativo se quiser ter funcionalidades adicionais. Portanto, você precisa de uma chave publicável e de uma chave secreta, e pode obtê-la no painel deles Então, vou criar um aplicativo no painel deles e, como você pode ver, você pode adicionar todos esses componentes para simplesmente criar seu fluxo de login e inscrição. Agora, se você não quiser fazer todas essas coisas chatas sozinho, eu tenho um atalho para Esse atalho é usar a CLI para fazer todo esse trabalho, usando automaticamente o agente de IA Mas eu não vou fazer isso. Vou simplesmente criar um aplicativo e vou fazer isso, cara, para que você entenda o que estamos fazendo Novamente, tudo isso é feito pelo nosso aplicativo. Iremos descobrir um lugar onde possamos gerar nossa chave de API. Aí está. Lá eu posso ver a chave da API. Novamente, se você olhar com cuidado, isso está oculto de propósito, intencional e deveria estar Vou manter isso escondido de propósito, vou digitar essa chave de API e depois continuaremos. Agora, para o banco de dados Neon, você pode se inscrever, fazer a mesma coisa e criar um projeto Assim que seu projeto for criado, você verá que ele está fornecendo algo que, novamente, está oculto. Se você clicar nele, ele ficará visível. Vou borrar isso ou esconder isso por enquanto. Perfeito. Agora eu configurei meu banco de dados Neon, meus ENVs para o Clerk e tudo está indo bem 14. 13 Como operar seu produto localmente: Perfeito. Então, agora eu configurei meu banco de dados Neon, meus ENVs para o Clerk e tudo está indo bem. Vamos começar isso. Estou de volta à CLI ou ao terminal e, quando tivermos as coisas instaladas e funcionando localmente, vamos realmente usá-las dentro de Claude Ótimo. Como você pode ver, aqui está nosso aplicativo Todo. Vamos usá-lo. Então, vou usar meu ID de e-mail para me autorizar a entrar nesse aplicativo de tarefas e, em seguida, vamos usá-lo Vamos escrever Todo e depois veremos como as coisas estão funcionando. Então, o próximo ano vai me dar um problema. Vamos resolver isso mais tarde. Vamos escrever um Td. OK. Ok, aí está. Você pode ver que pode adicionar uma data a essa tarefa e adicionar mais. Você tem um feito ativo e todas as tarefas a fazer. É perfeito. Tem um modo escuro e um modo claro, e as coisas estão indo bem. Você também pode excluir isso. Perfeito. Portanto, este aplicativo Studio está incrível. Tão perfeito. Agora, digamos que você queira fazer algumas alterações nesse aplicativo Studio. Agora fecharemos o Ghostty e trabalharemos diretamente com Claude DExtropppo Você também pode continuar trabalhando 15. 14 — comprometendo-se e enviando seu código para o GitHub: Então, vamos primeiro colocar esse aplicativo um ambiente hostil na nuvem para que você possa compartilhá-lo com seu amigo Agora, para fazer isso, você pode configurar manualmente as coisas InversELO, você pode dar algum controle à sua CLI, e eu vou usar a abordagem CLI Agora vou ver se escrevi uma solicitação de uma forma muito não técnica, mas mencionei o material técnico e deixe-me mostrar o que escrevi. Então, ei, implante isso porque eu quero mostrar esse projeto para meu amigo. Você pode implantar isso no versal e usar a CLI Isso é interessante porque você pode abrir o painel, copiar e colar as chaves, variável de ambiente ou usar a CLI deles, que fará a autorização e tudo sozinha Tão perfeito. Vou pressionar Enter e , em seguida, ele fará algumas coisas por mim. Ele primeiro verificará o status do projeto, depois inicializará o verSLCi, solicitará que eu faça login no VerSL e, em seguida, criará um projeto no versal E então eu posso compartilhar esse projeto com meu amigo. Perfeito. Vamos ver se ele é capaz de fazer tudo ou não. Além disso, você pode ver que eu escrevi 9.000 novas linhas de código, e esse código não está confirmado em nenhum outro lugar. Então, espero que, antes de realmente implantar qualquer coisa, ele seja confirmado em algum lugar Acho que não vai se comprometer em algum lugar. Então, para confirmar seu código, você precisa confirmá-lo no GitHub. E, na verdade, deixe-me fazer isso primeiro para que você entenda isso. Você vai em frente e confirma esse código no GitHub. Agora, há algumas coisas que você precisa entender Sempre que estiver escrevendo algum código, você não quer perder o acesso a esse código ao criar algo novo. Ou digamos que você esteja criando o recurso número um e queira que ele simplesmente implante esse recurso, torne-o ativo para o usuário e, em seguida, queira que ele inicie um novo recurso. Então você tem duas opções. Ou você pode criar duas ramificações diferentes do seu código para poder trabalhar em dois recursos ao mesmo tempo e mesclá-los, ou pode concluir um recurso e, em seguida, confirmá-lo e começar a trabalhar em um novo recurso Então, discutiremos sobre a ramificação do GitHub, como você confirma, envia e mescla seu código, e discutiremos muito sobre isso Mas agora, eu só quero confirmar meu código no meu perfil do GitHub usando o Git e, em seguida, veremos como será a aparência do código comprometido E mais tarde, vou explicar a vocês o pipeline do CICD de todo esse processo, que é um pouco avassalador no momento Então, ele está criando um wrapper do GitHub, que é simplesmente uma pasta no GitHub para armazenar seu código, e então está enviando o Então, mesmo que eu perca o acesso a esse sistema, ainda poderei ter acesso ao código. Tão perfeito. Ele usa meu login no GitHub e criou uma pasta virtualmente no GitHub onde está toda a minha base de código Então, como você pode ver, há um aplicativo de tarefas que eu criei e todo o meu código está dentro do GitHub, e agora eu posso acessá-lo abri-lo de qualquer lugar que eu quiser E ao ler para mim, ele mencionou tudo claramente. Se você olhar com cuidado, não há ENVs por aqui. Isso significa que não cometeu os ENVs. Acho que é um repositório privado. Eu posso torná-lo público se você quiser, vá para as configurações e torne-o público. Mas, novamente, não é muito importante. Toda a sua base de código está aqui e, em outro vídeo, vou explicar como você realmente envia, confirma e mescla sua base de código E quais são esses ramos e como eles são úteis? No momento, como você pode ver, estou em uma filial principal, que é o que um usuário normalmente vê. Você pode criar novas ramificações, por exemplo. Toda vez que eu queria criar um novo recurso, não quero que meus usuários reais vejam o que está quebrando e o que não está quebrando. O que é essa nova interface de usuário? O que é esse novo recurso? Quero trabalhar em uma nova filial, onde eu possa testar coisas de forma isolada e construí-las. Então, eu criei uma nova filial Dev. Visualmente para você, você também pode fazer isso a partir do código. Deixe-me trocar o galho. Então, vamos mudar a ramificação para Dev e, em seguida, melhoraremos o produto e faremos mais alterações. Então, mais cedo, estava no galho médio. Agora ele vai mudar a ramificação para DF e ficar perfeita. Agora estamos em uma filial de desenvolvimento. Portanto, você mantém uma filial local e uma filial remota. Então, agora estamos migrando para a ramificação def local, que está rastreando a ramificação remota real. Tão perfeito. Você tem um comando bash que eu não quero explicar para confundi-lo, mas As coisas estão ótimas até agora. Agora vamos começar a fazer mudanças. Agora, há um problema que observamos com nosso produto. A interface do usuário era muito pequena, como se eu tivesse que reiniciar o servidor, mas as fontes e tudo pareciam muito pequenos. Então, perguntei: “Ei, podemos melhorar a interface geral e torná-la maior para que eu possa usá-la em meu aplicativo móvel e desktop Vamos ver isso. Agora, a vantagem de usar Claude Dktoapp é que você pode ver, ver quais arquivos foram editados, quais arquivos foram removidos, quais foram adicionados de uma É por isso que eu gosto de Claude Dextoapp para Claude Code and cow Perfeito. Deixe-me abrir um terminal dentro do Claude Dektop apple para tentar executar isso Não tenho certeza se você está usando o NPM ou o PNPM. Perfeito. E se você atualizar isso, descobrirá que seu projeto está funcionando Perfeito. A fonte ficou maior agora e você pode vê-la claramente na tela. Vamos ver se isso é otimizado para celular ou não. Então, vou mudar a capacidade de resposta para o iPhone 12 Pro e perfeito Isso também é otimizado para dispositivos móveis. Há um problema do próximo ano que podemos resolver mais tarde, mas então as coisas estão ótimas. Tudo está funcionando, e agora eu quero que ele implante esse projeto e quero compartilhar isso com meu amigo. Nesse caso, usaremos o Vercel para implantar esse projeto em um subdomínio específico Temos que comprar um nome de domínio real , o que faremos mais tarde. 16. 15 Como implantar seu projeto no vercel: Agora, eu vou ver. Ei, vá em frente e implante isso no Vercel para que eu possa compartilhar isso com meu amigo e usá-lo E eu vou sair desse Command C para sair disso e vou fechar o terminal. Então, como você pode ver, ele está implantando meu projeto no Vercel, e então vou abrir esse projeto dentro um link específico que posso compartilhar com meu amigo e eles podem usá-lo como um produto real Lembre-se de que temos nosso back-end configurado, temos nosso front-end configurado e tudo está funcionando bem. E à medida que implantarmos isso, tenho certeza de que nos depararemos com novos tipos O objetivo de criar um produto é continuar resolvendo problemas para que você saiba o que está acontecendo e tenha um controle adequado. Então, agora estamos implantando nosso front-end de projetos no Vercel. Então, diz que, ei, a compilação falhou porque seu banco de dados, URL e chaves do Clerk não foram configurados Ok, então diz que preciso de permissão explícita para colocar suas chaves no Vercel Então, eu vou te dar a permissão. Tão perfeito. Quero que você use minhas chaves locais e as envie para o Versale&vs Agora, você pode fazer isso manualmente se abrir o Versal Dashboard, e eu vou te mostrar isso também Enquanto isso, você verá que tenho vários produtos e deixe-me ver que nosso aplicativo de tarefas está aqui Você entra nas configurações e verá as variáveis de ambiente. Então, agora estamos em uma prévia, então não há nenhuma variável de ambiente. Você pode criar variáveis de ambiente e escrever suas chaves e pagador de valor aqui, e então ele usará essas chaves para executar seu projeto Vou encerrar isso por enquanto porque estamos fazendo tudo diretamente da CLI Você não precisa abrir o painel. Então, eu vou fechar isso e vamos vencer. Ok, então eu estava enfrentando um problema porque minha implantação foi bloqueada pelos nomes de usuário incorretos do GitHub Então, passei um pouco de tempo resolvendo esse problema. Então, se eu abrir as palavras Painel, observar a implantação, você verá que várias implantações foram bloqueadas E se eu entrar na implantação, diz que a implantação foi bloqueada porque o e-mail do autor do Commit era esse. Este é o nome do endereço do meu MacBook. Deveria ser um e-mail. Não é válido e preciso garantir que estou usando o e-mail ou o nome de usuário. Então eu passei algum tempo. Na verdade, pedi a Claude que resolvesse esse problema. Isso me deu um monte de passos. Eu executei essas etapas manualmente. Até eu posso pedir a Claude que faça isso por mim, e consegui resolver o problema Agora, isso me lembra de uma pequena coisa que você precisa entender é a depuração Você pode depurar coisas do terminal, mas uma das ferramentas mais importantes que você pode usar para depurar é a CLI e o Agora, como você pode ver, o aplicativo está pronto, vou abrir o aplicativo e mostrar exatamente como ele se parece. Assim, você pode compartilhar este link com seus amigos e eles podem explorar qualquer aplicativo que você criou usando o clot Code Portanto, ele fornece um pequeno link que você pode compartilhar com seu amigo. Obviamente, você pode configurar seu próprio nome de domínio se tiver P cheese ou nome de domínio. Mas digamos que, por enquanto, você possa compartilhar esse link e eles possam explorar esse produto específico. Então, vou entrar e depois criar uma tarefa, e vou mostrar sim, como o produto geral funciona? Perfeito. Estou conectado e, se eu criar uma tarefa, digamos que eu queira tomar café da manhã e estou criando tarefas aleatoriamente. Esses são meus afazeres. Eu posso simplesmente marcá-lo como concluído. Digamos que, se eu logar ou sair e entrar novamente, uma coisa importante que você observará é que meus dados são persistentes. Isso significa que o produto é implantado na nuvem e meus dados não são perdidos em nenhum outro lugar. Portanto, sejam quais forem as ações que você fizer, seja criando algo novo, atualizando, editando ou excluindo, os dados são preservados Você pode abrir isso no seu celular. Você pode abrir isso no seu laptop e tudo funcionará perfeitamente bem. Então, essa é a interface móvel. Você também pode fazer a mesma coisa usando seu aplicativo móvel. E você pode, você sabe, melhorar ainda mais isso e torná-lo melhor. Use diferentes tipos de fonte e adicione funcionalidades e recursos adicionais neste aplicativo Studio. 17. 17 introdução às habilidades em claude: Tão perfeito. Para explicar a habilidade, vou digitar skills Claude Code Agora, a habilidade é simplesmente um arquivo markdown com uma orientação específica que amplia os recursos do Claude Code para realizar uma determinada Na verdade, se você ler a documentação, ela diz claramente que, Ei, você pode criar, gerenciar e compartilhar habilidades para ampliar os recursos do Cloud Code. E você precisa criar uma habilidade com arquivo ED de pontos qualificado com as instruções adequadas. Agora, você pode perguntar, bem, agora o que é uma habilidade e por que você precisa dela? Digamos que Claude não entenda o sistema de design da sua empresa Na verdade, você pode criar uma habilidade destacando todos os sistemas de design que você tem em sua empresa e pode simplesmente adicioná-la Ou digamos que você tenha um pipeline de CICD específico que deseja seguir, onde pode criar uma habilidade, e as pessoas estão criando diferentes tipos de habilidades para que Claude possa trabalhar de uma forma predefinida adequada, em vez de simplesmente seguir uma direção Agora, uma das habilidades mais populares que muitas pessoas usam, e a razão pela qual estou dizendo para você usar uma habilidade específica criada por outra pessoa, é porque é fácil de usar. Na verdade, podemos explorar muitas habilidades dentro do Claude Code Então, vou abrir a mesma pasta e inicializar uma sessão fantasmagórica, e vou mostrar onde exatamente está a habilidade Então, vamos ao serviço e abriremos uma janela fantasmagórica aqui. Em seguida, vou digitar Claude apenas para inicializá-lo e você também pode fazer o mesmo processo no Windows Agora, você pode retomar uma última sessão simplesmente digitando resume ou pode realmente iniciar uma nova sessão Vou retomar a última sessão que estava usando no aplicativo de desktop deles e agora vou digitar slash Skills Isso me mostrará todas as habilidades disponíveis que estão presentes, e eu posso usar essas habilidades. Agora, muitas dessas habilidades são instaladas por mim. Muitos deles estão presentes em seu mercado. Então, vou até o mercado deles e mostrarei quais são todas as habilidades disponíveis e como você pode usá-las. Então, para ampliar os recursos do Claude Code, Cloud Code criou um mercado onde as pessoas podem realmente adicionar seus plug-ins e suas habilidades para que possam ser usadas pelo Claude Code para orientá-las em uma Então, primeiro, vou mostrar o que é um mercado. Como exatamente você pode usá-lo? Como você pode usar plug-ins diferentes do mercado, e esses plug-ins podem ou não ter habilidades neles. Então, deixe-me ir ao Marketplace e abrir o plug-in do Marketplace. Então, vou digitar plug-in, e você pode ver que tem quase 165 plug-ins. Agora, na verdade, você pode encontrar um plug-in de todas as ferramentas que usamos, e esse plug-in será simplesmente um servidor MCP Então, vamos digitar Clerk e ver se eles têm um loop de plug-in. Eles não usam o Neon, sim, eles têm um plug-in que permite que você use servidor MCP deles e você pode criar, modificar, excluir bancos de dados e fazer todo tipo de coisa diretamente no código do Na verdade, você nem precisa do MCP. Você pode realmente usar a CLI deles. Ambos funcionam. Então isso é Neon. Qual é o outro produto que usamos? Tenho certeza de que eles também terão um plugue versal. Acho que já o instalei. Você acessa o plugin instalado, você pode ver que o WorSL já está instalado Eu adicionei um servidor Figma MCP, Gmil e um O servidor MCP é basicamente uma forma de dar acesso à sua API para que Claude possa usá-la perfeitamente E então eu tenho um plugin Claude Hut que me fornece essas estatísticas Então, se você clicar em Escape, aqui é Claude Hut, que fornecerá todas as estatísticas logo abaixo do Código Claude Portanto, os plug-ins podem fazer de tudo, desde melhorar a CLI do Claude Code até permitir que eles forneçam acesso para fazer certas Então, vou novamente abrir o plug in marketplace e ver tudo o que existe no marketplace e o que foi instalado. 18. 18 Como criar sua primeira habilidade em código Claude: Ok, perfeito. Agora vou explicar o que é uma habilidade, como você pode criar uma habilidade dentro do Claude Code e como realmente você pode usá-la Digamos que você seja gerente de produto e seu trabalho seja resolver o problema do usuário. Então você conversa com vários usuários, entende o ponto problemático deles e tenta resolver esse problema. Digamos que você também seja um construtor que sabe usar o Cloud Code e adora criar soluções. Portanto, sempre que você usa o Cloud Code e deseja ele execute um determinado conjunto de tarefas de uma maneira específica, necessário dar a ele muito contexto, que às vezes é opressor Por exemplo, digamos que você tenha uma lista de cinco a dez problemas que seus usuários estão enfrentando e queira escrever mais cenários e casos e só queira pensar mais sobre o problema antes de realmente criar uma solução Mas você não sabe exatamente, ei, qual é a maneira certa de debater um problema Na verdade, você pode criar uma habilidade e chamá-la de PM brainstorming Toda vez que você digita, ei, use a habilidade de brainstorming de PM, e essa habilidade terá um certo conjunto de ações que o Claude O que, em termos técnicos, é fornecer uma lista de remarcações para que ele entenda sua abordagem de uma maneira muito boa. Por exemplo, digamos que um usuário queira ou exporte funcionalidades em seu produto. Sua primeira pergunta seria, ei, por que eles precisam disso? Então, você se perguntará o Excel é diferente dos dados mostrados no painel? Isso significa que deve haver mais dados disponíveis no Excel do que os mostrados no painel. É por isso que eles precisam disso. Outro motivo pode ser que eles queiram usar esses dados em outro lugar, compartilhar esses dados com alguém ou queiram que eles se reconciliassem Então, você quer dar a ele um conjunto específico de ações que você, como gerente de produto, realiza para resolver um problema, ou quantos comerciantes estão enfrentando o problema Então, se sua lista de perguntas fosse como: Ei, eu quero que você entenda qual é o problema, quantas pessoas estão enfrentando o problema? Por que eles estão sofrendo? E quais soluções são possíveis? E qual é a compensação entre cada solução e quais outros cenários precisamos lidar? Essa é uma lista de processos ou precauções pelos quais um gerente de produto geralmente passa. Agora, se você não quiser passar por todos esses processos manuais sozinho, você pode criar uma habilidade. Você pode simplesmente criar uma habilidade e nomeá-la como , digamos, caçador de feedback ou analisador de feedback Você pode nomear uma habilidade como quiser. Da próxima vez que você receber um feedback ou problema, basta digitar: Ei, use o analisador de feedback para analisar o feedback que estamos recebendo de um lojista Vamos continuar, criar uma habilidade específica, chamá-la de analisador de feedback ou você pode criar mais uma habilidade com o nome geração de ideias que faz exatamente a mesma coisa, por exemplo, qual é a nova ideia, como ela pode ganhar dinheiro? Como isso está relacionado? Como isso resolverá o problema? Quantos, quantos problemas do usuário serão resolvidos, nível de esforço para construí-lo. Tão perfeito. Você tem muitas perguntas que normalmente faz ou responde antes de realmente iniciar a implementação. Então, vou abrir o Claude Code e, em seguida, vamos criar uma habilidade Perfeito. Então, deixe-me ampliar um pouco. Tão perfeito. Agora, para criar uma habilidade, você pode abrir um editor de código, escrever o markdown sozinho ou usar um criador de habilidades ou usar um plug-in que pode ajudá-lo a criar uma habilidade Esse plugin, criador de habilidades, basta clicar nele, apresentador, instalar o plugin e pronto. Agora você especifica que ele é perfeito. Estou avisando que, ei, sou gerente de produto. Quero que você crie uma habilidade para que, quando uma equipe de vendas minha equipe de PM ou , minha equipe de PM ou nosso CEO nos derem uma ideia interessante e interessante, verifiquemos uma série de perguntas que precisamos fazer a eles para entender a profundidade do problema, diferentes maneiras pelas quais podemos resolver o problema, e você possa me fazer mais perguntas para entender o contexto do problema, e depois tente dar uma pontuação de um a dez em termos de quanto esforço será necessário. Qual é o impacto e a vantagem? E você pode usar a pesquisa na web para entender onde nossa empresa existe ou onde nosso produto existe no cenário competitivo E você pode usar o plugin de criação de habilidades que acabamos de instalar para criar essa habilidade. Deixe-me pressionar Enter e vamos ver se ele é capaz de criar uma ideia realmente boa em habilidades de brainstorming para nós ou Então, vamos esperar pouco e veremos se ela pode criar um nome interessante e interessante para a habilidade e se é capaz de criar essa habilidade ou não. Se isso acontecer, o que acontece com todo markdown, será escrever essa habilidade específica e poderemos então melhorá-la ou alterá-la ainda mais e ver se o resultado volta para nós Então, ele está me fazendo um monte de perguntas: ei, como a habilidade deve conduzir a entrevista com você? Portanto, a habilidade deve me fazer de três a quatro perguntas ao mesmo tempo para entender a profundidade do problema. Então ele está me perguntando: Ei, qual saída você quer no final? Quero um tipo de memorando de PM perfeito que me mostre o problema, o usuário afetado, a estrutura ou, eu diria, um scorecard perfeito ou um veredicto é melhor, que use uma que use Oh, perfeito. Esse é melhor. Isso é mais qualitativo. A tonelada, você quer que uma tonelada seja rejeitada, honestamente, uma analista neutra ou uma defensora do diabo Talvez recue honestamente e se submeta. Eu dei essas três respostas para todas as perguntas que ele fez para criar uma habilidade adequada para mim. Agora, essa ferramenta de habilidade é muito boa porque agora, se eu fizer uma pergunta específica, ela não terá alucinações e me dará uma Eu vou me dizer exatamente que, ei, isso é o que você deve seguir. Ok. Então, como você pode ver, ele criou uma habilidade para mim e a nomeou como avaliadora da PM Ida que me fará muitas perguntas, depois me dará o resultado do RICE, que é seu alcance, impacto, confiança e esforço, e IS e de Moscou, todas essas são estruturas diferentes de gerenciamento de produtos, e me dará uma decisão como: vá, não vá, preciso de mais informações e tente recuar honestamente Vou clicar em sim e ele criará isso para mim. Ele criou essa habilidade e deixe-me tentar abri-la em uma interface muito melhor. Então, agora você pode ver que isso criou essa habilidade para mim. Ele deu a essa habilidade como nome, ideia de PM, avaliador, e essa habilidade tem uma descrição e um processo passo a passo adequado de que, ei, você é um avaliador sênior de PM Então, diz que, ei, você é um modelo mental sênior de PM em uma habilidade. Você é acionado quando alguém pergunta se o CEO está solicitando esse recurso específico ou a equipe de vendas pergunta por quê, e você precisa primeiro examinar a descrição do problema e fazer perguntas como quem está perguntando isso? Qual é o problema, quem está enfrentando o problema. Em seguida, você precisa reunir evidências e impacto. Então você precisa ver se apenas um grupo específico de pessoas precisa, então você precisa pontuá-las usando o método RICE. Você também pode usar o método Ice ou Moscow para fazer isso. Então você precisa dar a eles um veredicto final. Tão perfeito. No geral, parece bom. Quero dizer, você pode passar mais tempo lendo isso, se quiser. Mas a ideia principal da habilidade é realizar um determinado conjunto de ações a cada vez, para que o tempo possa ser economizado e você não precise especificar o mesmo conjunto de instruções todas as vezes. 19. 19 usando suas primeiras habilidades: Então, se você olhar com cuidado, vou dar uma dica, tipo, Ei, meu CEO está dizendo que, Ei, pessoal, nossos comerciantes estão enfrentando alguns problemas Eles não conseguem ver o status do pagamento na página inicial e é por isso que não conseguem analisar e conciliar as coisas adequadamente até o final do Este é um tratamento simples para problemas que vou dar ao coágulo e, como tem palavras como as do meu CEO, ele identificará a intenção e usará automaticamente essa habilidade, e usará automaticamente essa habilidade, então me dará uma previsão e um veredicto E eu vou escrever. Você pode me ajudar com isso? E vamos ver se ele inicializa e usa a habilidade que acabamos criar e me dá a resposta da maneira que eu perguntei Então diz que, ei, você quer que eu use essa habilidade para responder a essa solicitação ou pergunta? Perfeito. Eu vou dizer que sim. E se você olhar a resposta, ela me dará a resposta da mesma forma que costumo perguntar às pessoas sempre que elas têm ideias ou problemas. Portanto, está usando a habilidade para realizar todo tipo de ação, que antes eu teria que especificar linha por linha. Ei, faça isso primeiro, depois faça aquilo primeiro, depois faça aquilo. Então você pode ver que ele está me fazendo um monte de perguntas primeiro e depois me dará a resposta. Qual comerciante está reclamando? Quantos me dão o nome se você quiser. Que tipo de comerciante são esses? É uma lacuna de medo identificar o que eles não conseguem ver e o que exatamente os comerciantes estão tentando realizar em seu painel E qual é a aparência da página inicial atual? Tão bom. Você pode ver que ele está fazendo várias perguntas apenas usando essa escala. Obviamente, você pode digitar sua resposta. Então, eu simplesmente vou pressionar tab, e ele também está me dando uma resposta, uma resposta hipotética, que obviamente não é correta no mundo real, mas eu simplesmente vou pressionar Enter e vamos ver, a partir de uma resposta tão pequena, partir de uma resposta tão pequena ele é capaz de me dar um veredicto perfeito Agora, na primeira rodada, respondi que, ei, a maioria das empresas está pedindo isso, cinco comerciantes reclamaram do suporte e, principalmente, é um problema de reconciliação Depois de ler isso, agora está me perguntando na segunda rodada sobre evidências e impacto. Então, qual porcentagem da receita corporativa esses cinco comerciantes representam que reclamam por meio O que especificamente está quebrado na reconciliação? Qual resultado estamos buscando e como o medimos? E em termos de esforço árduo, reconciliação pode ser construída em poucas semanas ou em alguns trimestres Depende de quão profundo você deseja construir isso. Assim, você pode responder à segunda rodada e, em seguida, ele me dará a resposta. Então, eu estou certo. Vamos ver, vou digitar coisas muito fracas agora só poder contornar todas essas rodadas e obter uma resposta previsível Tão bom. Agora você pode ver a resposta. Acho que não está me fazendo mais perguntas. Ele me deu uma descrição do problema, a pontuação do arroz, a pontuação I, e você obviamente pode ler mais sobre isso. Se você é gerente de produto, sabe exatamente o que são arroz e IS. Então, Rice é seu alcance, impacto, confiança e esforço. exemplo, se você criar isso, quantos comerciantes podemos alcançar com esse recurso Qual é o impacto em nosso produto? Estamos confiantes de que isso resolverá o problema e quanto esforço será necessário? O mesmo acontece com olhos, impacto, confiança, facilidade e Moscou. É um recurso obrigatório? É assim que você constrói uma habilidade e a usa no cenário real do mundo real, para não precisar escrever um conjunto específico de instruções todas as vezes. Ótimo. Agora, na verdade, vou instalar um plug-in muito popular que usa habilidades básicas para resolver problemas de desenvolvimento de software. O nome do plugin é superpower, que tem de 12 a 15 habilidades que resolvem um conjunto específico de 20. 21 Por que e como usar o SDLC: Então, Claude Code é ótimo. Ele pode ajudá-lo a criar tudo e qualquer coisa que você possa imaginar, e essa é uma ferramenta muito boa que pode realmente acelerar todo o processo. Mas há um grande problema. Se você observar como o produto está sendo construído, mesmo antes de a IA existir, ele foi construído com planejamento adequado e compreensão de tudo. E é por isso que você precisa entender sobre o ciclo de vida do desenvolvimento de software e como exatamente isso funciona Agora, para explicar isso, vou simplesmente abrir o bloco de notas e mostrar quais são as principais etapas quando você está criando qualquer software Então deixe-me escrever algo para você, e então eu vou te mostrar. Então, sempre que você quiser criar algo, primeiro escreva o requisito. Depois disso, esse requisito inclui o problema que estamos resolvendo, o impacto que temos em nosso produto existente. Quais recursos estamos criando? E quando digo interação, estou falando sobre UI e UX. Você precisa configurar adequadamente como você vai medir o uso e a análise desse recurso e como você vai lançá-lo e implementá-lo. Agora, se seu produto estiver usando vários outros produtos ou outros recursos, funcionalidades ou microsserviços, você também precisará escrever sobre os casos de teste para que, se algo falhar, você conheça essas coisas com antecedência e também precise criar pipelines de CI e CD para que as coisas funcionem corretamente Portanto, há muito mais coisas que acontecem nos bastidores quando você está criando o software real. E acabei de lhe dar um pequeno pedaço de uma torta grande só para ajudá-lo a entender todo o processo. Agora, esse processo deve ser seguido idealmente quando um produto é realmente construído. E quando você está trabalhando com o Claude Code, ele não segue um ciclo de vida específico do produto Para fazer isso, vamos usar habilidades. Então, vamos entender o que são habilidades e como podemos usá-las. 21. 22 habilidades superpoderosas para o ciclo de vida de desenvolvimento de software: Perfeito. Como você pode ver, o plug-in superpower puddle agora está ativado e agora vou mostrar todas as habilidades que esse plug-in me fornece Agora, a superpotência é simplesmente um plug-in com muita habilidade que permite que Claude Code funcione de uma maneira específica A primeira habilidade que um superpoder tem é o brainstorming. Isso significa que toda vez que tentamos criar um produto específico, estamos resolvendo um problema. E quando você está resolvendo um problema, na verdade está pensando em uma solução diferente para o mesmo Então, digamos que, se você está criando um produto específico para um grupo de pessoas, você realmente quer se aprofundar, entender mais problemas associados a ele e como resolvê-lo de uma maneira muito melhor? Portanto, essa habilidade o ajudará a resolver um problema melhor fazendo um brainstorming e fazendo mais perguntas outra habilidade é escrever planos Como você pode escrever um plano adequado com eficácia, repetir esse plano várias vezes, e isso é muito semelhante ao funcionamento do seu modo de plano Na verdade, você pode perguntar a Claude: Ei, liste todas as habilidades que plugin superpower fornece e o que elas fazem? E isso lhe dirá exatamente quais habilidades existem em superpotência e o que exatamente pode ajudá-lo a alcançar Então, a primeira habilidade é usar superpoderes. Então, se você acabou de mencionar isso, ele usará habilidades de superpotência para decidir o que debater, o que escrever, como executar, como construir, Portanto, você não precisa especificar uma habilidade específica. Você só precisa escrever usando superpoderes. Então você tem a habilidade de brainstorming, que explicamos que, ei, ela explorará os requisitos de intenção do usuário design antes de fazer Então você tem suas habilidades de planejamento de redação, que transformarão seus requisitos de Specsa em um plano de várias etapas bem detalhado Depois, há a habilidade de execução do plano, que executará o plano escrito da maneira desejada. Então, você tem o desenvolvimento orientado por subagentes qual não precisa especificar que ele inicie vários agentes paralelos para desenvolvê-lo mais rapidamente. Isso fará isso por você. O mesmo acontece com os agentes paralelos do Dispatch, você tem o desenvolvimento orientado a testes, que escreverá os casos de teste antes de criar qualquer coisa Depois, você tem a depuração sistemática, que o ajudará a escrever falhas de teste adequadas, depurar coisas para você e Em seguida, você tem um fluxo de trabalho do Git e, usando a árvore de trabalho do Git, ele cria uma árvore de trabalho e, em seguida, isola seus recursos para que você possa criar várias coisas ao mesmo tempo Depois, há uma verificação antes da conclusão, que verificará toda a implementação em todas as sessões antes de realmente gerar um PR Portanto, eles têm muitas dessas habilidades que ajudarão você a trabalhar adequadamente de uma maneira específica desejada. Agora, como vamos usá-lo e quando vamos usá-lo? Agora, para usar essas coisas, vou realmente construir algo como um produto real e, em seguida, usaremos superpoderes para construí-lo de forma mais eficiente com o crotcd 22. 23 claude vs. codex e cursor: Agora, antes de prosseguirmos no curso, quero que você aborde algo que é muito importante. Então, no momento, você só pode usar o Claude Code somente quando tiver uma assinatura Portanto, a assinatura deles começa em $20 por mês e vai para $200 por mês, dependendo do seu uso Agora, eu pessoalmente tenho uma assinatura máxima de $100, mas eu entendo Muitos de vocês realmente não querem pagar $20 apenas para usar o Claude Code Então, vou mostrar algumas alternativas que você pode usar, e você poderá fazer exatamente a mesma coisa com essas alternativas. A primeira alternativa é o Codex. Agora, o Codex tem um plano gratuito que permite que você use seu agente de codificação sem pagar muito dinheiro Agora, eles têm alguns outros planos como o plano Go na Índia, que custa apenas 400 rúpias Eles têm um plano plus, que custa cerca de $20, e também têm um plano de $100 Então, se você é alguém que só queria experimentar esses agentes de codificação de IA , o Chat GPT é um bom lugar para começar Eles oferecem um uso limitado do Codex em um plano gratuito, e acho que se você quiser criar algo muito pequeno, apenas para experimentar esses agentes de codificação de IA, você pode usar o Codex CLI, basta clicar no Codex e depois Isso vai funcionar exatamente da mesma maneira, assim como Claude, e vou mostrar como você usa o Codex, assim como o Claude Code assim como o Claude Então, basta acessar a documentação do desenvolvedor, clicar na CLI e instalar a CLI do Codex e começar a usá-la imediatamente Essa é a primeira alternativa. nível gratuito do Codex é bastante generoso e você pode criar algumas coisas sozinho Outra opção ou alternativa ao Claude e ao Codex é o Open Agora, o Open Cod é muito popular porque é de código aberto. Agora, você pode usar todos os modelos populares no OpenCD, como se eles tivessem Kimi k two, Quin Model, Deep Seek, e eles também têm OpenAI e modelo e eles também têm OpenAI e Se você acessar a página de preços deles, poderá realmente usar o Open Cord gratuitamente ou eles terão um plano a partir de $5 no primeiro mês Assim como qualquer outro agente de codificação, eles também têm uma CLI, então você pode simplesmente ir até os cães de desenvolvedores, clicar na CLI, instalar o OpenCOD e começar a usá-lo imediatamente Todos esses agentes de codificação de IA são muito bons, e eu não encontrei nenhuma grande diferença quando estava usando Claude versus Codex versus Open Cod Então essa é a terceira alternativa que você tem. O quarto é Cursor. Agora, o Cursor é um IDE. Isso significa que você pode instalar o Cursor em seu sistema. Mas se você quiser usar a CLI deles, bem, eles também têm uma CLI Você pode simplesmente ir em frente, instalar a CLI e começar a usá-la. Neste vídeo, vou escolher o Codex porque acho que nível gratuito do Codex Codex é bastante generoso e muitas pessoas podem realmente usá-lo E eles têm limites muito bons. Vou clicar na CLI e vou instalar a CLI Então você abre qualquer terminal, você pode simplesmente usar seu terminal nativo ou você pode usar nosso terminal como o Cost que eu instalei no meu sistema. Você pode instalar globalmente o Codex CLI simplesmente digitando NPMIGlobal e instalando o OpenAI Codex. É isso mesmo. Você poderá instalar a CLI deles e digitar Codex para simplesmente iniciar isso, e sim, se ele solicitar que você faça login, basta digitar slash login, slash Logout para fazer login e Logout, e você pode alterar o modelo digitando slash e você pode alterar o Agora, se você estiver usando o Codex, recomendo que use o modelo mais recente, mas reduza o esforço ou o raciocínio para médio, para que você não esgote seu limite muito Além disso, desative o modo rápido, se estiver ativado. Portanto, se você perceber que existe um modo rápido, basta desligá-lo. Basta digitar slash fast e você pode desativar o modo rápido. Perfeito. E agora você pode começar a usar o Codex como qualquer outro agente de codificação, seja código coágulo, código aberto ou Cursor CLI, todos eles são Mesmo que eu digite algo para você, você pode digitar slash e verá muitas opções exatamente iguais, assim como Claude Slash Model lhe dará acesso a todas as opções de modelo que você tem A permissão Slash permitirá que você edite a permissão do Codex. Memórias de Slash, habilidades de Sky Slash, análise de boatos. A maioria dos recursos e funcionalidades, o que quer que esteja no Claude Code será exatamente o mesmo Eu recomendo que você use o HatGPTS Codex se você é alguém que realmente não quer pagar E você também pode experimentar alguns outros CLIs. O Cursor oferece um limite muito bom no nível gratuito Portanto, o Cursor também tem um generoso nível gratuito. Perfeito. Vou digitar slash quid para fechar Codex ou cortar Logout para simplesmente desconectá-lo Da mesma forma, você pode simplesmente abrir o documento CLI do Open Cod e instalá-lo Você também pode fazer a mesma coisa com o Cursor. Perfeito. Essa é uma maneira de usar qualquer alternativa de nuvem se você realmente não quiser pagar. 23. 24 artefatos para design: Agora você pode realmente usar Claude, JA JBD ou qualquer um desses grandes modelos de linguagem para criar um artefato ativo que você pode usar rapidamente e ver se a interface de design parece boa Eu simplesmente escrevi que, Ei, estou criando um aplicativo Todo. Eu quero que você crie um design para isso. O design deve ser móvel primeiro com uma navegação e, como este é um aplicativo Todo, quero que você crie uma tarefa. Então, ou eu posso digitar ou falar, e você simplesmente escreve o texto para mim. Deve ter uma data de vencimento. Você deve escolher um horário de manhã, tarde e noite. Apenas me deseje um bom dia, boa tarde neste aplicativo no topo da página inicial, e você pode me fazer algumas perguntas, se tiver, e precisará criar um artefato ativo para Agora, a vantagem do artefato ao vivo é que eu posso criar rapidamente um artefato e usá-lo rapidamente para ver se estou satisfeito com o design ou não, e posso iterar isso dentro do chat E isso pode ser feito usando Claude e Chat GBT. Na verdade, deixe-me copiar isso e criar um artefato ao vivo usando o Chat GPT também Então, vou criar um artefato vivo e usar um ha GPT moderno e pensante Então agora ele está me fazendo um monte de perguntas. Quero meu nome na página inicial. O design deve ser limpo e minimalista. E sim, eu quero uma API de conversão de texto em fala real que eu possa usar neste design. Perfeito. Agora, ele está criando um artefato para mim que eu posso realmente abrir e usar nesta interface de bate-papo, e posso alterá-lo ou melhorá-lo Agora, essa é apenas uma maneira muito rápida de criar um design, mas essa não é a maneira correta de fazer isso. Vou mostrar como você usa o design de coágulos para fazer isso da maneira certa? Agora, lembre-se, isso é apenas um design de front-end. Este não é um produto real. Perfeito. No geral, o design parece bom, embora eu ache que não consigo salvar Acho que não há como economizar ou isso não funcionará. Este é apenas um design para que eu possa iterar e melhorar esse design aqui Vamos dar uma olhada na saída de Claude. Então Claude criou algo que parece muito pior. Como se isso não fosse otimizado para dispositivos móveis. Eu posso ver o calendário. Eu posso ver o botão de adição, mas a saída é boa, não é a ótima saída que eu esperava de Claude Tão perfeito. Mesmo se você acessar o código-fonte desse artefato, tudo isso é um arquivo JSX, assim como o app dot GSX. Isso significa que é apenas um front-end. Todos esses valores são códigos rígidos codificados como um par de valores-chave, e não há back-end, e esse é um bom lugar para começar Mas, novamente, essa não é a maneira correta de criar um design. Então, vou encerrar essas duas coisas e mostrar como você realmente cria esse design usando o design de coágulos. 24. 25 momentos para melhorar o design: Tão perfeito. Agora você sabe como criar um produto e como torná-lo vivo. O próximo grande desafio que você enfrentará está relacionado ao design. Como você faz seu produto parecer incrível? Então, vou começar uma sessão fantasmagórica e vou ajudá-lo a entender como você faz seu produto parecer incrível Então, vou digitar Claude para inicializar Claude, e você pode ver que estou usando o Opus 4.7 com Meu esforço é muito alto. Você pode reduzi-lo para médio se estiver trabalhando em um projeto simples e pode fazer a mesma coisa com qualquer agente de IA que esteja usando, seja Clotde, Codex, código aberto Então, se você compartilhar o link do seu aplicativo com alguém, primeira reação dessa pessoa será : “Ei, é bom, mas não é ótimo”. Por exemplo, dediquei um tempo e criei um design muito bom para esse aplicativo Todo, e vou mostrar esse design para vocês. Agora, você pode usar Figma ou clot design ou qualquer outra ferramenta para criar esse Se você observar a fase de tarefas real, ela mostrará o nome do usuário Há um escuro no modo claro, ele mostra um pequeno calendário semanal. Ele mostra todas as tarefas pendentes e concluídas. Agora, há mais uma funcionalidade em que você pode realmente atribuir o tempo devido à sua tarefa, que simplesmente colocará sua tarefa em uma categoria de manhã, carga de trabalho e noite E você pode ver, há uma página inicial. Há uma página de insights, há uma página de perfil. E há um botão de adição. Na primeira versão, talvez possamos eliminar o insight, mas devemos ter uma página de perfil, uma página inicial e o design geral, e isso deve ser otimizado para dispositivos móveis . Você tem duas opções. Ou você simplesmente copia e cola ou arrasta ou solta uma captura de tela, se tiver, mas o problema é que muitos de vocês não sabem como usar o Figma ou como usar uma ferramenta de design profissional Então você acaba com apenas a experimentação. Você continua solicitando Claude Code até ficar satisfeito com Agora, não há nada de errado com essa abordagem. É ótimo. Mas a melhor maneira de iterar e criar um design para um produto real é usando o design em nuvem No próximo vídeo, mostrarei como você usa design de coágulos e como você realmente melhora o design do seu aplicativo 25. 26 introdução ao design de Claude: Agora ele tem duas opções. Você pode criar um wireframe do seu aplicativo ou design ou criar maquetes de alta fidelidade Na maioria dos casos, espero que você queira pular a parte do wireframe e criar diretamente maquetes de alta Vou clicar em Criar e isso me dará uma interface de bate-papo que eu posso usar para criar o design. Para adicionar um sistema de design, basta colocar um arquivo HTML que possa funcionar como um sistema de design. Você pode simplesmente salvar seu sistema de design em um PDF. Você pode fazer todo tipo de coisa, mas acho que a maioria de vocês não sabe o que é um sistema de design, então vamos pular a opção Na verdade, não vamos usar a captura de tela. Eu vou te mostrar como você cria um design realmente bom sem sequer dar nenhuma referência. E você pode simplesmente arrastar e soltar o arquivo Figma, caso trabalhe em uma configuração profissional que tenha o arquivo Figma Eu escrevi um prompt como: Ei, estou criando um aplicativo Todo e quero que você crie um design para ele. Esse design deve ser móvel primeiro com navegação nele. Este é um aplicativo para fazer. Posso criar uma tarefa digitando o nome da tarefa ou posso falar todas as tarefas devem ter uma opção de data de vencimento e um horário como manhã, tarde à noite, e você precisa fazer com que a página inicial do aplicativo tenha uma aparência muito boa e otimizada para dispositivos móveis e me deseje bom dia, boa tarde, dependendo da hora em que eu abro o E enquanto estiver criando o design, basta me fazer perguntas, se tiver em mente, e usar uma fonte interessante, como fictory, e um fonte interessante, como fictory sistema de design de front-end, como o SATCN Agora, este é, novamente, um aviso muito curto que acabei de dar a Claude Code E, como você pode ver , há um monte de perguntas antes de realmente começar a criar um design para mim. Então, que nome isso deveria nos usar? Talvez eu possa usar meu nome. Agora me pedem que escolha uma vibe. Vai ser calmo e minimalista? Vai ser firme e amigável, com um visual moderno, talvez calmo e minimalista, ou um pouco quente e amigável, e minha cor favorita é azul, então eu vou escolher o azul Eu posso perguntar. Para adicionar algumas tarefas de amostra para que o design tenha uma boa aparência, deve haver apenas três slots. E está me pedindo que escolha um estilo de calendário. Talvez esse tipo de estilo de calendário seja bom. Eu quero ter uma navegação móvel parecida com esta. Talvez me deixe ampliar um pouco mais para você. Portanto, esse tipo de navegação inferior parece bom. Quero alguns apenas um design polido ou vamos escolher três variações do design. Acho que essa fonte parece boa. Então, vou clicar em continuar para acelerar isso e mostrar exatamente como Claude Design cria nosso design de aplicativo para nós 26. 27 claude design: Agora eu tenho minha produção do design em nuvem e, como você pode ver, esses designs são incríveis Vou segurar o comando e diminuir o zoom um pouco e, como você pode ver, ele seguiu as diretrizes que eu dei inicialmente, coisas como se ele deveria usar a cor azul. O design deve ser atraente. E como você pode ver, está me desejando boa tarde. E eu posso ver toda a tarefa aqui. Há uma página dedicada onde eu posso falar e gravar um texto para fazer. Eu criei outra variante que é mais minimalista e calma. E acho que criou uma terceira variante. Tão perfeito. Eu criei três variantes para mim. Pessoalmente, estou gostando da variante número um. Então, vamos escolher a variante número um. Mas antes disso, eu só queria explicar que você pode realmente usar o modo de edição e editar o componente simplesmente adicionando um comentário. Então, o design do coágulo é muito bom. Você pode aumentar ou diminuir as coisas aqui, e essa é uma atualização muito boa. Assim, você pode alterar o tamanho, a cor e a altura da linha do componente. Na verdade, você pode simplesmente adicionar um comentário e ele fará as coisas por você. Assim, você pode adicionar um comentário e simplesmente digitar algo e isso mudará isso. Por exemplo, digamos que eu não quero essa morte aqui. Então, remova isso daqui e ele o removerá para você. Acho que tenho que enviá-la para Claude, e aí está. Ele começará a fazer algum trabalho e o removerá daqui. Assim, você pode fazer algumas mudanças reais apenas adicionando alguns comentários. Tão perfeito. No geral, acho que estou gostando da variante de design A, o B é mais minimalista e profissional e o C é muito colorido. Então, vou escolher A, tenho certeza que muitos de vocês podem gostar de B, que é mais minimalista, mas parece super colorido e bom para mim, e eu errei muitas vezes quando se trata de design. Então, vou atualizar a página. Diz que foi removido nesta sexta-feira 22 M e perfeito. Agora desapareceu. Tão bom. Eu amo a variante, hein? Portanto, remova B e C e crie mais wireframe. E uma vez feito isso , eu vou realmente usar essa variante e realmente melhorar nosso aplicativo. Então, vou mostrar como você pode realmente compartilhar isso e usá-lo dentro do seu projeto Cloud Code. Tão perfeito. Agora, a saída do design está pronta. Você pode ver que esse é o fluxo principal do nosso aplicativo Todo, e essas são as outras telas que são importantes neste aplicativo Todo. Então, ele me mostra a data, o lembrete. Devo repetir essa tarefa ou não? E tão perfeito. Deixe-me atualizar a página, e acho que essa parte desaparecerá A próxima pergunta que você pode ter em mente, agora, é como faço para implementar exatamente esse design no meu aplicativo Todo? Então você tem duas opções. Você pode exportar cada uma dessas imagens PNG ou baixar HTML e, em seguida, arrastar e soltar, o que é uma forma muito ineficiente de implementar Assim, você pode baixar o PNG e pedir a Claude que implemente esse PNG, mas essa não é a maneira correta de fazer isso Vou mostrar exatamente como você pede a Claude Code que implemente isso Então, você pode realmente baixá-lo como arquivo zip e simplesmente arrastar esse arquivo para o seu Código Claude e ele pode começar a implementar esses componentes e, em seguida, configurar o back-end também A outra opção é que você pode enviar isso ou entregá-lo para Claude Code Assim, você pode baixá-lo como JipFle e pedir ao Claude Code que faça isso por você, ou você pode enviar isso ou sessão para o Claude Digamos que eu copie esse comando e deixe-me entregá-lo ao Claude Code e ver se ele é capaz de implementá-lo ou não