---
id: ux-create-wireframe
agent: ux-design-expert
title: Criar wireframes e fluxos de interação
inputs: [personas, mapa de necessidades, story/spec, fidelidade desejada]
outputs: [wireframes, fluxo de interação, mapeamento tela→AC]
elicit: false
modes: [interactive, yolo]
---

# Criar wireframes e fluxos de interação

**Objetivo:** materializar a pesquisa em estrutura e fluxo de baixa fidelidade — barato de mudar,
fácil de testar — antes de qualquer polimento visual.

**Pré-condições:**
- Existe pesquisa de usuário (personas + necessidades) da task `ux-user-research`, OU as
  necessidades estão explícitas na story. Se ninguém validou o usuário, **sinalize** que o wireframe
  parte de hipótese.
- A story/spec define as telas/fluxos no escopo. Sem isso, **pare** — não invento telas.

## Passos

1. **Liste as telas e os estados** que a story exige (vazio, carregando, erro, sucesso, sem
   permissão). Estado não é detalhe — é metade da experiência.
2. **Desenhe o fluxo de interação** ligando as telas: entrada, decisões do usuário, caminhos de erro
   e de saída. Cada passo do fluxo resolve uma necessidade da persona.
3. **Esboce cada tela na fidelidade pedida** (baixa = blocos e hierarquia; média = layout e
   conteúdo real). Foque em estrutura, hierarquia e affordance — não em cor nem polimento.
4. **Embuta a acessibilidade desde o esboço:** ordem de foco/tab, alvos de toque, hierarquia
   semântica de cabeçalhos, alternativa textual para conteúdo visual. A11y não é camada posterior.
5. **Mapeie cada tela/fluxo ao AC** da story que ele atende. Tela que não rastreia a um AC sai do
   wireframe — é escopo inventado.
6. **Registre os wireframes** em `docs/stories/{epic}/wireframes/` (ou link na seção de UX da story)
   com legenda de estados e do fluxo.
7. **Roteie para validação:** wireframe pronto vai para revisão com o usuário/stakeholder e alimenta
   a `create-front-end-spec`. Itero com o feedback antes de detalhar.

## Critério de pronto (DoD)

- [ ] Todas as telas e estados (vazio/carregando/erro/sucesso) esboçados
- [ ] Fluxo de interação completo, incluindo caminhos de erro
- [ ] Considerações de acessibilidade marcadas em cada tela (foco, semântica, alvos)
- [ ] Cada tela/fluxo mapeado a um AC da story
- [ ] Wireframes registrados e prontos para validação/iteração

## Falha / recuperação

- **Falta pesquisa de usuário** → produzo wireframe marcado como hipótese e priorizo validação antes
  de avançar para a spec.
- **A story não cobre um fluxo necessário** (ex.: estado de erro não especificado) → paro, registro a
  lacuna e devolvo ao @sm/@po; não invento o requisito.
- **Decisão de stack/framework de frontend aparece** (SPA vs SSR, biblioteca) → delego à Aria
  (@architect); eu trago só a lente de UX.