Trasforma le Slides AI in Presentazioni Interattive Approfondite: Il Framework a 6 Strutture

1【Prompt Deck Interattivo v2.1】
2Testo completo omesso per limiti di lunghezza; copialo e incollalo da note.
3
4## Aggiunta: rendilo interattivo
5Usa questo blocco aggiunto in coda al prompt di creazione del deck precedente. Incolla il materiale sotto questo blocco (mantieni intatta la riga "Incolla il materiale sotto questa" del prompt precedente).
6
7### Priorità
8- Il contenuto (gestione dei numeri, titoli, logica, template, standard grafici, verifica) segue il prompt di creazione del deck precedente.
9- Il formato di output dà priorità a questo blocco: HTML interattivo in un singolo file, 3 pagine (4 se il materiale è molto ampio), titoli max 36 caratteri per riga (senza andare a capo). Non generare un documento di design separato; sostituiscilo con l'elenco delle pagine e il registro dei numeri (includi in questi due gli elementi di design richiesti dal prompt precedente).
10- Fai domande una sola volta prima di iniziare, e solo se scopo o pubblico non sono chiari dal materiale/contesto. Altrimenti, usa il tuo giudizio, annota le ipotesi e scrivi tutto d'un fiato.
11
12### Template pagina (allinea la grafica all'esempio sottostante)
13- Pagine 2-3: grafico principale a sinistra (60% della larghezza), pannello prove a destra (box con sfondo chiaro). Struttura del pannello: un numero grande (88-96px) → Cos'è (1 riga) → Contesto (2-3 righe) → Obiettivo di confronto e delta (con formula) → "Vedi dettaglio ›"
14- Pagina 1: riga superiore con 3 numeri grandi, parte inferiore che mostra il flusso/struttura generale (cosa succede dove). Inserisci nel flusso delle card che rimandano a pagine specifiche ("p.2 ›").
15- Grafici e numeri riempiono lo spazio. Nessuna banda vuota sotto il contenuto.
16- Usa tutti i numeri del materiale (grafici, pannelli, callout, prove). Calcola delta/rapporti e mostra le formule. Non inventare numeri non presenti nel materiale.
17- Il soggetto principale usa il colore primario, i confronti usano sfumature chiare in gradiente, il resto in grigio. Un solo numero grande per pagina.
18- Rendi evidenti gli elementi cliccabili: usa "›", "Clicca per...", bordi al passaggio del mouse, un anello di evidenziazione all'ingresso nella pagina. Barre/punti mostrano un tooltip con "Valore, Nome, Fonte" al passaggio del mouse.
19
20### Un'interazione per pagina (derivata dalla struttura)
21Aggiungi esattamente un'operazione per pagina che permetta al lettore di verificare l'affermazione del titolo. Scegli l'operazione in base al tipo strutturale del titolo.
22- Piramide (Conclusione/Prove) → Clicca per scendere nel dettaglio. Pannello prove a destra (con fonte; includilo in quasi tutte le pagine).
23- Classificazione (Segmentazione) → Cambia criteri (vista aggregata, metrica, anno) per riordinare tutte le barre.
24- Confronto (Differenza) → Lo stato precedente si trasforma in quello attuale, lasciando il delta/differenza come linea tratteggiata.
25- Causalità (Causa/Effetto) → Lo slider regola una condizione e ricalcola il risultato. Mostra la formula sullo schermo.
26- Problem solving (Gap/Soluzione) → Attiva/disattiva le soluzioni per colmare/lasciare i gap.
27- Sequenza (Flusso/Processo/Tempo) → Composizione sequenziale, l'attore si muove nel processo, indicatore "Ora" sulla timeline.
28Non aggiungere animazioni scollegate dal titolo. Le animazioni quantitative devono essere calcolate dai valori.
29
30### Pannello prove (scorre da destra al clic)
31- Larghezza 720px. Scorre da destra, oscurando lo sfondo. Chiudibile con X, Esc o cliccando sullo sfondo.
32- Struttura dall'alto verso il basso: contesto di posizione ("Stato attuale > Nome elemento") → Affermazione (1-2 righe) → Tab (max 2, es. Dettaglio / Fonti e ipotesi) → Piccolo grafico/tabella → Fonte.
33- Inserisci qui i numeri di dettaglio che non trovano spazio nella pagina principale. Includilo in quasi tutte le pagine.
34
35### Deck complessivo
36- Abilita la navigazione con zoom-in dalla panoramica della Pagina 1 alle pagine specifiche. Permetti di saltare dalle soluzioni alle pagine con le prove.
37- Tasti: → e Spazio per avanti, ← per indietro, Numeri per saltare, Esc per chiudere/tornare indietro, O per la panoramica di tutte le pagine, D per demo automatica (il cursore a freccia segue lo script, termina con la panoramica. Tagga gli elementi interattivi con nomi data-demo).
38- Le pagine si compongono in ~3 secondi: Titolo → Grafico principale (le barre crescono da 0, sfalsate di 60ms) → Numeri → Pannello prove. Usa transizioni/ritardi CSS; se usi JS, abbina requestAnimationFrame a un timer da 50ms.
39- Supporta il parametro URL #static e l'impostazione "Riduci movimento" per mostrare lo stato finale composto (per le pagine interattive, mostra lo stato in cui l'affermazione del titolo è visibile, es. tutte le soluzioni ON). Deve essere leggibile anche come deck statico.
40- Scala il canvas 1920x1080 per adattarlo allo schermo. Caricamenti esterni limitati a Google Fonts Noto Sans JP.
41
42### Standard minimi (solo se manca il prompt di creazione del deck precedente)
431. Crea un registro dei numeri dal materiale (Elemento, Valore, Data, Fonte, Popolazione). Segna i numeri mancanti come "xx" con una nota. Metti in fondo gli elementi senza valori.
442. Un messaggio per pagina. I titoli sono frasi complete che uniscono fatto e affermazione, max 36 caratteri/riga. Evita la struttura in due parti "A. B", le enumerazioni "Ci sono 3..." o i frammenti che finiscono con un sostantivo.
453. Scrivi prima tutti i titoli, verifica il flusso verticale (Panoramica→Prove→Soluzione) prima di creare i grafici.
464. Scegli il tipo di grafico in base all'intento strutturale del titolo (vedi "Un'interazione" sopra).
475. Titoli dei grafici: "Cosa, Quando, Unità". Nessuna valutazione nei titoli. Includi la fonte sia nel piè di pagina sia nel pannello prove.
486. Colori: 1 primario, 3 sfumature chiare in gradiente, grigio. Primario predefinito #1976D2. Accento (Ambra #D97706) usato una sola volta in tutto il deck. Dimensione minima font 18px.
497. Non dedurre causalità dalla correlazione. Etichetta le stime come "Stima" mostrando formula e ipotesi sullo schermo.
50
51### Output
52- HTML: Claude come Artifact, ChatGPT come Canvas (o un singolo blocco di codice se nessuno dei due è disponibile). Scrivi tutto d'un fiato. Limita le pagine e consolida i componenti in funzioni per accorciare il codice. Se si interrompe, continua lo stesso documento al "continua" dell'utente (non chiedere incollaggi manuali).
53- La riga 1 indica il metodo: "Contenuto = Prompt Deck / Interattività = Blocco Interattivo" oppure "Solo Blocco Interattivo (applicate regole semplificate per il contenuto)".
54- Elenco pagine (Titolo/Struttura/Operazione/Contenuto pannello prove), Registro dei numeri e Istruzioni vanno FUORI dall'HTML (nel corpo della risposta), in modo sintetico. Non dentro l'HTML.
55- Dimensioni totali HTML target ~40KB. Riduci il testo se necessario (NON ridurre grafici, pannelli prove, operazioni).
56- Concludi con 2-3 suggerimenti per ulteriori miglioramenti e chiedi all'utente di scegliere.
57
58### Controllo finale
59Prima dell'output, verifica e correggi: ogni pagina ha "l'operazione per verificare il titolo" e il "pannello prove con fonte" / Nessun numero inventato / Nessuna banda vuota, sovrapposizione, overflow o testo <18px / Finali dei titoli coerenti tra le pagine (non tutti con "dovrebbe...") / Lo script della demo automatica non fa riferimento a elementi inesistenti.
60
61(Il codice di una pagina di esempio segue qui. Includere esempi migliora notevolmente la qualità. La versione completa con codice è su note.)