SuperDesign

• Hai bisogno di un agente AI che generi codice UI (HTML/CSS/Tailwind) dall'aspetto curato e moderno, non preconfezionato.
• Stai costruendo landing page, dashboard o interfacce ricche di componenti e vuoi che venga seguito automaticamente un processo di design strutturato.
• Vuoi un tema coerente tra modalità chiara/scura con tecniche di colore moderne come oklch().
• Hai bisogno di layout accessibili, mobile-first e responsive con HTML semantico corretto già pronto all'uso.

• Stai lavorando in un ambiente mobile nativo (iOS/Android) — queste linee guida sono orientate al web.
• Il tuo progetto utilizza un sistema di design rigido (ad es., stretta aderenza a Material Design) che entra in conflitto con i pattern di tema opinionati forniti qui.

Ogni interfaccia utente viene affrontata attraverso la Progettazione del Layout, la Progettazione del Tema, la Progettazione delle Animazioni e l'Implementazione — in quest'ordine. Questo impedisce di passare direttamente al codice prima che struttura ed estetica vengano considerate, producendo risultati più coerenti.

La skill evita esplicitamente tavolozze generiche datate (come il blu di Bootstrap) e promuove oklch() per definizioni di colore moderne e percettivamente uniformi. Sono inclusi schemi di tema predefiniti per la Dark Mode (stile Vercel/Linear), il Neo-Brutalismo e il Glassmorphism, completi di variabili CSS pronte all'uso.

Viene fornita una lista selezionata a mano di Google Fonts nelle categorie sans-serif, monospace, serif e display, insieme all'integrazione pronta per CDN per le icone Lucide e i componenti Flowbite — eliminando ogni incertezza nelle scelte tipografiche.

Un sistema di notazione conciso per pianificare le micro-interazioni (ad es., button: 150ms [S1→0.95→1] press) mantiene le animazioni intenzionali. Vengono definiti gli intervalli di tempo consigliati per le animazioni di entrata, gli stati hover, la pressione dei pulsanti e le transizioni di pagina.

Le linee guida impongono l'uso di HTML semantico, una corretta gerarchia dei titoli, etichette ARIA, un rapporto minimo di contrasto cromatico di 4,5:1 e il supporto alla navigazione da tastiera — garantendo che gli output rispettino gli standard di accessibilità di base senza ulteriori istruzioni.

Le migliori pratiche consolidate per Card, Pulsanti, Moduli e Navigazione sono integrate — coprendo la profondità delle ombre, le dimensioni delle aree di tocco, gli stati di focus, gli stati di caricamento/disabilitato e il comportamento delle intestazioni fisse.

Chiedi al tuo agente di creare una landing page SaaS e SuperDesign si assicura che segua una struttura organizzata (header → hero → funzionalità → footer), scelga un abbinamento di font moderno, applichi un tema cromatico coerente e generi CSS responsive con approccio mobile-first — il tutto senza alcuna direzione di design manuale.

Quando si prototipa una dashboard di analisi o amministrativa, la skill guida l'agente nel creare prima il wireframe del layout, applicare spaziature coerenti e sottili ombre alle card, e includere stati di hover e animazione — producendo un prototipo dall'aspetto pronto per la produzione.

Usa questa skill per generare un insieme coerente di pulsanti, campi modulo e componenti di navigazione che condividono gli stessi design token (variabili CSS per colore, raggio e ombra) e superano i controlli di accessibilità.

Quando si costruisce un'interfaccia che deve supportare sia la modalità chiara che quella scura, l'approccio basato sulle variabili CSS di SuperDesign e le linee guida sui colori oklch() aiutano l'agente a produrre un sistema consapevole del tema fin dall'inizio, anziché aggiungere la modalità scura in un secondo momento.