Vibe Coding não funciona (Novo Workflow no Claude Code)

Workflow Completo para Criar Aplicações Profissionais com Cloud Code

Introdução ao Workflow

• O vídeo apresenta um workflow completo utilizado para criar aplicações profissionais com cloud code, destacando a diferença em relação ao Vibe Coding.

• O apresentador menciona o sucesso do produto Epic New, que foi desenvolvido 100% com IA e rapidamente conquistou 300 usuários.

Etapas do Workflow

• A primeira etapa envolve a escrita de uma "spec", um documento que lista todas as páginas, componentes e comportamentos dos usuários na aplicação.

• Após isso, a spec é dividida em tarefas menores para evitar sobrecarga no cloud code durante a implementação.

• Cada tarefa é planejada buscando códigos reutilizáveis e documentações externas para garantir eficiência e evitar reinventar soluções.

Importância da Estrutura

• O apresentador reconhece que o processo pode parecer burocrático, especialmente para quem vem do Vibe Coding, mas enfatiza sua eficácia após testes de várias abordagens.

• Ele discute padrões problemáticos comuns no Vibe Coding que motivaram a criação desse novo processo.

Padrões Problemáticos Identificados

• Um erro comum é atribuir tarefas grandes demais à IA, resultando em falhas devido à sobrecarga na janela de contexto.

• Outro problema é o código gerado pela IA ser desorganizado, complicando implementações simples ou criando soluções não solicitadas.

Desafios na Interação com a IA

• A repetição de trechos de código já existentes pela IA gera problemas de manutenção, pois ela pode esquecer que já criou um componente similar anteriormente.

• O apresentador alerta sobre a frustração comum dos desenvolvedores quando sentem que a IA não obedece às instruções. Isso geralmente ocorre por falta de clareza nas orientações dadas à IA.

Desafios do Vibe Coding e Soluções Práticas

Problemas Comuns em Projetos de Vibe Coding

• Em projetos pequenos, a IA pode encontrar arquivos facilmente, mas à medida que o projeto cresce, torna-se difícil identificar os arquivos corretos para modificar.

• Um problema frequente é "arrumar uma coisa e quebrar outra", conhecido como cobertor de pobre. Isso ocorre quando responsabilidades não estão separadas, levando a conflitos ao modificar o código.

• A falta de modularização resulta em dificuldades na manutenção do projeto. Quando as responsabilidades estão misturadas, alterações em um componente podem afetar outros.

• Gafes de segurança são comuns em projetos mal estruturados. Muitas vezes, a lógica de negócios é exposta no front end ou chaves sensíveis são deixadas acessíveis.

• Tudo que está no front end pode ser acessado facilmente; por isso, regras críticas devem estar no back end para evitar vulnerabilidades.

Estratégias para Mitigar Problemas

Divisão do Projeto

• Para resolver problemas com implementações grandes, divida o projeto em tarefas menores. Isso ajuda a manter a janela de contexto da IA e melhora sua performance.

Organização do Código

• Realize uma pesquisa no código existente antes de criar novos trechos. Isso evita duplicação e garante que padrões documentados sejam utilizados.

Direcionamento Claro para a IA

• Indique claramente qual arquivo deve ser modificado ou criado pela IA. Quanto mais específico você for nas instruções, menor será a chance dela alterar algo incorretamente.

Isolamento das Funcionalidades

• Utilize uma arquitetura organizada por comportamento para isolar funcionalidades. Isso impede que mudanças em um comportamento afetem outros componentes do sistema.

Segurança no Desenvolvimento

• Adote práticas seguras direcionando sempre as operações críticas ao back end (client-server). Isso protege informações sensíveis e mantém a integridade da aplicação.

Estrutura do Frontend e Backend

Conceitos Básicos

• O servidor é responsável pelo backend, enquanto o frontend não deve controlar regras de negócio. Ele apenas captura as intenções dos usuários através de cliques e interações.

• É crucial nunca expor chaves no frontend, pois isso permitiria acesso não autorizado a informações sensíveis.

Abordagem para Resolução de Problemas

• O apresentador compartilha um apanhado dos problemas comuns enfrentados na plataforma Vibe Coding e suas respectivas soluções.

• A metodologia prática será demonstrada, começando pela escrita de uma "spec" que descreve o projeto em desenvolvimento.

Criação da Spec

Definição da Spec

• A "spec" é um documento que explica ao Cloud o projeto em questão, listando páginas e componentes da aplicação.

• Um exemplo dado é um chat de AI que permite interação com diferentes modelos de AI, detalhando comportamentos como envio de mensagens e controle do streaming.

Quebra da Spec em Tarefas

• Após criar a spec, um comando chamado "break" é utilizado para dividir o documento em várias tarefas menores.

• Cada comportamento listado na spec se transforma em uma tarefa específica (ou "issue") a ser implementada.

Implementação das Tarefas

Prototipagem Inicial

• As primeiras tarefas focam na criação do protótipo do frontend, sem funcionalidade inicial; apenas a interface visual é desenvolvida.

• Uma vez validado o protótipo, inicia-se a implementação das funcionalidades reais.

Planejamento das Tarefas

• Após quebrar as tarefas, utiliza-se o comando "plan" para pesquisar trechos reutilizáveis no código existente ou documentações externas.

• Essa etapa visa evitar duplicação desnecessária de código e garantir que padrões comprovados sejam seguidos durante a implementação.

Detalhamento das Tarefas

Descrição das Tarefas

• Cada tarefa contém descrições detalhadas sobre cenários esperados (caminho feliz), possíveis erros e requisitos específicos para cada cenário.

• Informações sobre tabelas do banco de dados necessárias são incluídas nas descrições, assim como arquivos que precisam ser criados ou modificados.

Planejamento e Execução com IA

Importância do Planejamento

• O planejamento é essencial, resultando em uma lista de tarefas clara que orienta as ações a serem tomadas.

• A IA executa apenas o que foi solicitado, evitando alterações indesejadas em arquivos não especificados.

Controle sobre a IA

• É crucial fornecer instruções detalhadas para evitar que a IA altere arquivos errados ou crie novos sem autorização.

• Após o planejamento, a execução é realizada através de comandos específicos, garantindo que as tarefas sejam implementadas conforme o planejado.

Agentes e Skills na Implementação

• Cada agente possui habilidades específicas para diferentes camadas do projeto, como banco de dados e front-end.

• A documentação das regras e descrições dos arquivos é fundamental para guiar os agentes durante a implementação.

Documentação e Melhores Práticas

• Manter uma pasta de referências com documentações ajuda a garantir que os agentes sigam as melhores práticas do projeto.

• Uma boa documentação organiza o projeto e evita confusões sobre onde estão os arquivos necessários.

Garantindo Qualidade no Código

• Seguir padrões arquiteturais definidos ajuda a manter um código limpo e organizado, evitando problemas comuns na implementação da IA.

• O processo apresentado resolve problemas típicos da IA ao dividir projetos grandes em tarefas menores, prevenindo engasgos durante a execução.

Processo de Desenvolvimento de Código Profissional

Estruturação do Projeto

• O processo começa com a escrita de uma especificação (spec), que inclui a página, o comportamento e o componente do projeto.

• Após a criação da spec, ela é dividida em tarefas menores. Antes de implementar cada tarefa, realiza-se um planejamento que envolve pesquisa na base de código existente e fora dela.

Execução e Manutenção

• A execução das tarefas utiliza agentes e habilidades especializadas para garantir que o software siga a arquitetura planejada, resultando em um código mais organizado e fácil de manter.

• É importante ter documentos de apoio com regras claras sobre arquitetura e design para assegurar a qualidade do projeto.

Importância da Organização

• Projetos complexos exigem uma estrutura organizada; caso contrário, problemas podem surgir que são difíceis ou impossíveis de resolver. A falta de organização pode levar à necessidade de reescrever todo o código.

Adaptação do Workflow

• Compreender os fundamentos discutidos permite adaptar o processo ao contexto específico dos projetos individuais.

Introdução ao Epic New

• O Epic New é um novo projeto que oferece educação através do Epic Learn, onde aulas gravadas e ao vivo ajudam na implementação prática dos conceitos discutidos.

• O Epic Builder fornece um conjunto de habilidades, agentes e prompts para utilizar o mesmo workflow apresentado no vídeo sem precisar recriar tudo do zero.

Conclusão

• Para explorar mais sobre o Epic New, há um link disponível na descrição do vídeo para criar uma conta gratuita e conhecer melhor a plataforma.