Sistema de Design Frontend
Filosofia: Cada pixel tem um propósito. Restrição é luxo. A psicologia do usuário orienta as decisões. Princípio Central: PENSE, não memorize. PERGUNTE, não presuma.
🎯 Regra de Leitura Seletiva (OBRIGATÓRIA)
Leia os arquivos REQUERIDOS sempre, OPCIONAIS apenas quando necessário:
| Arquivo | Status | Quando Ler |
|---|---|---|
| ux-psychology.md | 🔴 REQUERIDO | Leia sempre primeiro! |
| color-system.md | ⚪ Opcional | Decisões de cor/paleta |
| typography-system.md | ⚪ Opcional | Seleção/combinação de fontes |
| visual-effects.md | ⚪ Opcional | Glassmorphism, sombras, gradientes |
| animation-guide.md | ⚪ Opcional | Animação necessária |
| motion-graphics.md | ⚪ Opcional | Lottie, GSAP, 3D |
| decision-trees.md | ⚪ Opcional | Modelos de contexto |
🔴 ux-psychology.md = LEIA SEMPRE. Outros = apenas se relevante.
🔧 Scripts de Execução
Execute estes para auditorias (não leia, apenas execute):
| Script | Propósito | Uso |
|---|---|---|
Validador ux_audit | Auditoria de Psicologia UX e Acessibilidade | call_tool_checklist |
⚠️ CRÍTICO: PERGUNTE ANTES DE PRESUMIR (OBRIGATÓRIO)
PARE! Se a solicitação do usuário for aberta, NÃO recorra aos seus favoritos.
Quando o Prompt do Usuário for Vago, PERGUNTE:
Cor não especificada? Pergunte:
"Qual paleta de cores você prefere? (azul/verde/laranja/neutro/outro?)"
Estilo não especificado? Pergunte:
"Qual estilo você está buscando? (minimalista/ousado/retrô/futurista/orgânico?)"
Layout não especificado? Pergunte:
"Você tem uma preferência de layout? (coluna única/grid/assimétrico/largura total?)"
⛔ TENDÊNCIAS PADRÃO A EVITAR (ANTI-PORTO SEGURO):
| Tendência Padrão de IA | Por Que é Ruim | Pense em Vez Disso |
|---|---|---|
| Grids Bento (Clichê Moderno) | Usado em todo design de IA | Por que este conteúdo PRECISA de um grid? |
| Hero Split (Esquerda/Direita) | Previsível e Entediante | Que tal Tipografia Massiva ou Narrativa Vertical? |
| Gradientes Mesh/Aurora | O fundo "novo" e preguiçoso | Qual é uma combinação radical de cores? |
| Glassmorphism | A ideia de IA de "premium" | Que tal um design plano, sólido e de alto contraste? |
| Ciano Profundo / Azul Fintech | Porto seguro da proibição de roxo | Por que não Vermelho, Preto ou Verde Neon? |
| "Orquestrar / Capacitar" | Texto gerado por IA | Como um humano diria isso? |
| Fundo escuro + brilho neon | Exagerado, "visual de IA" | O que a MARCA realmente precisa? |
| Tudo arredondado | Genérico/Seguro | Onde posso usar bordas nítidas e brutalistas? |
🔴 "Cada estrutura 'segura' que você escolher te aproxima um passo de um template genérico. ASSUMA RISCOS."
1. Análise de Restrições (SEMPRE PRIMEIRO)
Antes de qualquer trabalho de design, RESPONDA A ESTAS ou PERGUNTE AO USUÁRIO:
| Restrição | Pergunta | Por Que é Importante |
|---|---|---|
| Prazo | Quanto tempo? | Determina a complexidade |
| Conteúdo | Pronto ou placeholder? | Afeta a flexibilidade do layout |
| Marca | Diretrizes existentes? | Pode ditar cores/fontes |
| Tecnologia | Qual stack? | Afeta as capacidades |
| Público | Quem exatamente? | Orienta todas as decisões visuais |
Público → Abordagem de Design
| Público | Pense Sobre |
|---|---|
| Geração Z | Ousado, rápido, mobile-first, autêntico |
| Millennials | Limpo, minimalista, orientado a valor |
| Geração X | Familiar, confiável, claro |
| Boomers | Legível, alto contraste, simples |
| B2B | Profissional, focado em dados, confiança |
| Luxo | Elegância contida, espaços em branco |
2. Princípios de Psicologia UX
Leis Fundamentais (Internalize Estas)
| Lei | Princípio | Aplicação |
|---|---|---|
| Lei de Hick | Mais escolhas = decisões mais lentas | Limite opções, use revelação progressiva |
| Lei de Fitts | Maior + mais próximo = mais fácil de clicar | Dimensione CTAs adequadamente |
| Lei de Miller | ~7 itens na memória de trabalho | Agrupe conteúdo em blocos |
| Von Restorff | Diferente = memorável | Torne CTAs visualmente distintos |
| Posição Serial | Primeiro/último é mais lembrado | Informações chave no início/fim |
Níveis de Design Emocional
VISCERAL (instantâneo) → Primeira impressão: cores, imagens, sensação geral
COMPORTAMENTAL (uso) → Usando: velocidade, feedback, eficiência
REFLEXIVO (memória) → Depois: "Gosto do que isso diz sobre mim"
Construção de Confiança
- Indicadores de segurança em ações sensíveis
- Prova social onde relevante
- Acesso claro a contato/suporte
- Design consistente e profissional
- Políticas transparentes
3. Princípios de Layout
Proporção Áurea (φ = 1.618)
Use para harmonia proporcional:
├── Conteúdo : Barra lateral = aproximadamente 62% : 38%
├── Cada tamanho de título = anterior × 1.618 (para escala dramática)
├── Espaçamento pode seguir: sm → md → lg (cada × 1.618)
Conceito de Grade de 8 Pontos
Todo espaçamento e dimensionamento em múltiplos de 8:
├── Apertado: 4px (meio passo para micro)
├── Pequeno: 8px
├── Médio: 16px
├── Grande: 24px, 32px
├── Extra Grande: 48px, 64px, 80px
└── Ajuste com base na densidade do conteúdo
Princípios Chave de Dimensionamento
| Elemento | Consideração |
|---|---|
| Alvos de toque | Tamanho mínimo confortável para toque |
| Botões | Altura baseada na hierarquia de importância |
| Campos de entrada | Combine altura do botão para alinhamento |
| Cartões | Padding consistente, respirável |
| Largura de leitura | 45-75 caracteres ideal |
4. Princípios de Cor
Regra 60-30-10
60% → Primário/Fundo (base calma, neutra)
30% → Secundário (áreas de suporte)
10% → Destaque (CTAs, destaques, atenção)
Psicologia das Cores (Para Tomada de Decisão)
| Se Você Precisa de... | Considere Matizes | Evite |
|---|---|---|
| Confiança, calma | Família azul | Vermelhos agressivos |
| Crescimento, natureza | Família verde | Cinzas industriais |
| Energia, urgência | Laranja, vermelho | Azuis passivos |
| Luxo, criatividade | Verde-marinho profundo, Ouro, Esmeralda | Cores vivas de baixo custo |
| Limpo, minimalista | Neutros | Cor avassaladora |
Processo de Seleção
- Qual é o setor? (restringe opções)
- Qual é a emoção? (escolhe o primário)
- Modo claro ou escuro? (define a base)
- PERGUNTE AO USUÁRIO se não especificado
Para teoria detalhada de cores: color-system.md
5. Princípios de Tipografia
Seleção de Escala
| Tipo de Conteúdo | Proporção da Escala | Sensação |
|---|---|---|
| UI densa | 1.125-1.2 | Compacto, eficiente |
| Web geral | 1.25 | Equilibrado (mais comum) |
| Editorial | 1.333 | Legível, espaçoso |
| Hero/display | 1.5-1.618 | Impacto dramático |
Conceito de Combinação
Contraste + Harmonia:
├── DIFERENTE o suficiente para hierarquia
├── SEMELHANTE o suficiente para coesão
└── Geralmente: display + neutro, ou serifada + sem serifa
Regras de Legibilidade
- Comprimento da linha: 45-75 caracteres ideal
- Altura da linha: 1.4-1.6 para corpo do texto
- Contraste: Verifique requisitos WCAG
- Tamanho: 16px+ para corpo na web
Para tipografia detalhada: typography-system.md
6. Princípios de Efeitos Visuais
Glassmorphism (Quando Apropriado)
Propriedades chave:
├── Fundo semitransparente
├── Desfoque de fundo
├── Borda sutil para definição
└── ⚠️ **AVISO:** Glassmorphism azul/branco padrão é um clichê moderno. Use radicalmente ou não use.
Hierarquia de Sombras
Conceito de elevação:
├── Elementos mais altos = sombras maiores
├── Deslocamento Y > Deslocamento X (luz vinda de cima)
├── Múltiplas camadas = mais realista
└── Modo escuro: pode precisar de brilho em vez de sombra
Uso de Gradientes
Gradientes harmoniosos:
├── Cores adjacentes no círculo cromático (análogas)
├── OU mesmo matiz, luminosidade diferente
├── Evite pares complementares agressivos
├── 🚫 **NENHUM Gradiente Mesh/Aurora** (manchas flutuantes)
└── VARIE radicalmente de projeto para projeto
Para guia completo de efeitos: visual-effects.md
7. Princípios de Animação
Conceito de Temporização
Duração baseada em:
├── Distância (mais longe = mais longo)
├── Tamanho (maior = mais lento)
├── Importância (crítico = claro)
└── Contexto (urgente = rápido, luxo = lento)
Seleção de Suavização
| Ação | Suavização | Por Quê |
|---|---|---|
| Entrando | Ease-out | Desacelera, estabiliza |
| Saindo | Ease-in | Acelera, sai |
| Ênfase | Ease-in-out | Suave, deliberado |
| Lúdico | Bounce | Divertido, energético |
Desempenho
- Anime apenas transform e opacity
- Respeite a preferência de movimento reduzido
- Teste em dispositivos de baixo custo
Para padrões de animação: animation-guide.md, para avançado: motion-graphics.md
8. Checklist de "Fator Uau"
Indicadores Premium
- Espaços em branco generosos (luxo = espaço para respirar)
- Profundidade e dimensão sutis
- Animações suaves e propositais
- Atenção aos detalhes (alinhamento, consistência)
- Ritmo visual coeso
- Elementos personalizados (nem todos padrões)
Construtores de Confiança
- Pistas de segurança onde apropriado
- Prova social / depoimentos
- Proposta de valor clara
- Imagens profissionais
- Linguagem de design consistente
Gatilhos Emocionais
- Hero que evoca a emoção pretendida
- Elementos humanos (rostos, histórias)
- Indicadores de progresso/realização
- Momentos de prazer
9. Anti-Padrões (O que NÃO Fazer)
❌ Indicadores de Design Preguiçoso
- Fontes padrão do sistema sem consideração
- Imagens de banco de imagens que não combinam
- Espaçamento inconsistente
- Muitas cores concorrentes
- Paredes de texto sem hierarquia
- Contraste inacessível
❌ Padrões de Tendência de IA (EVITE!)
- Mesmas cores em todo projeto
- Escuro + neon como padrão
- Roxo/violeta em tudo (PROIBIÇÃO DE ROXO ✅)
- Grids Bento para landing pages simples
- Gradientes Mesh e Efeitos de Brilho
- Mesma estrutura de layout / clone do Vercel
- Não perguntar as preferências do usuário
❌ Padrões Escuros (Antiéticos)
- Custos ocultos
- Urgência falsa
- Ações forçadas
- UI enganosa
- Confirmshaming
10. Resumo do Processo de Decisão
Para CADA tarefa de design:
1. RESTRIÇÕES
└── Qual é o prazo, marca, tecnologia, público?
└── Se não claro → PERGUNTE
2. CONTEÚDO
└── Que conteúdo existe?
└── Qual é a hierarquia?
3. DIREÇÃO DE ESTILO
└── O que é apropriado para o contexto?
└── Se não claro → PERGUNTE (não recorra ao padrão!)
4. EXECUÇÃO
└── Aplique os princípios acima
└── Verifique contra anti-padrões
5. REVISÃO
└── "Isso serve ao usuário?"
└── "Isso é diferente dos meus padrões?"
└── "Eu me orgulharia disso?"
Arquivos de Referência
Para orientação mais aprofundada em áreas específicas:
- color-system.md - Teoria das cores e processo de seleção
- typography-system.md - Combinação de fontes e decisões de escala
- visual-effects.md - Princípios e técnicas de efeitos
- animation-guide.md - Princípios de design de movimento
- motion-graphics.md - Avançado: Lottie, GSAP, SVG, 3D, Partículas
- decision-trees.md - Modelos específicos de contexto
- ux-psychology.md - Mergulho profundo em psicologia do usuário
Skills Relacionadas
| Skill | Quando Usar |
|---|---|
| frontend-design (esta) | Antes de codificar - Aprenda princípios de design (cor, tipografia, psicologia UX) |
| web-design-guidelines | Depois de codificar - Audite acessibilidade, desempenho e melhores práticas |
Fluxo de Trabalho Pós-Design
Após implementar seu design, execute a auditoria:
1. DESIGN → Leia princípios de frontend-design ← VOCÊ ESTÁ AQUI
2. CÓDIGO → Implemente o design
3. AUDITORIA → Execute revisão web-design-guidelines
4. CORRIJA → Trate as descobertas da auditoria
Próximo Passo: Após codificar, use a skill
web-design-guidelinespara auditar sua implementação quanto a acessibilidade, estados de foco, animações e problemas de desempenho.
Lembre-se: Design é PENSAR, não copiar. Cada projeto merece uma consideração nova baseada em seu contexto e usuários únicos. Evite o Porto Seguro Moderno de SaaS!