Crea uno studio dell’interazione in HTML/CSS/JavaScript con stati espliciti iniziale, attivo e completato e un’alternativa leggibile per prefers-reduced-motion per [PROJECT] e [AUDIENCE]. L’attività è: storyboard esplicativo del prodotto.
## Contenuti e struttura obbligatori
Pianifica un breve video HTML suddiviso in scene dedicate a problema, azione e risultato, con tempi e didascalie.
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, antracite e accenti verde acceso; stati iniziale, di transizione e finale chiaramente etichettati. Mantieni coerenti tipografia, spaziatura e ruoli cromatici. Dai priorità all’attività rispetto agli elementi decorativi ed evita una raccolta generica di schede non correlate.
## Preparazione dei contenuti
Prepara il problema relativo al prodotto, l’azione supportata, il risultato previsto e le risorse grafiche approvate delle schermate. Definisci la durata delle scene e il formato di consegna prima di aggiungere l’animazione.
## Layout e comportamento
Pianifica una breve sequenza con un'idea per scena, didascalie leggibili e transizioni chiare. Contrassegna le schermate simulate e mantieni l'azione finale collegata al flusso di lavoro illustrato.
## Verifica di accettazione specifica dell'attività
- Distingui uno storyboard temporizzato da un'esportazione video renderizzata e verificata.
- Leggi le didascalie entro il tempo loro assegnato ed esamina lo storyboard statico.
- Un'anteprima HTML temporizzata non dimostra che l'esportazione video sia stata completata; verificala separatamente quando è richiesta.
## 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.
Rendi disponibili tutte le informazioni e le azioni senza animazione. Ove pertinente, consenti di mettere in pausa o chiudere. Documenta trigger e transizioni; non sostituire l’avanzamento effettivo con un timer decorativo.
## 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 lo storyboard esplicativo del prodotto. Prima di procedere, individua dall'alto verso il basso le aree principali, 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 richiesto: pianifica un breve video HTML suddiviso in scene dedicate a problema, azione e risultato, con tempistiche e didascalie. Nel tradurre l'immagine in elementi modificabili, segui queste indicazioni specifiche per il layout: pianifica una breve sequenza con un'idea per scena, didascalie leggibili e transizioni chiare. Contrassegna le schermate simulate e mantieni l'azione finale collegata al flusso di lavoro illustrato.
## Direzione visiva dal brief di esempio
bianco, antracite e accenti verde acceso; stati iniziale, di transizione e finale chiaramente etichettati.
## Struttura delle diapositive e comportamento della presentazione
Ricrea la composizione della slide con elementi modificabili per titolo, testo, contenuti visivi e annotazioni. Una slide raffigurata rappresenta una sola vista, non la prova di una presentazione completa. Usa la narrazione fornita per creare eventuali slide aggiuntive richieste, mantenendone tipografia, margini, ruoli cromatici e allineamento. Pianifica una breve sequenza con un'idea per scena, didascalie leggibili e transizioni chiare. Contrassegna le schermate simulate e mantieni l'azione finale collegata al flusso di lavoro illustrato. Mantieni la navigazione fuori dal contenuto delle slide esportate. Distingui uno storyboard temporizzato da un'esportazione video renderizzata e verificata.
## 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.