Frontend Design

• Construindo um novo componente de UI ou página onde a qualidade visual e a distintividade importam, não apenas a correção funcional.
• Prototipando um produto ou landing page e você quer algo que pareça genuinamente projetado em vez de gerado automaticamente.
• Explorando direções criativas para uma marca, aplicativo ou campanha antes de se comprometer com um sistema de design.
• Substituindo uma interface existente sem graça ou genérica por algo que tenha um ponto de vista estético claro.

• Se você precisa de conformidade estrita com marca/sistema de design — esta skill prioriza a distintividade criativa e pode divergir dos guias de estilo existentes.
• Se você precisa apenas de uma API backend ou camada de dados — esta skill é focada exclusivamente em código de apresentação frontend.

Antes de escrever uma única linha de código, a skill se compromete com um tom conceitual claro — brutalmente minimalista, maximalista, orgânico, luxuoso, industrial, editorial, entre muitos outros. O resultado é uma interface com um ponto de vista coerente, não um composto genérico.

Pilhas de fontes genéricas (Inter, Roboto, Arial) são explicitamente evitadas em favor de combinações de fontes de exibição e corpo com personalidade. As paletas de cores utilizam variáveis CSS com tons dominantes e acentos marcantes, em vez de esquemas tímidos e distribuídos de forma uniforme.

As animações são usadas de forma estratégica — revelações orquestradas no carregamento da página com atrasos escalonados, efeitos acionados por rolagem e estados de hover que surpreendem. Soluções apenas em CSS são preferidas para HTML; a biblioteca Motion é utilizada para React quando disponível.

Os planos de fundo vão além das cores sólidas: malhas de gradiente, texturas de ruído, padrões geométricos, transparências em camadas, sombras dramáticas, sobreposições de granulado e bordas decorativas são usados de forma contextual para criar profundidade e atmosfera.

Os layouts privilegiam assimetria, sobreposição, fluxo diagonal e elementos que rompem a grade. O espaço negativo generoso ou a densidade controlada são escolhidos de forma deliberada — nunca por padrão.

O código gerado é funcional e de nível profissional, com suporte a HTML/CSS/JS, React, Vue e outros frameworks. A complexidade acompanha a visão estética — designs maximalistas incluem animações elaboradas; os minimalistas entregam precisão e contenção.

Um fundador quer uma landing page que se destaque dos concorrentes. A skill escolhe uma direção estética ousada — por exemplo, editorial/magazine com uma forte hierarquia tipográfica — e gera uma página totalmente funcional com animações de rolagem e um sistema de cores distinto.

Um designer ou desenvolvedor precisa de um site pessoal que reflita sua personalidade. A skill evita estruturas com aparência de template e produz algo memorável, talvez com um layout assimétrico, um cursor personalizado e uma combinação de fontes cuidadosamente escolhida.

Uma equipe precisa de um componente de interface com alta densidade de dados — uma tabela, card de gráfico ou painel de filtros — que ainda transmita um design cuidadoso. A skill aplica uma estética utilitária ou minimalista refinada, com espaçamento meticuloso e movimentos sutis para dar ao componente uma aparência polida.

Uma página de campanha precisa ser imersiva e visualmente impactante. A skill pode produzir uma página maximalista, rica em animações, com efeitos visuais em camadas, tipografia dramática e animações de entrada orquestradas que geram encantamento genuíno.