Sistema de Design Front-end
Filosofia: Cada pixel tem propósito. Restrição é luxo. A psicologia do usuário orienta as decisões. Princípio Central: PENSE, não decore. PERGUNTE, não suponha.
🎯 Regra de Leitura Seletiva (OBRIGATÓRIA)
Leia os arquivos OBRIGATÓRIOS sempre, OPCIONAIS apenas quando necessário:
| Arquivo | Status | Quando Ler |
|---|---|---|
| ux-psychology.md | 🔴 OBRIGATÓRIO | Sempre leia primeiro! |
| color-system.md | ⚪ Opcional | Decisões de cor/paleta |
| typography-system.md | ⚪ Opcional | Seleção de fonte/combinação |
| 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 |
|---|---|---|
scripts/ux_audit.py | Auditoria de Psicologia UX e Acessibilidade | python scripts/ux_audit.py <caminho_do_projeto> |
⚠️ CRÍTICO: PERGUNTE ANTES DE ASSUMIR (OBRIGATÓRIO)
PARE! Se a solicitação do usuário for aberta, NÃO use seus padrões favoritos.
Quando o Prompt do Usuário For Vago, PERGUNTE:
Cor não especificada? Pergunte:
"Qual paleta de cores você prefere? (azul/verde/laranja/neutra/outra?)"
Estilo não especificado? Pergunte:
"Qual estilo você está buscando? (minimalista/ousado/retrô/futurista/orgânico?)"
Layout não especificado? Pergunte:
"Você tem 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 |
|---|---|---|
| Bento Grids (Clichê Moderno) | Usado em todo design de IA | Por que este conteúdo PRECISA de um grid? |
| Hero Dividido (Esquerda/Direita) | Previsível e entediante | Que tal tipografia massiva ou narrativa vertical? |
| Gradientes Mesh/Aurora | O fundo "novo" preguiçoso | Qual é uma combinação radical de cores? |
| Glassmorphism | A ideia de IA de "premium" | Que tal 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 / Empoderar" | Redação gerada por IA | Como um humano diria isso? |
| Fundo escuro + brilho neon | Superusado, "cara 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ê escolhe te aproxima um passo de um modelo 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 |
|---|---|---|
| Cronograma | Quanto tempo temos? | 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 divulgaçã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
REFLETIVO (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 Grid de 8 Pontos
Todo espaçamento e tamanho em múltiplos de 8:
├── Apertado: 4px (meio passo para micro)
├── Pequeno: 8px
├── Médio: 16px
├── Grande: 24px, 32px
├── Extragrande: 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 | Corresponder à 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 Precisar 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-azulado escuro, Ouro, Esmeralda | Tons brilhantes de baixo valor |
| 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 de cores detalhada: color-system.md
5. Princípios de Tipografia
Seleção de Escala
| Tipo de Conteúdo | Proporção de 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/exibição | 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 serifa + sem serifa
Regras de Legibilidade
- Comprimento da linha: 45-75 caracteres ideal
- Altura da linha: 1,4-1,6 para texto corrido
- Contraste: Verifique requisitos WCAG
- Tamanho: 16px+ para texto corrido 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-o radicalmente ou nem use.
Hierarquia de Sombras
Conceito de elevação:
├── Elementos mais altos = sombras maiores
├── Deslocamento Y > Deslocamento X (luz de cima)
├── Múltiplas camadas = mais realista
└── Modo escuro: pode precisar de brilho em vez disso
Uso de Gradientes
Gradientes harmoniosos:
├── Cores adjacentes no círculo cromático (análogas)
├── OU mesmo matiz, luminosidade diferente
├── Evite pares complementares agressivos
├── 🚫 **NÃO use Gradientes Mesh/Aurora** (bolhas flutuantes)
└── VARIE radicalmente entre projetos
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 tempo)
├── Tamanho (maior = mais lento)
├── Importância (crítico = claro)
└── Contexto (urgente = rápido, luxo = lento)
Seleção de Easing
| Ação | Easing | Por Quê |
|---|---|---|
| Entrando | Ease-out | Desacelera, se acomoda |
| Saindo | Ease-in | Acelera, sai |
| Ênfase | Ease-in-out | Suave, deliberado |
| Divertido | Bounce | Divertido, energético |
Performance
- Animar apenas transform e opacity
- Respeitar preferência de movimento reduzido
- Testar em dispositivos de baixo custo
Para padrões de animação: animation-guide.md, para avançado: motion-graphics.md
8. Checklist "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ão)
Construtores de Confiança
- Sinais 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/conquista
- Momentos de deleite
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
- Muros 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 ✅)
- Bento grids para landing pages simples
- Gradientes Mesh e Efeitos de Brilho
- Mesma estrutura de layout / clone do Vercel
- Não perguntar 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 cronograma, 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 use 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 - Aprofundamento 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 | Após codificar - Audite acessibilidade, performance 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 a revisão de web-design-guidelines
4. CORREÇÃO → Resolva 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 performance.
Lembre-se: Design é PENSAR, não copiar. Cada projeto merece uma consideração nova com base em seu contexto e usuários únicos. Evite o Porto Seguro Moderno de SaaS!