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à è: Iscrizione ai turni di volontariato.
Contenuti e struttura obbligatori
Consulta i turni di volontariato con informazioni sull'accessibilità e sulla preparazione, richiedi un posto e verifica gli impegni confermati e le modalità di cancellazione.
Schermate e navigazione
Crea tre viste collegate: Turni disponibili; Dettaglio turno; I miei impegni. Mantieni visibile il record selezionato nel titolo o nel riepilogo della schermata. Prevedi un'azione esplicita per tornare indietro e mantieni gli input in corso quando ci si sposta tra le viste. Posiziona l'azione principale vicino ai contenuti pertinenti e tieni conto delle aree sicure sui dispositivi mobili, di una tastiera software visibile e di etichette tradotte lunghe. Alle larghezze desktop, adatta la composizione senza eliminare passaggi né modificare l'attività.
Dati del progetto
Usa [APPROVED_CONTENT] per nomi, dati, etichette, quantità e destinazioni. Chiedi i dati mancanti anziché inventare affermazioni operative. I dati dimostrativi possono usare il brand fittizio Neighbor; 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 azzurro chiaro, blu navy, arancione caldo e una tipografia accogliente. Rendi il flusso riconoscibile attraverso contenuti e controlli specifici, anziché ripetere schede generiche da dashboard. Usa una scala di spaziatura coerente e una gerarchia testuale chiara. Includi un indicatore di focus da tastiera visibile, 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à
- Non trasformare una richiesta in lista d'attesa in un posto confermato; mostra l'effetto di una cancellazione prima dell'invio.
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 Iscrizione ai turni di volontariato. Prima di iniziare, 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 ricorrenti. Mantieni tali relazioni anziché sostituirle con un modello generico. Contenuti richiesti per l'attività: consulta i turni di volontariato con informazioni sull'accessibilità e sulla preparazione, richiedi un posto e verifica gli impegni confermati e le modalità di cancellazione. Usa le seguenti indicazioni di layout specifiche per l'attività nel tradurre l'immagine in elementi modificabili: inizia con Turni disponibili come schermata iniziale, assegna a Dettaglio turno un'azione principale chiara e fai in modo che I miei impegni spieghi cosa è successo e cosa può accadere in seguito. Usa azzurro chiaro, blu navy, arancione caldo e una tipografia accogliente come punto di partenza, adattandoli al brand fornito. Mantieni visibili l'identità del record e il contesto di navigazione nelle tre schermate. Dai priorità a controlli 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 bordo a bordo.
Direzione visiva dal brief di esempio
azzurro chiaro, blu navy, arancione caldo, tipografia accogliente.
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: consulta i turni di volontariato con informazioni sull'accessibilità e sulla preparazione, richiedi un posto e verifica gli impegni confermati e le modalità di cancellazione. Non trasformare una richiesta in lista d'attesa in un posto confermato; mostra l'effetto di una cancellazione prima dell'invio. 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, successo o errore. 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 suggerire 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 design prompt per l'iscrizione ai turni di volontariato
Usa questo design prompt per l'iscrizione ai turni di volontariato per consultare i turni con informazioni sull'accessibilità e sulla preparazione, richiedere un posto e verificare gli impegni confermati e le modalità di cancellazione.
Il riferimento è un concept generato dall'IA. Le istruzioni seguenti descrivono cosa creare e testare; l'immagine non dimostra un comportamento funzionante.
Distingui l'interesse da un posto confermato
Un'app per i turni di volontariato deve spiegare la preparazione richiesta e lo stato dell'impegno.
Una richiesta o un'iscrizione alla lista d'attesa non deve essere mostrata come un impegno confermato. Inizia con Turni disponibili come schermata iniziale, assegna a Dettaglio turno un'azione principale chiara e fai in modo che I miei impegni spieghi cosa è successo e cosa può accadere in seguito. Usa azzurro chiaro, blu navy, arancione caldo e una tipografia accogliente come punto di partenza, adattandoli al brand fornito. Mantieni visibili l'identità del record e il contesto di navigazione nelle tre schermate. Dai priorità a controlli 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 bordo a bordo.
Dal prompt
Crea tre viste collegate: Turni disponibili; Dettaglio turno; I miei impegni.
Personalizzalo
Consulta [SHIFTS] con informazioni sulla preparazione e sull'accessibilità. Tieni separati gli stati richiesto, in lista d'attesa e confermato e mostra in anteprima le conseguenze prima della cancellazione.
Prepara i contenuti per l'iscrizione ai turni di volontariato
I dettagli del turno includono orario, numero di posti e requisiti; distingui la richiesta di un posto dalla conferma dell'accettazione.
Prepara i turni con date, capienza, istruzioni per la preparazione e informazioni sull'accessibilità. Includi esempi di stati richiesto, in lista d'attesa e confermato, oltre alle conseguenze dichiarate della cancellazione di un posto accettato.
Dal prompt
Consulta i turni di volontariato con informazioni sull'accessibilità e sulla preparazione, richiedi un posto e verifica gli impegni confermati e le modalità di cancellazione.
Personalizzalo
Per [PROJECT], usa [APPROVED_CONTENT] come fonte per questa iscrizione ai turni di volontariato. Record e etichette dei campi approvati per Turni disponibili; Dettagli del turno; I miei impegni; regole relative alle azioni e alla persistenza; risorse del brand e requisiti di autorizzazione. Individua gli input mancanti prima di sostituirli con contenuti dimostrativi.
Partecipa a un turno completo
La schermata degli impegni spiega le conseguenze dell'annullamento prima di confermarlo; definisci il comportamento relativo al posto liberato e alla lista d'attesa senza affermare che sia stata inviata una notifica reale.
Mostra lo stato della lista d’attesa e spiega cosa resta in sospeso. La vista degli impegni personali non deve presentarlo come un posto confermato. Verifica prima questo caso limite specifico: non trasformare una richiesta in lista d’attesa in un posto confermato; mostra l’effetto di una cancellazione prima dell’invio. Esegui quindi 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
Non trasformare una richiesta in lista d'attesa in un posto confermato; mostra l'effetto di una cancellazione prima dell'invio.
Personalizzalo
Verifica l’iscrizione ai turni di volontariato rispetto a questo requisito: non trasformare una richiesta in lista d’attesa in un posto confermato; mostra l’effetto di una cancellazione prima dell’invio. Verifica prima questo caso limite specifico: non trasformare una richiesta in lista d’attesa in un posto confermato; mostra l’effetto di una cancellazione prima dell’invio. Esegui quindi 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. Mantieni i contenuti approvati e modifica solo le parti che non superano questa verifica.
Verifica l’esito dell’iscrizione al turno di volontariato
L'esempio è un concept visivo generato dall'IA. I servizi connessi, le autorizzazioni del dispositivo e i dati persistenti richiedono implementazione e test separati.
- Non trasformare una richiesta in lista d'attesa in un posto confermato; mostra l'effetto di una cancellazione prima dell'invio.
Prompt di follow-up
Usalo dopo il primo risultato. Restringe la revisione alla parte più importante di questa attività.
Perfeziona solo la transizione da Dettaglio turno a I miei impegni. Non trasformare una richiesta in lista d'attesa in un posto confermato; mostra l'effetto di una cancellazione prima dell'invio. 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.
