Progetta un Foglio inferiore (Bottom Sheet) per questa situazione: I filtri della mappa del telefono si aprono in un foglio trascinabile. Può intravedere, aprirsi completamente o chiudersi. Usa Glassmorphism (Glassmorphism) come direzione visiva contenuta e Animazione a molla (Spring Animation) per il feedback. Mantieni HTML semantico, accesso da tastiera, focus visibile, supporto alla riduzione del movimento e le regole esistenti del progetto.
Trasforma le parole dell'interfaccia in una richiesta di costruzione chiara
Scegli cosa fa l'interfaccia utente, come appare e come si muove. Poi copia una richiesta chiara per il tuo sviluppatore o assistente di codifica AI.
Start with your own situation
Open request builder Build a request you can hand off.
Choose what the UI does, how it looks, and how it moves. Then copy a clear request that includes states, accessibility needs, and checks for done.
Progetta un Tavolozza dei comandi (Command Palette) per questa situazione: Premi Command-K, digita “Invita collega” ed esegui quell’azione dall’elenco. Usa Minimalismo (Minimalism) come direzione visiva contenuta e Movimento ridotto (Reduced Motion) per il feedback. Mantieni HTML semantico, accesso da tastiera, focus visibile, supporto alla riduzione del movimento e le regole esistenti del progetto.
Progetta un Validazione del modulo (Form Validation) per questa situazione: Se una password viola una regola, la pagina lo spiega accanto al campo. I lettori di schermo possono collegare il messaggio a quel campo. Usa Neobrutalismo (Neobrutalism) come direzione visiva contenuta e Microinterazione (Microinteraction) per il feedback. Mantieni HTML semantico, accesso da tastiera, focus visibile, supporto alla riduzione del movimento e le regole esistenti del progetto.
Progetta un Ispettore (Inspector) per questa situazione: Selezionare una carta apre un ispettore per assi, colori ed etichette. La tela rimane visibile. Usa Vetro Liquido (Liquid Glass) come direzione visiva contenuta e Transizione (Transition) per il feedback. Mantieni HTML semantico, accesso da tastiera, focus visibile, supporto alla riduzione del movimento e le regole esistenti del progetto.
Progetta un Modulo di accesso (Sign-In Form) per questa situazione: Un cliente che torna accede con email e password. Può mostrare la password, incollarla da un password manager o recuperare l'accesso senza perdere il suo posto. Usa Stile svizzero (Swiss Style) come direzione visiva contenuta e Inserisci, Esci e Crossfade (Enter, Exit & Crossfade) per il feedback. Mantieni HTML semantico, accesso da tastiera, focus visibile, supporto alla riduzione del movimento e le regole esistenti del progetto.
Progetta un Stato Vuoto, Errore e Successo — Pacchetto di Apprendimento (Empty, Error & Success State — Learning Bundle) per questa situazione: Un nuovo elenco di progetti spiega come creare il primo elemento. Se la rete non funziona, appare Retry e i filtri restano salvati. Usa Claymorphism (Claymorphism) come direzione visiva contenuta e Facilità (Easing) per il feedback. Mantieni HTML semantico, accesso da tastiera, focus visibile, supporto alla riduzione del movimento e le regole esistenti del progetto.