Fluxo de trabalho com Claude

Veja como fazer vibe coding com Claude em um aplicativo pequeno

A maneira mais fácil de perder o controle de um projeto de vibe coding é pedir um aplicativo inteiro de uma vez. Comece com uma tela ou um comportamento, diga ao Claude o que deve permanecer inalterado e peça uma forma de testar o resultado. O Vibe Code ajuda você a transformar essa ideia em um prompt inicial focado.

Revise o código gerado antes de usá-lo
Visual da página inicial do Vibe Code

a dificuldade desse cenário

Um pedido vago pode produzir uma prévia convincente sem o comportamento de que você precisa. Estes três pontos de partida mostram quando um pedido mais específico ao Claude ajuda — e quando outro fluxo de trabalho pode ser mais adequado.

Quem está criando pela primeira vez

Você consegue descrever uma lista de tarefas, mas ainda não sabe como pedir ao Claude para lidar com o estado, telas vazias ou persistência. Comece com uma interação funcional e peça uma explicação simples de cada arquivo antes de adicionar funcionalidades.

Se você prefere sugestões ao lado do código que já está editando, o guia do Copilot descreve essa abordagem centrada no editor.

como fazer vibe coding com Copilot

Designer testando um fluxo

Seu mockup parece correto, mas uma tela estática não mostra o que acontece quando um campo fica em branco ou uma ação falha. Peça ao Claude para implementar a interação e listar os estados que você deve verificar.

Para comparar outro modelo conversacional durante a fase de ideias, consulte o guia do Gemini.

vibe coding com Gemini

Desenvolvedor ampliando um projeto

Você já tem os arquivos e quer adicionar um filtro sem reescrever o aplicativo. Forneça apenas os componentes relevantes, descreva o comportamento atual e peça ao Claude para identificar os arquivos afetados antes de propor alterações.

Se a prioridade é fazer alterações dentro do seu editor, o guia do Copilot explica como manter esse fluxo de trabalho alinhado aos arquivos atuais.

como fazer vibe coding com Copilot

3 fluxos de trabalho concretos

Use a coluna da esquerda para identificar um pedido pouco específico. A coluna da direita dá ao Claude uma tarefa delimitada e um resultado observável. Cada fluxo de trabalho inclui um pedido de implementação e uma verificação posterior.

Pedido sem escopo definido Fluxo de trabalho delimitado do Claude
Nova tela · criar “Crie um aplicativo de produtividade para mim.” O público, a tela e as ações essenciais não estão definidos. “Crie uma única tela de lista de tarefas com ações para adicionar, concluir e excluir. Mantenha a interface utilizável em um celular com tela estreita.”
Nova tela · verificar Aceitar uma captura de tela como prova de que os controles funcionam. Solicitar testes manuais que cubram uma lista vazia, uma tarefa concluída e a exclusão após atualizar a página.
Aplicativo existente · alterar “Melhore meu aplicativo.” Claude não tem limites definidos para o que pode substituir. Forneça os arquivos relevantes e peça um filtro de status, preservando o armazenamento atual das tarefas e o layout.
Aplicativo existente · verificar Aplicar uma reformulação extensa sem inspecionar as diferenças. Solicite um resumo das alterações arquivo por arquivo e, depois, teste o comportamento existente e o novo filtro.
Correção de bug · investigar “Não funciona.” Não há uma falha reproduzível para diagnosticar. Forneça a mensagem de erro, as etapas para reproduzir a falha, o comportamento esperado e o menor trecho de código relevante.
Correção de bug · verificar Presumir que uma explicação plausível significa que o bug foi corrigido. Peça ao Claude a causa provável, uma correção mínima e um teste de regressão que você possa executar.

exemplo de resultado

Veja o que uma resposta útil a um pedido de lista de tarefas poderia conter. Estes são exemplos de texto ilustrativos, não uma afirmação de que algum prompt tenha sido executado ou de que seu código tenha sido verificado.

Primeira versão

Uma resposta com limites claros

Exemplo de resposta: “Vou criar uma tela de lista de tarefas com ações para adicionar, concluir e excluir. As tarefas serão mantidas no armazenamento local. Não vou adicionar contas, compartilhamento nem um servidor. Depois da implementação, explicarei a lógica de estado e armazenamento.” Esses limites tornam o primeiro resultado de vibe coding mais fácil de avaliar do que uma proposta de aplicativo muito abrangente.

  • Confira se cada ação solicitada aparece na implementação, não apenas na descrição.
  • Abra a tela em uma largura reduzida e teste-a com uma lista vazia.

Revisão

Um pedido de ajuste baseado no comportamento observado

Exemplo de pedido de ajuste: “Depois de atualizar a página, as tarefas concluídas aparecem como não concluídas. Mantenha o layout atual e corrija apenas a persistência. Diga qual valor armazenado estava faltando e como verificar a correção.” Isso apresenta ao Claude uma falha específica e limita a alteração. Ao fazer vibe coding em etapas, descreva o que você observou em vez de pedir uma melhoria genérica.

  • Compare os arquivos alterados com a versão anterior.
  • Atualize a página com tarefas concluídas e não concluídas.

Entrega

Um resultado que outra pessoa pode testar

Exemplo de entrega: “A lista de tarefas permite adicionar, concluir e excluir tarefas. Execute o projeto usando o comando local documentado e teste uma entrada vazia, um item concluído após atualizar a página e a exclusão de um item. A persistência usa o armazenamento do navegador; os dados não acompanharão o usuário em outro navegador.” Uma boa entrega de vibe coding apresenta uma limitação com a mesma clareza que apresenta uma funcionalidade.

  • Mantenha as instruções de configuração junto dos arquivos que elas descrevem.
  • Trate a lista de testes como tarefas a executar, não como prova de que os testes passaram.

observações de conformidade

O Claude pode propor código, mas uma explicação fácil de entender não comprova que ele é seguro ou correto. Não inclua em um prompt segredos, registros privados de clientes nem código que você não tem permissão para compartilhar. Verifique as dependências e licenças, examine como as entradas são tratadas e teste o comportamento real antes de publicar. Para dados sensíveis ou um aplicativo acessível ao público, providencie uma análise de segurança feita por um profissional qualificado. Use Vibe Code para começar com uma solicitação de escopo delimitado e mantenha uma pessoa responsável pelo resultado.

Revise o código antes que alguém dependa dele

  • Remova informações sensíveis dos prompts
  • Teste o comportamento e examine os arquivos alterados
  • Revise a segurança antes de publicar
Experimente um prompt com escopo delimitado

Perguntas frequentes sobre o cenário

Peça uma tela ou um comportamento com um critério de sucesso verificável, como uma lista de tarefas que mantém os itens após atualizar a página. Defina o que está fora do escopo e peça ao Claude que explique a implementação e sugira testes manuais. Uma primeira solicitação pequena facilita a avaliação do resultado de vibe coding.

Você pode começar descrevendo a interface e seu comportamento em linguagem do dia a dia. Ainda assim, é preciso executar o resultado, observar as falhas e perguntar sobre o código que você não entende. Se outras pessoas vão depender do projeto, peça ajuda para revisar a implementação em vez de presumir que uma prévia funcionando é suficiente.

Diga ao Claude exatamente o que você fez, o que aconteceu e o que esperava que acontecesse. Inclua a mensagem de erro ou o arquivo relevante, se tiver, e peça uma alteração mínima que preserve o que já funciona. Execute novamente tanto o teste que falhou quanto um teste do comportamento que já funcionava.

Ele pode produzir uma primeira versão substancial, mas um único prompt não comprova que todas as interações, dependências e situações excepcionais funcionam. Divida o aplicativo em partes que possam ser testadas e revise cada adição. Assim, você terá um retorno mais claro quando uma iteração de vibe coding der errado.

Execute o projeto, inspecione os arquivos alterados e as dependências, e teste o tratamento de entradas, o armazenamento e as situações de falha. Remova informações secretas e dados privados de exemplo tanto do projeto quanto do histórico de prompts. Se o projeto lidar com informações confidenciais, solicite uma análise de segurança adequada antes de lançá-lo.

Comece a criar
Comece a criar