Frontend Design

---
name: frontend-design
description: Criar interfaces frontend distintas e de qualidade produtiva com alto padrão de design. Use essa habilidade quando o usuário pedir para construir componentes web, páginas, artefatos, pôsteres ou aplicações (exemplos incluem websites, landing pages, dashboards, componentes React, layouts HTML/CSS, ou ao estilizar/embelezar qualquer UI web). Gera código criativo e polido com UI design que evita estéticas genéricas de IA.
license: Termos completos em LICENSE.txt
---

Essa habilidade orienta a criação de interfaces frontend distintas e de qualidade produtiva que evitam estéticas genéricas de "AI slop". Implemente código funcional e real 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 a construir. 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**: Qual problema essa interface resolve? Quem a usa?
- **Tom**: Escolha um extremo: minimalismo brutal, caos maximalista, retro-futurista, orgânico/natural, luxo/refinado, lúdico/brinquedista, editorial/revista, brutalista/bruto, art déco/geométrico, suave/pastel, industrial/utilitário, etc. Existem muitos estilos para escolher. Use-os como inspiração, mas design um que seja genuíno para a direção estética.
- **Restrições**: Requisitos técnicos (framework, performance, acessibilidade).
- **Diferenciação**: O que torna isso INESQUECÍVEL? Qual é a uma 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 — a chave é intencionalidade, não intensidade.

Então implemente código funcional (HTML/CSS/JS, React, Vue, etc.) que seja:
- De qualidade produtiva e funcional
- Visualmente impactante 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 belas, únicas e interessantes. Evite fontes genéricas como Arial e Inter; opte por escolhas distintivas que elevem a estética do frontend; fontes de exibição inesperadas e com caráter. Combine uma fonte de exibição distintiva com uma fonte de corpo refinada.
- **Cor & Tema**: Comprometa-se com uma estética coesa. Use variáveis CSS para consistência. Cores dominantes com acentos afiados superam paletas tímidas e uniformemente distribuídas.
- **Movimento**: Use animações para efeitos e micro-interações. Priorize soluções CSS-only para HTML. Use a biblioteca Motion para React quando disponível. Foco em momentos de alto impacto: uma página de carregamento bem orquestrada com reveais escalonados (animation-delay) cria mais delícia que micro-interações espalhadas. Use scroll-triggering e hover states que surpreendem.
- **Composição Espacial**: Layouts inesperados. Assimetria. Sobreposição. Fluxo diagonal. Elementos que quebram a grade. Espaço negativo generoso OU densidade controlada.
- **Fundos & Detalhes Visuais**: Crie atmosfera e profundidade em vez de recorrer a cores sólidas. Adicione efeitos contextuais e texturas que combinam com a estética geral. Aplique formas criativas como gradient meshes, texturas de ruído, padrões geométricos, transparências em camadas, sombras dramáticas, bordas decorativas, cursores customizados e overlays de grain.

NUNCA use estéticas genéricas geradas por IA como famílias de fontes superusadas (Inter, Roboto, Arial, fontes de sistema), esquemas de cores clichê (particularmente gradientes roxos em fundos brancos), layouts previsíveis e padrões de componentes, e design padrão que carece de caráter específico do contexto.

Interprete criativamente e faça escolhas inesperadas que se sintam genuinamente design para o contexto. Nenhum design deve ser igual. Varie entre temas claro e escuro, fontes diferentes, estéticas diferentes. NUNCA converja para escolhas comuns (Space Grotesk, por exemplo) entre gerações.

**IMPORTANTE**: Combine a complexidade de implementação à visão estética. Designs maximalistas precisam de código elaborado com animações e efeitos extensivos. Designs minimalistas ou refinados precisam de contenção, precisão e atenção cuidadosa ao espaçamento, tipografia e detalhes sutis. Elegância vem de executar a visão bem.

Lembre-se: Claude é capaz de trabalho criativo extraordinário. Não se retenha, mostre o que pode ser verdadeiramente criado quando se pensa fora da caixa e se compromete totalmente com uma visão distintiva.