Vibe Coding: o superpoder que faltava para UX Designers

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 tela
• Personagem jogável
• Um power up
• Movimentos via teclado
• Personagem empurrar caixas para bloquear a visão dos inimigos
• Inimigos inspirados nos movimentos do xadrez
• Progressão de níveis
• Condição de vitória
• Versão responsiva
• Editor de níveis
• Sistema 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!

chess-hide-and-seek

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