Prompt di design per una guida accessibile della città

Crea un prototipo di app mobile-first modificabile usando lo stack di progetto esistente per [PROJECT] e [AUDIENCE]. L'attività è: Guida accessibile della città.

Contenuti e struttura obbligatori

Esplora i luoghi in base a specifiche funzionalità di accessibilità, consulta le note delle fonti con relativa data e invia una correzione con eventuali dettagli di supporto.

Schermate e navigazione

Crea tre viste collegate: Luoghi; Dettagli sull’accessibilità; Invia aggiornamento. Mantieni il record selezionato visibile nel titolo o nel riepilogo della schermata. Prevedi un’azione Indietro esplicita 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 sui dispositivi mobili, la tastiera software visibile e le etichette tradotte più lunghe. Su desktop, adatta la composizione senza rimuovere passaggi né modificare l’attività.

Dati del progetto

Usa [APPROVED_CONTENT] per nomi, record, etichette, quantità e destinazioni. Richiedi i dati mancanti invece di inventare dichiarazioni operative. I record dimostrativi possono usare il marchio fittizio Open Routes; contrassegnali come dati di esempio. Spiega quali azioni sono interazioni locali del prototipo e quali richiederebbero autenticazione, persistenza dei dati, 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, blu navy e giallo caldo per una segnaletica ad alto contrasto. Rendi il flusso riconoscibile attraverso contenuti e controlli specifici, invece di ripetere generiche schede da dashboard. Usa una scala di spaziatura coerente e una chiara gerarchia del testo. Includi un indicatore visibile del focus da tastiera, nomi accessibili, contrasto sufficiente ed etichette di stato che non dipendano dal colore. Rispetta la preferenza di movimento ridotto e rendi facoltative le transizioni animate.

Verifica di accettazione specifica dell'attività

• Rappresenta le informazioni sconosciute sull’accessibilità separatamente dalle funzionalità non disponibili e non dedurre mai l’accessibilità da una foto.

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 la Guida accessibile della città. Prima di iniziare, individua le aree principali dall’alto verso il basso, le rispettive 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 obbligatorio dell’attività: esplorare i luoghi in base a specifiche caratteristiche di accessibilità, consultare note delle fonti corredate di data e inviare una correzione con dettagli di supporto facoltativi. Segui queste indicazioni di layout specifiche per l’attività nel tradurre l’immagine in elementi modificabili: inizia da Luoghi come schermata iniziale, assegna a Dettagli sull’accessibilità un’azione principale chiara e fai in modo che Invia aggiornamento spieghi cosa è successo e cosa può accadere dopo. Usa bianco, blu navy e giallo caldo per una segnaletica ad alto contrasto come direzione iniziale, adattandola al marchio fornito. Mantieni visibili l’identità del record e il contesto di navigazione in tutte e tre le schermate. Dai priorità a controlli facili da raggiungere 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

bianco, blu navy e giallo caldo per una segnaletica ad alto contrasto.

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à interattiva. Copia il prompt personalizzato nel progetto e crea il flusso collegato: esplora i luoghi in base a specifiche caratteristiche di accessibilità, consulta note delle fonti corredate di data e invia una correzione con dettagli di supporto facoltativi. Rappresenta le informazioni sconosciute sull’accessibilità separatamente dalle funzionalità non disponibili e non dedurre mai l’accessibilità da una foto. Per ogni controllo visibile, specifica l’evento che lo attiva, lo stato interessato e il feedback; implementa le modifiche locali mantenendo lo 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, feedback visibili di operazione in sospeso, riuscita o non riuscita. Non aggiungere flussi 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 backend sia riuscita quando è stata modificata solo una demo locale.

Confronto visivo e consegna

1. 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.
2. Quindi testa il layout stretto senza comprimere il testo desktop in etichette minuscole.
3. 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.