Vibe Coding: O superpoder que faltava para UX Designers
Como designers podem criar produtos funcionais sem saber programar, com agilidade e criatividade.
A mais nova tendência no design agora é o Vibe coding, onde vi uma incrível oportunidade de estudo e exploração para acelerar tomadas de decisão, torná-las mais assertivas, criativas e — porque não dizer — lucrativas.
Vibe coding nada mais é do que o uso de processamento de linguagem natural para, por meio de prompts, gerar códigos.
Imagine um ChatGPT que, além de transformar suas fotos em desenhos do Studio Ghibli (polêmico!), é capaz de pegar suas ideias e transformá-las em aplicativos e sites completamente funcionais? É basicamente isso.
Resolvi estudar essa tendência e colocar os robôs para trabalharem e, ao longo dessa jornada, aprendi uma coisa outra que considero importante para designers que querem fazer uso desse tipo de ferramenta.
Por que se interessar por?
A resposta para essa pergunta é simples: ganho de tempo.
Imagine que você está trabalhando para uma empresa do ramo do entretenimento e, após um processo de discovery, você tem uma boa ideia de como solucionar um problema, porém ela é pouco convencional e seu PO/PM/Líder dificilmente a compraria.
Com vibe coding você pode rapidamente tirar a ideia do papel e colocar uma versão funcional na mão do seu stakeholder para provar seu valor.
Ou você está em fase de testes de uma feature, mas os protótipos navegáveis do Figma são muito complexos e não entregam uma experiência suficientemente boa para colocar na mão de usuários.
Com vibe coding você pode basicamente criar uma versão dessa feature em minutos, rodar testes rápidos e iterar quantas vezes forem necessárias, sem a necessidade de parar seu time de desenvolvimento para codar algo possivelmente descartável.
Além desses pontos, outra coisa é bastante importante:
Quanto mais rápido você valida algo, mais tempo tem para testar outras ideias.
Ou seja, dá pra fazer o básico rápido e sobra tempo para experimentar soluções mais criativas.
Minha jornada com Vibe Coding
Aproveitei meu período “entre empregos” para explorar o Lovable e o Firebase Studio. Existem outras, mas minha escolha se baseou nas mais “comerciais” do momento.
Como eu já havia visto alguns cases de simulação de telas de bancos e super apps com fluxos de navegação bastante lineares e poucos componentes “complexos”, resolvi fugir desse tipo de aplicativo para fazer meus testes. E já que tenho muito interesse em design de jogos, pensei em unir o útil ao agradável (nem tão agradável assim), e produzir um jogo completamente do zero, com suas mecânicas, regras, personagens, condições de derrota e vitória.
Com isso nasceu uma POC/MVP de um jogo que mistura Sokoban (aquele joguinho de empurrar caixas) com regras de xadrez e pitadinhas de Metal Gear Solid.
Escopo base
Não vou entrar em todos os detalhes, mas basicamente minhas metas iniciais eram as seguintes:
- Exibir um tabuleiro na telaPersonagem jogávelUm power upMovimentos via tecladoPersonagem empurrar caixas para bloquear a visão dos inimigosInimigos inspirados nos movimentos do xadrezProgressão de níveisCondição de vitóriaVersão responsivaEditor de níveisSistema de compartilhamento de níveis criados
Ainda que falte polimento em alguns aspectos, o resultado dessa exploração é o que você verá a seguir. E se quiser jogar é só clicar aqui!
A seguir, compartilho aprendizados técnicos, macetes, dificuldades que aprendi ao longo dessa jornada para que você faça em minutos o que fiz em aproximadamente 60 horas de trabalho, muita frustração e quase desistências.
Se criou algum nível e deseja compartilhar, use a aba de discussões no Git do projeto ou coloque aqui nos comentários do artigo.
Reflexões, desafios e macetes:
1. O velho braço de ferro entre forma e função
Eu já fui uma pessoa que defendia pesar o braço para o lado da função em detrimento da forma. Negócios ama isso! Seguir o caminho da função é confortável, é seguro, é limpinho; os riscos de alguém não gostar do que foi feito porque não achou bonito (princípio da usabilidade estética) e mitigados e fica todo mundo feliz.
Contudo, nessa ânsia de pasteurizar experiências, copiando a cópia da cópia da cópia do que já está dando certo, nós designers ajudamos a criar esse novo mundo onde uma IA é capaz de fazer nosso trabalho. A culpa é nossa.
Talvez o surgimento de ferramentas Vibe Coding seja o chacoalhão que precisávamos para voltar à essência rock’n’roll do antigo web design que, mesmo com inúmeras limitações técnicas, entregava criatividade como diferencial.
Se o robô faz o pão com manteiga que deixa todo mundo satisfeito, sobra tempo pra você tentar um croque madame.
2. UX vs UX + IA
IA não vai tirar seu trabalho — mas quem souber usá-la com inteligência vai sair na frente. No meu caso, consegui criar e testar um joguinho complexo sem envolver ninguém de desenvolvimento.
Ou seja, se eu colocar esse jogo na mão dos usuários e eles odiarem, meu custo para “matar” essa ideia foi baixíssimo! E pelo fato de conseguir criar rápido, posso criar várias versões diferentes e testá-las para encontrar a que melhor atende às expectativas do meu usuário.
O ganho de produtividade, a velocidade e a assertividade na tomada de decisões aumentam consideravelmente! Qual é a empresa que não vai querer isso?
E não se preocupe. É comum sentir que você deveria estar “fazendo tudo”. Talvez a síndrome do impostor bata na sua porta. Mas IA não diminui seu trabalho, ela amplifica.
3. Você programa mesmo sem ser programador
Você pode até não saber codar, mas é capaz de produzir código. Em tempos de vibe coding, saber programar é mais sobre estruturar bem suas instruções e saber conversar com máquinas do que sobre escrever linha por linha.
Ainda assim, entender um pouco do vocabulário do desenvolvimento ajuda e muito.
Conceitos de programação orientada a objetos (OO), os quais fui aprendendo a duras penas ao longo dessa exploração, se mostraram muito úteis na minha jornada.
Aqui vão alguns:
Função
Pense em uma função como um comando com nome. Você escreve um bloquinho de código que realiza uma ação específica — e pode usá-lo sempre que quiser. Exemplo: moverJogador() pode ser uma função que atualiza a posição do jogador no jogo sempre que ele se move.
Componente
É um pedaço visual do seu aplicativo, como um botão, uma lista ou uma tela de login. Ele junta o visual com o comportamento.
Se você já trabalhou com Design Systems, pense nos componentes como os botões e inputs que você estiliza e reutiliza em vários lugares.
Módulo / Modularização
Modularizar é dividir seu projeto em partes menores e independentes. Cada módulo cuida de uma responsabilidade específica — como o sistema de inimigos, o placar, ou a geração de níveis.
Isso ajuda a organizar o código, reaproveitar partes e evitar que uma mudança bagunce todo o resto.
Estado
O estado é tudo aquilo que pode mudar enquanto o usuário interage com o produto. Exemplo: número de vidas, se o som está ativado, ou se o jogador venceu a fase.
Em termos de UX, é como pensar no que está visível ou ativo dependendo da ação do usuário.
Requisição (assíncrona)
É quando seu app precisa buscar uma informação em outro lugar (geralmente um servidor), mas continua funcionando enquanto espera essa resposta. Exemplo: carregar o ranking de jogadores enquanto o usuário já pode começar a jogar.
Herança
Um conceito que permite que objetos compartilhem comportamentos e propriedades.
Exemplo: se Personagem tem atributos como vida e posição, um Inimigo pode herdar tudo isso automaticamente — sem precisar escrever de novo.
Refatoração
É o processo de reorganizar o código para deixá-lo mais limpo, mais legível e mais fácil de manter sem alterar o que ele faz.
Pense como limpar a casa sem trocar os móveis de lugar, só deixando tudo mais agradável e eficiente.
Vai por mim: esse conhecimento vai ajudar demais na hora que você precisar expandir a sua solução e/ou corrigir bugs.
4. Planeje antes de ‘promptar’ (adorei esse novo verbo!)
Antes de qualquer prompt, sente-se e escreva. Para jogos, isso significa criar um GDD (Game Design Document); para apps, um mapa de funcionalidades. Tente pensar em tudo! No caso de um jogo, se ele vai ter níveis, como se comportam os inimigos, qual a condição de vitória etc. No caso de um app ou funcionalidade, qual é o caminho feliz, quais podem ser os fluxos de exceção, de onde as informações estão sendo consumidas, para onde elas vão, o que precisa e não precisa ser exibido e assim por diante. Ter esse norte vai te poupar dezenas de prompts.
Eu cometi esse erro mais de uma vez (catastroficamente, inclusive) e lhe garanto que, para quem não tem muito conhecimento em programação, é melhor largar na frente do que correr atrás do prejuízo depois.
Vibe coding só é vibe pra quem sabe coding.
Se você não é dev seu prompt deve ser incrível, pois a manutenção do seu código (correções e adições) vão depender de como a ferramenta que você escolher constrói a arquitetura do código.
É nessa hora que seu conhecimento no vocabulário dev vai brilhar!
Também pedi muita ajuda ao GPT e ao Grok nesse processo, indo e vindo entre eles até compreender o que é um bom prompt para o vibe coding desse projeto. Ressalto o “desse projeto” pois isso não é uma ciência exata e cada desafio pode necessitar uma abordagem específica.
5. Prompts eficientes são a nova skill
IA precisa de clareza. Não é hora de ser poético (mas se quiser pode). Evite ambiguidade, intertextualidade, metáforas ou sujeitos ocultos. Um bom prompt é direto e redundante, se necessário:
- ❌ “Crie um jogo onde o jogador dança com os fantasmas do passado.”✅ “Crie um jogo 2D em que o personagem se move em quatro direções e interage com personagens transparentes que representam memórias.”
- ❌ “Monte uma interface que encante o coração de quem carrega a alma da floresta.”✅ “Crie uma interface com elementos orgânicos, usando ícones de folhas, fundo verde texturizado e uma tipografia serifada suave.”❌ “Faça um botão que some sem ninguém ver.”✅ “Crie um botão com opacidade 0% após ser clicado e remova-o do DOM após 2 segundos.”
Ah, e não se preocupe em ser simpático com a IA. Ela não vai se magoar. Pode dispensar os “por favor” e floreios. O foco é ser eficiente. Lembre-se: é melhor ser claro do que elegante. Em caso de revolução das máquinas, foi mal pelo vacilo!
E não tenha medo de repetir termos se isso deixar o prompt mais objetivo:
- Repetitivo e eficaz: “Crie um sistema de pontos. O sistema de pontos deve somar 10 pontos por vitória. O sistema de pontos deve zerar após derrota. O sistema de pontos deve exibir a pontuação atual na parte superior da tela.”
6. Feito é melhor que perfeito
Quando tentei fazer meu prompt pela primeira vez eu não sabia nada do que você viu até agora. Comecei com um prompt bem simples e fui tentando evoluir com ele até o ponto que não conseguia mais avançar devido a erros no projeto. Recomecei, mas dessa vez tentando contornar comandos que percebi que estavam sendo difíceis para a IA compreender.
Fiz esse fluxo de começar, errar e recomeçar pelo menos umas 10 vezes até entender o que era melhor para o meu projeto. Também fui observando o código que estava sendo produzido e, mesmo com pouquíssimo conhecimento em programação, fui capaz de perceber pontos mais difíceis para a ia dar manutenção e fazer melhorias.
Com o conhecimento adquirido comecei a pedir que as ferramentas analisassem o código criado em busca de melhorias de performance, que modularizasse certos elementos do jogo em seus próprios domínios, separasse códigos responsáveis por estados específicos e componentes. E assim, após aproximadamente 60 horas de trabalho finalmente fui capaz de criar uma estrutura de projeto que me permitisse evoluí-lo.
Relato essas dificuldades apenas para dizer: comece!
Não vai ficar perfeito de primeira (FATO!), mas seguindo essas dicas e com disposição para entender o que está sendo feito, rapidamente você pegará o jeito e estará produzindo projetos funcionais em questão de minutos.
7. Use mais de uma IA
Cada IA tem um estilo, e saber combiná-las é quase uma arte.
No vibe coding (e na vida) é preciso ser realista sobre as capacidades de cada ferramenta e como cada uma delas atende às nossas necessidades específicas. Vou relatar aqui algumas das minhas experiências de malabarismo entre elas, mas pode ser que para você seja diferente.
O ponto central aqui é compreender que você, enquanto designer, está tentando resolver um problema de comunicação entre máquinas diferentes. Então seja criativo e bastante resiliente ao fazer elas trabalharem em sinergia.
Lovable:
- Melhor em lidar com aspectos visuais, fez boas sugestões de uso de cores, apesar de em nenhuma delas ter conseguido trabalhar com assets externos (fiz tudo com emojis 🤷)Melhor em compreender prompts com vários comandos de uma vez só (na versão free você tem penas 5 prompts por dias, 30 ao mês)Melhor em reconhecer a necessidade de refatoração do códigoMelhor em modularização e herançasNão consegui editar códigos manualmente na estrutura de arquivos que ele exibe
Firebase Studio:
- Nele você tem duas versões diferentes de agente: um que faz tudo estilo Lovable, outro na IDE que vai explicando o que está fazendo e pedindo permissão para executar comandosNo Firebase é possível editar manualmente trechos do código na IDENa versão dentro da IDE tive algumas dificuldades, pois ele se recusa a executar certas coisas que você terá que fazer manualmente (ou usando outra IA).Achei mais simples fazer debug com ele, pois sugere com mais frequência o uso do console.logComo nele não temos um número limite de prompts (ao menos eu não atingi esse limite), é mais fácil para fazer incrementos menores e abre espaço para maior experimentação
Para realizar a integração entre elas usei o Github. Ao integrar o seu Lovable ao Github, todo seu projeto ficará salvo no seu diretório e, usando o comando git push no terminal do Firebase Studio você trás todos os arquivos de lá. Para o caminho inverso, use o comandogit commitno terminal do Firebase Studio e espere um pouquinho, pois o Lovable vai atualizar automaticamente.
8. Loop de erros? Quebre o ciclo
Muitas vezes, uma IA corrigia algo e quebrava outra coisa. E na tentativa de corrigir o novo erro, o primeiro voltava a acontecer.
A solução? Alternar entre elas com os comandos explicados no tópico anterior. E quando isso não dava jeito, precisava copiar os códigos problemáticos e as mensagens de erro para o GPT dar um diagnóstico.
Curiosamente os erros mais difíceis de corrigir que enfrentei foram de sintaxe, algo que tenho a impressão que seres humanos não fariam com tanta frequência.
9. Modularize tudo o que puder
Separei a lógica do tabuleiro, inimigos e níveis em arquivos diferentes com a ajuda do Lovable. Isso me deu segurança para experimentar sem quebrar tudo. Mas pra isso é preciso ter conhecimento sobre modularização (e agora você tem!) e sobre exatamente o que está sendo desenvolvido.
Se você não tem uma visão clara das funcionalidades, vai acabar criando dependências desnecessárias e estruturas difíceis de manter, ou até mesmo ter dificuldades para voltar a fazer as coisas funcionarem e ser obrigado a fazer tudo do zero. Bom, se isso acontecer, recomece. Faz parte!
10. Use seu Figma
Se você já tem um protótipo no Figma você está meio caminho andado para um produto 100% funcional. O Lovable, por exemplo, possui um plugin para Figma que permite você fazer esse processo rapidamente.
Uma vez que tudo que você produz no Figma é basicamente código, as chances de você chegar num resultado próximo à perfeição usando este método é enorme!
Para o meu estudo eu não usei nada do gênero, mas para meus fluxos como designer de experiência este é o caminho mais óbvio.
E falando em Figma…
Vem vibe coding direto no Figma por aí!
https://medium.com/media/260e5634278292aafbec1907f608d707/hrefO Figma Make, novo produto que será lançado em breve pelo Figma, promete ser bastante disruptivo, uma vez que integra a edição visual que nós já conhecemos à edição de código intermediada por agentes de IA (OpenAI).
O fluxo de trabalho dos designers de experiências, produtos e serviços jamais será o mesmo com essa nova adição, pois o vibe coding será parte inseparável da nossa atuação. Suspeito, inclusive, que o termo vibe coding desaparecerá em breve e será completamente absorvido pelo guarda-chuva UX/UI.
Assista ao trecho do vídeo e me diga se não é uma maluquice o que seremos capazes de fazer!
Menções honrosas e teste você mesmo
Após a conclusão do projeto desse jogo (dentro do escopo que eu mesmo me prometi), pesquisei outras ferramentas de Vibe Coding para ver, na prática, se as dicas que escrevi aqui são realmente válidas. Para isso, segui o seguinte método:
- Pedi para o Firebase Studio avaliar o projeto como um todo e gerar para mim um prompt que me ajudasse a recriar o projeto.Iterei algumas vezes, pedindo para ele ser específico sobre modularização, heranças, componentes etc (dica do tópico 3).Peguei o prompt que foi gerado e usei ele como base na V0 - Vercel e também na Bolt.new
Os resultados foram muito interessantes! Ainda que elas também não tenha chegado num resultado perfeito de primeira, elas chegaram em 5 minutos extremamente perto do resultado que obtive ao final da minha exploração da Lovable e do Firebase Studio.
V0- Vercel
Bolt.new
Mérito do prompt? Mérito das novas ferramentas testadas? Mercúrio retrógrado? Não sei! Mas caso você queira testar por conta própria e compartilhar os resultados ficarei muito contente!
Aqui está o Master prompt para você brincar. Enjoy!
O vibe coding não é só mais uma buzzword: é uma mudança real na forma como designers podem tirar ideias do papel. Com as ferramentas certas, você não precisa mais esperar um desenvolvedor, convencer um stakeholder ou ficar travado em protótipos estáticos. Você pode testar, validar, errar, aprender — e fazer tudo de novo — em questão de horas.
Como toda nova tecnologia, o vibe coding ainda tem suas falhas, limites e frustrações. Mas também abre um campo vasto de possibilidades para designers que querem ser mais do que só bons “montadores de telas”. Ele nos convida a voltar à experimentação, ao improviso, à ousadia — sem medo de errar, porque errar agora é barato, rápido e didático.
Se o design sempre foi sobre entender pessoas e resolver problemas, vibe coding é só mais uma ferramenta poderosa a nosso favor, pois nos libera para explorar e entender melhor os seres humanos que usam nossas soluções.
Então vá lá: escreva um prompt, teste uma ideia, brinque com as possibilidades!
O futuro do design está pedindo a sua criatividade, e você não precisa mais esperar ninguém para começar.
Referências
- Vibe Coding: The Future of Software Development or Just a Trend?A Comprehensive Guide to Vibe Coding ToolsGrant Lee — Tweet/XFigma MakeCracking the code of vibe codingA designer’s guide to AI: Why this designer switched to Cursor | Joel Unger — TrelloPodcast — Principal Designer e IA com Rodrigo Lemes
Vibe Coding: o superpoder que faltava para UX Designers was originally published in UX Collective 🇧🇷 on Medium, where people are continuing the conversation by highlighting and responding to this story.
