Prompt di design per una presentazione formativa passo-passo

Crea una presentazione HTML modificabile con un'area di lavoro 16:9, pulsanti precedente/successivo, navigazione con i tasti freccia, contatore delle diapositive e layout di stampa con una diapositiva per pagina per [PROJECT] e [AUDIENCE]. L'attività è: presentazione formativa passo-passo.

Contenuti e struttura obbligatori

Insegna un flusso di lavoro attraverso prerequisiti, azioni sequenziali, esempi e un'esercitazione pratica.

Usa [APPROVED_CONTENT] come fonte per nomi, date, dati, dichiarazioni e destinazioni. Elenca gli input mancanti prima di sostituire qualsiasi elemento. Se è necessaria una dimostrazione, indica che i contenuti sono fittizi. Non inventare citazioni di clienti, classifiche, loghi di partner o funzionalità del prodotto.

Direzione del design

Usa [BRAND_RULES] e il design system già selezionato nel progetto. Se non è stato fornito alcun sistema, parti da questa direzione: bianco, blu notte e blu discreto; allineamento deciso e semplici diagrammi esplicativi. Mantieni coerenti tipografia, spaziatura e ruoli cromatici. Dai priorità all'attività rispetto agli elementi decorativi ed evita una raccolta generica di schede scollegate.

Preparazione dei contenuti

Definisci il flusso di lavoro, i prerequisiti, le etichette esatte dell'interfaccia, il risultato previsto e i passaggi comuni per recuperare dagli errori. Prepara un'esercitazione pratica che gli allievi possano completare con i materiali disponibili.

Layout e comportamento

Mostra un'azione significativa per ogni passaggio, con un contesto sufficiente per individuare il controllo. Separa le note del docente dalle istruzioni per gli allievi e concludi con un metodo per verificare il risultato.

Verifica di accettazione specifica dell'attività

• Mantieni esatte le etichette dell'interfaccia e includi il recupero dagli errori comuni.
• Segui le istruzioni come un allievo alle prime armi.
• Includi l'errore probabile o il prerequisito mancante, anziché mostrare soltanto il percorso ideale dall'inizio alla fine.

Implementazione e revisione

Mantieni il testo modificabile. Usa una struttura semantica, controlli descrittivi, un focus da tastiera visibile e stati vuoti/di errore appropriati. Verifica i layout stretti e ampi. Rispetta le preferenze per la riduzione del movimento. Mantieni il framework e le dipendenze esistenti del progetto; non sostituire lo stack senza segnalarlo. Restituisci i file modificabili e spiega eventuali comportamenti incompleti o input non supportati. Esamina questa attività specifica prima di proporre funzionalità aggiuntive.

Mantieni una sola idea principale per diapositiva. Usa grafici solo quando vengono forniti valori effettivi e confrontabili; includi unità, date delle fonti e limitazioni. Mantieni le note del relatore separate dai contenuti visibili delle diapositive.

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 presentazione formativa passo-passo. 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à: insegna un flusso di lavoro attraverso prerequisiti, azioni sequenziali, esempi e un'esercitazione pratica. Nel tradurre l'immagine in elementi modificabili, segui queste indicazioni di layout specifiche per l'attività: mostra un'azione significativa per ogni passaggio, con un contesto sufficiente per individuare il controllo. Separa le note del docente dalle istruzioni per gli allievi e concludi con un metodo per verificare il risultato.

Direzione visiva dal brief di esempio

bianco, blu notte e blu discreto; allineamento deciso e semplici diagrammi esplicativi.

Struttura delle diapositive e comportamento della presentazione

Ricrea la composizione della diapositiva con elementi modificabili per titolo, corpo del testo, contenuti visivi e annotazioni. Una diapositiva raffigurata rappresenta una sola vista, non dimostra l'esistenza di una presentazione completa. Usa la narrazione fornita per creare le eventuali diapositive aggiuntive richieste, mantenendone tipografia, margini, ruoli cromatici e allineamento. Mostra un'azione significativa per ogni passaggio, con un contesto sufficiente per individuare il controllo. Separa le note del docente dalle istruzioni per gli allievi e concludi con un metodo per verificare il risultato. Mantieni la navigazione fuori dal contenuto esportato delle diapositive. Mantieni esatte le etichette dell'interfaccia e includi il recupero dagli errori comuni.

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.

Adatta il riferimento al formato della diapositiva

L'immagine di riferimento allegata utilizza una composizione 3:2. Ridisponi il testo modificabile, le forme e le risorse grafiche separate nel formato diapositiva 16:9 richiesto. Mantieni la gerarchia e una spaziatura leggibile adattando il layout; non deformare il riferimento né ritagliare contenuti essenziali per forzarli nel formato 16:9. Considera questo singolo concept come una direzione visiva, non come una presentazione completa composta da più diapositive.