Frontends com Vibecoding: do prompt ao deploy

Você abre o terminal, descreve a tela que quer e ela aparece em segundos. Parece mágica. Não é.

Vibecoding é construir frontend descrevendo a intenção em linguagem natural para um agente de IA — no nosso caso, o Claude Code — que escreve e edita o código por você. O termo foi popularizado por Andrej Karpathy no início de 2025 e descreve uma mudança de papel: o humano deixa de datilografar sintaxe e passa a dirigir o resultado. Você diz o quê e por quê; a IA resolve o como.

Isso não significa abrir mão de critério. Significa o contrário. Quando a máquina escreve o código rápido, o gargalo deixa de ser a digitação e passa a ser a clareza da sua especificação e a qualidade da sua revisão. Quem especifica mal, recebe lixo bem-formatado.

O que vibecoding NÃO é

Não é "aceitar o que a IA cuspir". Não é colar código que você não entende em produção. Não é substituir o engenheiro. É um método de trabalho em que a IA assume o esforço mecânico e você assume as três funções que ela ainda não faz bem: definir o objetivo, julgar o resultado contra esse objetivo e decidir o próximo passo.

O loop de quatro tempos

Todo trabalho de vibecoding gira num ciclo curto e repetível. Internalize-o, porque ele é a unidade básica da sua produtividade.

1. 01Intenção — você descreve o resultado desejado com contexto, restrições e critérios de sucesso.
2. 02Geração — a IA escreve ou edita os arquivos do projeto.
3. 03Revisão — você roda o app, olha a tela, lê o código, audita contraste e acessibilidade.
4. 04Iteração — você aponta o que está errado ou incompleto e o ciclo recomeça, agora mais afinado.

A arte está em manter o loop curto. Peça uma coisa, veja, corrija, peça a próxima. Pedidos gigantes geram entregas gigantes que ninguém consegue revisar — e bugs se escondem no volume.

Seu papel mudou de datilógrafo para três cargos

Pense em você como uma pessoa só ocupando três cadeiras ao mesmo tempo.

• Diretor de arte — você define a estética, a hierarquia visual, a paleta com contraste adequado, a sensação que a tela deve transmitir. A IA não tem gosto; você tem.
• Product manager — você define o escopo, o público, os estados que a interface precisa cobrir (vazio, carregando, erro), o que entra e o que fica de fora.
• Revisor técnico — você lê o código gerado, testa o comportamento, verifica acessibilidade e segurança. A IA erra com confiança; sua revisão é a rede.

Quem não ocupa as três cadeiras vira só um operador de prompt. E operador de prompt entrega tela bonita que quebra no teclado, vaza no mobile e reprova em contraste.

Prompt vago versus prompt específico — o mesmo pedido, dois mundos

Veja o que acontece quando você economiza nas palavras. Abaixo, um pedido preguiçoso para uma seção de preços.

O resultado será genérico: três planos clichês, cores aleatórias, sem estado de destaque, contraste duvidoso, sem responsividade pensada. "Bonita" não é uma especificação — é uma esperança. A IA preenche os vazios com a média da internet, e a média é medíocre.

Agora o mesmo objetivo, especificado como um diretor de arte que também é PM faria

O segundo prompt não é mais longo por capricho. Cada linha remove uma decisão que a IA tomaria errado por você. Cor de marca limitada ao CTA evita poluição visual. Os estados explícitos garantem foco visível — coisa que prompts vagos sempre esquecem. O critério de contraste AA impede o cinza-claro-sobre-branco que tortura quem lê. Você não escreveu código; escreveu a especificação que torna o código previsível.

Quando vibecoding brilha

• Protótipos e provas de conceito — você valida uma ideia de interface em minutos, descarta sem dó, tenta outra.
• Landing pages e páginas de marketing — estrutura conhecida, muito CSS, pouca lógica crítica. Terreno ideal.
• Dashboards e telas de dados — tabelas, gráficos, filtros, KPIs. A IA acelera o trabalho repetitivo de layout.
• Componentes de UI — botões, modais, formulários, cartões com todos os seus estados. Pedir os estados de uma vez economiza horas.
• Refatorações visuais — "deixe consistente com este design token", "torne acessível", "unifique os espaçamentos".

Vibecoding versus codificação manual — uma comparação honesta

Repare na última linha. Os dois métodos têm gargalos diferentes, e é por isso que se complementam. Você vibecoda o frontend e revisa à mão a parte crítica.

Exercício prático

Analise e reescreva. Pegue este prompt vago: "Faça um formulário de contato legal". Primeiro, analise o que está faltando: liste ao menos seis decisões que a IA seria forçada a improvisar (stack, campos, validação, estados, contraste, responsividade). Depois, reescreva o prompt como um diretor de arte e PM, cobrindo cada lacuna que você listou.

Critérios de sucesso: o prompt reescrito (1) nomeia a stack-alvo, (2) define ao menos três tokens de design com valores concretos, (3) exige contraste WCAG AA explicitamente, (4) especifica pelo menos os estados de erro e de envio em andamento, e (5) descreve o comportamento responsivo. Se um colega lesse seu prompt e gerasse a tela, ela deveria sair praticamente como você imaginou — sem adivinhação.