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

O vibe coding com o Claude funciona de três formas. O chat do Claude cria apps pequenas de uma página diretamente na conversa. O Claude Code é um agente que edita um projeto real na sua máquina ou na cloud, para quem se sente à vontade com uma base de código. E o Claude mais um criador de apps via MCP permite criar, pré-visualizar e publicar uma app full-stack com base de dados sem sair da conversa com o Claude. Qual serve depende do que está a construir e de quanta configuração quer gerir.

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

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

Na aplicação normal do Claude, pode pedir algo interativo e o Claude escreve-o como código que corre ao lado da conversa: uma calculadora, um exercício de cartões de memória, um jogo pequeno, um gráfico a partir de dados que colar. Altera-o respondendo.

Um bom prompt aqui é autónomo:

Crie uma ferramenta interativa onde eu colo uma lista de despesas (uma por linha, “montante, categoria”) e ela mostra um gráfico circular por categoria e um total. Inclua uma lista de exemplo para funcionar logo.

Para o que é ótimo: ferramentas rápidas de uma só página que usa você mesmo ou partilha como link, e aprendizagem, porque pode pedir ao Claude que explique cada parte.

Onde para: estas correm dentro do ambiente do Claude. Não há base de dados persistente sua, nem contas de utilizador, nem domínio personalizado, e não há onde correr um servidor. Quando uma ideia ultrapassa uma página, precisa de uma das duas opções seguintes.

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

O Claude Code é o agente de programação da Anthropic. Funciona no seu terminal, em editores como o VS Code e o JetBrains, numa aplicação de ambiente de trabalho e na web. Dá-lhe uma tarefa em linguagem simples, e ele lê o seu projeto, edita ficheiros, executa comandos e testes e mostra o que mudou. Na data em que este texto foi escrito, está incluído nos planos pagos do Claude e disponível através da API; consulte o site da Anthropic para os planos atuais.

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

Acrescente uma página /bookings que liste as reservas do utilizador atual, as mais recentes primeiro, com um botão de cancelar que fique desativado menos de duas horas antes da aula. Use o auxiliar de autenticação existente. Execute os testes quando terminar.

Para o que é ótimo: programadores e fundadores técnicos que já têm um projeto, querem controlo total da stack e estão dispostos a executá-lo e implementá-lo sozinhos. É forte em alterações que envolvem vários ficheiros e em seguir as convenções que já existem numa base de código.

Onde exige mais trabalho: precisa de um ambiente de desenvolvimento, e o Claude Code não aloja nada. Bases de dados, segredos, implementação e domínios ficam a seu cargo. Para uma comparação com outras ferramentas de programação, veja Cursor vs Windsurf vs Claude Code.

Hábitos que funcionam bem com o Claude Code

• Peça um plano antes de alterações grandes. “Descreva os passos e os ficheiros que vai tocar, e depois aguarde.”
• Mantenha um ficheiro de notas do projeto. O Claude Code lê um ficheiro de memória do projeto (CLAUDE.md) com as convenções, para não as repetir.
• Reveja as diferenças. Mesmo com vibe coding, observe rapidamente o que mudou em áreas sensíveis: autenticação, pagamentos, tudo o que tenha dados de utilizadores.
• Faça commits com frequência. Commits pequenos facilitam desfazer um passo mau.

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

Se gosta de trabalhar no Claude mas quer uma app real no fim — base de dados, inícios de sessão, armazenamento de ficheiros, um URL público —, pode ligar o Claude a um criador de apps com IA através do MCP, o protocolo que permite ao Claude usar ferramentas alojadas noutro sítio. (O que é o MCP explica em termos simples.)

O Mythex tem um servidor MCP. Depois de ligado, o Claude pode criar um projeto Mythex, escrever o código num sandbox privado na cloud, iniciar uma pré-visualização em direto, anexar uma base de dados e armazenamento de ficheiros, e publicar a app. Cada resultado inclui um link para acompanhar o projeto em direto no Mythex.

Como ligar

1. No Mythex, abra as Definições da conta e copie o URL MCP: https://mcp.mythex.ai/mcp.
2. No Claude, vá a Definições → Conectores → Adicionar conector personalizado, cole o URL e clique em Ligar.
3. Abre-se uma página do Mythex. Inicie sessão se for preciso e escolha Permitir acesso. Não há nenhuma chave de API para copiar.
4. De volta ao Claude, peça o que quer.

Qualquer pessoa pode ligar em qualquer plano; as ferramentas de sandbox exigem o Mythex Pro (25 dólares por mês). A utilização do Claude fica no seu plano Claude, e o tempo de sandbox, as pré-visualizações e o alojamento saem dos seus créditos Mythex. O guia completo está em criar apps Mythex a partir do Claude, do Cursor ou do Codex.

Um primeiro prompt para experimentar

Usando o Mythex, crie um projeto novo: um CRM simples para o meu pequeno estúdio de design. Contactos com nome, empresa, email, telefone, fase (potencial, ativo, anterior) e notas. Uma vista de quadro por fase onde possa arrastar contactos entre colunas, e uma caixa de pesquisa. Acrescente uma base de dados para que os dados persistam, e um início de sessão para que só eu os veja. Inicie a pré-visualização e envie-me o link quando estiver a correr.

Depois itere na mesma conversa, uma alteração de cada vez:

No projeto Mythex, acrescente uma data de “próximo seguimento” aos contactos e uma lista no ecrã inicial com os seguimentos previstos para esta semana. Verifique na pré-visualização.

Publique o CRM e dê-me o URL em direto.

Para o que é ótimo: pessoas que pensam melhor no Claude e querem o resultado alojado, com base de dados, sem configurar servidores. Também pode alternar: comece no Claude e continue no chat do Mythex, ou o contrário, porque é o mesmo projeto.

Qual deve usar

Dicas de prompts que importam mais com o Claude

O Claude segue instruções detalhadas de perto, o que tem vantagens e desvantagens.

• Diga o que não deve mudar. “Mantenha o layout e as cores; altere apenas a validação do formulário.”
• Dê-lhe uma definição de concluído. “Concluído significa que um novo contacto é guardado, aparece no quadro e continua lá depois de atualizar.”
• Peça-lhe que verifique o próprio trabalho. No Claude Code, isso significa executar testes; com o Mythex, significa verificar a pré-visualização em direto ou executar um teste no navegador.
• Peça explicações em palavras simples quando não perceber uma alteração. É a forma mais rápida de perceber o que a sua app está a fazer.

A nossa folha de consulta de prompts de vibe coding tem 30 prompts que funcionam nas três configurações.

Notas de segurança para as três

• Não cole chaves de API reais nem palavras-passe numa conversa com o Claude. No Mythex, os segredos vão para as definições de segredos do projeto, e o Claude vê os nomes deles mas não os valores.
• Verifique quem pode ver o quê antes de publicar. “Um utilizador com sessão iniciada consegue abrir os registos de outro utilizador?” é a primeira pergunta a fazer.
• Reveja o código sensível. O Claude é um programador capaz, mas o vibe coding significa que não está a ler cada linha, por isso escolha as linhas que importam. Veja o vibe coding é seguro?.

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

Perguntas