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 pedido
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
Documento de UX com fluxo do usuário, telas, estados, microcopy, riscos, critérios de aceite e próximos testes.
Tira a feature do achismo e entrega um fluxo UX claro, revisável e pronto para alinhamento com design e engenharia.
Problema: Times começam a sprint com telas incompletas, dúvidas sobre erros, dados, acessibilidade e regras de negócio, gerando retrabalho.
Fluxo: Criar
Exemplo de pedido pronto
Desenhe um fluxo UX para uma PME que quer permitir pagamento de mensalidade por Pix e boleto em um portal do cliente.
⦿ A receita inteira · aberta
sem cadastro · sem pagar
Esta é uma das skills que a gente deixa aberta pra leitura. O arquivo abaixo é exatamente o que quem tem o catálogo completo recebe — entrada, passos, revisão e formato de saída. Use no seu assistente e adapte ao seu contexto.
---
name: "design-ux-fluxos-telas"
description: "Cria e revisa fluxos UX, wireframes textuais, estados de tela, microcopy, acessibilidade, LGPD e critérios de aceite para produtos digitais brasileiros."
---
# Design UX para Fluxos e Telas
Skill para transformar uma ideia, PRD curto, print ou fluxo existente em documentação de UX clara para produto, design e engenharia. Ajuda a reduzir retrabalho antes da sprint, sem substituir pesquisa com usuários, designer responsável, jurídico/DPO ou auditoria formal de acessibilidade.
## Quando Usar
- Antes de implementar uma feature nova em SaaS, e-commerce, marketplace, portal do cliente ou sistema interno.
- Para criar fluxo do usuário, wireframe textual ou especificação de tela a partir de briefing/PRD.
- Para revisar cadastro, checkout, onboarding, convite de usuários, dashboard, busca, pagamento ou recuperação de erro.
- Para definir estados: vazio, carregando, sucesso, erro, permissão negada, sessão expirada e dados incompletos.
- Para melhorar microcopy em PT-BR: botões, labels, ajuda, validações, alertas e mensagens de erro.
Não use para prometer conformidade legal, substituir teste com usuário real, desenhar UI visual final pixel-perfect ou decidir regra regulatória/financeira sem especialista.
## Resultado Esperado
Entregue um documento objetivo com:
- contexto, objetivo de negócio e hipótese de valor;
- usuários/JTBD e principais restrições;
- fluxo principal e caminhos alternativos;
- especificação de telas e componentes;
- estados, erros e recuperação;
- microcopy em português brasileiro;
- checklist de usabilidade, acessibilidade e LGPD;
- critérios de aceite para Jira/Linear/GitHub;
- perguntas abertas, riscos e próximos testes.
## Entradas Necessarias
Peça ou confirme, quando faltarem:
- produto, público-alvo, plataforma (web, mobile, app, admin) e objetivo da feature;
- etapa da jornada e fluxo atual, se existir;
- dados coletados, integrações, permissões e regras de negócio conhecidas;
- restrições técnicas, prazo, métricas desejadas e riscos;
- links/prints descritos de Figma, Notion, PRD, issue ou protótipo;
- contexto brasileiro relevante: CPF, CNPJ, telefone, CEP, Pix, boleto, NF-e/NFS-e, LGPD, acessibilidade.
Se informações críticas estiverem ausentes, faça até 5 perguntas. Se o usuário pedir velocidade, prossiga com suposições marcadas como “Assumido”.
## Processo
1. **Enquadre o problema**: resuma objetivo, usuário, tarefa, momento de uso, métrica e restrições. Diferencie fato, suposição e pergunta aberta.
2. **Defina JTBD**: “Quando [situação], quero [ação], para [resultado]”. Evite personas inventadas; use segmentos informados.
3. **Mapeie o fluxo**: caminho principal, entrada, decisão, confirmação, saída, volta, cancelamento e falhas. Inclua pelo menos 2 alternativas quando aplicável.
4. **Especifique telas**: para cada tela, listar objetivo, elementos, campos, validações, ações primária/secundária, navegação, permissões e dependências.
5. **Cubra estados**: vazio, carregando, sucesso, erro recuperável, erro bloqueante, timeout, sem permissão, sessão expirada, pagamento pendente/expirado quando houver.
6. **Escreva microcopy PT-BR**: botões claros (“Continuar”, “Gerar boleto”, “Copiar código Pix”), mensagens acionáveis e sem culpa no usuário.
7. **Revise heurísticas**: clareza, consistência, prevenção de erro, feedback, controle do usuário, carga cognitiva, mobile, acessibilidade e linguagem inclusiva.
8. **Cheque privacidade e risco**: minimizar dados, explicar finalidade, evitar dados sensíveis desnecessários e marcar pontos para revisão humana.
9. **Gere handoff**: critérios de aceite, métricas, eventos de analytics, perguntas para engenharia/design e próximos testes.
## Ferramentas E Artefatos
Funciona com Figma, FigJam, Miro, Notion, Google Docs, Confluence, Jira, Linear, Trello, GitHub, GitLab e VS Code. Artefatos típicos: PRD, história de usuário, wireframe textual, mapa de fluxo, especificação de tela, checklist de UX, critérios de aceite e roteiro de teste rápido.
Formato recomendado de saída:
1. Contexto e objetivo
2. Usuários e JTBD
3. Fluxo do usuário
4. Especificação de telas
5. Estados e erros
6. Microcopy
7. Acessibilidade
8. Privacidade e LGPD
9. Métricas e validação
10. Perguntas abertas
## Exemplo Brasileiro
Pedido: “Crie o fluxo para uma PME permitir pagamento de mensalidade por Pix e boleto no portal do cliente.”
Boa resposta deve incluir: login no portal, seleção da fatura, escolha Pix/boleto, confirmação, instruções de pagamento, status pendente/aprovado/expirado, opção de copiar código Pix, baixar boleto, reenviar comprovante quando aplicável, erro de geração, vencimento, conciliação pendente, recibo e contato de suporte. Microcopy exemplo: “Pagamento ainda não identificado. Isso pode levar alguns minutos. Você pode atualizar o status ou falar com o financeiro.” Deve perguntar sobre gateway, prazo de expiração do Pix, vencimento do boleto, emissão de nota, integração com ERP e política de juros/multa.
Outros casos brasileiros úteis: cadastro PJ com CNPJ e responsável legal; onboarding de SaaS B2B com convite por e-mail e permissões; checkout de e-commerce com frete por CEP; acompanhamento de NF-e/NFS-e em painel administrativo.
## Criterios De Qualidade
- Explicita suposições e perguntas quando faltam dados críticos.
- Não gera tela genérica: cada tela tem objetivo, ação primária, dados e critério de sucesso.
- Inclui fluxo principal, alternativas, estados vazios, loading, erro, sucesso e permissão quando relevante.
- Usa PT-BR natural, direto e adequado ao contexto brasileiro.
- Considera mobile, acessibilidade básica, validações, prevenção de erro e recuperação.
- Inclui critérios de aceite verificáveis para engenharia.
- Não inventa pesquisa, métricas ou regras regulatórias; marca pontos para validação.
## Cuidados, LGPD E Escalacao Humana
- Use dados fictícios ou anonimizados; não cole CPF, e-mail, telefone, dados de saúde ou financeiros reais em exemplos.
- Aplique minimização de dados: peça apenas o necessário, com finalidade clara e linguagem compreensível.
- Escale para jurídico/DPO quando houver dados sensíveis, menores, consentimento, base legal, compartilhamento com terceiros ou dúvida de LGPD.
- Escale para especialista de acessibilidade quando a entrega exigir conformidade formal WCAG/eMAG.
- Escale para financeiro/compliance em crédito, cobrança, antifraude, chargeback, Pix/boleto crítico ou integrações bancárias.
- Não declare “100% conforme LGPD/WCAG/BACEN”. Use checklist, riscos e recomendação de revisão.
- Não crie personas baseadas em estereótipos regionais, raciais, socioeconômicos, religiosos ou de saúde.
## Smoke Test
Prompt: “Desenhe um fluxo UX para uma PME que quer permitir pagamento de mensalidade por Pix e boleto em um portal do cliente.”
Passa se a resposta trouxer objetivo, usuários, fluxo principal, alternativas, estados de pagamento, erros recuperáveis, microcopy PT-BR, perguntas abertas sobre gateway/ERP/regras financeiras, checklist de acessibilidade, nota de LGPD e critérios de aceite. Falha se entregar só uma tela bonita, ignorar erro/loading, prometer conformidade legal ou inventar regra bancária.
