Frontend Design

• Costruire un nuovo componente UI o pagina dove contano la qualità visiva e la distintività, non solo la correttezza funzionale.
• Prototipare un prodotto o una landing page e si desidera qualcosa che sembri genuinamente progettato piuttosto che generato automaticamente.
• Esplorare direzioni creative per un brand, un'app o una campagna prima di impegnarsi in un sistema di design.
• Sostituire un'interfaccia esistente anonima o generica con qualcosa che abbia un chiaro punto di vista estetico.

• Se hai bisogno di una rigorosa conformità al brand/design system — questa skill dà priorità alla distintività creativa e potrebbe discostarsi dalle guide di stile esistenti.
• Se hai bisogno solo di un'API backend o di un livello dati — questa skill è focalizzata esclusivamente sul codice di presentazione frontend.

Prima di scrivere una singola riga di codice, la skill si impegna a definire un tono concettuale chiaro — brutalmente minimale, massimalista, organico, lussuoso, industriale, editoriale e molti altri. Il risultato è un'interfaccia con un punto di vista coerente, non un generico assemblaggio.

Gli stack di font generici (Inter, Roboto, Arial) vengono esplicitamente evitati a favore di abbinamenti di font display e body dal carattere marcato. Le palette di colori utilizzano variabili CSS con tonalità dominanti e accenti netti, piuttosto che schemi timidi e distribuiti uniformemente.

Le animazioni vengono utilizzate in modo strategico — rivelazioni orchestrate al caricamento della pagina con ritardi scaglionati, effetti attivati dallo scroll e stati hover che sorprendono. Le soluzioni solo CSS sono preferite per l'HTML; la libreria Motion viene utilizzata per React quando disponibile.

Gli sfondi vanno oltre i colori piatti: mesh di gradienti, texture rumorose, pattern geometrici, trasparenze stratificate, ombre drammatiche, sovrapposizioni di grana, e bordi decorativi vengono utilizzati in modo contestuale per creare profondità e atmosfera.

I layout privilegiano asimmetria, sovrapposizioni, flusso diagonale ed elementi che rompono la griglia. Lo spazio negativo generoso o la densità controllata vengono scelti deliberatamente — mai per impostazione predefinita.

Il codice generato è funzionale e di livello produttivo, con supporto per HTML/CSS/JS, React, Vue e altri framework. La complessità rispecchia la visione estetica: i design massimalisti includono animazioni elaborate, mentre quelli minimalisti offrono precisione e sobrietà.

Un fondatore vuole una landing page che si distingua dalla concorrenza. La skill sceglie una direzione estetica audace — ad esempio, uno stile editoriale/magazine con una forte gerarchia tipografica — e genera una pagina completamente funzionante con animazioni allo scroll e un sistema di colori distintivo.

Un designer o uno sviluppatore ha bisogno di un sito personale che rifletta la propria personalità. La skill evita strutture simili a template e produce qualcosa di memorabile, magari con un layout asimmetrico, un cursore personalizzato e un abbinamento di font scelto con cura.

Un team ha bisogno di un componente di interfaccia ad alta densità di dati — una tabella, una scheda grafico o un pannello di filtri — che abbia comunque un aspetto curato. La skill applica un'estetica utilitaristica o minimalista raffinata, con spaziatura meticolosa e movimenti sottili, per rendere il componente elegante e rifinito.

Una pagina di campagna deve essere coinvolgente e visivamente d'impatto. La skill è in grado di produrre una pagina massimalista, ricca di animazioni, con effetti visivi stratificati, tipografia drammatica e animazioni di ingresso orchestrate che creano un'esperienza davvero piacevole.