Usa il prompt
Aggiungi il tuo brief
Aggiungi qui sotto il tuo contesto. Verrà incluso nel prompt quando lo copi o lo scarichi.
Crea un prototipo di app modificabile e mobile-first usando lo stack esistente del progetto per [PROJECT] e [AUDIENCE]. L'attività è: Organizzatore di itinerari di viaggio.
Contenuti e struttura obbligatori
Organizza prenotazioni e programmi personali per giorno locale, apri i relativi dettagli di conferma e prepara un pacchetto scaricabile con le informazioni di viaggio.
Schermate e navigazione
Crea tre viste collegate: Giorni del viaggio; Prenotazione; Pacchetto offline. Mantieni il record selezionato visibile nel titolo o nel riepilogo della schermata. Prevedi un'azione Indietro esplicita e conserva gli input in corso quando ci si sposta tra le viste. Mantieni l'azione principale vicino ai contenuti pertinenti e considera le aree sicure dei dispositivi mobili, una tastiera software visibile e le etichette tradotte lunghe. Alle larghezze desktop, adatta la composizione senza rimuovere passaggi né modificare l'attività.
Dati del progetto
Usa [APPROVED_CONTENT] per nomi, record, etichette, quantità e destinazioni. Chiedi i dati mancanti anziché inventare affermazioni operative. I record dimostrativi possono usare il brand fittizio Wayfarer; contrassegnali 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, salvo che l'integrazione sia stata esplicitamente implementata e testata.
Direzione del design
Segui [BRAND_RULES]. Se non viene fornito alcun brand, usa sabbia, blu inchiostro, azzurro chiaro e fotografie di viaggio. Rendi il flusso riconoscibile attraverso contenuti e controlli specifici, anziché ripetere generiche schede da dashboard. Usa una scala di spaziatura coerente e una chiara gerarchia testuale. Includi un indicatore visibile dello stato attivo da tastiera, nomi accessibili, contrasto sufficiente ed etichette di stato che non dipendano dal colore. Rispetta la preferenza per il movimento ridotto e mantieni facoltative le transizioni animate.
Verifica di accettazione specifica dell'attività
- Mantieni i fusi orari locali di ogni tappa e contrassegna le prenotazioni prive di un riferimento di prenotazione confermato.
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 e contenuti di riferimento
Usa il file reference.webp allegato come riferimento visivo per l'Organizzatore di itinerari di viaggio. Prima di iniziare, individua le aree principali dall'alto verso il basso, le relative larghezze e altezze, l'allineamento, la spaziatura, la gerarchia tipografica, i colori delle superfici, i bordi, le immagini e i componenti ripetuti. Mantieni queste relazioni anziché sostituirle con un modello generico. Contenuto obbligatorio dell'attività: organizza prenotazioni e programmi personali per giorno locale, apri i relativi dettagli di conferma e prepara un pacchetto scaricabile con le informazioni di viaggio. Quando traduci l'immagine in elementi modificabili, segui queste indicazioni specifiche per il layout: inizia con Giorni del viaggio come schermata iniziale, assegna a Prenotazione un'azione principale chiara e fai in modo che Pacchetto offline spieghi cosa è successo e cosa può accadere in seguito. Usa sabbia, blu inchiostro, azzurro chiaro e fotografie di viaggio come direzione iniziale, adattandoli al brand fornito. Mantieni visibili l'identità del record e il contesto di navigazione nelle tre schermate. Dai priorità a controlli facilmente raggiungibili con il pollice e a etichette leggibili rispetto ai pannelli decorativi; sugli schermi più ampi, mantieni coerente il flusso anziché estendere una composizione mobile da un bordo all'altro.
Direzione visiva dal brief di esempio
sabbia, blu inchiostro, azzurro chiaro, fotografie di viaggio.
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 e crea il flusso collegato: organizza prenotazioni e programmi personali per giorno locale, apri i relativi dettagli di conferma e prepara un pacchetto scaricabile con le informazioni di viaggio. Mantieni i fusi orari locali di ogni tappa e contrassegna le prenotazioni prive di un riferimento di prenotazione confermato. Per ogni controllo visibile, specifica l'evento di attivazione, lo stato interessato e il feedback; implementa le modifiche locali mantenendo uno stato coerente tra le viste correlate. Fai in modo 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 di attesa, riuscita o errore. Non aggiungere flussi 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 soltanto 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 un organizzatore di itinerari di viaggio
Usa questo prompt di design per un organizzatore di itinerari di viaggio per organizzare prenotazioni e programmi personali per giorno locale, aprire i relativi dettagli di conferma e preparare un pacchetto scaricabile con le informazioni di viaggio.
Il riferimento è un concept generato dall'IA. Le istruzioni seguenti descrivono cosa creare e testare; l'immagine non dimostra un comportamento funzionante.
Mantieni ogni tappa nel proprio orario locale
Un'app per itinerari di viaggio combina prenotazioni e programmi personali in luoghi diversi.
Il fuso orario locale e lo stato della conferma devono rimanere associati a ogni elemento. Inizia con Giorni del viaggio come schermata iniziale, assegna a Prenotazione un'azione principale chiara e fai in modo che Pacchetto offline spieghi cosa è successo e cosa può accadere in seguito. Usa sabbia, blu inchiostro, azzurro chiaro e fotografie di viaggio come direzione iniziale, adattandoli al brand fornito. Mantieni visibili l'identità del record e il contesto di navigazione nelle tre schermate. Dai priorità a controlli facilmente raggiungibili con il pollice e a etichette leggibili rispetto ai pannelli decorativi; sugli schermi più ampi, mantieni coerente il flusso anziché estendere una composizione mobile da un bordo all'altro.
Dal prompt
Crea tre viste collegate: Giorni del viaggio; Prenotazione; Pacchetto offline.
Personalizzalo
Organizza [TRIP_ITEMS] per giorno locale, includendo fuso orario e dettagli di conferma. Contrassegna le prenotazioni non confermate e prepara un pacchetto di informazioni scaricabile che mantenga le stesse distinzioni.
Prepara i contenuti dell'Organizzatore di itinerari di viaggio
I dettagli delle prenotazioni mantengono insieme date, occupazione e conferma; distingui le prenotazioni confermate importate dai programmi inseriti manualmente.
Fornisci tappe di esempio con fusi orari locali, prenotazioni e programmi personali. Includi un elemento privo di un riferimento di prenotazione confermato e stabilisci quali dettagli di conferma includere nel pacchetto scaricabile con le informazioni di viaggio.
Dal prompt
Organizza prenotazioni e programmi personali per giorno locale, apri i relativi dettagli di conferma e prepara un pacchetto scaricabile con le informazioni di viaggio.
Personalizzalo
Per [PROJECT], usa [APPROVED_CONTENT] come fonte per questo organizzatore di itinerari di viaggio. Record e nomi dei campi approvati per Giorni del viaggio; Prenotazione; Pacchetto offline; regole relative alle azioni e alla persistenza; risorse del brand e requisiti di autorizzazione. Individua gli input mancanti prima di sostituirli con contenuti dimostrativi.
Attraversa il confine di un fuso orario
Il pacchetto offline elenca i contenuti prima del download; definisci quali mappe e record siano effettivamente disponibili senza connessione.
L’itinerario deve mantenere l’ora locale di ogni tappa e un ordine facilmente leggibile. Una voce priva di riferimento di prenotazione non deve risultare confermata solo perché compare nel piano. Verifica prima questo caso limite specifico: mantieni i fusi orari locali per ogni tappa ed etichetta le prenotazioni prive di riferimenti di prenotazione confermati. Esegui quindi il flusso principale con un titolo lungo per la voce, nessuna voce salvata e un’azione non riuscita. L’utente deve poter distinguere ciò che è salvato, ciò che è in sospeso e ciò che può essere annullato senza affidarsi al colore. Verifica che, tornando alla schermata precedente, i dati inseriti vengano conservati e che uno screen reader incontri titolo, stato e azione principale in un ordine sensato.
Dal prompt
Mantieni i fusi orari locali di ogni tappa e contrassegna le prenotazioni prive di un riferimento di prenotazione confermato.
Personalizzalo
Verifica l’organizzatore dell’itinerario di viaggio rispetto a questo requisito: mantieni i fusi orari locali per ogni tappa ed etichetta le prenotazioni prive di riferimenti di prenotazione confermati. Verifica prima questo caso limite specifico: mantieni i fusi orari locali per ogni tappa ed etichetta le prenotazioni prive di riferimenti di prenotazione confermati. Esegui quindi il flusso principale con un titolo lungo per la voce, nessuna voce salvata e un’azione non riuscita. L’utente deve poter distinguere ciò che è salvato, ciò che è in sospeso e ciò che può essere annullato senza affidarsi al colore. Verifica che, tornando alla schermata precedente, i dati inseriti vengano conservati e che uno screen reader incontri titolo, stato e azione principale in un ordine sensato. Conserva i contenuti approvati e modifica solo le parti che non superano questa verifica.
Verifica il risultato dell’organizzatore dell’itinerario di viaggio
L'esempio è un concept visivo generato dall'IA. I servizi connessi, le autorizzazioni del dispositivo e i dati persistenti richiedono implementazione e test separati.
- Mantieni i fusi orari locali di ogni tappa e contrassegna le prenotazioni prive di un riferimento di prenotazione confermato.
Prompt di follow-up
Usalo dopo il primo risultato. Restringe la revisione alla parte più importante di questa attività.
Perfeziona soltanto la transizione da Prenotazione a Pacchetto offline. Mantieni i fusi orari locali di ogni tappa e contrassegna le prenotazioni prive di un riferimento di prenotazione confermato. Mostra gli stati pertinenti di attesa, errore e completamento con etichette esplicite. Mantieni la navigazione, la tipografia e le altre schermate approvate. Restituisci le viste modificate e descrivi come i dati inseriti vengono conservati durante un nuovo tentativo.
