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 modificabile di app mobile-first usando lo stack esistente del progetto per [PROJECT] e [AUDIENCE]. L’attività è: Modalità cottura ricetta.
Contenuti e struttura obbligatori
Adatta le quantità di una ricetta fornita, segui un passaggio alla volta e avvia timer con nomi distinti, mantenendo disponibile l’elenco degli ingredienti.
Schermate e navigazione
Crea tre viste collegate: Ricetta; Fase di cottura; Timer attivi. Mantieni visibile il record selezionato 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. Posiziona l’azione principale vicino al contenuto pertinente e considera le aree sicure sui dispositivi mobili, una tastiera software visibile e le etichette tradotte lunghe. Su schermi 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 anziché inventare affermazioni operative. I record dimostrativi possono usare il brand fittizio Simmer; 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 tale integrazione non sia stata esplicitamente implementata e testata.
Direzione del design
Segui [BRAND_RULES]. Se non viene fornito alcun brand, usa avorio caldo, rosso pomodoro, antracite e fotografia gastronomica. Rendi il flusso 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 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à
- Non adattare la temperatura del forno in base alle porzioni; mantieni distinti i diversi timer e le relative etichette dopo la navigazione.
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 Modalità cottura ricetta. Prima di realizzare il progetto, individua le aree principali dall’alto verso il basso, le rispettive larghezze e altezze relative, 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 obbligatorio dell’attività: adatta le quantità di una ricetta fornita, segui un passaggio alla volta e avvia timer con nomi distinti, mantenendo disponibile l’elenco degli ingredienti. Quando traduci l’immagine in elementi modificabili, segui queste indicazioni specifiche per il layout: inizia con Ricetta come schermata iniziale, assegna a Fase di cottura un’azione principale chiara e fai in modo che Timer attivi spieghi cosa è accaduto e cosa può accadere in seguito. Usa avorio caldo, rosso pomodoro, antracite e fotografia gastronomica come direzione iniziale, adattandola 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 un bordo all’altro.
Direzione visiva dal brief di esempio
avorio caldo, rosso pomodoro, antracite, fotografia gastronomica.
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: adatta le quantità di una ricetta fornita, segui un passaggio alla volta e avvia timer con nomi distinti, mantenendo disponibile l’elenco degli ingredienti. Non adattare la temperatura del forno in base alle porzioni; mantieni distinti i diversi timer e le relative etichette dopo la navigazione. 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, un feedback visibile per gli stati in sospeso, riuscito e non riuscito. 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 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 prompt di design per Modalità cottura ricetta
Usa questo prompt di design per la modalità cottura ricetta per adattare le quantità di una ricetta fornita, seguire un passaggio alla volta e avviare timer con nomi distinti, mantenendo disponibile l’elenco degli ingredienti.
Il riferimento è un concept generato dall'IA. Le istruzioni seguenti descrivono cosa creare e testare; l'immagine non dimostra un comportamento funzionante.
Separa Ingredienti adattati da Istruzioni di cottura
Una modalità di cottura per ricette deve mantenere disponibili il passaggio corrente e i relativi ingredienti mentre i timer sono in funzione.
Le modifiche al numero di porzioni non devono moltiplicare indiscriminatamente ogni numero della ricetta. Inizia con Ricetta come schermata iniziale, assegna a Fase di cottura un’azione principale chiara e fai in modo che Timer attivi spieghi cosa è accaduto e cosa può accadere in seguito. Usa avorio caldo, rosso pomodoro, antracite e fotografia gastronomica come direzione iniziale, adattandola 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 un bordo all’altro.
Dal prompt
Crea tre viste collegate: Ricetta; Fase di cottura; Timer attivi.
Personalizzalo
Adatta le quantità degli ingredienti forniti per [SERVINGS], mantenendo invariata la temperatura del forno. Mostra un passaggio alla volta con accesso agli ingredienti e timer con nomi distinti.
Prepara i contenuti per Modalità cottura ricetta
La schermata della fase combina avanzamento, una singola istruzione e un timer pertinente; specifica se il timer continua a funzionare quando l’utente passa da una fase all’altra.
Fornisci una ricetta completa con unità degli ingredienti, numero di porzioni, passaggi ordinati e timer denominati. Specifica quali quantità variano in base alle porzioni e mantieni le istruzioni fisse, come la temperatura del forno, al di fuori di questa regola di adattamento.
Dal prompt
Adatta le quantità di una ricetta fornita, segui un passaggio alla volta e avvia timer con nomi distinti, mantenendo disponibile l’elenco degli ingredienti.
Personalizzalo
Per [PROJECT], usa [APPROVED_CONTENT] come fonte per questa modalità di cottura della ricetta. Dati approvati ed etichette dei campi per Ricetta; Fase di cottura; Timer attivi; 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.
Naviga con due timer
Ogni timer ha la propria etichetta e i propri controlli; definisci separatamente la pausa, la regolazione e il feedback di completamento.
Entrambi i timer devono mantenere le rispettive etichette e il tempo trascorso. Tornare a un passaggio precedente non deve riavviarli né sostituire un timer con l’altro. Testa prima questo specifico caso limite: non adattare la temperatura del forno in base alle porzioni; mantieni distinti i diversi timer e le relative etichette dopo la navigazione. Esegui quindi il flusso principale con un titolo del record lungo, nessun record salvato e un’azione non riuscita. L’utente deve poter capire cosa è stato salvato, cosa è in sospeso e cosa può essere annullato senza affidarsi al colore. Verifica che il ritorno alla schermata precedente mantenga i dati inseriti e che uno screen reader incontri il titolo, lo stato e l’azione principale in un ordine logico.
Dal prompt
Non adattare la temperatura del forno in base alle porzioni; mantieni distinti i diversi timer e le relative etichette dopo la navigazione.
Personalizzalo
Verifica la modalità di cottura della ricetta rispetto a questo requisito: non ridimensionare la temperatura del forno in base alle porzioni; dopo la navigazione, mantieni distinti i diversi timer e le relative etichette. Verifica prima questo specifico caso limite: non ridimensionare la temperatura del forno in base alle porzioni; dopo la navigazione, mantieni distinti i diversi timer e le relative etichette. Esegui quindi il flusso principale con un titolo molto lungo, nessun elemento salvato e un’azione non riuscita. L’utente deve poter capire cosa è salvato, cosa è in sospeso e cosa può essere annullato senza fare affidamento sul 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 il risultato della modalità di cottura della ricetta
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 adattare la temperatura del forno in base alle porzioni; mantieni distinti i diversi timer e le relative etichette dopo la navigazione.
Prompt di follow-up
Usalo dopo il primo risultato. Restringe la revisione alla parte più importante di questa attività.
Perfeziona solo la transizione da Fase di cottura a Timer attivi. Non adattare la temperatura del forno in base alle porzioni; mantieni distinti i diversi timer e le relative etichette dopo la navigazione. Mostra i relativi stati in sospeso, di errore e completati 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 dopo un nuovo tentativo.
