Cérebro de Design de UI
Este skill fornece uma base de conhecimento curada de mais de 60 padrões de componentes de UI, obtidos do component.gallery e enriquecidos com melhores práticas, orientações de layout e regras de uso. Ele substitui a adivinhação genérica por conhecimento real de sistemas de design ao gerar interfaces.
Antes de escrever qualquer código de UI, consulte este skill para selecionar os componentes corretos e seguir suas melhores práticas. Leia components.md para a referência completa.
Quando Usar Este Skill
Aplique sempre que o usuário pedir para construir, projetar ou gerar:
- Páginas web, landing pages, sites de marketing
- Painéis SaaS, painéis de administração, páginas de configurações
- Formulários, tabelas de dados, estruturas de navegação
- Modais, gavetas, popovers ou padrões de sobreposição
- Qualquer componente de UI em React, HTML/CSS ou Tailwind
Filosofia de Design
Cada interface gerada deve parecer moderna, minimalista e pronta para produção — não como um modelo.
Princípios Centrais
- Moderação sobre decoração. Menos elementos, altamente refinados. Espaço em branco é um recurso.
- A tipografia carrega a hierarquia. Combine uma fonte de exibição distinta com uma fonte de corpo limpa. Maximize o contraste de peso entre títulos e rótulos.
- Um momento de cor forte. Primeiro, paleta neutra (brancos quentes, pretos próximos, tons médios suaves). Introduza um acento confiante. Se pudesse aparecer em um pôster ou capa de livro, provavelmente é atemporal.
- Espaçamento é estrutura. Use uma grade de 8 px. Espaços mais apertos agrupam elementos relacionados; espaços generosos deixam o conteúdo herói respirar.
- Acessibilidade não é negociável. Contraste mínimo WCAG AA. Indicadores de foco. HTML semântico. Navegação por teclado.
- Sem estética genérica de IA. Evite: gradientes roxo sobre branco, padrões padrão Inter/Roboto, grades de cartões uniformemente espaçadas e layouts prontos. Cada interface deve parecer projetada para seu contexto específico.
Nível de Qualidade
A saída deve corresponder ao que você esperaria de um designer de produto sênior em uma empresa SaaS de ponta:
- Ritmo visual limpo com assimetria intencional
- Afordâncias interativas óbvias (estados hover, focus, active)
- Casos extremos elegantes (estados vazios, carregamento, erro)
- Responsivo sem artefatos de breakpoint
Fluxo de Trabalho
Etapa 1 — Identificar Componentes
Leia a solicitação do usuário e determine quais componentes de UI são necessários. Consulte components.md para encontrar cada componente por nome ou alias.
Mapeamentos comuns:
- "navegação" → Cabeçalho, Navegação, Breadcrumbs, Abas
- "formulário" → Formulário, Entrada de texto, Selecionar, Checkbox, Botão de rádio, Botão
- "exibição de dados" → Tabela, Cartão, Lista, Badge, Avatar
- "feedback" → Alerta, Toast, Modal, Spinner, Barra de progresso, Estado vazio
- "entrada" → Entrada de texto, Textarea, Selecionar, Combobox, Seletor de data, Upload de arquivo, Slider
- "sobreposição" → Modal, Gaveta, Popover, Tooltip, Menu suspenso
Etapa 2 — Aplicar Melhores Práticas
Para cada componente na interface, siga suas melhores práticas da referência. Regras-chave que se aplicam amplamente:
Layout
- Formulários de coluna única — mais rápidos de escanear
- Faixas verticais consistentes em linhas repetidas (listas, tabelas)
- Slots de largura fixa para ícones e ações, mesmo quando vazios
- Cartões: mídia → título → metadados → hierarquia de ação
Interação
- Botões: rótulos com verbo primeiro ("Salvar alterações", não "Enviar"), um primário por seção
- Modais: sempre fornecer X, Cancelar e Escape; prender foco; retornar foco ao fechar
- Toasts: auto-dispensar 4–6 s, permitir dispensa manual, empilhar os mais novos no topo
- Alternâncias: efeito imediato apenas — usar checkboxes em formulários que exigem Salvar
Tipografia e Espaçamento
- Hierarquia estrita de títulos (h1 → h2 → h3), um h1 por página
- Alvos de toque de mínimo 44 px no celular
- Rótulos acima das entradas (formulários verticais) ou ao lado (horizontais)
- Texto do placeholder como dica de formato, nunca como substituto do rótulo
Estados
- Estados vazios: ilustração + título útil + CTA principal
- Carregamento: telas esqueleto > spinners (mostrar após atraso de 300 ms)
- Validação: inline no blur, não a cada pressionamento de tecla
- Elementos desabilitados: visualmente distintos, mas ainda legíveis
Etapa 3 — Escolher uma Direção de Design
Selecione o preset de estilo que melhor corresponde à intenção do usuário, ou pergunte se não estiver claro:
SaaS Moderno (padrão)
- Paleta neutra, um acento forte
- Grade de 8 px, espaço em branco generoso
- Limpo, profissional, espaçoso
Minimalista Estilo Apple
- Quase monocromático, cinzas quentes
- Grande hierarquia de tipo, rastreamento apertado em texto de exibição
- Espaço em branco abundante, micro-interações (150–250 ms ease-out)
Empresarial / Corporativo
- Densidade de informação, regiões bem definidas
- Escala de espaçamento compacta (4/8/12/16/24 px)
- Tratamento robusto de formulários, totalmente navegável por teclado
Criativo / Portfólio
- Ousado, expressivo, forte personalidade visual
- Layouts assimétricos, contraste de escala dramático
- Tipografia editorial, cores de acento vívidas
Painel de Dados
- Densidade de dados, otimizado para escaneabilidade
- Alinhamento vertical consistente entre linhas
- Hierarquia clara de métricas: KPI → tendência → detalhe
Etapa 4 — Gerar Código
Escreva código pronto para produção seguindo estas regras:
Stack: React + Tailwind CSS (a menos que o usuário especifique o contrário)
Espaçamento: Escala de espaçamento do Tailwind (p-2, gap-4, etc.) em uma grade de 8px
Cores: Variáveis CSS ou configuração do Tailwind para consistência da paleta
Tipografia: Utilitários de texto do Tailwind; pares de fontes expressivas via Google Fonts
Estados: Implementar estados hover, focus, active, disabled para todos os elementos interativos
Responsivo: Mobile-first; testar em 375, 768, 1440 px
Acessibilidade: HTML semântico, ARIA onde necessário, gerenciamento de foco
Referência Rápida de Componentes
Abaixo estão os 15 componentes mais comumente necessários. Para a referência completa de mais de 60 componentes com melhores práticas, aliases e exemplos de layout, veja components.md.
| Componente | Quando usar | Regra principal |
|---|---|---|
| Botão | Acionar ações | Rótulos com verbo primeiro; um primário por seção |
| Cartão | Representar uma entidade | Mídia → título → metadados → ação; sombra OU borda, não ambos |
| Modal | Atenção focada | Prender foco; X + Cancelar + Escape para fechar |
| Navegação | Links de página/seção | Máximo de 5–7 itens; estado ativo claro |
| Tabela | Dados estruturados | Cabeçalho fixo; alinhar números à direita; colunas classificáveis |
| Abas | Alternar painéis | 2–7 abas; indicador ativo; acordeão no celular |
| Formulário | Coletar entrada | Coluna única; rótulos acima; validação inline no blur |
| Toast | Confirmação breve | Auto-dispensar 4–6 s; ação de desfazer para operações destrutivas |
| Alerta | Status importante | Cores semânticas + ícone; máximo de 2 frases |
| Gaveta | Painel secundário | Direita para detalhe, esquerda para navegação; 320–480 px desktop |
| Entrada de busca | Encontrar conteúdo | Atalho Cmd/Ctrl+K; debounce 200–300 ms |
| Estado vazio | Sem dados | Ilustração + título + CTA; enquadramento positivo |
| Esqueleto | Placeholder de carregamento | Corresponder à forma real do layout; animação de brilho |
| Badge | Rótulo de status/metadados | 1–2 palavras; forma de pílula para status; paleta de cores limitada |
| Menu suspenso | Ações/opções de navegação | 7±2 itens; ações destrutivas por último em vermelho |
Anti-Padrões a Evitar
Nunca gere estes — eles sinalizam UI genérica e de baixa qualidade:
- Badges arco-íris — cada status com uma cor brilhante diferente, sem significado semântico
- Modal dentro de modal — use uma página ou gaveta para fluxos complexos
- Enviar desabilitado sem explicação — sempre indique o que está faltando
- Spinner para layouts previsíveis — use telas esqueleto
- Links "Clique aqui" — o texto do link deve descrever o destino
- Menu hambúrguer no desktop — use navegação visível quando o espaço permitir
- Carrosséis de avanço automático — deixe os usuários controlarem a navegação
- Campos de formulário apenas com placeholder — sempre use rótulos visíveis
- Botões com peso igual — estabeleça hierarquia primário/secundário/terciário
- Texto minúsculo (< 12 px) — texto do corpo mínimo 14 px, prefira 16 px