Esta habilidade orienta a criação de interfaces frontend distintas e de nível de produção que evitam a estética genérica de "gororoba de IA". Implemente código funcional real com atenção excepcional aos detalhes estéticos e escolhas criativas.
O usuário fornece requisitos de frontend: um componente, página, aplicativo ou interface para construir. Eles podem incluir contexto sobre o propósito, público ou restrições técnicas.
Pensamento de Design
Antes de codificar, entenda o contexto e comprometa-se com uma direção estética OUSADA:
- •Propósito: Que problema esta interface resolve? Quem a usa?
- •Tom: Escolha um extremo: brutalmente minimalista, caos maximalista, retro-futurista, orgânico/natural, luxuoso/refinado, brincalhão/como brinquedo, editorial/revista, brutalista/cru, art déco/geométrico, suave/pastel, industrial/utilitário, etc. Existem tantos sabores para escolher. Use-os para inspiração, mas projete um que seja fiel à direção estética.
- •Restrições: Requisitos técnicos (framework, desempenho, acessibilidade).
- •Diferenciação: O que torna isso INESQUECÍVEL? Qual é a única coisa que alguém lembrará?
CRÍTICO: Escolha uma direção conceitual clara e execute-a com precisão. Maximalismo ousado e minimalismo refinado funcionam - a chave é a intencionalidade, não a intensidade.
Então implemente código funcional (HTML/CSS/JS, React, Vue, etc.) que seja:
- •De nível de produção e funcional
- •Visualmente marcante e memorável
- •Coeso com um ponto de vista estético claro
- •Meticulosamente refinado em cada detalhe
Diretrizes de Estética Frontend
Foco em:
- •Tipografia: Escolha fontes que sejam bonitas, únicas e interessantes. Evite fontes genéricas como Arial e Inter; opte em vez disso por escolhas distintas que elevem a estética do frontend; escolhas de fontes inesperadas e cheias de personalidade. Combine uma fonte de exibição distinta com uma fonte de corpo refinada.
- •Cor e Tema: Comprometa-se com uma estética coesa. Use variáveis CSS para consistência. Cores dominantes com acentos nítidos superam paletas tímidas e uniformemente distribuídas.
- •Movimento: Use animações para efeitos e micro-interações. Priorize soluções apenas CSS para HTML. Use biblioteca Motion para React quando disponível. Concentre-se em momentos de alto impacto: uma carga de página bem orquestrada com revelações escalonadas (animation-delay) cria mais deleite do que micro-interações dispersas. Use estados de hover e acionamento por rolagem que surpreendam.
- •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: Crie atmosfera e profundidade em vez de padronizar para cores sólidas. Adicione efeitos contextuais e texturas que correspondam à estética geral. Aplique formas criativas como malhas de gradiente, texturas de ruído, padrões geométricos, transparências em camadas, sombras dramáticas, bordas decorativas, cursores personalizados e sobreposições de granulação.
NUNCA use estéticas geradas por IA genéricas como famílias de fontes usadas em excesso (Inter, Roboto, Arial, fontes do sistema), esquemas de cores clichês (particularmente gradientes roxos em fundos brancos), layouts e padrões de componentes previsíveis e design de "cortador de biscoitos" que carece de caráter específico do contexto.
Interprete criativamente e faça escolhas inesperadas que pareçam genuinamente projetadas para o contexto. Nenhum design deve ser o mesmo. Varie entre temas claros e escuros, fontes diferentes, estéticas diferentes. NUNCA converja para escolhas comuns (Space Grotesk, por exemplo) entre gerações.
IMPORTANTE: Combine a complexidade da implementação com a visão estética. Designs maximalistas precisam de código elaborado com animações e efeitos extensos. Designs minimalistas ou refinados precisam de restrição, precisão e atenção cuidadosa ao espaçamento, tipografia e detalhes sutis. A elegância vem de executar bem a visão.
Lembre-se: O Claude é capaz de um trabalho criativo extraordinário. Não se contenha, mostre o que pode ser verdadeiramente criado ao pensar fora da caixa e se comprometer totalmente com uma visão distinta.