Melhore o uso de IA no VS Code com arquivos de prompt.

Por que os arquivos de prompt são importantes?

Às 0:00, Tim diz: "Usar um arquivo de instruções com uma IA pode transformar a experiência de apenas razoável para ótima." Um arquivo de instruções informa ao modelo de IA como pensar, como proceder e como responder a uma instrução do usuário. Tim relaciona isso ao arquivo "Beast Mode" de Burke Holland, da Microsoft, um grande prompt do sistema que funciona como um modelo. Ao utilizar essa ferramenta, os desenvolvedores podem reduzir instruções repetitivas, minimizar erros e obter um código gerado mais previsível no VS Code.

Tim descreve isso como uma espécie de engenharia de prompts: você está criando um conjunto reutilizável de instruções para que, quando você digitar um prompt rápido para o usuário na visualização de bate-papo ou no ícone do AI Toolkit na barra de atividades, a IA já conheça seu estilo de codificação e a estrutura de projeto preferida.

Recursos para desenvolvedores do Tim

Antes de mostrar a ferramenta, Tim (0:27) recapitula os recursos gratuitos e pagos que oferece: nove cursos completos, um décimo em iamtimcorey.com , além de um podcast que responde a perguntas de desenvolvedores. Ele destaca que essas ferramentas têm como objetivo ajudar os desenvolvedores a aprimorarem suas habilidades e a criarem fluxos de trabalho melhores. Isso explica por que um arquivo de prompts de IA do VS Code é importante: faz parte das práticas modernas para aprimorar tarefas de programação do dia a dia.

Configurando o Modo Fera no VS Code

Às 1:22, Tim acessa a seção de ferramentas do VS Code. Ele já tem o Beast Mode instalado e selecionado em "configurar modos". Ele explica que você pode abrir a visualização do AI Toolkit, navegar pelos modelos do catálogo de modelos e criar um novo modo personalizado. No exemplo dele, você pode clicar em Selecionar Adicionar Prompt, dar um nome como "Modos de bate-papo do GitHub " e colar o conteúdo do arquivo (1:34). Isso armazena seu prompt de sistema personalizado para que esteja sempre pronto em seu espaço de trabalho.

A configuração de Tim mostra como modelos locais ou modelos em nuvem podem ser combinados com suas próprias instruções de criação de prompts. Tudo fica organizado na pasta raiz do VS Code ou em outra pasta de armazenamento, facilitando a repetição do processo posteriormente.

Utilizando IA em um projeto real

A partir de 2:03, Tim demonstra a IA em seu projeto de website real, hospedado em seu espaço de trabalho do VS Code. Ele abre o código da seção "Caminhos de Aprendizagem" — essencialmente um site desenvolvido em Python/React — e mostra o menu de navegação do aplicativo. Ele quer ajustar o ícone de seta para adicionar uma pequena animação ao passar o cursor sobre ele (3:21).

Este é um cenário típico de desenvolvedor: você tem algum código front-end, gostaria que um agente de IA gerasse o CSS para você e não quer escrever cada detalhe manualmente. Com um arquivo de instruções já carregado, a sua solicitação ao usuário pode ser curta, e a IA preencherá o contexto.

Preparando o prompt de IA

Às 3:38, Tim usa a Ferramenta de Recorte do Windows (Windows+Shift+S) para capturar uma imagem mostrando a seta (3:45). Esse contexto visual ajuda a IA. Em seguida, às 4:43, ele digita uma mensagem espontânea:

"No meu menu de navegação, na seção de percurso de aprendizagem, gire a seta de 30° para a horizontal quando o cursor estiver sobre ela e, em seguida, volte à posição original quando o cursor sair." Aqui está uma captura de tela de como está atualmente."

Tim observa que poderá especificar mais tarde exatamente onde colocar o CSS, mas começa com o seguinte prompt para testar a funcionalidade do Beast Mode.

Plano do Modo Fera

Às 6h, Tim explica que o Beast Mode descreve um fluxo de trabalho: identificar o seletor correto, adicionar uma classe CSS, adicionar um efeito de foco (hover effect) e, em seguida, testar e verificar. Ele até coloca o CSS no arquivo site.css correto acima da raiz (6:42). Isso demonstra como um esquema predefinido no seu arquivo de prompts — suas "regras" sobre onde os estilos devem ser aplicados — orienta a resposta da IA.

Tim chama isso de "grande vantagem" de usar um arquivo de instruções: ele adiciona contexto, permitindo que a IA opere como se conhecesse a estrutura do seu projeto, sem que você precise repetir a descrição completa todas as vezes.

Iterando e refinando

Quando Tim verifica o site às 6h54, o código gerado afeta apenas uma seta e na direção errada. Em seguida, ele aprimora o comando às 7:29 para inverter o efeito de foco e aplicá-lo a todas as setas.

Às 8h49 ele percebe que agora todas as setas giram ao mesmo tempo. Então, às 9h06, ele envia outra mensagem ao usuário, instruindo a IA a aplicar o efeito apenas ao item sobre o qual o cursor está posicionado. Tim comenta às 9h38: "Você precisa ajustar uma IA." Nem sempre faz a coisa certa."

Este é um ótimo exemplo de engenharia de comandos dentro da janela de bate-papo. Você edita, repete e salva suas instruções até que a IA produza a saída estruturada desejada. Como o arquivo de prompts já fornece o prompt do sistema, cada nova instrução é apenas um pequeno refinamento.

Resultado final

Às 9h52, Tim confirma que a animação agora funciona por seta: gira ao passar o cursor sobre ela e reinicia ao soltar o mouse. Ele observa que você pode alternar para o tema claro ou para o tema escuro, mudar as cores, diminuir a velocidade da transição — o que você quiser (10:02). A chave é que a IA descobriu a transformação SVG e escreveu o CSS para ele (10:11).

Tim explica entre 10:30 e 11:20 que você pode estender o Beast Mode ou criar seu próprio arquivo de construtor de prompts para definir como organizar os arquivos, como deseja que a formatação do código seja tratada ou como chamar uma função Python. Dessa forma, suas perguntas diárias podem ser muito mais curtas e ainda assim gerar respostas consistentes.

Analisando os resultados da IA

Às 11h50, Tim alerta para sempre revisar as alterações da IA. Mesmo com um arquivo de prompts protegido e boas práticas, é possível que uma IA adicione uma classe no lugar errado ou quebre suas dependências necessárias. Em seu exemplo, a IA fez apenas pequenas alterações sensatas — adicionando uma classe CSS aqui, uma linha de código ali —, mas os desenvolvedores ainda devem verificar o registro de alterações e fazer ajustes, se necessário.

Tim conclui observando que, uma vez obtido um resultado satisfatório, você pode salvá-lo e reutilizá-lo. Essa é a essência de usar modelos de IA e arquivos de prompts no VS Code: um fluxo de trabalho repetível e consistente que transforma prompts ad-hoc em uma experiência confiável, semelhante a um SDK.

Principais conclusões da demonstração de Tim Corey

Seguindo o passo a passo de Tim Corey no vídeo , você verá como um arquivo de prompts bem projetado no Visual Studio Code pode:

• Forneça um contexto consistente aos modelos de IA para que suas instruções possam ser mais curtas.

• Gerenciar automaticamente o código gerado, a saída estruturada e a formatação.

• Integre-o ao seu espaço de trabalho, barra de atividades e AI Toolkit para que você possa abrir, testar e refinar prompts com facilidade.

• Permite navegar entre modelos, alternar entre modelos locais ou na nuvem e aplicar suas regras de engenharia de forma integrada.

Ao armazenar suas regras em um arquivo de instruções, você fornece à IA um script de agente confiável para seguir, permitindo que você se concentre em tarefas de desenvolvimento de nível superior em vez de repetir as mesmas instruções.