Esta skill orienta a criação de interfaces frontend de alto nível, diferenciadas e que evitam a estética genérica de IA ("AI slop"). Implemente código funcional real com excepcional atenção aos detalhes estéticos e escolhas criativas.
O usuário fornece os requisitos de frontend: um componente, página, aplicativo ou interface para construir. Ele pode 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 utiliza?
- Tom: Escolha um extremo: brutalmente minimalista, caos maximalista, retrô-futurista, orgânico/natural, luxo/refinado, lúdico/brinquedo, editorial/revista, brutalista/cru, art déco/geométrico, suave/pastel, industrial/utilitário, etc. Há muitos sabores para escolher. Use-os como inspiração, mas projete algo 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. Tanto o maximalismo ousado quanto o 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 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 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 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 microinterações. Priorize soluções apenas com CSS para HTML. Use a biblioteca Motion para React quando disponível. Foco em momentos de alto impacto: um carregamento de página bem orquestrado com revelações escalonadas (animation-delay) cria mais encantamento do que microinteraçõ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 padrão com cores sólidas. 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 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ê (particularmente gradientes roxos em fundos brancos), layouts e padrões de componentes previsíveis 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: 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 moderaçã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 pode realmente ser criado quando se pensa fora da caixa e se compromete totalmente com uma visão distinta.
Fluxo de trabalho de design orientado por tarefa
Leia o fluxo de trabalho de design completo para a classificação monitorar/operar/criar, descoberta de contexto, variantes, estados e validação. Em produtos existentes, o sistema de design e a tarefa do usuário têm precedência sobre a exploração estética acima: não force fontes incomuns, sobreposição, fundos decorativos ou composição de marketing em UIs operacionais. Use as ferramentas de navegador e arquivo disponíveis, não um modelo de produto específico. Catálogos de referência opcionais são prismer-popular-web-designs e prismer-design-md; carregue apenas para a tarefa solicitada pelo usuário.