Cria e revisa fluxos, wireframes textuais, estados de tela, microcopy e critérios de UX para produto digital antes do desenvolvimento.
Antes → Depois · resultado real
O mesmo pedido, com e sem a skill.
SaaS de gestão de condomínios: a feature da vez é o morador pagar a segunda via por Pix ou boleto no portal. O time de design é uma pessoa, o dev cobra spec completa e a última tela só foi aprovada na quarta rodada de feedback — sempre pelo mesmo motivo: 'faltou o caso de erro'.
Quem manda · Designer solo que cansou de ouvir 'e quando o Pix expira?' depois da entrega.
Antes · pedido improvisado
“desenha a tela de pagamento por Pix do portal do morador”
O que a IA devolve
Tela: fundo clean, card central com QR Code, botão verde 'Pay Now' embaixo e ilustração 3D de moedas flutuando. UI moderna, estilo glassmorphism! 100% acessível e conforme WCAG. Quer que eu gere em outras paletas de cor?
Por que é fraco · Uma tela bonita do caminho feliz: sem Pix expirado, sem erro de geração, sem boleto, com botão em inglês e uma promessa de 'WCAG 100%' que ninguém auditou — o dev devolve com 14 perguntas e nasce a quinta rodada de feedback.
Depois · com a skill
O comando
Use Design UX para Fluxos e Telas.
Produto: portal do morador (web responsivo) de um SaaS de condomínios. Feature: pagar segunda via por Pix ou boleto.
Usuário: morador adulto, uso esporádico, maioria pelo celular.
Integrações: gateway de pagamento ainda NÃO definido. Regra de multa/juros vem da administradora.
Quero o fluxo completo com estados e recuperação, microcopy PT-BR, checklist de acessibilidade, nota LGPD e critérios de aceite pro Jira.
O que a IA devolve
Toca nos 4 pins
1. Contexto e objetivo: morador quita a segunda via sem ligar pra administradora. Métrica: % de segundas vias pagas pelo portal. Assumido: gateway a definir — tudo que depende dele está marcado como pergunta aberta.
2. Usuário e JTBD: "Quando recebo o aviso de boleto vencido, quero gerar e pagar a segunda via na hora, para não acumular multa nem depender do horário da administradora."
3. Fluxo principal: login → fatura em aberto → 'Gerar segunda via' → escolhe Pix ou boleto → confere valor atualizado (multa/juros discriminados) → paga → status atualiza → recibo.
Caminhos alternativos: (a) fatura já paga → mostra recibo, não cobra de novo; (b) valor em disputa → canal da administradora; (c) Pix expirado → gerar novo código em 1 toque.
4. Telas (objetivo · ação primária · dados):
Fatura em aberto: entender o valor · [Gerar segunda via] · competência, vencimento original, multa/juros discriminados (regra vem da administradora — Assumido).
Pagamento Pix: pagar agora · [Copiar código Pix] · QR code + copia-e-cola + prazo de expiração visível.
Pagamento boleto: pagar no banco · [Baixar boleto] e [Copiar linha digitável] · novo vencimento explícito.
Carregando: esqueleto da fatura, nunca tela branca.
Pagamento pendente: "Pagamento ainda não identificado. Isso pode levar alguns minutos. Você pode atualizar o status ou falar com a administradora."
Erro de geração: mensagem sem culpa no usuário, opção de tentar de novo e canal de suporte.
Sessão expirada: volta ao login preservando a fatura escolhida.
6. Microcopy (PT-BR, sem culpa no usuário): 'Copiar código Pix', 'Baixar boleto', 'Atualizar status'. Nada de 'Pay Now', nada de 'Erro 500' na cara do morador.
7. Acessibilidade (checklist, não promessa): contraste mínimo nos estados de status; código Pix copiável por botão (não só QR); foco visível; erros anunciados pra leitor de tela; área de toque confortável no mobile.
8. LGPD: a tela mostra só o necessário (unidade, competência, valor). Comprovante baixado não expõe dados de outros condôminos.
9. Critérios de aceite (Jira):
Dado um Pix expirado, quando o morador tocar em 'Gerar novo código', então um código válido aparece sem refazer o fluxo.
Dado pagamento aprovado, o status muda sem o morador recarregar a página.
10. Perguntas abertas (antes da sprint): qual gateway e qual prazo de expiração do Pix? Multa/juros calculados pelo portal ou pela administradora? Existe conciliação automática? Notificação de confirmação entra nesta fase?
Por que ganha · Cobre o que sempre volta na rodada de feedback — Pix expirado, fatura já paga, erro de geração — com microcopy pronta em PT-BR, acessibilidade como checklist (não como promessa) e critérios de aceite que o dev testa sem perguntar nada.
A tela bonita com botão 'Pay Now' virou fluxo com Pix expirado, fatura já paga e critérios de aceite — a quinta rodada de feedback morreu antes de nascer.
antes ~4 rodadas de feedback (uma semana cada) → depois ~45min refinando estados e microcopy antes do handoff
