Esta habilidade guia a criação de interfaces frontend distintas e de nível profissional que evitam a estética genérica comum de 'IA'. Implemente código real e funcional com atenção excepcional aos detalhes estéticos e escolhas criativas.
O usuário fornece requisitos de frontend: um componente, página, aplicação ou interface para construir. Eles podem incluir contexto sobre o propósito, público-alvo 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, lúdico/tipo brinquedo, editorial/revista, brutalista/cru, art déco/geométrico, suave/pastel, industrial/utilitário, etc. Existem tantos sabores para escolher. Use estes 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 - o segredo é a intencionalidade, não a intensidade.
Em seguida, implemente código funcional (HTML/CSS/JS, React, Vue, etc.) que seja:
- De nível profissional e funcional
- Visualmente impressionante e memorável
- Coeso com um ponto de vista estético claro
- Meticulosamente refinado em cada detalhe
Diretrizes de Estética Frontend
Concentre-se em:
- Tipografia: Escolha fontes bonitas, únicas e interessantes. Evite fontes genéricas como Arial e Inter; opte por escolhas distintas que elevem a estética do frontend; escolhas de fontes inesperadas e com personalidade. Combine uma fonte de destaque 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 microinterações. Priorize soluções apenas com CSS para HTML. Use a biblioteca Motion para React quando disponível. Concentre-se em momentos de alto impacto: um carregamento de página bem orquestrado com revelações escalonadas (animation-delay) cria mais prazer do que microinterações dispersas. Use acionamento por rolagem e estados de foco 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 usar cores sólidas por padrão. Adicione efeitos contextuais e texturas que combinem com a 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 grão.
NUNCA use estéticas genéricas geradas por IA, como famílias de fontes excessivamente usadas (Inter, Roboto, Arial, fontes de sistema), esquemas de cores clichês (particularmente gradientes roxos em fundos brancos), padrões de layout e componentes previsíveis e design padronizado que carece de personalidade específica ao contexto.
Interprete criativamente e faça escolhas inesperadas que pareçam genuinamente projetadas para o contexto. Nenhum design deve ser igual. Varie entre temas claros e escuros, diferentes fontes, diferentes estéticas. NUNCA convirja 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 contenção, precisão e atenção cuidadosa ao espaçamento, tipografia e detalhes sutis. A elegância vem de executar a visão bem.
Lembre-se: Claude é capaz de um trabalho criativo extraordinário. Não se contenha, mostre o que realmente pode ser criado quando se pensa fora da caixa e se compromete totalmente com uma visão distinta.