Sistema de Design Frontend
Filosofia: Cada pixel tem um propósito. Moderação é luxo. A psicologia do usuário impulsiona as decisões. Princípio Central: PENSE, não decore. PERGUNTE, não suponha.
🎯 Regra de Leitura Seletiva (OBRIGATÓRIA)
Leia os arquivos REQUERIDOS sempre, os OPCIONAIS apenas quando necessário:
| Arquivo | Status | Quando Ler |
|---|---|---|
| ux-psychology.md | 🔴 REQUERIDO | Sempre leia 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. Os outros = apenas se relevante.
🔧 Scripts de Execução
Execute estes para auditorias (não leia, apenas execute):
| Script | Propósito | Uso |
|---|---|---|
| Auditoria Manual | Auditoria de Psicologia UX e Acessibilidade | Use ferramentas de desenvolvedor do navegador e Lighthouse |
⚠️ CRÍTICO: PERGUNTE ANTES DE SUPOR (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/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 (PORTO SEGURO ANTIPADRÃO):
| 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 Split (Esquerda/Direita) | Previsível e Entediante | Que tal Tipografia Massiva ou Narrativa Vertical? |
| Gradientes Mesh/Aurora | O fundo preguiçoso "novo" | Qual é uma combinação radical de cores? |
| Glassmorphism | A ideia de IA de "premium" | Que tal um plano sólido e de alto contraste? |
| Ciano Escuro / Azul Fintech | Porto seguro da proibição roxa | Por que não Vermelho, Preto ou Verde Neon? |
| "Orquestrar / Capacitar" | Copywriting gerado por IA | Como um humano diria isso? |
| Fundo escuro + brilho neon | Exagerado, "aparência de IA" | O que a MARCA realmente precisa? |
| Tudo arredondado | Genérico/Seguro | Onde posso usar arestas afiadas e brutalistas? |
🔴 "Cada estrutura 'segura' que você escolher 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 ISTO ou PERGUNTE AO USUÁRIO:
| Restrição | Pergunta | Por Que Importa |
|---|---|---|
| Cronograma | 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 comedida, 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 perto = mais fácil de clicar | Tamanho adequado de CTAs |
| 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 lembrado mais | 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 quando 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 : Sidebar = 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 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 |
| Inputs | 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 neutra e calma)
30% → Secundário (áreas de suporte)
10% → Destaque (CTAs, realces, atenção)
Psicologia das Cores (Para Tomada de Decisão)
| Se Você Precisa... | 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 Musgo Escuro, Dourado, Esmeralda | Cores brilhantes que parecem baratas |
| Limpo, minimalista | Neutros | Cor esmagadora |
Processo de Seleção
- Qual é o setor? (restringe opções)
- Qual é a emoção? (escolhe a primária)
- Modo claro ou escuro? (estabelece 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/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 serifa + sans serifa
Regras de Legibilidade
- Comprimento da linha: 45-75 caracteres ideal
- Altura da linha: 1,4-1,6 para texto do corpo
- Contraste: Verifique os requisitos WCAG
- Tamanho: 16px+ para corpo na web
Para tipografia detalhada: typography-system.md
6. Princípios de Efeitos Visuais
Glassmorphism (Quando Apropriado)
Propriedades principais:
├── Fundo semitransparente
├── Desfoque de fundo
├── Borda sutil para definição
└── ⚠️ **AVISO:** Glassmorphism azul/branco padrão é um clichê moderno. Use-o radicalmente ou não 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
Uso de Gradientes
Gradientes harmoniosos:
├── Cores adjacentes na roda (análogas)
├── OU mesma matiz, diferentes luminosidades
├── Evite pares complementares agressivos
├── 🚫 **SEM Gradientes Mesh/Aurora** (bolhas flutuantes)
└── VARIE radicalmente de projeto para projeto
Para guia completo de efeitos: visual-effects.md
7. Princípios de Animação
Conceito de Tempo
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 Easing
| Ação | Easing | Por Quê |
|---|---|---|
| Entrar | Ease-out | Desacelerar, estabelecer |
| Sair | Ease-in | Acelerar, sair |
| Ênfase | Ease-in-out | Suave, deliberado |
| Brincalhão | Bounce | Divertido, energético |
Performance
- Anime apenas transform e opacidade
- 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
- Sinais de segurança quando 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 deleite
9. Antipadrõ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 ✅)
- Bento grids 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 (envergonhar o usuário para confirmar)
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 estiver 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 estiver claro → PERGUNTE (não use padrões!)
4. EXECUÇÃO
└── Aplique os princípios acima
└── Verifique contra antipadrõ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 Relacionados
| Skill | Quando Usar |
|---|---|
| frontend-design (este) | Antes de codificar - Aprenda princípios de design (cor, tipografia, psicologia UX) |
| web-design-guidelines | Depois de 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. CORRIJA → Trate os achados da auditoria
Próximo Passo: Depois de codificar, use o 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 consideração fresca com base em seu contexto e usuários únicos. Evite o Porto Seguro Moderno de SaaS!