Padrões de design mobile que a IA precisa aprender

Peça “um app de tarefas” para qualquer IA. O resultado não é um app — é um site pequeno.

Peça para qualquer IA “criar um app de tarefas”. O resultado quase sempre é uma interface web com viewport pequeno, não um app mobile real. Sidebar no topo em vez de tabs embaixo. Modal centralizado em vez de bottom sheet. Botão de refresh em vez de pull-to-refresh. Faltam os padrões que usuários mobile esperam instintivamente.

Padrões que o Sleek ensina à IA

Navegação por tabs (bottom navigation): o padrão mais fundamental de apps mobile. 3-5 tabs na parte inferior, sempre acessíveis. A IA tende a criar sidebars ou navbars no topo, padrões web. Regras: máximo 5 tabs, ícone + label (não só ícone), tab ativa com destaque claro, área de toque mínima 44x44pt.

Bottom sheets: em vez de modals centralizados (padrão web), apps mobile usam bottom sheets que deslizam de baixo para cima. Mais natural para interação com polegar. Drag handle visível no topo, snap points (meio, cheio, fechado), dismiss por swipe down, backdrop com blur sutil.

Pull-to-refresh: usuários mobile esperam poder puxar para atualizar. Não é um botão de “refresh”, é um gesto. Indicador visual durante o pull, threshold claro para ativar, haptic feedback no threshold, animação de loading inline.

Swipe actions: listas com ações por swipe (deletar, arquivar, favoritar). Padrão popularizado pelo Mail do iOS. Swipe direita e esquerda com ações diferentes, cores semânticas (vermelho = deletar, verde = completar), ação destrutiva requer confirmação.

Stack navigation: navegação por empilhamento de telas com transição horizontal. Diferente de rotas web que substituem a página. Transição slide da direita para esquerda, botão “voltar” no canto superior esquerdo, swipe from edge para voltar (iOS).

Safe areas: respeitar notch, Dynamic Island, home indicator e status bar. A IA quase nunca considera isso. Conteúdo nunca sob o notch, botões nunca na zona do home indicator, status bar com contraste adequado.

Combinando com outras skills

Para um projeto mobile completo: Sleek gera telas e fluxos mobile-native, UI/UX Pro Max fornece paletas e tipografia otimizadas para mobile, Matt Pocock (grill-me) valida decisões de UX mobile, Taste Skill (soft-skill) aplica estética premium nas telas.

À medida que mais skills focam em mobile, a qualidade do output vai melhorar. Hoje, o Sleek é um dos poucos projetos que trata mobile como cidadão de primeira classe.

Instalação

npx skills add sleekdotdesign/agent-skills -s sleek-design-mobile-apps

Fonte: github.com/sleekdotdesign/agent-skills | sleek.design