Este skill orienta a criação de interfaces frontend distintas e de nível profissional, que evitam a estética genérica de "IA sem graça". 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 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: Qual problema esta interface resolve? Quem a usa?
- Tom: Escolha um extremo: brutalmente minimalista, caos maximalista, retro-futurista, orgânico/natural, luxuoso/refinado, lúdico/de brinquedo, editorial/revista, brutalista/cru, art déco/geométrico, suave/pastel, industrial/utilitário, etc. Existem muitas opções para escolher. Use essas para inspiração, mas projete uma 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 vai lembrar?
CRÍTICO: Escolha uma direção conceitual clara e execute-a com precisão. Maximalismo ousado e minimalismo refinado funcionam ambos – 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 marcante e memorável
- Coeso, com um ponto de vista estético claro
- Meticulosamente refinado em cada detalhe
Diretrizes Estéticas de Frontend
Foque em:
- Tipografia: Escolha fontes que sejam bonitas, únicas e interessantes. Evite fontes genéricas como Arial e Inter; opte por escolhas distintas que elevem a estética do frontend; pares de fontes inesperados e com personalidade. Combine uma fonte de exibição marcante 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 microinterações. Priorize soluções somente CSS para HTML. Use a biblioteca Motion para React quando disponível. Foque em momentos de alto impacto: um carregamento de página bem orquestrado com revelações escalonadas (animation-delay) cria mais encanto do que microinterações espalhadas. Use gatilhos de scroll 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 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 granulosas.
NUNCA use estéticas genéricas geradas por IA, como famílias de fontes usadas em excesso (Inter, Roboto, Arial, fontes do sistema), esquemas de cores clichê (particularmente gradientes roxos em fundos brancos), padrões de layout e componentes previsíveis, e design padronizado que falta 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 as 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 contençã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: Claude é capaz de trabalhos criativos extraordinários. Não se segure, mostre o que realmente pode ser criado quando se pensa fora da caixa e se compromete totalmente com uma visão distinta.