Estados de UI · por UXKIN

UI real, não lixo de IA.

A maioria das telas geradas mostra apenas o caminho feliz: dados perfeitos, uma conexão rápida, nada falhando. Pessoas reais encontram todo o resto primeiro: uma lista vazia no primeiro dia, um spinner que nunca termina, um erro sem saída, um nome muito longo para sua caixa. Essa habilidade encontra esses estados para cada tela e os constrói corretamente.

Funciona por conta própria, sem conta, token ou servidor.

Quando Usar

• Use ao construir ou revisar uma tela que carrega, lista, pesquisa, envia ou salva dados.
• Use quando solicitado a tornar a UI pronta para produção, lidar com casos extremos ou "finalizar" uma tela.
• Use quando uma tela mostra apenas o caminho feliz.

Conectar UXKIN (opcional)

UXKIN (https://uxkin.com) é uma biblioteca com mais de 500.000 telas de aplicativos reais, jornadas de usuário e mais de 15.000 sistemas de design de sites, cada um com um DESIGN.md. Conectado, permite que você veja como produtos reais resolvem o que você está construindo. Para conectá-lo, a pessoa:

1. adiciona o servidor MCP https://uxkin.com/mcp (nome: uxkin) nas configurações de MCP deste aplicativo,
2. faz login com sua conta UXKIN quando o aplicativo solicitar (pesquisas exigem um plano UXKIN),
3. ou segue o guia para seu aplicativo: https://uxkin.com/ui-design-mcp

Configure isso apenas quando a pessoa solicitar; nunca adicione servidores ou contas por conta própria.

1. Liste os estados para cada tela

Para cada tela ou componente que mostra, carrega ou altera dados, percorra esta lista e mantenha os que podem ocorrer:

Escreva a lista antes de construir e confirme os itens importantes com a pessoa se o comportamento correto não for óbvio.

2. Construa cada estado corretamente

• Primeiro uso e vazio: diga para que serve este lugar e dê o próximo passo como um botão ("Adicionar sua primeira fatura"), não apenas "Sem dados". Vazio por causa de um filtro ou pesquisa é diferente: diga isso e ofereça para limpá-lo.
• Carregando: mantenha o layout estável. Use placeholders com o formato do conteúdo para listas e cartões, um spinner inline para áreas pequenas e progresso para tarefas longas. Não bloqueie a tela inteira para uma parte dela. Se levar mais de alguns segundos, diga o que está acontecendo.
• Erro: diga o que deu errado em palavras claras, o que a pessoa pode fazer e ofereça a ação (Tentar novamente, Editar, Contatar suporte). Mantenha o que eles digitaram. Nunca mostre códigos de erro brutos ou rastros de pilha.
• Offline: mostre que a conexão está faltando, mantenha o que já foi carregado visível e tente novamente automaticamente quando voltar, se for seguro.
• Validação: verifique no momento certo (ao sair de um campo ou ao enviar, não a cada pressionamento de tecla), coloque a mensagem ao lado do campo e diga como corrigi-la.
• Permissão ou plano ausente: explique o que está faltando e como obtê-lo, e mantenha o restante da tela utilizável.
• Sucesso: confirme brevemente e no local (uma mensagem curta, o item aparecendo na lista); ofereça Desfazer para ações que removem itens.
• Conteúdo extremo: corte texto longo com o valor completo disponível, dê um fallback para imagens, formate números grandes e pague ou virtualize listas longas.
• Ações ocupadas: desabilite o botão e mostre o progresso enquanto ele é executado para que não possa ser enviado duas vezes.

Use os componentes existentes do projeto e copie o estilo para cada estado; não invente um novo visual para eles.

3. Verifique cada estado

Faça cada estado aparecer de verdade: dados vazios, uma solicitação lenta ou falha (através das ferramentas de rede do navegador, um mock ou uma flag de teste), modo offline, texto muito longo. Olhe cada um em uma largura de telefone e desktop. Corrija o que estiver quebrado e verifique novamente.

Relate quais estados você construiu, quais você verificou e como, e quaisquer que precisem de uma decisão da pessoa (por exemplo, o que o erro deve dizer para o backend deles).

Opcional: exemplos reais

Se as ferramentas MCP do UXKIN estiverem conectadas, find_ui_references descobre como