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 di progetto esistente per [PROJECT] e [AUDIENCE]. L’attività è: Prenotazione di campi sportivi.
Contenuti e struttura obbligatori
Scegli un centro sportivo e un campo fittizi, seleziona una fascia oraria disponibile e verifica durata, partecipanti e termini di cancellazione prima di una conferma dimostrativa.
Schermate e navigazione
Crea tre viste collegate: Ricerca campi; Fasce orarie; Riepilogo prenotazione. Mantieni visibile il record selezionato nel titolo o nel riepilogo della schermata. Includi un’azione esplicita per tornare indietro e conserva gli input in corso durante il passaggio tra le viste. Posiziona l’azione principale vicino ai contenuti pertinenti e considera le aree sicure sui dispositivi mobili, una tastiera software visibile e le etichette tradotte più 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 anziché inventare dichiarazioni operative. I record dimostrativi possono usare il brand fittizio Court Time; 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, a meno che l’integrazione non sia stata esplicitamente implementata e testata.
Direzione del design
Segui [BRAND_RULES]. Se non viene fornito alcun brand, usa color crema, verde tennis, arancione brillante e una tipografia sportiva marcata. 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 si basino solo sul colore. Rispetta la modalità di movimento ridotto e mantieni opzionali le transizioni animate.
Verifica di accettazione specifica dell'attività
- Ricontrolla una fascia oraria dopo un conflitto e indica che la conferma è un prototipo, senza effettuare una prenotazione reale.
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 Prenotazione di campi sportivi. Prima di procedere, individua dall’alto verso il basso le aree principali, 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 invece di sostituirle con un modello generico. Contenuto richiesto per l’attività: scegli un centro sportivo e un campo fittizi, seleziona una fascia oraria disponibile e verifica durata, partecipanti e termini di cancellazione prima di una conferma dimostrativa. Nel tradurre l’immagine in elementi modificabili, segui queste indicazioni di layout specifiche: inizia con Ricerca campi come schermata iniziale, assegna a Fasce orarie una chiara azione principale e fai in modo che Riepilogo prenotazione spieghi cosa è accaduto e cosa può accadere in seguito. Parti da color crema, verde tennis, arancione brillante e una tipografia sportiva marcata, adattandoli al brand fornito. Mantieni visibili l’identità del record e il contesto di navigazione in tutte e tre le 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 invece di estendere una composizione mobile da un bordo all’altro.
Direzione visiva dal brief di esempio
color crema, verde tennis, arancione brillante, tipografia sportiva marcata.
Specifiche di interazione
Il riferimento è un concept statico: il comportamento descritto di seguito è un requisito da implementare, non la prova che l’immagine sia già funzionante. Copia il prompt personalizzato nel tuo progetto e crea il flusso collegato: scegli un centro sportivo e un campo fittizi, seleziona una fascia oraria disponibile e verifica durata, partecipanti e termini di cancellazione prima di una conferma dimostrativa. Ricontrolla una fascia oraria dopo un conflitto e indica che la conferma è un prototipo, senza effettuare una prenotazione reale. Per ogni controllo visibile, specifica l’evento di attivazione, lo stato interessato e il feedback; implementa le modifiche locali mantenendo uno stato coerente nelle viste correlate. Fai in modo che ricerca e filtri restituiscano risultati reali, che i controlli di selezione abbiano uno stato attivo esplicito e che le azioni di salvataggio mostrino, dove pertinente, feedback visibili di attesa, riuscita ed errore. Non aggiungere flussi non correlati. Usa link appropriati per la navigazione, pulsanti per le azioni e nomi accessibili per i controlli con icone. Non lasciare intendere che un’operazione 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 prenotazione di campi sportivi
Usa questo prompt di design per la prenotazione di campi sportivi per scegliere un centro sportivo e un campo fittizi, selezionare una fascia oraria disponibile e verificare durata, partecipanti e termini di cancellazione prima di una conferma dimostrativa.
Il riferimento è un concept generato dall'IA. Le istruzioni seguenti descrivono cosa creare e testare; l'immagine non dimostra un comportamento funzionante.
Ricontrolla la disponibilità prima della conferma
Un’app per la prenotazione di campi deve spiegare cosa include la fascia oraria selezionata e se è ancora disponibile.
La conferma di un prototipo deve rimanere chiaramente distinta da una prenotazione reale. Inizia con Ricerca campi come schermata iniziale, assegna a Fasce orarie una chiara azione principale e fai in modo che Riepilogo prenotazione spieghi cosa è accaduto e cosa può accadere in seguito. Parti da color crema, verde tennis, arancione brillante e una tipografia sportiva marcata, adattandoli al brand fornito. Mantieni visibili l’identità del record e il contesto di navigazione in tutte e tre le 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 invece di estendere una composizione mobile da un bordo all’altro.
Dal prompt
Crea tre viste collegate: Ricerca campi; Fasce orarie; Riepilogo prenotazione.
Personalizzalo
Scegli [VENUE], campo e fascia oraria fittizi, quindi verifica durata, partecipanti e termini di cancellazione. Ricontrolla eventuali conflitti prima di una conferma dimostrativa chiaramente etichettata.
Prepara i contenuti per Prenotazione di campi sportivi
La disponibilità è mostrata per ogni fascia oraria, incluso un avviso di conflitto; specifica un nuovo controllo prima di procedere.
Fornisci sedi, campi, durate delle fasce orarie e termini di cancellazione fittizi. Includi una fascia oraria che diventa indisponibile durante la verifica e definisci le etichette di conferma della demo affinché il prototipo non possa essere scambiato per una prenotazione reale.
Dal prompt
Scegli un centro sportivo e un campo fittizi, seleziona una fascia oraria disponibile e verifica durata, partecipanti e termini di cancellazione prima di una conferma dimostrativa.
Personalizzalo
Per [PROJECT], usa [APPROVED_CONTENT] come fonte per questa prenotazione di un campo sportivo. Includi i dati approvati e le etichette dei campi per la ricerca dei campi, le fasce orarie e la verifica della prenotazione, oltre alle regole per le azioni e la persistenza, alle risorse del brand e ai requisiti relativi alle autorizzazioni. Individua gli input mancanti prima di sostituirli con contenuti dimostrativi.
Perdita della fascia oraria selezionata
Il riepilogo mostra una fascia disponibile ricontrollata e una conferma valida solo per il prototipo; richiedi un nuovo controllo della disponibilità e distingui una dimostrazione locale da una prenotazione reale.
Conserva la sede e gli altri dettagli mentre richiedi un orario sostitutivo. Non mostrare una prenotazione riuscita dopo un conflitto di disponibilità. Verifica prima questo specifico caso limite: ricontrolla una fascia oraria dopo un conflitto ed etichetta la conferma come prototipo senza effettuare una prenotazione reale. Poi esegui il flusso principale con un titolo del record lungo, nessun record salvato 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 il ritorno alla schermata precedente conservi i dati inseriti e che uno screen reader incontri titolo, stato e azione principale in un ordine logico.
Dal prompt
Ricontrolla una fascia oraria dopo un conflitto e indica che la conferma è un prototipo, senza effettuare una prenotazione reale.
Personalizzalo
Verifica la prenotazione del campo sportivo rispetto a questo requisito: ricontrolla una fascia oraria dopo un conflitto ed etichetta la conferma come prototipo senza effettuare una prenotazione reale. Verifica prima questo specifico caso limite: ricontrolla una fascia oraria dopo un conflitto ed etichetta la conferma come prototipo senza effettuare una prenotazione reale. Poi esegui il flusso principale con un titolo del record lungo, nessun record salvato 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 il ritorno alla schermata precedente conservi i dati inseriti e che uno screen reader incontri titolo, stato e azione principale in un ordine logico. Conserva i contenuti approvati e modifica solo le parti che non superano questa verifica.
Verifica il risultato della prenotazione del campo sportivo
L'esempio è un concept visivo generato dall'IA. I servizi connessi, le autorizzazioni del dispositivo e i dati persistenti richiedono implementazione e test separati.
- Ricontrolla una fascia oraria dopo un conflitto e indica che la conferma è un prototipo, senza effettuare una prenotazione reale.
Prompt di follow-up
Usalo dopo il primo risultato. Restringe la revisione alla parte più importante di questa attività.
Perfeziona solo la transizione da Fasce orarie a Riepilogo prenotazione. Ricontrolla una fascia oraria dopo un conflitto e indica che la conferma è un prototipo, senza effettuare una prenotazione reale. 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 mantenuti durante un nuovo tentativo.
