Usa il prompt
Aggiungi il tuo brief
Aggiungi qui sotto il tuo contesto. Verrà incluso nel prompt quando lo copi o lo scarichi.
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
- 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.
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.
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 uno storyboard esplicativo del prodotto
Usa questo prompt di design per uno storyboard esplicativo del prodotto per pianificare un breve video HTML suddiviso in scene dedicate a problema, azione e risultato, con tempistiche e didascalie.
Il riferimento è un concept generato dall'IA. Le istruzioni seguenti descrivono cosa creare e testare; l'immagine non dimostra un comportamento funzionante.
Descrivi cosa cambia in ogni scena
Uno storyboard esplicativo del prodotto deve includere azioni, tempistiche e didascalie in grado di guidare la produzione successiva.
Una serie di fotogrammi accattivanti non è ancora un video riproducibile. 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.
Dal prompt
Pianifica una breve sequenza con un'idea per scena, didascalie leggibili e transizioni chiare.
Personalizzalo
Per ogni [SCENE], specifica scopo, azione visibile, durata, transizione e didascalia. Collega problema, azione sul prodotto e risultato, indicando chiaramente che l'artefatto è uno storyboard.
Prepara i contenuti dello storyboard esplicativo del prodotto
Il fotogramma centrale collega un'azione nell'interfaccia a una didascalia temporizzata; specifica l'azione, la durata e la narrazione in campi separati.
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.
Dal prompt
Pianifica un breve video HTML suddiviso in scene dedicate a problema, azione e risultato, con tempi e didascalie.
Personalizzalo
Per [PROJECT], usa [APPROVED_CONTENT] come fonte per questo storyboard esplicativo del prodotto. 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 animazioni. Individua gli input mancanti prima di sostituirli con contenuti dimostrativi.
Verifica le tempistiche dall'inizio alla fine
Il fotogramma finale presenta il risultato successivo all'azione; assicurati che l'affermazione conclusiva derivi dal comportamento dimostrato anziché da una promessa priva di fondamento.
Aggiungi la durata delle scene e verifica che le didascalie possano essere lette nel tempo assegnato. Mantieni il movimento pianificato distinto da un'esportazione 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.
Dal prompt
Distingui uno storyboard temporizzato da un’esportazione video renderizzata e verificata.
Personalizzalo
Esamina lo storyboard esplicativo del prodotto rispetto a questo requisito: 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. Mantieni i contenuti approvati e modifica solo le parti che non superano questa verifica.
Esamina il risultato dello storyboard esplicativo del prodotto
L’anteprima è uno storyboard statico. Non dimostra il funzionamento dell’animazione, le prestazioni misurate o l’accessibilità. Verifica l’interazione implementata e il comportamento con movimento ridotto.
- 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.
Prompt di follow-up
Usalo dopo il primo risultato. Restringe la revisione alla parte più importante di questa attività.
Perfeziona l’attuale storyboard esplicativo del prodotto. Verifica che le didascalie siano leggibili entro il tempo assegnato ed esamina lo storyboard statico. Un’anteprima HTML temporizzata non prova che l’esportazione video sia stata completata; quando è richiesta un’esportazione, verificala separatamente. Mantieni i contenuti approvati e la direzione visiva; modifica soltanto le parti necessarie per risolvere questi problemi.
