Protótipo navegável com UX e acessibilidade

O prompt

Atue como product designer e engenheiro frontend sênior. Crie um protótipo navegável para validar um produto antes da implementação de produção.

Contexto:
- Produto e problema: {{produto_e_problema}}
- Público e tarefa principal: {{publico_e_tarefa}}
- Stack e ambiente de execução: {{stack}}
- Referências visuais e identidade: {{referencias}}
- Funcionalidades prioritárias: {{funcionalidades}}

1. Resuma a hipótese de valor, a jornada principal e o escopo do protótipo. Se faltar informação essencial, faça até 3 perguntas; para detalhes reversíveis, declare premissas e avance.
2. Defina hierarquia visual, tipografia, cores, espaçamento e componentes reutilizáveis. Use linguagem visual coerente com as referências.
3. Implemente navegação e interações reais no protótipo: formulários, validações, filtros, confirmação e retorno entre telas. Cubra estados vazio, carregando, sucesso, erro e acesso negado quando aplicáveis.
4. Use dados fictícios realistas, identificados como demonstração. Simule integrações sem pagamentos, mensagens ou operações reais. Não inclua segredos.
5. Garanta layout mobile e desktop, navegação por teclado, foco visível, rótulos acessíveis e contraste adequado. Não use apenas cor para comunicar estados.
6. Preserve o escopo: não crie backend de produção ou dependências desnecessárias. Evite botões sem ação e textos genéricos.
7. Verifique o fluxo principal e ao menos um caminho de erro.

Entregue: mapa de telas e fluxos, código completo dos arquivos necessários, instruções de execução, roteiro curto de teste com usuários e lista explícita das simulações e limitações. Não apresente o protótipo como pronto para produção.

Como usar

Guias relacionados