Design Frontend
Crie interfaces frontend diferenciadas e de nível de produção que evitem a estética genérica de "IA sem alma". Código funcional real com atenção excepcional a detalhes estéticos e escolhas criativas.
Pensamento de Design (Antes de Codificar)
Comprometa-se com uma direção estética OUSADA:
- Propósito: Que problema essa interface resolve? Quem a usa?
- Tom: Escolha um extremo — brutalmente minimalista, caos maximalista, retrô-futurista, orgânico/natural, luxo/refinado, lúdico/bringuedo, editorial/revista, brutalista/cru, art déco/geométrico, suave/pastel, industrial/utilitário
- Restrições: Requisitos técnicos (framework, desempenho, acessibilidade)
- Diferenciação: O que torna isso INESQUECÍVEL? Qual é a única coisa que alguém lembra?
Escolha uma direção conceitual clara e execute com precisão. Maximalismo ousado e minimalismo refinado funcionam — o segredo é a intencionalidade, não a intensidade.
Pilares da Estética Frontend
Tipografia
Escolha fontes bonitas, únicas e interessantes. Evite fontes genéricas como Arial, Inter, Roboto, fontes de sistema. Combine uma fonte de exibição marcante com uma fonte de corpo refinada. Escolhas inesperadas e cheias de personalidade.
Cor e Tema
Comprometa-se com uma estética coesa. Use variáveis CSS para consistência. Cores dominantes com acentos fortes superam paletas tímidas e uniformemente distribuídas.
Movimento
animações para efeitos e microinterações. Apenas CSS para HTML, biblioteca Motion para React. Momentos de alto impacto: um carregamento de página bem orquestrado com revelações escalonadas gera mais encantamento do que microinterações dispersas. Estados de hover e acionamento por scroll que surpreendem.
Composição Espacial
Layouts inesperados. Assimetria. Sobreposição. Fluxo diagonal. Elementos que quebram a grade. Espaço negativo generoso OU densidade controlada.
Fundos e Detalhes Visuais
Atmosfera e profundidade em vez de cores sólidas. Malhas gradientes, texturas de ruído, padrões geométricos, transparências em camadas, sombras dramáticas, bordas decorativas, cursores personalizados, sobreposições granuladas.
NUNCA Use
- Famílias de fontes usadas em excesso (Inter, Roboto, Arial, fontes de sistema)
- Esquemas de cores clichês (gradientes roxos em fundos brancos)
- Layouts previsíveis e padrões de componentes
- Design genérico que carece de caráter específico ao contexto
Interprete de forma criativa. Nenhum design deve ser igual. Varie entre temas claro e escuro, fontes diferentes, estéticas diferentes. NUNCA convirja para escolhas comuns entre gerações.
Combine a complexidade da implementação com a visão estética. Designs maximalistas precisam de código elaborado. Designs minimalistas exigem moderação, precisão e atenção cuidadosa a espaçamento, tipografia e detalhes sutis.
Contexto de Design do Kevin
Leia wiki/design/design-system.md para os tokens de design atuais antes de iniciar qualquer trabalho de UI.
Veja também: wiki/design/aesthetic-systems.md para arquétipos de direção de arte.
Habilidades Relacionadas
web-design-guidelines— Conformidade com as Diretrizes de Interface Web da Vercelvercel-react-best-practices— Otimização de desempenho para Reactfrontend-design-taste— Habilidade pessoal de direção de arte do Kevinmodern-web-design— Tendências de design e padrões de implementação