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à è: Organizzatore per il ritiro dei pacchi.
Contenuti e struttura obbligatori
Organizza gli aggiornamenti sulle consegne, mostra un codice di ritiro fittizio con scadenza e consenti all’utente di registrare che un pacco è stato ritirato.
Schermate e navigazione
Crea tre viste collegate: Consegne; Dettagli del ritiro; Ritirato. 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 durante il passaggio tra le viste. Mantieni 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 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 dichiarazioni operative. I record dimostrativi possono usare il brand fittizio Parcel; 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]. Quando non viene fornito alcun brand, usa bianco, blu postale, dettagli arancioni e un layout funzionale e nitido. Rendi il flusso riconoscibile attraverso 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 movimento ridotto e mantieni facoltative le transizioni animate.
Verifica di accettazione specifica dell'attività
- Non lasciare intendere che il corriere abbia confermato un ritiro contrassegnato dall’utente; i codici scaduti richiedono istruzioni chiare per il recupero.
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 per il ritiro dei pacchi. 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 ricorrenti. Mantieni queste relazioni anziché sostituirle con un modello generico. Contenuto richiesto per l’attività: organizza gli aggiornamenti sulle consegne, mostra un codice di ritiro fittizio con scadenza e consenti all’utente di registrare che un pacco è stato ritirato. Segui queste indicazioni di layout specifiche per l’attività nel tradurre l’immagine in elementi modificabili: inizia da Consegne come schermata iniziale, assegna a Dettagli del ritiro un’azione principale chiara e fai in modo che Ritirato spieghi cosa è successo e cosa può accadere dopo. Parti da bianco, blu postale, dettagli arancioni e un layout funzionale e nitido, 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 anziché estendere una composizione mobile da un bordo all’altro.
Direzione visiva dal brief di esempio
bianco, blu postale, dettagli arancioni, layout funzionale e nitido.
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: organizza gli aggiornamenti sulle consegne, mostra un codice di ritiro fittizio con scadenza e consenti all’utente di registrare che un pacco è stato ritirato. Non lasciare intendere che il corriere abbia confermato un ritiro contrassegnato dall’utente; i codici scaduti richiedono istruzioni chiare per il recupero. 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. 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 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 è stata modificata 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 un organizzatore del ritiro pacchi
Usa questo prompt di design per un organizzatore del ritiro pacchi per organizzare gli aggiornamenti sulle consegne, mostrare un codice di ritiro fittizio con scadenza e consentire all’utente di registrare il ritiro di un pacco.
Il riferimento è un concept generato dall'IA. Le istruzioni seguenti descrivono cosa creare e testare; l'immagine non dimostra un comportamento funzionante.
Distingui una nota personale dalla conferma del corriere
Un’app per il ritiro dei pacchi deve rendere facili da verificare la validità del codice e lo stato del ritiro.
Il fatto che un utente contrassegni un pacco come ritirato è diverso dalla segnalazione dello stesso evento da parte di un corriere. Inizia da Buste come schermata iniziale, assegna a Dettagli del ritiro un’azione principale chiara e fai in modo che Ritirato spieghi cosa è successo e cosa può accadere dopo. Usa bianco, blu postale, accenti arancioni e un layout funzionale e nitido come direzione iniziale, 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 raggiungibili con il pollice e a etichette leggibili rispetto ai pannelli decorativi; sugli schermi più ampi, mantieni coerente il flusso di lavoro anziché estendere una composizione mobile da un bordo all’altro.
Dal prompt
Crea tre viste collegate: Buste; Dettagli del ritiro; Ritirato.
Personalizzalo
Mostra [PARCELS] con aggiornamenti, codici di ritiro di esempio e orari di scadenza. Etichetta separatamente i ritiri registrati dall’utente e gli eventi confermati dal corriere, e fornisci indicazioni per il recupero in caso di codice scaduto.
Prepara i contenuti dell’organizzatore del ritiro pacchi
Il dettaglio del ritiro mantiene vicini il codice, gli orari di apertura e la scadenza; prevedi uno stato per il codice scaduto e un'azione accessibile per copiarlo.
Prepara pacchi fittizi, luoghi di ritiro di esempio, orari di scadenza dei codici e aggiornamenti sulle consegne. Indica se ogni stato proviene da un corriere o dall’utente e specifica le istruzioni per recuperare un codice scaduto.
Dal prompt
Organizza gli aggiornamenti sulle consegne, mostra un codice di ritiro fittizio con scadenza e consenti all’utente di registrare che un pacco è stato ritirato.
Personalizzalo
Per [PROJECT], usa [APPROVED_CONTENT] come fonte per questo organizzatore del ritiro pacchi. Includi record approvati ed etichette dei campi per Buste; Dettagli del ritiro; Ritirato; regole per le azioni e la persistenza; risorse del brand e requisiti relativi alle autorizzazioni. Individua gli input mancanti prima di sostituirli con contenuti dimostrativi.
Contrassegna un pacco come ritirato
La conferma indica che il record nell'app è stato modificato e offre la possibilità di annullare; distingui questo stato locale dall'evento di ritiro verificato da un corriere.
Lo stato risultante deve identificarne la fonte. Un codice scaduto non deve continuare ad apparire utilizzabile solo perché il pacco è ancora nell’elenco. Verifica prima questo specifico caso limite: non suggerire una conferma del corriere per un ritiro contrassegnato dall’utente; i codici scaduti devono includere istruzioni chiare per il recupero. Quindi 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 tornando alla schermata precedente i dati inseriti vengano mantenuti e che uno screen reader incontri titolo, stato e azione principale in un ordine sensato.
Dal prompt
Non lasciare intendere che il corriere abbia confermato un ritiro contrassegnato dall’utente; i codici scaduti richiedono istruzioni chiare per il recupero.
Personalizzalo
Verifica l’organizzatore del ritiro pacchi rispetto a questo requisito: non suggerire una conferma del corriere per un ritiro contrassegnato dall’utente; i codici scaduti devono includere istruzioni chiare per il recupero. Verifica prima questo specifico caso limite: non suggerire una conferma del corriere per un ritiro contrassegnato dall’utente; i codici scaduti devono includere istruzioni chiare per il recupero. Quindi 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 tornando alla schermata precedente i dati inseriti vengano mantenuti e che uno screen reader incontri titolo, stato e azione principale in un ordine sensato. Mantieni i contenuti approvati e modifica solo le parti che non superano questa verifica.
Verifica il risultato del tuo organizzatore del ritiro pacchi
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 lasciare intendere che il corriere abbia confermato un ritiro contrassegnato dall’utente; i codici scaduti richiedono istruzioni chiare per il recupero.
Prompt di follow-up
Usalo dopo il primo risultato. Restringe la revisione alla parte più importante di questa attività.
Perfeziona solo la transizione da Dettagli del ritiro a Ritirato. Non lasciare intendere che il corriere abbia confermato un ritiro contrassegnato dall’utente; i codici scaduti richiedono istruzioni chiare per il recupero. 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 in che modo i dati inseriti vengono conservati durante un nuovo tentativo.
