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à è: prestito di utensili nella comunità.
Contenuti e struttura obbligatori
Trova un attrezzo disponibile localmente, verificane le condizioni e i termini di prestito, richiedi le date e registra una checklist di restituzione con la conferma del proprietario.
Schermate e navigazione
Crea tre viste collegate: Utensili disponibili; Richiesta di prestito; Checklist di restituzione. Mantieni il record selezionato visibile nel titolo o nel riepilogo della schermata. Includi un’azione esplicita per tornare indietro e conserva i dati inseriti ma non ancora completati durante il passaggio tra le viste. Mantieni l’azione principale vicino al contenuto pertinente 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 marchio fittizio Borrow; 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 marchio, usa bianco sporco, arancione da officina, grafite scuro e icone funzionali. Rendi il flusso di lavoro 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 di focus da tastiera visibile, 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à
- Separa le date richieste dalle prenotazioni accettate e la restituzione dichiarata dall’utente da quella confermata dal proprietario.
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 il prestito di utensili nella comunità. Prima di iniziare, identifica 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 invece di sostituirle con un modello generico. Contenuto richiesto per l’attività: trova un utensile disponibile localmente, verificane le condizioni e i termini di prestito, richiedi le date e compila una checklist di restituzione con la conferma del proprietario. Quando traduci l’immagine in elementi modificabili, segui queste indicazioni specifiche per il layout: inizia con Utensili disponibili come schermata iniziale, assegna alla Richiesta di prestito un’azione principale chiara e fai in modo che la Checklist di restituzione spieghi cosa è successo e cosa può succedere in seguito. Usa bianco sporco, arancione da officina, grafite scuro e icone funzionali come punto di partenza, adattandoli al marchio 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 di lavoro invece di estendere una composizione mobile da un bordo all’altro.
Direzione visiva dal brief di esempio
bianco sporco, arancione da officina, grafite scuro, icone funzionali.
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: trova un utensile disponibile localmente, verificane le condizioni e i termini di prestito, richiedi le date e compila una checklist di restituzione con la conferma del proprietario. Separa le date richieste dalle prenotazioni accettate e la restituzione dichiarata dall’utente da quella confermata dal proprietario. Per ogni controllo visibile, specifica l’evento che lo attiva, lo stato interessato e il feedback; implementa le modifiche locali mantenendo lo stato coerente nelle 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 di lavoro non pertinenti. 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 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 il prestito di utensili nella comunità
Usa questo prompt di design per il prestito di utensili nella comunità per trovare un utensile disponibile localmente, verificarne le condizioni e i termini di prestito, richiedere le date e compilare una checklist di restituzione con la conferma del proprietario.
Il riferimento è un concept generato dall'IA. Le istruzioni seguenti descrivono cosa creare e testare; l'immagine non dimostra un comportamento funzionante.
Separa una richiesta da un prestito accettato
Un’app per il prestito di utensili coordina l’accordo tra le persone.
Le date richieste, le prenotazioni accettate e la conferma della restituzione devono avere stati e soggetti responsabili distinti. Inizia con Utensili disponibili come schermata iniziale, assegna alla Richiesta di prestito un’azione principale chiara e fai in modo che la Checklist di restituzione spieghi cosa è successo e cosa può succedere in seguito. Usa bianco sporco, arancione da officina, grafite scuro e icone funzionali come punto di partenza, adattandoli al marchio 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 di lavoro invece di estendere una composizione mobile da un bordo all’altro.
Dal prompt
Crea tre viste collegate: Utensili disponibili; Richiesta di prestito; Checklist di restituzione.
Personalizzalo
Mostra le condizioni e i termini di prestito di [TOOL] prima della richiesta delle date. Tieni traccia separatamente delle date richieste e accettate, quindi registra una checklist di restituzione in attesa della conferma del proprietario.
Prepara i contenuti per il prestito di utensili nella comunità
La schermata della richiesta presenta le date richieste e le condizioni di prestito sotto lo strumento selezionato. Prepara la disponibilità e le condizioni del proprietario; una richiesta deve rimanere distinta da una prenotazione accettata.
Prepara le descrizioni degli utensili, le note sulle condizioni, i termini di prestito e le date di esempio. Definisci chi può accettare una richiesta e confermare una restituzione, incluso ciò che accade quando chi ha preso in prestito un utensile lo contrassegna come restituito prima che il proprietario lo controlli.
Dal prompt
Trova un attrezzo disponibile localmente, verificane le condizioni e i termini di prestito, richiedi le date e registra una checklist di restituzione con la conferma del proprietario.
Personalizzalo
Per [PROJECT], usa [APPROVED_CONTENT] come fonte per questo servizio di prestito di utensili nella comunità. Record ed etichette dei campi approvati per Utensili disponibili, Richiesta di prestito e Checklist di restituzione; regole relative alle azioni e alla persistenza; risorse del marchio e requisiti di autorizzazione. Identifica i dati mancanti prima di sostituirli con contenuti dimostrativi.
Registra una restituzione contestata
La schermata di restituzione combina una sequenza temporale degli stati, una lista di controllo delle condizioni e Mark as Returned. Verifica che la restituzione da parte del richiedente e la conferma del proprietario rimangano stati separati.
Lo stato di restituzione indicato da chi ha preso in prestito l’utensile non deve implicare l’accettazione del proprietario. Mantieni visibili la checklist e lo stato della conferma, in modo che entrambe le parti possano capire cosa resta da risolvere. Testa prima questo caso limite specifico: separa le date richieste dalle prenotazioni accettate e la restituzione dichiarata dall’utente da quella confermata dal proprietario. 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 attesa 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 sensato.
Dal prompt
Distingui le date richieste dalle prenotazioni accettate e la restituzione dichiarata dall’utente da quella confermata dal proprietario.
Personalizzalo
Verifica il servizio di prestito di utensili nella comunità rispetto a questo requisito: separa le date richieste dalle prenotazioni accettate e la restituzione dichiarata dall’utente da quella confermata dal proprietario. Testa prima questo caso limite specifico: separa le date richieste dalle prenotazioni accettate e la restituzione dichiarata dall’utente da quella confermata dal proprietario. 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 attesa 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 sensato. Mantieni i contenuti approvati e modifica solo le parti che non superano questa verifica.
Verifica il risultato del prestito di utensili nella comunità
L'esempio è un concept visivo generato dall'IA. I servizi connessi, le autorizzazioni del dispositivo e i dati persistenti richiedono implementazione e test separati.
- Distingui le date richieste dalle prenotazioni accettate e la restituzione dichiarata dall’utente da quella confermata dal proprietario.
Prompt di follow-up
Usalo dopo il primo risultato. Restringe la revisione alla parte più importante di questa attività.
Perfeziona esclusivamente la transizione dalla richiesta di prestito alla checklist di restituzione. Separa le date richieste dalle prenotazioni accettate e la restituzione dichiarata dall’utente da quella confermata dal proprietario. 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.
