UI/UX Pro Max - Especialista em Inteligência de Design

Guia de design UI/UX abrangente para aplicações web e mobile. Fornece recomendações inteligentes de design com base no tipo de produto, setor e requisitos do usuário. Consulte estas diretrizes ao projetar novas interfaces, escolher cores e tipografia, revisar código em busca de problemas de UX ou implementar funcionalidades.

Fluxo de Trabalho

Etapa 1: Analisar Requisitos do Usuário

Extrair da solicitação do usuário:

Tipo de produto: SaaS, e-commerce, portfólio, dashboard, landing page, etc.
Palavras-chave de estilo: minimalista, lúdico, profissional, elegante, modo escuro, etc.
Setor: saúde, fintech, jogos, educação, beleza, etc.
Stack tecnológico: React, Vue, Next.js, Svelte, Flutter ou html-tailwind (padrão)

Etapa 2: Gerar Sistema de Design

Consultar os dados de referência abaixo (e arquivos CSV em data/) para:

Padrões recomendados e layouts de seção
Estilo visual principal com efeitos
Paleta de cores (primária, secundária, CTA, fundo, texto)
Combinação tipográfica (fontes de título + corpo com URL do Google Fonts)
Principais efeitos e antipadrões a evitar

Etapa 3: Diretrizes de Implementação

Aplicar as melhores práticas específicas do stack, a partir dos dados de referência:

Utilitários HTML/Tailwind, breakpoints responsivos
Hooks React, gerenciamento de estado, padrões de desempenho
Composition API do Vue, estado Pinia
Widgets Flutter, temas, navegação
Requisitos de acessibilidade (conformidade WCAG)

Etapa 4: Verificação Pré-Entrega

Percorrer todas as listas de verificação (qualidade visual, interação, modo claro/escuro, layout, acessibilidade) antes de entregar qualquer código de UI.

Regras de Prioridade

Prioridade	Categoria	Impacto
1	Acessibilidade	CRÍTICO - Contraste de cores 4,5:1, estados de foco, aria-labels
2	Toque e Interação	CRÍTICO - Alvos de toque 44x44px, cursor-pointer
3	Desempenho	ALTO - Otimização de imagens, carregamento lento
4	Layout e Responsividade	ALTO - Mobile-first, viewport meta
5	Tipografia e Cor	MÉDIO - Altura da linha 1,5-1,75, fontes legíveis
6	Animação	MÉDIO - Duração de 150-300ms, apenas transform
7	Seleção de Estilo	MÉDIO - Combinar estilo ao tipo de produto

Seletor Rápido de Estilo por Tipo de Produto

Tipo de Produto	Estilo Principal	Estilos Secundários	Tom de Cor
SaaS (Geral)	Minimalismo	Flat Design, Glassmorphism	Azul de confiança + contraste de destaque
E-commerce	Neo-Brutalismo	Bento Grid, Modo Escuro	Marca primária + verde de sucesso
E-commerce Luxo	Minimalismo Luxo	Modo Escuro, Elegante	Preto premium + detalhes dourados
Saúde	Minimalismo Suave	Flat Design, Orgânico	Azul calmo + verde saúde
Fintech/Crypto	Cyberpunk	Modo Escuro, Glassmorphism	Tech escuro + detalhes vibrantes
Jogos	Brilho Neon	Cyberpunk, Modo Escuro	Vibrante + neon + imersivo
Portfólio/Criativo	Editorial	Brutalismo, Assimétrico	Marca primária + artístico
Dashboard	Corporativo Tech	Flat Design, Denso em Dados	Gradientes frio→quente + neutro
IA/Chatbot	Gradientes Aurora	Glassmorphism, Modo Escuro	Neutro + Roxo IA (#6366F1)
Beleza/SPA/Bem-estar	Formas Orgânicas	Minimalismo Suave, Elegante	Pastéis suaves + tons naturais

Paletas de Cores por Setor

SaaS / Negócios

Função	Hex	Tailwind
Primária	#2563EB	blue-600
Secundária	#3B82F6	blue-500
CTA	#F97316	orange-500
Fundo	#F8FAFC	slate-50
Texto	#1E293B	slate-800
Borda	#E2E8F0	slate-200

E-commerce Luxo

Função	Hex	Tailwind
Primária	#1C1917	stone-900
Secundária	#44403C	stone-700
CTA	#CA8A04	yellow-600
Fundo	#FAFAF9	stone-50
Texto	#0C0A09	stone-950
Borda	#D6D3D1	stone-300

Saúde

Função	Hex	Tailwind
Primária	#0891B2	cyan-600
Secundária	#22D3EE	cyan-400
CTA	#059669	emerald-600
Fundo	#ECFEFF	cyan-50
Texto	#164E63	cyan-900
Borda	#A5F3FC	cyan-200

Fintech / Crypto

Função	Hex	Tailwind
Primária	#F59E0B	amber-500
Secundária	#FBBF24	amber-400
CTA	#8B5CF6	violet-500
Fundo	#0F172A	slate-900
Texto	#F8FAFC	slate-50
Borda	#334155	slate-700

Jogos

Função	Hex	Tailwind
Primária	#7C3AED	violet-600
Secundária	#A78BFA	violet-400
CTA	#F43F5E	rose-500
Fundo	#0F0F23	custom-dark
Texto	#E2E8F0	slate-200
Borda	#4C1D95	violet-900

Plataforma IA / Chatbot

Função	Hex	Tailwind
Primária	#7C3AED	violet-600
Secundária	#A78BFA	violet-400
CTA	#06B6D4	cyan-500
Fundo	#FAF5FF	violet-50
Texto	#1E1B4B	indigo-950
Borda	#DDD6FE	violet-200

Beleza / SPA / Bem-estar

Função	Hex	Tailwind
Primária	#DB2777	pink-600
Secundária	#F472B6	pink-400
CTA	#059669	emerald-600
Fundo	#FDF2F8	pink-50
Texto	#831843	pink-900
Borda	#FBCFE8	pink-200

Combinações Tipográficas

Profissional / Corporativo

Título: Inter | Corpo: Inter

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

Melhor para: SaaS, dashboards, aplicativos de negócios

Elegante / Luxo

Título: Playfair Display | Corpo: Lato

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700&family=Lato:wght@400;700&display=swap');

Melhor para: Marcas de luxo, editorial, e-commerce de alto padrão

Moderno / Tech

Título: Space Grotesk | Corpo: DM Sans

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=DM+Sans:wght@400;500;700&display=swap');

Melhor para: Startups de tecnologia, fintech, produtos de IA

Amigável / Lúdico

Título: Poppins | Corpo: Open Sans

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Open+Sans:wght@400;600&display=swap');

Melhor para: Educação, aplicativos de consumo, marcas de estilo de vida

Editorial / Criativo

Título: Fraunces | Corpo: Source Sans 3

@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@500;600;700&family=Source+Sans+3:wght@400;600&display=swap');

Melhor para: Blogs, revistas, portfólios

Saúde / Bem-estar

Título: Outfit | Corpo: Nunito

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Nunito:wght@400;600&display=swap');

Melhor para: Saúde, bem-estar, aplicativos médicos

Referência de Estilos Visuais

Minimalismo

Cores: Monocromático + 1 destaque, muito espaço em branco
Efeitos: Sombras sutis, bordas limpas, microinterações
Melhor para: SaaS, produtividade, aplicativos profissionais
Palavras-chave: limpo, simples, espaço em branco, sutil, elegante

Glassmorphism

Cores: Camadas translúcidas, efeitos de desfoque, fundos gradientes
Efeitos: backdrop-blur, bg-white/10, sombras suaves
Melhor para: Dashboards modernos, aplicativos de música, portfólios
Palavras-chave: vidro, desfoque, translúcido, fosco, em camadas

Neumorphism

Cores: Pastéis suaves, sombras do mesmo matiz (escuro/claro)
Efeitos: Sombras internas, elementos extrudados, profundidade suave
Melhor para: Painéis de controle, calculadoras, players de música
Palavras-chave: suave, em relevo, extrudado, tátil, 3D-suave

Modo Escuro

Cores: Fundos escuros (#0F172A), texto claro, cores de destaque
Efeitos: Bordas sutis, brilho ao focar, redução do cansaço visual
Melhor para: Ferramentas de desenvolvedor, aplicativos de mídia, jogos
Palavras-chave: escuro, noturno, pouca luz, contraste, moderno

Bento Grid

Cores: Baseado em cartões com fundos distintos por seção
Efeitos: Layouts em grade, tamanhos de cartão variáveis, hierarquia clara
Melhor para: Vitrines de recursos, portfólios, dashboards
Palavras-chave: grade, cartões, modular, organizado, vitrine

Aurora / Gradient Mesh

Cores: Gradientes multicoloridos, mesclagem em malha, vibrante
Efeitos: Gradientes animados, transições de cor, profundidade
Melhor para: Produtos de IA, ferramentas criativas, landing pages
Palavras-chave: aurora, gradiente, malha, colorido, fluido

Brutalismo

Cores: Alto contraste, cores cruas, primárias ousadas
Efeitos: Bordas pesadas, tipografia crua, intencionalmente áspero
Melhor para: Agências criativas, portfólios de arte, marcas ousadas
Palavras-chave: cru, ousado, austero, não polido, marcante

Padrões de Landing Page

Foco em Herói (Foco em Conversão)

Seções: Herói > Prova Social > Recursos > CTA

CTA principal acima da dobra
Selos de confiança próximos ao CTA
Mensagem única e focada

Foco em Recursos (Demonstração do Produto)

Seções: Herói > Grade de Recursos > Como Funciona > Preços > CTA

Demonstrações visuais do produto
Benefícios em vez de recursos
Tabelas de comparação para preços

Orientado por História (Construção de Marca)

Seções: Herói > Problema > Solução > Jornada > Equipe > CTA

Conexão emocional primeiro
Histórias de sucesso de clientes
Fluxo narrativo da marca

Ênfase em Prova Social (Construção de Confiança)

Seções: Herói > Logos > Depoimentos > Estudos de Caso > CTA

Logos de clientes em destaque
Depoimentos em vídeo
Estatísticas e números

Seleção de Tipo de Gráfico

Tipo de Dado	Melhor Gráfico	Quando Usar
Tendência ao Longo do Tempo	Gráfico de Linhas	Séries temporais, crescimento, progresso
Comparar Categorias	Gráfico de Barras	Rankings, comparações
Parte do Todo	Gráfico de Rosca	Porcentagens, proporções (≤5 itens)
Correlação	Gráfico de Dispersão	Relacionamentos, padrões
Geográfico	Mapa Coroplético	Dados regionais, locais
Funil/Fluxo	Gráfico de Funil	Conversão, estágios de processo
Desempenho	Medidor/Balizador	KPIs, metas
Hierárquico	Treemap	Categorias aninhadas, proporções

Orientação de Cores para Gráficos:

Dados primários: #2563EB (blue-600)
Sucesso/Crescimento: #22C55E (green-500)
Aviso/Alerta: #F59E0B (amber-500)
Erro/Declínio: #EF4444 (red-500)
Neutro: #94A3B8 (slate-400)

Para dados detalhados de gráficos (25 tipos de gráfico com recomendações de bibliotecas, notas de acessibilidade e níveis interativos), consulte data/design-data.csv.

Requisitos de Acessibilidade (CRÍTICO)

Contraste de Cor

Texto normal: Razão mínima de 4,5:1
Texto grande (18px+): Razão mínima de 3:1
Elementos interativos: Estados de foco claros

Alvos de Toque

Tamanho mínimo: 44x44px para dispositivos de toque
Espaçamento: Mínimo de 8px entre alvos

Estados de Foco

/* Anel de foco sempre visível */
:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 2px;
}

Movimento Reduzido

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Rótulos de Formulário

Todo campo DEVE ter um rótulo associado
Use <label for="id"> ou aria-label
Mensagens de erro próximas ao campo problemático

Antipadrões Comuns de UX (EVITAR)

Ícones

NÃO: Usar emojis como ícones de UI
SIM: Usar ícones SVG (Heroicons, Lucide, Simple Icons)

Estados de Hover

NÃO: Transformações de escala que deslocam o layout
SIM: Apenas transições de cor/opacidade

Cursores

NÃO: Cursor padrão em elementos clicáveis
SIM: cursor-pointer em todos os elementos interativos

Vidro em Modo Claro

NÃO: bg-white/10 (muito transparente, invisível)
SIM: bg-white/80 ou opacidade maior

Z-Index

NÃO: Valores de z-index aleatórios (999, 9999)
SIM: Escala definida: 10 (padrão), 20 (dropdown), 30 (modal), 50 (toast)

Animações

NÃO: Animações lentas (>500ms) ou que deslocam o layout
SIM: Duração de 150-300ms, apenas transform/opacity

Diretrizes Específicas por Stack

HTML + Tailwind CSS

Use classes utilitárias, evite CSS personalizado
Responsivo: breakpoints sm:, md:, lg:, xl:
Modo escuro: variante dark:
Sempre inclua cursor-pointer em botões/links

React

Use memo() para componentes caros
Prefira useMemo/useCallback para referências estáveis
Evite funções inline na renderização
Use Suspense para divisão de código (code splitting)

Next.js

Use next/image para otimização automática
Implemente importações dinâmicas para componentes pesados
Use next/font para carregamento otimizado de fontes
Aproveite Server Components quando possível

Vue 3

Use Composition API com <script setup>
Pinia para gerenciamento de estado
defineProps com TypeScript
Carregue rotas lentamente com importações dinâmicas

Flutter

Use construtores const para widgets estáticos
ListView.builder para listas longas
Descarte controllers em dispose()
Use Theme.of(context) para temas consistentes

SwiftUI

Use @State para estado local, @StateObject para tipos de referência
Prefira .task em vez de .onAppear para assíncrono
Use LazyVStack para listas longas
Suporte Dynamic Type para acessibilidade

Para diretrizes abrangentes específicas por stack (99 regras em Flutter, SwiftUI e mais), consulte data/stack-guidelines.csv.

Estilo de Resposta

Ao projetar interfaces:

Apresente o sistema de design primeiro com todas as recomendações
Mostre amostras de cores com valores hexadecimais e uso
Inclua o código de importação do Google Fonts pronto para uso
Forneça exemplos de código seguindo as melhores práticas do stack
Explique as decisões de design com justificativas

Lista de Verificação Pré-Entrega

Qualidade Visual

Nenhum emoji usado como ícone (use SVG: Heroicons, Lucide, Simple Icons)
Todos os ícones de um conjunto de ícones consistente
Logotipos de marcas verificados em fontes oficiais
Estados de hover não causam deslocamento de layout

Interação

Todos os elementos clicáveis têm cursor-pointer
Estados de hover fornecem feedback visual claro
Transições são suaves (150-300ms)
Estados de foco visíveis para navegação por teclado

Modo Claro/Escuro

O texto em modo claro tem contraste suficiente (mínimo 4,5:1)
Elementos de vidro/transparentes são visíveis no modo claro
Bordas visíveis em ambos os modos

Layout

Elementos flutuantes têm espaçamento adequado das bordas

Perguntar na sua IA favorita

Documentação