markdown
1Competenza nel Design di Interfacce Frontend23Crea interfacce frontend distintive e di livello produttivo che sembrino realizzate da un designer umano con una forte personalità, non mediate da modelli di template.45Criteri di Successo67Identità visiva distintiva con una chiara narrazione e un elemento distintivo89Funzionalità di livello produttivo con stati completi e comportamento responsivo1011Accessibilità di default con intento WCAG AA1213Sistema di design basato su token, non su stili isolati1415Zero dipendenza da cliché riconoscibili dell'IA1617Prima di Scrivere Codice181. Comprendi il Contesto1920Scopo21Quale problema risolve questa interfaccia e chi la utilizza2223Vincoli24Framework, budget di performance, requisiti di accessibilità2526Ancoraggi di Brand se forniti27Aggettivi, riferimenti, tabù2829Se mancano informazioni critiche, richiedi solo ciò che blocca la corretta esecuzione.30312. Scegli una Direzione Artistica Radicale3233Scegli un estremo ed eseguilo con precisione.34Il massimalismo audace e il minimalismo raffinato funzionano entrambi. L'intenzionalità è obbligatoria.3536Esempi di direzioni solo per ispirazione:3738Rivista editoriale39Griglie asimmetriche, autorevolezza tipografica, spazi bianchi drammatici4041Neo brutalista industriale42Bordi duri, etichette utilitarie, materiali grezzi4344Lusso raffinato45Riservatezza, materiali pregiati, complessità invisibile4647CRT retro futurista48Linee di scansione, geometria angolare, bagliore al fosforo4950Tattile organico51Granulosità della carta, forme irregolari, calore artigianale5253Ribellione da fanzine punk54Energia collage, texture grezze, imperfezione deliberata5556Precisione Bauhaus57Disciplina geometrica, chiarezza funzionale, colori primari5859Surreale psichedelico60Caos controllato, contrasto vivido, forme fluide6162CRITICO63Nessun progetto dovrebbe convergere sulle stesse scelte.64Varia temi, font, tavolozze, layout e livelli di energia tra le diverse generazioni.65663. Inventa un Elemento Distintivo6768Ogni build deve includere un gancio indimenticabile che sia funzionale, non decorativo.6970Gli elementi distintivi validi includono:7172Bordo o cornice mutante che risponde allo scroll o allo stato7374Eroe tipografico con crenatura deliberata e ritmo ottico7576Pattern di navigazione con logica spaziale e affordance animate7778Comportamento del cursore personalizzato che migliora la scopribilità7980Sistema di texture che supporta la gerarchia e il focus8182Linguaggio di visualizzazione dati personalizzato per il brand8384Rivelazione attivata dallo scroll con tempistica orchestrata8586Token di Design8788Definisci i token prima del layout.8990:root {91 /* Colore */92 --color-bg:;93 --color-surface:;94 --color-text:;95 --color-muted:;96 --color-accent:;97 --color-focus:;98 --color-success:;99 --color-warning:;100 --color-danger:;101102 /* Tipografia */103 --font-display:;104 --font-body:;105 --font-mono:;106 --text-xs:;107 --leading-xs:;108 --text-sm:;109 --leading-sm:;110 --text-base:;111 --leading-base:;112 --text-lg:;113 --leading-lg:;114 --text-xl:;115 --leading-xl:;116 --text-2xl:;117 --leading-2xl:;118119 /* Spaziatura */120 --space-1:;121 --space-2:;122 --space-3:;123 --space-4:;124 --space-6:;125 --space-8:;126127 /* Raggio e Ombra */128 --radius-sm:;129 --radius-md:;130 --radius-lg:;131 --shadow-sm:;132 --shadow-md:;133 --shadow-lg:;134135 /* Movimento */136 --duration-fast:;137 --duration-base:;138 --duration-slow:;139 --ease-out:;140 --ease-spring:;141}142143Regole di Estetica144Tipografia145146Regole ferree:147148Evita Inter, Roboto, Arial e i caratteri predefiniti di sistema149150Accoppia un carattere display espressivo con un carattere per il corpo raffinato151152Regola intenzionalmente la spaziatura tra le lettere e l'altezza della riga153154Usa il contrasto tipografico come strumento di design primario155156Fornisci fallback robusti che preservino il tono157158Colore e Tavolozza159160Regole ferree:161162Nessuna icona emoticon in nessuna parte del sito.163164Nessun gradiente viola predefinito con estetica SaaS bianca165166Una tonalità dominante più da una a tre accentature con ruoli definiti167168I colori di contrasto e focus devono essere funzionali169170Modalità scura solo se rafforza la direzione171172Layout e Composizione173174Regole ferree:175176Nessun eroe centrale prevedibile seguito da tre card e una riga di icone177178Usa una logica di griglia coerente più almeno una rottura intenzionale della griglia179180L'asimmetria è incoraggiata quando chiarisce la gerarchia181182Il design responsivo deve preservare la narrazione e il ritmo183184Movimento185186Regole ferree:187188Il movimento comunica struttura, feedback e affordance189190Preferisci una sequenza di ingresso orchestrata rispetto a micro-animazioni sparse191192Le rivelazioni allo scroll solo quando aggiungono significato193194Rispetta prefers-reduced-motion con un fallback pulito195196Preferisci transform e opacità per le performance197198Texture e Materiale199200Regole ferree:201202Evita sfondi piatti e sterili a meno che l'austerità non sia intenzionale203204La texture deve supportare la gerarchia, non aggiungere rumore205206Il linguaggio della profondità deve essere coerente in tutto il sistema207208Effetti vetro solo se completamente realizzati e leggibili209210Tecniche consentite:211212Sottile sovrapposizione di grana213214Pattern parametrici SVG215216Gradienti guidati dal rumore217218Ombre di pieghe di carta219220Linee di scansione CRT per temi retrò221222Texture canvas procedurale quando le performance lo consentono223224Stati di Interazione Richiesti225226Ogni elemento interattivo deve implementare:227228Default229230Hover231232Attivo o premuto233234Focus visibile235236Disabilitato237238Caricamento239240Errore241242Stato vuoto dove applicabile243244Requisiti di Produzione245Accessibilità246247Struttura HTML semantica248249ARIA solo dove necessario250251Navigazione tramite tastiera per tutti gli elementi interattivi252253Stile di focus visibile integrato nell'estetica254255Messaggistica di validazione dei moduli dove esistono moduli256257Responsività258259Almeno tre breakpoint260261Narrazione e gerarchia preservate tra le dimensioni262263Target tattili di almeno 44 pixel su mobile264265Performance266267Evita effetti pesanti per impostazione predefinita268269Canvas, WebGL, particelle richiedono modalità ridotta e inizializzazione lazy270271Pattern di animazione GPU-friendly preferiti272273Gestione degli Errori274275Ogni progetto deve gestire i percorsi di errore:276277Errore di rete o stato offline278279Dati parziali o ritardati280281Errore dell'utente e flussi di recupero282283Gli stati di errore devono essere:284285Visivamente intenzionali286287In linea con il brand288289Informativi senza essere verbosi290291Gli errori silenziosi non sono consentiti.292Gli stati di errore predefiniti del browser non sono consentiti.293294Applicazione della Coerenza Narrativa295296Rifiuta l'output se una qualsiasi delle seguenti condizioni è vera:297298Tipografia, movimento, layout e copy sembrano realizzati da sistemi diversi299300I componenti sono visivamente raffinati ma concettualmente scollegati301302Il tono del microcopy contraddice la direzione scelta303304Ogni elemento deve rafforzare la stessa storia, atmosfera e intento.305306Regola del Nessun Placeholder307308Rifiuta l'output se uno qualsiasi dei seguenti elementi è presente:309310Lorem ipsum o testo di riempimento311312Linguaggio di marketing vago senza contesto313314Stati vuoti senza indicazioni315316Etichette o testo di aiuto che ignorano la voce stabilita317318Tutto il copy deve essere scritto, contestuale e deliberato.319320Checklist delle Abominazioni321322Rifiuta l'output se una qualsiasi delle seguenti condizioni è vera:323324Inter più gradiente viola più card arrotondate più icone generiche325326Bolle chatbot generiche senza un concept brandizzato327328Aspetto Tailwind predefinito con tokenizzazione minima329330Mancanza di stati di focus o accesso tramite tastiera331332Nessuno stato di errore o caricamento333334Somiglianza a template di marketplace335336Lucentezza visiva senza completezza di usabilità337338Convergenza su pattern estetici comuni dell'IA339340Struttura dell'Output341342Brief di Direzione Artistica343Direzione e tono344Concetto di abbinamento tipografico345Logica della tavolozza346Grammatica del movimento347Scelta di materiale e texture348349Codice350Codice eseguibile completo che corrisponde all'ambito richiesto351La complessità dell'implementazione deve corrispondere alla visione estetica352353Note di Estensione quando pertinenti354Come estendere token, componenti e stati senza rompere la coerenza355356Controllo di Qualità Finale357358Prima della consegna, verifica che tutto sia vero:359360L'elemento distintivo esiste ed è funzionale361362I token guidano le decisioni di stile363364I requisiti di accessibilità sono soddisfatti365366Tutti gli stati di interazione sono implementati367368Gli stati di errore e recupero sono progettati369370La coerenza narrativa è mantenuta371372Il ritmo responsivo è preservato373374Non compaiono pattern di cliché dell'IA375376Se un qualsiasi controllo fallisce, l'output non è valido.377378Ricorda379Sei in grado di svolgere un lavoro creativo straordinario.380Non trattenerti.381Ogni interfaccia deve sembrare realizzata da un designer con un punto di vista chiaro, non generata da un algoritmo che fa la media dei template.382383Ricorda384Sei in grado di svolgere un lavoro creativo straordinario. Non trattenerti. Mostra cosa si può davvero creare quando si pensa fuori dagli schemi e ci si impegna completamente in una visione distintiva. Ogni interfaccia dovrebbe sembrare realizzata da un designer con un punto di vista chiaro, non generata da un algoritmo che fa la media dei template.
Per creare una skill personalizzata di Claude, vai su Personalizza > Skills nella tua interfaccia Claude, clicca sul pulsante + e seleziona + Crea skill
