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à è: Sessione di pratica linguistica.
Contenuti e struttura obbligatori
Seleziona una breve sessione di pratica, rispondi a una domanda di ascolto con un'alternativa testuale ed esamina risposte specifiche senza inventare un punteggio di competenza.
Schermate e navigazione
Crea tre viste collegate: Piano di pratica; Esercizio di ascolto; Riepilogo sessione. Mantieni il record selezionato visibile nel titolo o nel riepilogo della schermata. Supporta un’azione Indietro esplicita e conserva gli input in corso durante il passaggio tra le viste. Mantieni l’azione principale vicino al contenuto pertinente e considera le aree sicure sui 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 brand fittizio Lilt; 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é 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 lavanda, bianco, prugna scuro e forme geometriche giocose. Rendi il flusso riconoscibile attraverso contenuti e controlli specifici, invece di 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 non basate solo sul colore. Rispetta la preferenza per il movimento ridotto e mantieni facoltative le transizioni animate.
Verifica di accettazione specifica dell'attività
- Consenti di riascoltare l’audio e saltare le domande; distingui un esercizio senza risposta da una risposta errata.
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 Sessione di pratica linguistica. Prima di sviluppare, identifica 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 ripetuti. Mantieni queste relazioni invece di sostituirle con un modello generico. Contenuto richiesto per l’attività: selezionare una breve sessione di pratica, rispondere a una domanda di ascolto con un’alternativa testuale e rivedere risposte specifiche senza inventare un punteggio di competenza. Usa le seguenti indicazioni di layout specifiche per l’attività quando traduci l’immagine in elementi modificabili: inizia con Piano di pratica come schermata iniziale, assegna a Esercizio di ascolto un’azione principale chiara e fai in modo che Riepilogo sessione spieghi cosa è successo e cosa può succedere dopo. Usa lavanda, bianco, prugna scuro e forme geometriche giocose 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 invece di estendere una composizione mobile da un bordo all’altro.
Direzione visiva dal brief di esempio
lavanda, bianco, prugna scuro, forme geometriche giocose.
Specifiche di interazione
Il riferimento è un concept statico: il comportamento seguente è 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: seleziona una breve sessione di pratica, rispondi a una domanda di ascolto con un’alternativa testuale e rivedi risposte specifiche senza inventare un punteggio di competenza. Consenti di riascoltare l’audio e saltare le domande; distingui un esercizio senza risposta da una risposta errata. Per ogni controllo visibile, specifica l’evento di attivazione, lo stato interessato e il feedback; implementa le modifiche locali con uno stato coerente tra le viste correlate. Assicurati 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 non correlati. 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 è 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 una sessione di pratica linguistica
Usa questo prompt di design per una sessione di pratica linguistica per selezionare una breve sessione di pratica, rispondere a una domanda di ascolto con un’alternativa testuale e rivedere risposte specifiche senza inventare un punteggio di competenza.
Il riferimento è un concept generato dall'IA. Le istruzioni seguenti descrivono cosa creare e testare; l'immagine non dimostra un comportamento funzionante.
Spiega la risposta, non un punteggio inventato
Un’app di pratica linguistica dovrebbe aiutare a comprendere il risultato di un esercizio.
Le risposte saltate, non fornite ed errate richiedono trattamenti diversi, con alternative accessibili all’audio. Inizia con Piano di pratica come schermata iniziale, assegna a Esercizio di ascolto un’azione principale chiara e fai in modo che Riepilogo sessione spieghi cosa è successo e cosa può succedere dopo. Usa lavanda, bianco, prugna scuro e forme geometriche giocose 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 invece di estendere una composizione mobile da un bordo all’altro.
Dal prompt
Crea tre viste collegate: Piano di pratica; Esercizio di ascolto; Riepilogo sessione.
Personalizzalo
Proponi [SHORT_SESSION] con audio riascoltabile e un’alternativa testuale. Rivedi ogni risposta con la spiegazione fornita ed evita di generare una valutazione di competenza non supportata.
Prepara i contenuti della sessione di pratica linguistica
La schermata dell’esercizio combina riproduzione, velocità, una domanda e risposte selezionabili, con un’alternativa di digitazione. Prepara l’audio, la trascrizione e il modello delle risposte prima di realizzare il feedback.
Fornisci esercizi brevi, spiegazioni delle risposte, file audio e alternative testuali corrispondenti. Includi risposte non fornite e saltate, in modo che la schermata di riepilogo possa distinguerle dalle risposte errate senza inventare una valutazione di competenza.
Dal prompt
Seleziona una breve sessione di pratica, rispondi a una domanda di ascolto con un'alternativa testuale ed esamina risposte specifiche senza inventare un punteggio di competenza.
Personalizzalo
Per [PROJECT], usa [APPROVED_CONTENT] come fonte per questa sessione di pratica linguistica. Record e etichette dei campi approvati per Piano di pratica; Esercizio di ascolto; Riepilogo sessione; regole di azione e persistenza; risorse del brand e requisiti di autorizzazione. Identifica gli input mancanti prima di sostituirli con contenuti dimostrativi.
Salta una domanda di ascolto
Il riepilogo distingue le risposte corrette, gli errori e gli elementi senza risposta. Verifica che il feedback faccia riferimento alla risposta effettiva e che un nuovo tentativo non cancelli involontariamente il precedente record di apprendimento.
Il riepilogo dovrebbe contrassegnarla come saltata anziché errata. Anche in caso di errore dell’audio, deve rimanere disponibile un percorso testuale utilizzabile per completare l’esercizio. Testa prima questo caso limite specifico: consenti di riascoltare l’audio e saltare le domande; distingui un esercizio senza risposta da una risposta errata. Quindi 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 affidarsi al colore. Verifica che il ritorno alla schermata precedente mantenga i dati inseriti e che uno screen reader incontri titolo, stato e azione principale in un ordine sensato.
Dal prompt
Consenti di riascoltare l’audio e saltare le domande; distingui un esercizio senza risposta da una risposta errata.
Personalizzalo
Verifica la sessione di pratica linguistica rispetto a questo requisito: consenti di riascoltare l’audio e saltare le domande; distingui un esercizio senza risposta da una risposta errata. Testa prima questo caso limite specifico: consenti di riascoltare l’audio e saltare le domande; distingui un esercizio senza risposta da una risposta errata. Quindi 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 affidarsi al colore. Verifica che il ritorno alla schermata precedente mantenga 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.
Rivedi il risultato della sessione di pratica linguistica
L'esempio è un concept visivo generato dall'IA. I servizi connessi, le autorizzazioni del dispositivo e i dati persistenti richiedono implementazione e test separati.
- Consenti di riascoltare l’audio e saltare le domande; distingui un esercizio senza risposta da una risposta errata.
Prompt di follow-up
Usalo dopo il primo risultato. Restringe la revisione alla parte più importante di questa attività.
Perfeziona solo la transizione da Esercizio di ascolto a Riepilogo sessione. Consenti di riascoltare l’audio e saltare le domande; distingui un esercizio senza risposta da una risposta errata. Mostra gli stati pertinenti in sospeso, non riusciti 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 durante un nuovo tentativo.
