Crea un prototipo di app modificabile e mobile-first usando lo stack esistente del progetto per [PROJECT] e [AUDIENCE]. L'attività è: Biblioteca delle note di lettura. ## Contenuti e struttura obbligatori Organizza i libri in base allo stato di lettura, registra una pagina o un capitolo e salva una citazione con la relativa fonte e una nota personale. ## Schermate e navigazione Crea tre viste collegate: I miei libri; Sessione di lettura; Citazione salvata. Mantieni il record selezionato visibile nel titolo o nel riepilogo della schermata. Fornisci un'azione esplicita per tornare indietro e conserva gli input in corso quando ci si sposta tra le viste. Mantieni l'azione principale vicino al contenuto pertinente e considera le aree di sicurezza sui dispositivi mobili, una tastiera software visibile e le etichette tradotte lunghe. Alle larghezze desktop, adatta la composizione senza rimuovere passaggi o 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 brand fittizio Margin; 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é affermare 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 tonalità calde della carta, nero inchiostro, terracotta e accenti serif editoriali. Rendi il flusso di lavoro riconoscibile attraverso i suoi contenuti e controlli specifici, anziché ripetere generiche card da dashboard. Usa una scala di spaziatura coerente e una chiara gerarchia del testo. Includi un focus da tastiera visibile, nomi accessibili, contrasto sufficiente ed etichette di stato che non si basino solo sul colore. Rispetta la preferenza per il movimento ridotto e mantieni facoltative le transizioni animate. ## Verifica di accettazione specifica dell'attività - Mantieni una citazione quando si cambia edizione ed etichetta i riferimenti di pagina che non corrispondono più all'edizione selezionata. ## 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 Biblioteca delle note di lettura. Prima di procedere alla realizzazione, 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 queste relazioni anziché sostituirle con un modello generico. Contenuto richiesto per l'attività: organizza i libri in base allo stato di lettura, registra una pagina o un capitolo e salva una citazione con la relativa fonte e una nota personale. Nel tradurre l'immagine in elementi modificabili, segui queste indicazioni di layout specifiche per l'attività: inizia con I miei libri come schermata di ingresso, assegna a Sessione di lettura un'azione principale chiara e fai in modo che Citazione salvata spieghi cosa è successo e cosa può accadere in seguito. Usa come direzione iniziale tonalità calde della carta, nero inchiostro, terracotta e accenti serif editoriali, adattandola al brand 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 anziché estendere una composizione mobile da un bordo all'altro. ## Direzione visiva dal brief di esempio tonalità calde della carta, nero inchiostro, terracotta e accenti serif editoriali. ## 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 progetto e crea il flusso collegato: organizza i libri in base allo stato di lettura, registra una pagina o un capitolo e salva una citazione con la relativa fonte e una nota personale. Mantieni una citazione quando si cambia edizione ed etichetta i riferimenti di pagina che non corrispondono più all'edizione selezionata. Per ogni controllo visibile, specifica l'evento che lo attiva, lo stato interessato e il feedback; implementa le modifiche locali mantenendo uno stato coerente tra le viste correlate. Fai in modo che la ricerca e i filtri restituiscano risultati reali, che i controlli di selezione abbiano uno stato attivo esplicito e che le azioni di salvataggio mostrino, quando pertinente, un feedback visibile per gli stati in sospeso, di successo e di errore. Non aggiungere flussi di lavoro 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 di backend sia riuscita quando è stata modificata soltanto 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.