Usa il prompt
Aggiungi il tuo brief
Aggiungi qui sotto il tuo contesto. Verrà incluso nel prompt quando lo copi o lo scarichi.
Crea uno studio dell’interazione in HTML/CSS/JavaScript con stati iniziale, attivo e completato espliciti e un’alternativa leggibile per prefers-reduced-motion per [PROJECT] e [AUDIENCE]. L’attività è: Transizione della finestra di dialogo modale.
Contenuti e struttura obbligatori
Progetta un overlay discreto e un’entrata della finestra di dialogo che concentri l’attenzione sull’attività.
Usa [APPROVED_CONTENT] come fonte per nomi, date, dati, dichiarazioni e destinazioni. Elenca gli input mancanti prima di sostituire qualsiasi elemento. Se è necessaria una dimostrazione, indica che i contenuti sono fittizi. Non inventare citazioni di clienti, classifiche, loghi di partner o funzionalità del prodotto.
Direzione del design
Usa [BRAND_RULES] e il design system già selezionato nel progetto. Se non è stato fornito alcun sistema, parti da questa direzione: bianco, antracite e accenti verde acceso; stati iniziale, di transizione e finale chiaramente etichettati. Mantieni coerenti tipografia, spaziatura e ruoli cromatici. Dai priorità all’attività rispetto agli elementi decorativi ed evita una raccolta generica di schede non correlate.
Preparazione dei contenuti
Definisci l’azione di apertura, lo scopo della finestra di dialogo, il focus iniziale, le regole di chiusura ed eventuali modifiche non salvate. Mantieni l’azione della finestra modale distinta dalla sua semplice apertura.
Layout e comportamento
Usa un overlay discreto e un’entrata breve, rendendo immediatamente disponibili il titolo e il controllo di chiusura. Abbina la transizione visiva a un comportamento completo di gestione del focus.
Verifica di accettazione specifica dell'attività
- Mantieni correttamente il focus all’interno della finestra, ripristinalo alla chiusura e rispetta la preferenza per un movimento ridotto.
- Apri la finestra da diverse azioni, premi Escape e chiudila dopo aver inserito del testo.
- Il focus deve tornare correttamente al punto di partenza e il movimento ridotto non deve compromettere l’overlay né il contenimento della navigazione da tastiera.
Implementazione e revisione
Mantieni il testo modificabile. Usa una struttura semantica, controlli descrittivi, un focus da tastiera visibile e stati vuoti/di errore appropriati. Verifica i layout stretti e ampi. Rispetta le preferenze per la riduzione del movimento. Mantieni il framework e le dipendenze esistenti del progetto; non sostituire lo stack senza segnalarlo. Restituisci i file modificabili e spiega eventuali comportamenti incompleti o input non supportati. Esamina questa attività specifica prima di proporre funzionalità aggiuntive.
Rendi disponibili tutte le informazioni e le azioni senza animazione. Ove pertinente, consenti di mettere in pausa o chiudere. Documenta trigger e transizioni; non sostituire l’avanzamento effettivo con un timer decorativo.
Allegato di riferimento e obiettivo di ricostruzione
Allega reference.webp, incluso nel pacchetto scaricabile di questo prompt, insieme al prompt in OpenDesign. Crea un risultato modificabile con composizione e gerarchia simili; non incorporare l'intera immagine di riferimento come interfaccia finale. Mantieni i contenuti di progetto approvati e le regole del brand se sono in conflitto con le etichette fittizie dell'esempio. Se l'immagine manca o è illeggibile, richiedila invece di dichiarare fedeltà visiva.
Composizione e contenuti di riferimento
Usa il file reference.webp allegato come riferimento visivo per la transizione della finestra di dialogo modale. Prima di iniziare, individua dall’alto verso il basso le aree principali, le relative larghezze e altezze, l’allineamento, le spaziature, la gerarchia tipografica, i colori delle superfici, i bordi, le immagini e i componenti ricorrenti. Mantieni queste relazioni anziché sostituirle con un modello generico. Contenuto richiesto per l’attività: progetta un overlay discreto e un’entrata della finestra di dialogo che concentri l’attenzione sull’attività. Quando traduci l’immagine in elementi modificabili, segui queste indicazioni specifiche per il layout: usa un overlay discreto e un’entrata breve, rendendo immediatamente disponibili il titolo e il controllo di chiusura. Abbina la transizione visiva a un comportamento completo di gestione del focus.
Direzione visiva dal brief di esempio
bianco, antracite e accenti verde acceso; stati iniziale, di transizione e finale chiaramente etichettati.
Specifiche di interazione
Il riferimento è un concept statico: il comportamento descritto di seguito è un requisito da implementare, non una prova che l’immagine sia già funzionante. Copia il prompt personalizzato nel tuo progetto di lavoro. Inizia dall’attività principale: progetta un overlay discreto e un’entrata della finestra di dialogo che concentri l’attenzione sull’attività. Mantieni correttamente il focus all’interno della finestra, ripristinalo alla chiusura e rispetta la preferenza per un movimento ridotto. Per ogni controllo visibile, specifica l’azione che lo attiva, lo stato interessato e il feedback; implementa le modifiche locali mantenendo uno stato coerente nelle viste correlate. Assicurati che ricerca e filtri producano risultati reali, che i controlli di selezione abbiano uno stato attivo esplicito e che le azioni di salvataggio mostrino, ove pertinente, un feedback visibile per gli stati in corso, riuscito e non riuscito. Non aggiungere flussi di lavoro non correlati. Usa link appropriati per la navigazione, pulsanti per le azioni e nomi accessibili per i controlli a icona. Non lasciare intendere che un’operazione di backend sia riuscita quando è cambiata solo una demo locale.
Confronto visivo e consegna
- Confronta il risultato con l'immagine allegata usando le stesse proporzioni. Prima di perfezionare i dettagli decorativi, verifica il posizionamento delle aree principali, le dimensioni relative delle immagini, le interruzioni di riga, la spaziatura, la gerarchia tipografica, il contrasto, gli stati attivi e la densità dei contenuti.
- Quindi testa il layout stretto senza comprimere il testo desktop in etichette minuscole.
- Mantieni loghi, foto e icone come risorse separate e tutte le etichette significative modificabili. Elenca eventuali caratteri o risorse non disponibili e qualsiasi scostamento intenzionale. Restituisci i file funzionanti insieme a una descrizione concisa dei comportamenti implementati e delle integrazioni ancora necessarie; non promettere un risultato identico al pixel basandoti solo sul prompt.
Scarica prompt + immagine
Include il prompt completo e l'immagine di riferimento a grandezza intera. Allega entrambi in OpenDesign per guidare il layout.
Come scrivere un prompt di design per la transizione di una finestra di dialogo modale
Usa questo prompt di design per la transizione di una finestra di dialogo modale per progettare un overlay discreto e un’entrata della finestra che concentri l’attenzione sull’attività.
Il riferimento è un concept generato dall'IA. Le istruzioni seguenti descrivono cosa creare e testare; l'immagine non dimostra un comportamento funzionante.
Fai seguire la finestra dal focus
La transizione di una finestra modale deve favorire un’attività focalizzata senza lasciare gli utenti della tastiera bloccati dietro l’overlay.
I comportamenti di apertura e chiusura devono essere inclusi nel prompt insieme all’animazione. Usa un overlay discreto e un’entrata breve, rendendo immediatamente disponibili il titolo e il controllo di chiusura. Abbina la transizione visiva a un comportamento completo di gestione del focus.
Dal prompt
Usa un overlay discreto e un’entrata breve, rendendo immediatamente disponibili il titolo e il controllo di chiusura.
Personalizzalo
Apri [DIALOG] con una transizione discreta, sposta il focus al suo interno e mantieni la navigazione da tastiera confinata nella finestra mentre è attiva. Ripristina il focus alla chiusura e rispetta la preferenza per un movimento ridotto.
Prepara i contenuti della transizione della finestra di dialogo modale
Il pannello della transizione mostra il modulo del progetto all’interno di una sovrapposizione, mentre l’elenco sottostante rimane visibile. Definisci i campi obbligatori e impedisci l’interazione con lo sfondo mentre la finestra di dialogo è attiva.
Definisci l’azione di apertura, lo scopo della finestra di dialogo, il focus iniziale, le regole di chiusura ed eventuali modifiche non salvate. Mantieni l’azione della finestra modale distinta dalla sua semplice apertura.
Dal prompt
Progetta un overlay discreto e un’entrata della finestra di dialogo che concentri l’attenzione sull’attività.
Personalizzalo
Per [PROJECT], usa [APPROVED_CONTENT] come fonte per questa transizione della finestra di dialogo modale. Definisci l’azione di apertura, lo scopo della finestra di dialogo, il focus iniziale, le regole di chiusura ed eventuali modifiche non salvate. Mantieni l’azione della finestra modale distinta dalla sua semplice apertura. Individua gli elementi mancanti prima di sostituirli con contenuti dimostrativi.
Chiudi con la tastiera
Il pannello finale torna all'elenco dei progetti, con il controllo di attivazione evidenziato e un nuovo progetto visibile. Verifica il tasto Esc, l'annullamento, il feedback dopo l'invio e il ripristino del focus, anziché presumere che la sequenza di completamento illustrata sia automatica.
Escape o l’azione di chiusura designata deve ripristinare il focus in modo prevedibile. La modalità con movimento ridotto deve mantenere lo stesso flusso dell’attività senza attendere un’animazione superflua. Apri la finestra da diverse azioni, premi Escape e chiudila dopo aver inserito del testo. Il focus deve tornare correttamente al punto di partenza e il movimento ridotto non deve compromettere l’overlay né il contenimento della navigazione da tastiera.
Dal prompt
Mantieni correttamente il focus all’interno della finestra, ripristinalo alla chiusura e rispetta la preferenza per un movimento ridotto.
Personalizzalo
Verifica la transizione della finestra di dialogo modale rispetto a questo requisito: gestire correttamente il focus, ripristinarlo alla chiusura e rispettare la preferenza per la riduzione del movimento. Apri la finestra da diversi elementi di attivazione, premi Escape e chiudila dopo aver inserito del testo. Il focus deve tornare all'elemento appropriato e la riduzione del movimento non deve compromettere l'overlay né il contenimento della navigazione da tastiera. Mantieni i contenuti approvati e modifica solo le parti che non superano questa verifica.
Verifica il risultato della transizione della finestra di dialogo modale
L’anteprima è uno storyboard statico. Non dimostra il funzionamento dell’animazione, le prestazioni misurate o l’accessibilità. Verifica l’interazione implementata e il comportamento con movimento ridotto.
- Apri la finestra da diverse azioni, premi Escape e chiudila dopo aver inserito del testo. Il focus deve tornare correttamente al punto di partenza e il movimento ridotto non deve compromettere l’overlay né il contenimento della navigazione da tastiera.
Prompt di follow-up
Usalo dopo il primo risultato. Restringe la revisione alla parte più importante di questa attività.
Perfeziona l’attuale transizione della finestra di dialogo modale. Aprila da diverse azioni, premi Escape e chiudila dopo aver inserito del testo. Il focus deve tornare correttamente al punto di partenza e il movimento ridotto non deve compromettere l’overlay né il contenimento della navigazione da tastiera. Mantieni i contenuti approvati e la direzione visiva; modifica solo le parti necessarie per risolvere questi problemi.
