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 con approccio mobile-first usando lo stack esistente del progetto per [PROJECT] e [AUDIENCE]. L’attività è: tracker dei progetti artigianali.
Contenuti e struttura obbligatori
Organizza i progetti artigianali con materiali e riferimenti ai modelli, contrassegna il passaggio corrente e registra le modifiche senza intervenire sul modello originale.
Schermate e navigazione
Crea tre viste collegate: Progetti; Fase del modello; Materiali. Mantieni il record selezionato visibile nel titolo o nel riepilogo della schermata. Prevedi un'azione esplicita per tornare indietro e conserva i dati inseriti durante il passaggio tra le viste. Posiziona l'azione principale vicino ai contenuti pertinenti e considera le aree di sicurezza sui dispositivi mobili, una tastiera software visibile e le etichette tradotte più lunghe. Alle larghezze desktop, adatta la composizione senza eliminare fasi 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 Made Slowly; 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 brand, usa carta dalle tonalità calde, rosa polvere, verde bosco scuro e fotografia tessile. 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 gerarchia testuale chiara. Includi un focus da tastiera visibile, nomi accessibili, contrasto sufficiente ed etichette di stato che non si basino solo sul colore. Rispetta le preferenze di movimento ridotto e mantieni facoltative le transizioni animate.
Verifica di accettazione specifica dell'attività
- Gestisci un materiale mancante e una fase ripetuta del modello, preservando i progressi precedenti dell'artigiano.
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 tracker di progetti artigianali. Prima di realizzarlo, 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 progetti artigianali con materiali e riferimenti ai modelli, contrassegna la fase corrente e registra le modifiche senza alterare il modello originale. Quando traduci l'immagine in elementi modificabili, segui queste indicazioni specifiche per il layout: inizia da Progetti come schermata iniziale, assegna a Fase del modello un'azione principale chiara e fai in modo che Materiali spieghi cosa è successo e cosa può accadere dopo. Usa carta dalle tonalità calde, rosa polvere, verde bosco scuro e fotografia tessile 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 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
carta dalle tonalità calde, rosa polvere, verde bosco scuro, fotografia tessile.
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 progetti artigianali con materiali e riferimenti ai modelli, contrassegna la fase corrente e registra le modifiche senza alterare il modello originale. Gestisci un materiale mancante e una fase ripetuta del modello, preservando i progressi precedenti dell'artigiano. 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. 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, quando pertinente, feedback visibili di operazione in corso, riuscita o non riuscita. Non aggiungere flussi di lavoro non correlati. Usa link appropriati per la navigazione, pulsanti per le azioni e nomi accessibili per i controlli a icona. Non suggerire che un'operazione di backend sia riuscita quando è cambiata 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 un tracker di progetti artigianali
Usa questo prompt di design per tracker di progetti artigianali per organizzare progetti con materiali e riferimenti ai modelli, contrassegnare la fase corrente e registrare le modifiche senza alterare il modello originale.
Il riferimento è un concept generato dall'IA. Le istruzioni seguenti descrivono cosa creare e testare; l'immagine non dimostra un comportamento funzionante.
Tieni traccia dei progressi senza modificare il modello
Un tracker per attività artigianali deve separare le istruzioni originali dai progressi e dalle modifiche dell'artigiano.
Le fasi ripetute e i materiali mancanti non devono eliminare un checkpoint precedente. Inizia da Progetti come schermata iniziale, assegna a Fase del modello un'azione principale chiara e fai in modo che Materiali spieghi cosa è successo e cosa può accadere dopo. Usa carta dalle tonalità calde, rosa polvere, verde bosco scuro e fotografia tessile 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 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.
Dal prompt
Crea tre viste collegate: Progetti; Fase del modello; Materiali.
Personalizzalo
Archivia [PATTERN_REFERENCE] separatamente da materiali, fase corrente e modifiche personali. Supporta le fasi ripetute con un conteggio delle occorrenze e preserva i progressi precedenti quando manca un materiale.
Prepara i contenuti del tracker di progetti artigianali
La schermata centrale combina l’immagine di una fase, le istruzioni, un avviso di ripetizione della fase e le note personali. Prepara identificatori delle fasi e regole di avanzamento affinché il completamento di una fase ripetuta non faccia perdere il contesto.
Scegli un progetto artigianale di esempio con materiali, un riferimento al modello originale e una fase ripetuta. Mantieni le modifiche personali in un campo separato e definisci il checkpoint dal quale l'artigiano dovrà riprendere dopo un'interruzione.
Dal prompt
Organizza i progetti artigianali con materiali e riferimenti ai modelli, contrassegna il passaggio corrente e registra le modifiche senza intervenire sul modello originale.
Personalizzalo
Per [PROJECT], usa [APPROVED_CONTENT] come fonte per questo tracker di progetti artigianali. Record approvati ed etichette dei campi per Progetti; Fase del modello; Materiali; regole relative alle azioni e alla persistenza; risorse del brand e requisiti di autorizzazione. Individua i dati mancanti prima di sostituirli con contenuti dimostrativi.
Ripeti una fase
La schermata dei materiali confronta le quantità necessarie con le scorte e segnala un articolo mancante. Verifica le azioni relative alla lista della spesa e agli articoli facoltativi rispetto ai materiali effettivi del progetto.
L'artigiano deve poter registrare un'altra ripetizione senza sovrascrivere il modello originale né reimpostare l'intero progetto. Mantieni facilmente recuperabile l'ultimo checkpoint. Testa prima questo specifico caso limite: gestisci un materiale mancante e una fase ripetuta del modello, preservando i progressi precedenti dell'artigiano. Poi esegui 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 basarsi sul colore. Verifica che, tornando alla schermata precedente, i dati inseriti vengano conservati e che uno screen reader incontri titolo, stato e azione principale in un ordine logico.
Dal prompt
Gestisci un materiale mancante e un passaggio ripetuto del modello mantenendo i progressi precedenti dell’utente.
Personalizzalo
Verifica il tracker di progetti artigianali rispetto a questo requisito: gestisci un materiale mancante e una fase ripetuta del modello, preservando i progressi precedenti dell'artigiano. Testa prima questo specifico caso limite: gestisci un materiale mancante e una fase ripetuta del modello, preservando i progressi precedenti dell'artigiano. Poi esegui 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 basarsi sul colore. Verifica che, tornando alla schermata precedente, i dati inseriti vengano conservati e che uno screen reader incontri titolo, stato e azione principale in un ordine logico. Mantieni i contenuti approvati e modifica soltanto le parti che non superano questa verifica.
Verifica il risultato del tuo tracker di progetti artigianali
L'esempio è un concept visivo generato dall'IA. I servizi connessi, le autorizzazioni del dispositivo e i dati persistenti richiedono implementazione e test separati.
- Gestisci un materiale mancante e un passaggio ripetuto del modello mantenendo i progressi precedenti dell’utente.
Prompt di follow-up
Usalo dopo il primo risultato. Restringe la revisione alla parte più importante di questa attività.
Perfeziona esclusivamente la transizione da Passaggio del modello a Materiali. Gestisci un materiale mancante e un passaggio ripetuto del modello mantenendo i progressi precedenti dell’utente. Mostra gli stati pertinenti in sospeso, non riuscito e completato 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.
