Vibe coding com o Claude: chat, Claude Code e como criar a partir do Claude

O vibe coding com o Claude funciona de três maneiras. O chat do Claude cria apps pequenos de uma página direto na conversa. O Claude Code é um agente que edita um projeto real na sua máquina ou na nuvem, para quem se sente à vontade com uma base de código. E o Claude mais um criador de apps via MCP permite construir, visualizar e publicar um app full-stack com banco de dados sem sair da conversa com o Claude. Qual escolher depende do que você está criando e de quanto da configuração você quer assumir.

Este guia cobre as três, com prompts e os limites de cada uma. Para a ideia por trás de tudo, veja o que é vibe coding.

Opção 1: chat do Claude para ferramentas pequenas

No app normal do Claude, você pode pedir algo interativo e o Claude escreve como um código que roda ao lado da conversa: uma calculadora, um treino de flashcards, um joguinho, um gráfico a partir de dados que você cola. Você muda respondendo.

Um bom prompt aqui é autossuficiente:

Crie uma ferramenta interativa em que eu cole uma lista de despesas (uma por linha, "valor, categoria") e ela mostre um gráfico de pizza por categoria e um total. Inclua uma lista de exemplo para funcionar de imediato.

Ótimo para: ferramentas rápidas de uma página que você usa ou compartilha por link, e para aprender, porque você pode pedir ao Claude para explicar cada parte.

Onde para: elas rodam dentro do ambiente do Claude. Não há banco de dados persistente seu, contas de usuário, domínio personalizado nem lugar para rodar um servidor. Quando uma ideia passa de uma página, você precisa de uma das duas próximas opções.

Opção 2: Claude Code para uma base de código real

O Claude Code é o agente de código da Anthropic. Funciona no terminal, em editores como VS Code e JetBrains, em um app desktop e na web. Você dá uma tarefa em linguagem simples, e ele lê seu projeto, edita arquivos, executa comandos e testes e mostra o que mudou. No momento em que escrevemos, ele está incluído nos planos pagos do Claude e disponível pela API; confira o site da Anthropic para os planos atuais.

Uma sessão típica de vibe coding fica assim:

Adicione uma página /bookings que liste os agendamentos do usuário atual, do mais novo para o mais antigo, com um botão de cancelar que fique desativado a menos de duas horas da aula. Use o helper de autenticação que já existe. Execute os testes quando terminar.

Ótimo para: desenvolvedores e fundadores técnicos que já têm um projeto, querem controle total da stack e topam executar e publicar por conta própria. É forte em mudanças em vários arquivos e em seguir as convenções que já existem na base de código.

Onde dá mais trabalho: você precisa de um ambiente de desenvolvimento, e o Claude Code não hospeda nada. Bancos de dados, segredos, publicação e domínios ficam por sua conta. Para uma comparação com outras ferramentas para desenvolvedores, veja Cursor vs Windsurf vs Claude Code.

Hábitos que funcionam bem com o Claude Code

• Peça um plano antes de mudanças grandes. "Descreva os passos e os arquivos que vai tocar e espere."
• Mantenha um arquivo de notas do projeto. O Claude Code lê um arquivo de memória do projeto (CLAUDE.md) com as convenções, para você não repeti-las.
• Revise o diff. Mesmo no vibe coding, dê uma olhada no que mudou em áreas sensíveis: autenticação, pagamentos, qualquer coisa com dados de usuários.
• Faça commits com frequência. Commits pequenos facilitam desfazer um passo ruim.

Opção 3: criar e publicar a partir do Claude com o Mythex

Se você gosta de trabalhar no Claude mas quer terminar com um app de verdade (banco de dados, logins, armazenamento de arquivos, uma URL pública), pode conectar o Claude a um criador de apps com IA via MCP, o protocolo que permite ao Claude usar ferramentas hospedadas em outro lugar. (O que é MCP explica em termos simples.)

O Mythex tem um servidor MCP. Depois de conectado, o Claude pode criar um projeto no Mythex, escrever o código em um sandbox privado na nuvem, iniciar um preview ao vivo, anexar banco de dados e armazenamento de arquivos e publicar o app. Todo resultado inclui um link para acompanhar o projeto ao vivo no Mythex.

Como conectar

1. No Mythex, abra as configurações da conta e copie a URL do MCP: https://mcp.mythex.ai/mcp.
2. No Claude, vá em Settings → Connectors → Add custom connector, cole a URL e clique em Connect.
3. Uma página do Mythex abre. Entre, se preciso, e escolha Allow access. Não há chave de API para copiar.
4. De volta ao Claude, peça o que você quer.

Qualquer pessoa pode conectar em qualquer plano; as ferramentas de sandbox exigem o Mythex Pro ($25 por mês). O uso do Claude continua no seu plano do Claude, e o tempo de sandbox, os previews e a hospedagem saem dos seus créditos do Mythex. O passo a passo completo está em criar apps do Mythex a partir do Claude, Cursor ou Codex.

Um primeiro prompt para testar

Usando o Mythex, crie um novo projeto: um CRM simples para o meu pequeno estúdio de design. Contatos com nome, empresa, e-mail, telefone, etapa (lead, ativo, antigo) e observações. Uma visão em quadro por etapa onde eu possa arrastar contatos entre colunas e uma caixa de busca. Adicione um banco de dados para os dados persistirem e um login para que só eu veja. Inicie o preview e me envie o link quando estiver rodando.

Depois itere na mesma conversa, uma mudança por vez:

No projeto do Mythex, adicione uma data de "próximo acompanhamento" aos contatos e, na tela inicial, uma lista dos acompanhamentos desta semana. Confira no preview.

Publique o CRM e me dê a URL ao vivo.

Ótimo para: quem pensa melhor no Claude e quer o resultado hospedado, com banco de dados, sem configurar servidores. Você também pode alternar: começar no Claude e continuar no chat do Mythex, ou o contrário, porque é o mesmo projeto.

Qual você deve usar?

Dicas de prompt que pesam mais com o Claude

O Claude segue instruções detalhadas de perto, o que vale para o bem e para o mal.

• Diga o que não mudar. "Mantenha o layout e as cores; mude só a validação do formulário."
• Dê uma definição de pronto. "Pronto significa que um novo contato é salvo, aparece no quadro e sobrevive a uma atualização da página."
• Peça que ele confira o próprio trabalho. No Claude Code, isso é executar testes; com o Mythex, é verificar o preview ao vivo ou rodar um teste no navegador.
• Peça explicações em palavras simples quando não entender uma mudança. É o jeito mais rápido de aprender o que o seu app está fazendo.

Nossa folha de prompts de vibe coding tem 30 prompts que funcionam em qualquer uma das três configurações.

Notas de segurança para as três

• Não cole chaves de API ou senhas reais em uma conversa com o Claude. Com o Mythex, os segredos vão nas configurações de segredos do projeto, e o Claude vê os nomes, mas não os valores.
• Confira quem vê o quê antes de publicar. "Um usuário logado consegue abrir os registros de outro usuário?" é a primeira pergunta a fazer.
• Revise o código sensível. O Claude programa bem, mas vibe coding significa que você não lê cada linha, então escolha as linhas que importam. Veja vibe coding é seguro?.

Se você também usa o ChatGPT, o guia complementar cobre vibe coding com o ChatGPT e o Codex. E se preferir pular a configuração, abra o criador de apps com IA e descreva seu app por lá.

Perguntas