PROMPTS PARA UX (3 DE 4)
Prompts para inspirar e prototipar.
Esse artigo faz parte da série Biblioteca de Prompts para UX Design: um projeto para ajudar a sistematizar o uso de IA e sair da teoria para alcançar a prática.
Acesse as outras bibliotecas aqui:
0. Introdução: O que será que ainda não foi dito sobre IA?
1. 🧭 Descobrir ↗
2. 🎯 Definir ↗
3. 🧪 Desenvolver (Você está aqui)
4. 🚀 Entregar ↗
Índice
Inspiração Visual
- 3.1 Análise de Referências de UI/UX Premiadas3.2 Benchmark Visual3.3 Exploração de Tendências de Motion e Microinterações
Prototipação
Inspiração Visual
3.1 Análise de Referências de UI/UX Premiadas
Quando usar
- Quando o time precisa expandir repertório com qualidade e intençãoAo buscar inspiração com critério para solucionar um desafio de interface ou experiênciaAntes de iniciar um projeto visual, redesign ou lançamento de MVPQuando você quer aprender com os melhores — sem copiar, mas traduzir para o seu contextoAo justificar escolhas de design com base em boas práticas reconhecidas
Por que usar
- Treina olhar crítico e sensível, indo além do “tá bonito”Ensina o porquê do impacto de uma boa solução (fluxo, emoção, detalhe)Mostra como excelência é construída com base em intenção, técnica e cuidadoAbre caminho para traduzir padrões de excelência para sua realidade de produto
Prompt
Escolha uma ou mais interfaces de UI/UX reconhecidas por premiações (ex: Awwwards, FWA, Webby, Red Dot, iF Design, etc.) ou destaque no mercado referentes a [insira o contexto]
Para cada referência analisada, responda:
1. Contexto: — Qual é o produto, serviço ou site?
- Qual foi o prêmio ou destaque recebido?
2. Experiência do usuário (UX):
- Quais comportamentos e necessidades do usuário essa interface atende de forma exemplar?
- Há fluidez, clareza, empatia ou inovação na jornada?
- Como o fluxo conduz à ação com intenção e cuidado?
3. Interface (UI):
- Quais elementos visuais se destacam (tipografia, paleta, contraste, hierarquia, animações)?
- Como o design equilibra estética e funcionalidade?
- Há originalidade sem sacrificar usabilidade?
4. Inovações ou boas práticas:
- O que pode ser aprendido ou adaptado para o seu contexto?
- O que essa referência faz melhor que a média?
- Como ela inspira novos caminhos ou quebra padrões comuns?
5. Crítica construtiva (opcional):
- Há pontos que poderiam ser melhorados?
- Alguma limitação de acessibilidade ou performance?
Apresente sua análise em formato estruturado (tabela, tópicos ou texto analítico)
Use linguagem clara, crítica e inspirada
3.2 Benchmark Visual
Quando usar
- Antes de começar a desenhar ou redesenhar uma interfaceQuando há um exemplo interessante, mas é preciso entender seu valor comparado ao mercadoAo justificar decisões visuais com base em boas práticas (ou evitar armadilhas comuns)
Por que usar
- Partir de algo concreto para expandir repertório de forma críticaEvitar cópias cegas, entendendo por que algo funcionaDetectar padrões de mercado, oportunidades de diferenciação ou lacunas não exploradas
Prompt
A partir do seguinte exemplo de interface ou solução visual:
[insira aqui o link, print ou descrição da referência]
Realize um benchmark visual comparativo, analisando como outros produtos ou serviços resolvem o mesmo desafio de UI/UX
Siga os passos:
1. Descreva brevemente o exemplo-base:
- Qual é o contexto? (produto, página, função, componente)
- O que chama atenção visualmente?
- Qual o objetivo da interface nesse ponto?
- Qual é a hierarquia visual?
- Qual é o tom de voz?
- Existe algum padrão de persuasão?
Se sim, qual?
2. Busque ao menos 3 a 5 referências visuais comparáveis, de concorrentes diretos ou indiretos, nacionais e internacionais
3. Para cada referência, analise:
- Padrões visuais usados (layout, hierarquia, cores, tipografia, ícones, ilustrações, microinterações)
- Soluções de usabilidade ou interação (fluxos, menus, feedback, acessibilidade)
- Diferenciais ou inovações
- Pontos fortes e possíveis limitações
4. Organize o benchmark em formato visual (tabela ou mural) com:
- Print da interface
- Nome da fonte ou produto
- Insights comparativos (semelhanças, oportunidades, ideias aplicáveis)
5. Finalize com uma síntese visual ou escrita:
- Quais padrões se repetem?
- O que nenhum faz bem?
- Como podemos fazer diferente ou melhor?
Use linguagem clara, visual e voltada à decisão de design
3.3 Exploração de Tendências de Motion e Microinterações
Quando usar
- Antes de projetar transições, animações ou feedbacks visuaisAo buscar encantar o usuário com sutileza e fluidezPara modernizar uma interface sem reinventar sua estruturaQuando você quer elevar a experiência além do estáticoAo justificar escolhas de interação para devs ou stakeholders com base em tendências validadas
Por que usar
- Aumenta a clareza funcional, guiando o usuário com movimentoEnriquece a experiência com respostas visuais e emocionaisRevela boas práticas de animação que equilibram estética, velocidade e propósito
Prompt
Pesquise e analise tendências atuais de motion design e microinterações aplicadas a interfaces digitais
Siga os passos:
1. Selecione ao menos 5 referências recentes de produtos, sites, apps ou sistemas que estejam utilizando motion ou microinterações de forma destacada (ex: Awwwards, Dribbble, Mobbin, LottieFiles)
2. Para cada referência, descreva:
- O tipo de interação ou animação usada (ex: transição de tela, hover, loading, feedback, gesto)
- O propósito da animação (comunicar, guiar, encantar, confirmar, suavizar)
- A estética e o comportamento (rápido, fluido, sutil, exagerado, simbólico)
- A tecnologia ou técnica provável usada (CSS, Lottie, GSAP, Framer Motion etc.)
3. Identifique padrões emergentes:
- Quais estilos ou comportamentos estão se repetindo?
- O que mudou em relação ao que era feito há 1 ou 2 anos?
- Quais soluções podem ser aplicadas ao seu projeto atual?
4. Crie um painel visual ou uma lista priorizada com:
- Inspirações aplicáveis
- Oportunidades de inovação
- Cuidados com performance, acessibilidade e contexto de uso
Use linguagem clara, crítica e com foco prático para alimentar decisões de design interativo
Prototipação
3.4 Geração Wireframe a Partir de Desenho à Mão
Quando usar
- Ao sair de uma sessão de cocriação ou design sprintQuando você quer ganhar velocidade no processo de prototipaçãoPara transformar ideias soltas em material compartilhável com o time (produto, dev, pesquisa)Quando precisa testar fluxo ou estrutura antes do refinamento visualDurante iterações rápidas com stakeholders ou usuários
Por que usar
- Transforma uma ideia visual informal em documentação funcionalAcelera o ciclo de feedback com algo que todos conseguem entender
Prompt
A partir do seguinte desenho à mão de uma interface:
[anexar imagem ou link do rascunho]
Converta esse esboço em um wireframe digital com as seguintes diretrizes:
1. Identifique e reproduza todos os elementos estruturais do desenho, mantendo:
- Hierarquia visual
- Distribuição de blocos de conteúdo
- Navegação, CTAs e fluxos indicados
2. Interprete o que não estiver explícito, com base em boas práticas de UX/UI e o contexto do produto
3. Crie o wireframe no formato de [especificar: baixa/média/alta fidelidade] para [especificar: desktop, mobile, tablet ou responsivo]
4. Inclua anotações explicativas se necessário (ex: interações, comportamento esperado de componentes, dependências técnicas)
5. Utilize linguagem visual limpa e focada na funcionalidade (sem foco estético ou branding neste momento)
O objetivo é transformar a ideia bruta em uma estrutura clara, pronta para testes, iteração ou validação com o time
3.5 Simulação de Experiência (roleplay)
Quando usar
- Há dúvidas sobre como o usuário interage com o produto ou serviçoQuer explorar cenários complexos, pouco acessíveis por métodos tradicionaisPrecisa identificar falhas invisíveis em fluxos ou atendimento
Por que usar
- Desperta insights profundos sobre comportamento e emoçãoIdentifica gaps que pesquisas e dados não capturamHumaniza a experiência, tornando decisões mais centradas no usuário
Prompt
Com base no perfil do usuário e no cenário de uso definido, realize uma simulação detalhada da experiência, interpretando o papel do usuário
Passos:
1. Defina o contexto da simulação:
- Quem é o usuário (persona ou perfil)
- Qual o objetivo da interação
- Qual o ambiente ou dispositivo usado
2. Descreva passo a passo as ações, pensamentos e emoções do usuário durante a experiência, incluindo:
- Expectativas iniciais
- Interações com a interface ou serviço
- Reações a obstáculos ou facilidades
- Momentos de frustração, encantamento ou dúvida
3. Registre insights qualitativos importantes:
- Pontos críticos da jornada
- Oportunidades para melhorar usabilidade, fluxo e comunicação
- Elementos que geram engajamento ou abandono
4. Sugira recomendações com base na simulação para aprimorar a experiência
Utilize linguagem vívida e empática para captar a riqueza da vivência do usuário
Notas sobre o uso de IA
- Verificação. Em muitos casos, as informações fornecidas pelo modelo precisam ser verificadas. IAs às vezes causam alucinações e podem confundir autores e declarações sobre um determinado assunto.
Uma IA nunca dirá que você está errado. Ou que algo não é bom o suficiente, a menos que você peça explicitamente. Seja crítico em relação aos feedbacks. Conversar com pessoas reais ainda é relevante. Isso vale para os dois lados… Modelos de IA dificilmente dirão que algo é perfeito como está, melhorias sempre serão sugeridas.
Cuidado com a discriminação. Em suas diversas formas: racial, de gênero, orientação sexual, etc. Como a sociedade é tendenciosa, a IA é tendenciosa. Este é um problema difícil e antigo, e não há uma solução única para corrigi-lo. O que podemos fazer é prestar atenção a quaisquer sinais de discriminação e tentar evitar vieses sendo mais específicos e precisos em nossos prompts.
Dicas sobre o uso dos prompts
- Sempre que for necessário entender como o modelo chegou a uma determinada conclusão, inclua no prompt:
“Explique passo a passo a cadeia de pensamento que levará às respostas para este prompt”.Quando você tiver um modelo específico da resposta desejada, inclua-o como um exemplo no prompt para a IA replicar.
Outras bibliotecas
Acesse as outras bibliotecas aqui:
- 0. Introdução: O que será que ainda não foi dito sobre IA?1. 🧭 Descobrir ↗2. 🎯 Definir ↗3. 🧪 Desenvolver (Você está aqui)4. 🚀 Entregar ↗
🧪 Desenvolver: Biblioteca de Prompts para UX Design was originally published in UX Collective 🇧🇷 on Medium, where people are continuing the conversation by highlighting and responding to this story.
