Prompt di design per il programma di accompagnamento a un evento

Crea un prototipo di app modificabile e mobile-first utilizzando lo stack esistente del progetto per [PROJECT] e [AUDIENCE]. L’attività è: Programma dell’app per l’evento.

Contenuti e struttura obbligatori

Esplora le sessioni per orario e tema, crea un’agenda personale e mostra sovrapposizioni, cambi di sala e avvisi sull’evento.

Schermate e navigazione

Realizza tre viste collegate: Programma; Dettagli sessione; La mia giornata. Mantieni il record selezionato visibile nel titolo o nel riepilogo della schermata. Supporta un’azione esplicita per tornare indietro e conserva gli input in corso quando ci si sposta tra le viste. Mantieni l’azione principale vicino al contenuto pertinente e considera le aree sicure sui dispositivi mobili, una tastiera software visibile e le etichette tradotte lunghe. Alle larghezze desktop, adatta la composizione senza eliminare passaggi né modificare l’attività.

Dati del progetto

Usa [APPROVED_CONTENT] per nomi, record, etichette, quantità e destinazioni. Chiedi i dati mancanti invece di inventare dichiarazioni operative. I record dimostrativi possono usare il brand fittizio Gather; etichettali come dati di esempio. Spiega quali azioni sono interazioni locali del prototipo e quali richiederebbero autenticazione, persistenza, autorizzazioni o un backend. Non collegare servizi esterni né dichiarare che una transazione è stata completata, a meno che tale integrazione non sia stata esplicitamente implementata e testata.

Direzione del design

Segui [BRAND_RULES]. Se non viene fornito alcun brand, usa nero, bianco, giallo acido e una tipografia marcata da conferenza. Rendi il flusso di lavoro riconoscibile attraverso i suoi contenuti e controlli specifici, anziché ripetere generiche schede da dashboard. Usa una scala di spaziatura coerente e una gerarchia testuale chiara. Includi un indicatore visibile dello stato attivo da tastiera, nomi accessibili, contrasto sufficiente ed etichette di stato che non dipendano dal colore. Rispetta le preferenze di riduzione del movimento e mantieni facoltative le transizioni animate.

Verifica di accettazione specifica dell'attività

• Mostra esplicitamente le sessioni salvate che si sovrappongono e i cambi di fuso orario, anziché rimuovere silenziosamente le selezioni.

Stati di interazione

Implementa il percorso ideale su tre schermate con dati di esempio locali. Includi uno stato vuoto utile, una convalida prima di completare un’azione, uno stato di caricamento o in sospeso e uno stato di errore recuperabile. Le modifiche distruttive richiedono un passaggio di revisione o la possibilità di annullarle. Mantieni coerente lo stato di un record in tutte e tre le viste. Non eliminare senza avviso i dati inseriti solo in parte e non modificare la scelta dell’utente dopo un nuovo tentativo.

Consegna e revisione

Fornisci le viste modificabili dell’app e illustra il modello dei dati, l’eventuale comportamento dell’archiviazione locale e le integrazioni non implementate. Esegui i test a 320px e in un viewport più ampio, usando la navigazione da tastiera e contenuti lunghi. Prima di aggiungere funzionalità, verifica il risultato usando il controllo di accettazione specifico per l’attività riportato sopra. Mantieni il comportamento dimostrativo chiaramente distinto da quello di un servizio di produzione operativo.

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 di riferimento — tre schermate dell’app collegate

L’immagine allegata mostra Gather, un’app fittizia per conferenze, sotto forma di tre schermate mobili della stessa larghezza su uno sfondo di presentazione giallo acido chiaro. Realizza Programma, Dettagli sessione e La mia giornata come viste collegate dell’app. Non presentare il montaggio delle tre schermate come un’unica pagina e non usare l’intero riferimento come sfondo. Su schermi mobili, mostra una vista alla volta. Un’anteprima più ampia può mostrare le viste affiancate per confrontarle, ma l’app funzionante deve mantenere la propria navigazione e il proprio stato.

Schermata Programma

Usa un’area di lavoro quasi bianca con un sottile bordo esterno scuro. Nell’intestazione, abbina il marcato logotipo nero Gather a sinistra a informazioni compatte su date e sede dell’evento a destra, oltre a un’icona di ricerca. Sotto, inserisci un titolo Programma molto grande e in grassetto e una breve introduzione su una sola riga. Aggiungi un selettore di data a tre colonne per mar 14 ott, mer 15 ott e gio 16 ott; la data selezionata è giallo acido, le altre sono bianche con separatori chiari. Sotto sono presenti i filtri Tutti i temi e Tutti i tipi e un controllo compatto per la visualizzazione a elenco. L’elenco principale usa una colonna stretta per l’orario, una barra verticale colorata per il tema, quindi un’etichetta del tema in maiuscolo, il titolo della sessione in grassetto e un’etichetta più piccola per la sala. Ogni riga presenta a destra un’azione circolare con il simbolo più e un sottile divisore orizzontale. I temi illustrati usano blu, giallo, rosa, verde e viola; mostrane anche i nomi, in modo che il colore non sia l’unico indicatore. La navigazione inferiore è nera e include Programma, La mia giornata, Avvisi e Altro; l’icona e l’etichetta attive sono gialle.

Schermata Dettagli sessione

Metti in contrasto la vista elenco chiara con una superficie dei dettagli quasi nera. Disponi in alto i controlli Indietro, Segnalibro e Condividi. Usa una discreta fotografia della conferenza sullo sfondo della sezione superiore, con una sovrapposizione scura che preservi il contrasto del testo. Mostra una piccola etichetta gialla PRODOTTO, un grande titolo giallo su due righe Design Systems at Scale e una riga di supporto bianca. Sotto, inserisci in due colonne i metadati di calendario/orario e sede/sala, con icone lineari. Prosegui con sottili tag degli argomenti contornati, una breve descrizione e una riga dedicata al relatore con ritratto circolare, nome, ruolo, organizzazione e freccia di apertura. Usa un ampio pulsante giallo acido Salva ne Il mio giorno, seguito da un pulsante scuro contornato Aggiungi al calendario. Un divisore introduce Sessioni correlate, con una piccola azione Vedi tutte e righe compatte per le sessioni. Mantieni chiaro il percorso di navigazione a ritroso; quando sostituisci i dati dimostrativi, non inventare relatori reali né dichiarazioni di sostegno.

Schermata Il mio giorno

Torna alla superficie quasi bianca e ripeti l'intestazione Gather, la data, la sede e l'icona delle impostazioni. Usa un grande titolo Il mio giorno e un breve sottotitolo. Un banner di notifica giallo chiaro contiene una campana, il titolo in grassetto Cambio di fuso orario, un testo di supporto e un controllo per chiuderlo. Sotto, mostra La mia agenda, Conflitti (1) e Avvisi (2) come tre segmenti; il segmento selezionato è nero con testo bianco. Le sessioni salvate riutilizzano la struttura delle righe del programma. Una sessione sovrapposta usa un pannello rosa chiaro, l'orario e l'accento della traccia in rosso, un'etichetta esplicita Sovrapposizione con una sessione salvata e un controllo Mantieni entrambe. Una sede modificata appare come una riga rossa Cambio sala: B1 → B2. Ripeti la barra di navigazione inferiore nera con Il mio giorno attivo e un indicatore numerico giallo su Avvisi.

Gerarchia visiva e token

Usa un carattere grotesk neutro e pesante per il logotipo e i titoli grandi, un sans-serif leggibile per testo e controlli, superfici principali nere e quasi bianche e il giallo acido per le azioni principali e gli stati selezionati. Parti da una scala di spaziatura di 8px, un margine orizzontale della pagina di 16–24px, aree di tocco di almeno 44px e un forte contrasto tra titoli, testo e metadati. Considerali valori iniziali per l'implementazione, non specifiche in pixel misurate. Mantieni la compattezza dell'orario, il titolo dei dettagli in grassetto e il netto contrasto chiaro/scuro dello screenshot. Usa fotografie di conferenze originali o con licenza e il ritratto di un relatore fittizio; mantieni le etichette come testo effettivo. I controlli arrotondati di questo esempio fanno parte del riferimento visivo di Gather e sono indipendenti dai pulsanti del sito della raccolta di prompt.

Contratto di interazione e dati — implementa e verifica

Usa record dimostrativi locali con ID di sessione stabili, titolo, traccia, tipo, inizio/fine UTC, fuso orario dell'evento, sala, previousRoom, relatore e stato di salvataggio. Mantieni espliciti selectedDate, searchQuery, i filtri per traccia/tipo, savedSessionIds e dismissedNoticeIds. L'immagine è concettuale: le date e la formulazione relativa al fuso orario non costituiscono un programma autorevole dell'evento. Correggi le date incoerenti dei dati dimostrativi preservando la gerarchia mostrata. Selezionando un giorno, si aggiornano l'evidenziazione della data e l'elenco. La ricerca trova corrispondenze nei nomi delle sessioni e dei relatori; i filtri si combinano e presentano uno stato vuoto utile e un'azione per azzerarli. L'apertura di una riga mostra i dettagli della stessa sessione; Indietro ripristina l'elenco precedente, i filtri e la posizione di scorrimento. I controlli Più e Salva ne Il mio giorno salvano la stessa sessione una sola volta e passano a un chiaro stato salvato. La rimozione aggiorna in modo coerente Il mio giorno e gli avvisi. Rileva le sovrapposizioni con startA < endB e startB < endA per le sessioni salvate nella stessa data. Mostra un avviso ed entrambi i record; Mantieni entrambe conferma il conflitto senza eliminare silenziosamente nessuna delle due selezioni. Conflitti mostra le coppie interessate e rimanda ai relativi dettagli. Un cambio di fuso orario converte gli stessi istanti UTC nel fuso orario nominale scelto, aggiorna date e orari visualizzati e ricalcola il raggruppamento; non deve modificare la durata effettiva degli eventi. Mantieni visibile l'etichetta del fuso orario e fornisci una spiegazione che possa essere chiusa. Un avviso di cambio sala mostra la sala precedente e quella nuova; chiudere l'avviso non ripristina la vecchia sala. Per Aggiungi al calendario, fornisci un file di calendario locale valido oppure indica chiaramente che si tratta di un'azione dimostrativa; non è implicita alcuna connessione a calendari esterni. Condividi può usare il pannello di condivisione della piattaforma, con Copia link come alternativa. Segnalibro, la chiusura delle notifiche e la navigazione devono avere indicatori visibili dello stato attivo da tastiera e nomi accessibili. Mantieni le azioni principali raggiungibili sopra l'area sicura del dispositivo mobile. Includi gli stati nessuna sessione salvata, nessun risultato corrispondente ed errore di archiviazione recuperabile. Non implementare pagamenti, creazione di account o aggiornamenti in tempo reale dell'evento, salvo richiesta separata.

Confronto visivo e consegna

1. 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.
2. Quindi testa il layout stretto senza comprimere il testo desktop in etichette minuscole.
3. 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.