Esta skill orienta a criação de interfaces frontend de alto nível, distintas e prontas para produção, que evitam a estética genérica de "AI slop". Implemente código funcional real com atenção excepcional a detalhes estéticos e escolhas criativas.
O usuário fornece os requisitos de frontend: um componente, página, aplicação ou interface a ser construída. Ele pode 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 utiliza?
- Tom: Escolha um extremo: brutalmente minimalista, caos maximalista, retrô-futurista, orgânico/natural, luxuoso/refinado, lúdico/brinquedo, editorial/revista, brutalista/cru, art déco/geométrico, suave/pastel, industrial/utilitário, etc. Existem tantos sabores para escolher. Use estes como 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.
Em seguida, implemente código funcional (HTML/CSS/JS, React, Vue, etc.) que seja:
- Pronto para 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
Concentre-se em:
- Tipografia: Escolha fontes bonitas, únicas e interessantes. Evite fontes genéricas como Arial e Inter; opte em vez disso por escolhas distintivas 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 fortes 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 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 encanto do que micro-interações espalhadas. Use disparo por rolagem e estados de hover 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 recorrer a cores sólidas padrão. Adicione efeitos e texturas contextuais 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 granuladas.
NUNCA use estéticas genéricas geradas por IA, como famílias de fontes muito usadas (Inter, Roboto, Arial, fontes do sistema), esquemas de cores clichês (particularmente gradientes roxos em fundos brancos), layouts previsíveis e padrões de componentes, e design padronizado que carece de caráter específico 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 claro e escuro, fontes diferentes, estéticas diferentes. NUNCA convirja para escolhas comuns (Space Grotesk, por exemplo) entre gerações.
IMPORTANTE: Corresponda a complexidade da implementação à visão estética. Designs maximalistas precisam de código elaborado com animações e efeitos extensos. Designs minimalistas ou refinados precisam de moderação, precisão e atenção cuidadosa ao espaçamento, tipografia e detalhes sutis. Elegância vem de executar bem a visão.
Lembre-se: Claude é capaz de trabalho criativo extraordinário. Não se segure, mostre o que pode ser verdadeiramente criado quando se pensa fora da caixa e se compromete totalmente com uma visão distintiva.