O que UX Pro Max - Inteligência de Design faz?
Inteligência de design de UI/UX para web, mobile e desktop. Esta skill deve ser usada ao projetar, construir, revisar ou corrigir interfaces, incluindo páginas, componentes, sistemas de design, acessibilidade, interação, layout responsivo, tipografia, cor, gráficos e implementação de UI específica para cada stack. Dados locais pesquisáveis: 79 estilos pesquisáveis (50 ativos), 192 paletas de produtos e perfis de raciocínio, 74 pares de fontes, 119 diretrizes de UX, 105 ícones, 17 presets GSAP, 25 tipos de gráficos e 22 stacks.
Quando Aplicar
Esta skill deve ser usada quando a tarefa envolve estrutura de UI, decisões de design visual, padrões de interação ou controle de qualidade da experiência do usuário.
Casos de Uso Principais
Esta skill é mais útil nas seguintes situações:
- Projetar novas páginas (Landing Page, Dashboard, Admin, SaaS, Aplicativo Mobile)
- Criar ou refatorar componentes de UI (botões, modais, formulários, tabelas, gráficos, etc.)
- Escolher esquemas de cores, sistemas de fontes, especificações de espaçamento ou sistemas de layout
- Revisar o código da UI quanto à experiência do usuário, acessibilidade ou consistência visual
- Implementar estruturas de navegação, animações ou comportamento responsivo
- Tomar decisões de design em nível de produto (estilo, hierarquia de informações, expressão da marca)
- Melhorar a qualidade percebida, clareza ou usabilidade da interface
Recomendado
Recomenda-se usar esta skill nas seguintes situações:
- A UI parece "pouco profissional", mas o motivo não é claro
- Foram recebidos feedbacks sobre usabilidade ou experiência
- Preparação para otimização de qualidade de UI antes do lançamento
- É necessário alinhar o design entre plataformas (Web / iOS / Android)
- Construção de um sistema de design ou biblioteca de componentes reutilizáveis
Ignorar
Não é necessário usar esta skill nas seguintes situações:
- Desenvolvimento de lógica puramente backend
- Envolve apenas design de API ou banco de dados
- Otimização de desempenho não relacionada à interface
- Trabalhos de infraestrutura ou DevOps
- Scripts ou automações não visuais
Critério de Decisão: Se a tarefa alterar a aparência, a usabilidade, o movimento ou a interação de uma funcionalidade, esta skill deve ser usada.
Categorias de Regras por Prioridade
Para consulta humana/IA: Use a prioridade 1→10 para decidir em qual categoria de regras focar primeiro; para detalhes, use --domain <Domínio>. Scripts não leem esta tabela.
| Prioridade | Categoria | Impacto | Domínio | Verificações Chave (Obrigatório) | Antipadrões (Evitar) |
|---|---|---|---|---|---|
| 1 | Acessibilidade | CRÍTICO | ux | Contraste 4.5:1, Texto alternativo, Navegação por teclado, Aria-labels | Remover anéis de foco, Botões com apenas ícone sem rótulo |
| 2 | Toque e Interação | CRÍTICO | ux | Tamanho mínimo 44×44px, Espaçamento de 8px+, Feedback de carregamento | Depender apenas de hover, Mudanças de estado instantâneas (0ms) |
| 3 | Desempenho | ALTO | ux | WebP/AVIF, Carregamento preguiçoso, Reserva de espaço (CLS < 0.1) | Thrashing de layout, Cumulative Layout Shift |
| 4 | Seleção de Estilo | ALTO | style, product | Corresponder ao tipo de produto, Consistência, Ícones SVG (sem emoji) | Misturar flat e skeuomorphic aleatoriamente, Emoji como ícones |
| 5 | Layout e Responsividade | ALTO | ux | Breakpoints mobile-first, Viewport meta, Sem rolagem horizontal | Rolagem horizontal, Larguras fixas em px, Desabilitar zoom |
| 6 | Tipografia e Cor | MÉDIO | typography, color | Base 16px, Altura da linha 1.5, Tokens de cor semânticos | Texto < 12px para corpo, Cinza sobre cinza, Hex bruto em componentes |
| 7 | Animação | MÉDIO | ux | Tempo sensível ao contexto, Movimento transmite significado, Continuidade espacial | Uma duração para todas as transições, Animar largura/altura, Sem reduced-motion |
| 8 | Formulários e Feedback | MÉDIO | ux | Rótulos visíveis, Erro próximo ao campo, Texto de ajuda, Divulgação progressiva | Rótulo apenas como placeholder, Erros apenas no topo, Sobrecarregar de início |
| 9 | Padrões de Navegação | ALTO | ux | Voltar previsível, Nav inferior ≤5, Deep linking | Navegação sobrecarregada, Comportamento de voltar quebrado, Sem deep links |
| 10 | Gráficos e Dados | BAIXO | chart | Legendas, Tooltips, Cores acessíveis | Depender apenas de cor para transmitir significado |
Referência Rápida
1. Acessibilidade (CRÍTICO)
color-contrast- Proporção mínima de 4.5:1 para texto normal (texto grande 3:1); Material Designfocus-states- Anéis de foco visíveis em elementos interativos (2–4px; Apple HIG, MD)alt-text- Texto alternativo descritivo para imagens significativasaria-labels- aria-label para botões com apenas ícone; accessibilityLabel em nativo (Apple HIG)icon-context- A semântica depende do uso: ícones decorativos ao lado de texto visível são ocultados da árvore de acessibilidade; ícones significativos precisam de uma alternativa textual; controles de ícone precisam de um nome acessível e estado aplicávelkeyboard-nav- A ordem de tabulação corresponde à ordem visual; suporte completo ao teclado (Apple HIG)form-labels- Usar label com atributo forskip-links- Pular para o conteúdo principal para usuários de tecladoheading-hierarchy- Sequencial h1→h6, sem pular nívelcolor-not-only- Não transmitir informações apenas com cor (adicionar ícone/texto)dynamic-type- Suportar escala de texto do sistema; evitar truncamento à medida que o texto cresce (Apple Dynamic Type, MD)reduced-motion- Respeitar prefers-reduced-motion; reduzir/desabilitar animações quando solicitado (Apple Reduced Motion API, MD)voiceover-sr- accessibilityLabel/accessibilityHint significativos; ordem de leitura lógica para VoiceOver/leitores de tela (Apple HIG, MD)escape-routes- Fornecer cancelar/voltar em modais e fluxos de várias etapas (Apple HIG)keyboard-shortcuts- Preservar atalhos do sistema e de acessibilidade; oferecer alternativas de teclado para arrastar e soltar (Apple HIG)focus-not-obscured- UI fixa, sobreposições e banners não devem ocultar o controle focado pelo teclado (WCAG 2.2 AA)focus-not-obscured-enhanced- Manter todo o componente focado visível (WCAG 2.2 AAA)focus-appearance- Verificar a área do indicador de foco e o contraste de estado 3:1; o foco visível por si só não é suficiente (WCAG 2.2 AAA)dragging-alternative- Toda ação de arrastar controlada pelo autor precisa de uma alternativa de ponteiro único e teclado (WCAG 2.2 AA)web-target-size- Alvos de ponteiro web precisam de 24×24 CSS px ou uma exceção documentada; não substituir por unidades nativas (WCAG 2.2 AA)consistent-help- Mecanismos de ajuda repetidos permanecem na mesma ordem relativa em um conjunto de páginas (WCAG 2.2 A)redundant-entry- Reutilizar informações já fornecidas no mesmo processo, a menos que a nova entrada seja essencial (WCAG 2.2 A)accessible-authentication- Permitir gerenciadores de senha e colar; fornecer um caminho de autenticação não cognitivo (WCAG 2.2 Mínimo, AA). O critério AAA aprimorado não está representado no conjunto de dadosauto-rotation-controls- Carrosséis e conteúdo em movimento precisam de controles de pausa/parada e devem parar ao focar ou com movimento reduzido (WAI)contextual-live-badge-updates- Anunciar uma contagem/status alterado como uma frase contextual completa sem mover o foco; usar uma região live/status apropriada e atualizações atômicas apenas quando necessário
2. Toque e Interação (CRÍTICO)
touch-target-size- Mínimo 44×44pt (Apple) / 48×48dp (Material); estender a área de toque além dos limites visuais, se necessáriotouch-spacing- Espaçamento mínimo de 8px/8dp entre alvos de toque (Apple HIG, MD)hover-vs-tap- Usar clique/toque para interações primárias; não depender apenas de hoverloading-buttons- Desabilitar botão durante operações assíncronas; mostrar spinner ou progressoerror-feedback- Mensagens de erro claras próximas ao problemacursor-pointer- Adicionar cursor-pointer a elementos clicáveis (Web)gesture-conflicts- Evitar deslize horizontal no conteúdo principal; preferir rolagem verticaltap-delay- Usar touch-action: manipulation para reduzir o atraso de 300ms (Web)standard-gestures- Usar gestos padrão da plataforma de forma consistente; não redefinir (ex. deslizar para voltar, pinça para zoom) (Apple HIG)system-gestures- Não bloquear gestos do sistema (Central de Controle, deslizar para voltar, etc.) (Apple HIG)press-feedback- Feedback visual ao pressionar (ondulação/destaque; camadas de estado MD)haptic-feedback- Usar feedback tátil para confirmações e ações importantes; evitar uso excessivo (Apple HIG)gesture-alternative- Não depender de interações apenas por gestos; sempre fornecer controles visíveis para ações críticassafe-area-awareness- Manter os principais alvos de toque longe do notch, Dynamic Island, barra de gestos e bordas da telano-precision-required- Evitar exigir toques de precisão de pixel em ícones pequenos ou bordas finasswipe-clarity- Ações de deslize devem mostrar um affordance ou dica clara (chevron, rótulo, tutorial)drag-threshold- Usar um limite de movimento antes de iniciar o arrasto para evitar arrastos acidentais
3. Desempenho (ALTO)
image-optimization- Usar WebP/AVIF, imagens responsivas (srcset/sizes), carregamento preguiçoso de ativos não críticosimage-dimension- Declarar width/height ou usar aspect-ratio para evitar mudança de layout (Core Web Vitals: CLS)font-loading- Usar font-display: swap/optional para evitar texto invisível (FOIT); reservar espaço para reduzir mudança de layout (MD)font-preload- Pré-carregar apenas fontes críticas; evitar o uso excessivo de preload em cada variantecritical-css- Priorizar CSS acima da dobra (CSS crítico inline ou folha de estilo carregada cedo)lazy-loading- Carregar preguiçosamente componentes não hero por meio de importação dinâmica / divisão em nível de rotabundle-splitting- Dividir o código por rota/recurso (React Suspense / Next.js dynamic) para reduzir a carga inicial e o TTIthird-party-scripts- Carregar scripts de terceiros com async/defer; auditar e remover os desnecessários (MD)reduce-reflows- Evitar leituras/escritas frequentes de layout; agrupar leituras de DOM e depois escritascontent-jumping- Reservar espaço para conteúdo assíncrono para evitar saltos de layout (Core Web Vitals: CLS)lazy-load-below-fold- Usar loading="lazy" para imagens abaixo da dobra e mídia pesadavirtualize-lists- Virtualizar listas com 50+ itens para melhorar a eficiência da memória e o desempenho da rolagemmain-thread-budget- Manter o trabalho por quadro abaixo de ~16ms para 60fps; mover tarefas pesadas para fora da thread principal (HIG, MD)progressive-loading- Usar telas de esqueleto / shimmer em vez de spinners longos e bloqueantes para operações >1s (Apple HIG)input-latency- Manter a latência de entrada abaixo de ~100ms para toques/rolagens (padrão de responsividade do Material)tap-feedback-speed- Fornecer feedback visual dentro de 100ms do toque (Apple HIG)debounce-throttle- Usar debounce/throttle para eventos de alta frequência (scroll, resize, input)offline-support- Fornecer mensagens de estado offline e fallback básico (PWA / mobile)network-fallback- Oferecer modos degradados para redes lentas (imagens de resolução mais baixa, menos animações)
4. Seleção de Estilo (ALTO)
style-match- Combinar o estilo com o tipo de produto (usar--design-systempara recomendações)consistency- Usar o mesmo estilo em todas as páginasno-emoji-icons- Usar ícones SVG (Heroicons, Lucide), não emojiscolor-palette-from-product- Escolher paleta do produto/indústria (pesquisar--domain color)effects-match-style- Sombras, desfoque, raio alinhados com o estilo escolhido (vidro / flat / clay etc.)platform-adaptive- Respeitar os idiomas da plataforma (iOS HIG vs Material): navegação, controles, tipografia, movimentostate-clarity- Tornar os estados de hover/pressionado/desabilitado visualmente distintos, mantendo-se no estilo (camadas de estado do Material)elevation-consistent- Usar uma escala de elevação/sombra consistente para cards, sheets, modais; evitar valores de sombra aleatóriosdark-mode-pairing- Projetar variantes claras e escuras juntas para manter a marca, o contraste e o estilo consistentesicon-style-consistent- Usar um conjunto/linguagem visual de ícones (espessura do traço, raio do canto) em todo o produtosystem-controls- Preferir controles nativos/do sistema em vez de controles totalmente personalizados; personalizar apenas quando a marca exigir (Apple HIG)blur-purpose- Usar desfoque para indicar descarte de fundo (modais, sheets), não como decoração (Apple HIG)primary-action- Cada tela deve ter apenas um CTA primário; as ações secundárias devem ser visualmente subordinadas (Apple HIG)
5. Layout e Responsividade (ALTO)
viewport-meta- width=device-width initial-scale=1 (nunca desabilitar zoom)mobile-first- Projetar primeiro para mobile, depois escalar para tablet e desktopbreakpoint-consistency- Usar breakpoints sistemáticos (ex. 375 / 768 / 1024 / 1440)readable-font-size- Mínimo 16px para texto do corpo em mobile (evita o zoom automático do iOS)line-length-control- Mobile 35–60 caracteres por linha; desktop 60–75 caractereshorizontal-scroll- Sem rolagem horizontal em mobile; garantir que o conteúdo caiba na largura da viewportspacing-scale- Usar sistema de espaçamento incremental de 4pt/8dp (Material Design)touch-density- Manter o espaçamento dos componentes confortável para toque: nem apertado, nem causando toques acidentaiscontainer-width- Largura máxima consistente em desktop (max-w-6xl / 7xl)z-index-management- Definir escala de z-index em camadas (ex. 0 / 10 / 20 / 40 / 100 / 1000)fixed-element-offset- Navbar/barra inferior fixa deve reservar padding seguro para o conteúdo subjacentescroll-behavior- Evitar regiões de rolagem aninhadas que interfiram na experiência principal de rolagemviewport-units- Preferir min-h-dvh a 100vh em mobileorientation-support- Manter o layout legível e operável no modo paisagemcontent-priority- Mostrar o conteúdo principal primeiro em mobile; ocultar ou recolher o conteúdo secundáriovisual-hierarchy- Estabelecer hierarquia por meio de tamanho, espaçamento, contraste — não apenas corcompact-label-overflow- Escolher badge, tag de status, chip de filtro ou valor removível com base em sua semântica; manter os rótulos essenciais disponíveis e divulgar o truncamento inevitável para usuários de ponteiro e tecladochip-collection-reflow- Quebrar a coleção antes de encolher os rótulos; fazer um resumo de estouro+ncomo uma divulgação operável em vez de ocultar valores
6. Tipografia e Cor (MÉDIO)
line-height- Usar 1.5-1.75 para texto do corpoline-length- Limitar a 65-75 caracteres por linhafont-pairing- Combinar personalidades de fonte de título/corpofont-scale- Escala tipográfica consistente (ex. 12 14 16 18 24 32)contrast-readability- Texto mais escuro em fundos claros (ex. slate-900 em branco)text-styles-system- Usar o sistema de tipos da plataforma: estilos de tipo dinâmico iOS 11 / funções de tipo Material 5 (display, headline, title, body, label) (HIG, MD)weight-hierarchy- Usar font-weight para reforçar a hierarquia: Títulos em negrito (600–700), Corpo normal (400), Rótulos médios (500) (MD)color-semantic- Definir tokens de cor semânticos (primary, secondary, error, surface, on-surface) em vez de hex bruto em componentes (sistema de cores Material)color-dark-mode- Modo escuro usa variantes tonais dessaturadas/mais claras, não cores invertidas; testar o contraste separadamente (HIG, MD)color-accessible-pairs- Pares de primeiro plano/fundo devem atender a 4.5:1 (AA) ou 7:1 (AAA); usar ferramentas para verificar (WCAG, MD)color-not-decorative-only- Cor funcional (vermelho de erro, verde de sucesso) deve incluir ícone/texto; evitar significado apenas por cor (HIG, MD)truncation-strategy- Preferir quebra de linha a truncamento; ao truncar, usar reticências e fornecer o texto completo por meio de tooltip/expansão (Apple HIG)letter-spacing- Respeitar o espaçamento entre letras padrão por plataforma; evitar tracking apertado em texto do corpo (HIG, MD)number-tabular- Usar figuras tabulares/monoespaçadas para colunas de dados, preços e animações de contagem (Apple HIG)emphasis-methods- Usar itálico, peso ou cor para ênfase; evitar sublinhado em texto que não seja link (Apple HIG)font-loading-performance- Usar font-display: swap; pré-carregar apenas pesos de fonte usados na renderização inicial (MD)color-helper-highlight- Usar uma cor de destaque para botões e links principais, azul padrão do sistema ou cor personalizada com contraste suficiente (Apple HIG)color-gradient-fallback- Garantir que o contraste do texto seja mantido em gradientes; testar contra a cor de fundo de pior caso (Apple HIG)color-vibrance- Usar saturação para destacar ou dessaturar para informações secundárias e de suporte (Apple HIG)