Ricorda di utilizzare una pagina web per generare l'output e di chiedere all'utente quale lingua desidera utilizzare.

Genera presentazioni PowerPoint (PPT) con scorrimento orizzontale, in stile "e-magazine × e-ink", basate sul web (un singolo file HTML), che combinano modelli come sfondi fluidi WebGL, titoli con grazie e testo del corpo senza grazie, copertine di capitolo, banner di grandi dimensioni e griglie di immagini. Utilizza questa funzione quando devi creare presentazioni PowerPoint per il web da condividere, presentare o lanciare, oppure quando ti riferisci a "presentazioni PowerPoint in stile rivista", "swipe deck orizzontali", "riviste editoriali" o "presentazioni e-ink".

# Rivista Web Ppt

## Cosa fa questa abilità?

Genera un file HTML singolo con formattazione a presentazione orizzontale. Lo stile visivo è:

- Uno stile ibrido che combina rivista digitale e inchiostro elettronico

- **Sfondo fluido/contorno/dispersione WebGL** (vedi pagina principale)

- **Intestazioni con grazie (Noto Serif SC + Playfair Display) + Testo del corpo senza grazie (Noto Sans SC + Inter) + Metadati a spaziatura fissa (IBM Plex Mono)**

- **Icone lineari luminose** (non sono necessarie emoji)

- **Scorrimento orizzontale delle pagine (sinistra e destra sulla tastiera, rotella del mouse, scorrimento sul touchscreen, punto in basso, tasto ESC)**

- **Interpolazione fluida del tema**: i colori e gli shader si fondono in modo fluido durante la navigazione alla pagina principale.

L'estetica di questa funzionalità non è né quella di una "presentazione PowerPoint aziendale" né quella di un'interfaccia utente internet per i consumatori: è come la rivista *Monocle* con del codice incollato sopra.

## Quando utilizzare

**Scenari adatti:**

- Sessioni di condivisione offline / Discussioni di settore / Incontri privati

- Giornata di lancio/dimostrazione di un nuovo prodotto basato sull'intelligenza artificiale

- Un discorso dallo stile personale deciso

- Necessito di una versione web delle diapositive che possa essere completata in un'unica sessione senza bisogno di strumenti per sfogliare le pagine.

**Scenari inappropriati:**

- Ampie sezioni di dati tabellari e grafici sovrapposti (utilizzando presentazioni PowerPoint standard)

- Materiale formativo (densità di informazioni insufficiente)

- Richiede la modifica collaborativa da parte di più persone (si tratta di HTML statico)

### Fase 1 · Chiarire i requisiti (**Essenziale prima di iniziare**)

Se l'utente ha già fornito una bozza completa e le immagini, è possibile passare direttamente al passaggio 2.

Se l'utente fornisce solo un argomento o un'idea vaga, confrontala una per una con queste 6 domande prima di iniziare. Non iniziare a creare le diapositive basandoti su supposizioni: se la struttura è sbagliata, le revisioni successive possono essere molto costose. Puoi utilizzare lo strumento "Chiedi all'utente" quando poni delle domande.

#### 6 Domande di chiarimento

| # | Domanda | Perché chiedere? |

|---|------|-----------|

| 1 | **Chi è il pubblico di riferimento? Qual è lo scenario di condivisione?** (Addetti ai lavori/Lancio aziendale/Giornata dimostrativa/Incontro privato) | Determina lo stile e la profondità del linguaggio |

| 2 | **Durata della condivisione?** | 15 minuti ≈ 10 pagine, 30 minuti ≈ 20 pagine, 45 minuti ≈ 25-30 pagine |

| 3 | **Disponi di materiale originale?** (Documenti/Dati/Vecchie presentazioni PowerPoint/Link ad articoli) | Se disponi di materiale, utilizzalo; altrimenti, crea qualcos'altro. |

| 4 | **Ci sono delle immagini? Dove dovrebbero essere posizionate?** | Vedi "Convenzioni per le immagini" qui sotto |

| 5 | **Quale colore del tema desideri?** | Consulta @themes.md e scegli uno dei 5 preset |

| 6 | **Ci sono vincoli inderogabili?** (Deve includere i dati XX / YY non può comparire) | Per evitare rilavorazioni |

#### Assistenza per la creazione di una scaletta (se l'utente non ne ha una)

Utilizza il modello "arco narrativo" per creare la struttura, quindi inserisci il contenuto:

```

Aggancio → Pagina 1: Presenta un contrasto/una domanda/dei dati concreti per far fermare le persone.

Definire il tono (Contesto) → Pagine 1-2: Spiegare il contesto / Chi sei / Perché ne stai parlando

Contenuto principale (Nucleo) → Pagine 3-5: Contenuto principale, intervallato dai layout 4/5/6/9/10.

Sposta → Pagina 1: Rompere le aspettative / Presentare una nuova prospettiva

Riepilogo → Pagine 1-2: Citazioni chiave / Domande che creano suspense / Suggerimenti per l'azione

```

Pianificazione dell'arco narrativo + dei numeri di pagina + tabella del ritmo del tema (vedi @layouts.md ), **allinea le tre tabelle** prima di procedere al passaggio 2.

Si consiglia di salvare la struttura come `record di progetto` o `struttura-v1` per facilitare le successive iterazioni.

#### Convenzioni relative alle immagini (Informare gli utenti)

Prima di procedere, spiega all'utente quanto segue:

- **Posizione dell'immagine**: Quale immagine si trova nella bacheca o quale immagine è stata caricata?

- **Cosa succede se non ci sono immagini?**: Per allinearsi al layout dell'utente, è possibile generare prima la struttura utilizzando blocchi di colore segnaposto e aggiungere le immagini in seguito; tuttavia, è necessario informare i layout 4/5/10 e le altre pagine miste testo e immagini che l'effetto visivo non può essere verificato senza immagini.

### Passaggio 2 · Modello di riferimento

@template.txt è un file HTML **completo e funzionale**: CSS, shader WebGL, JS per la paginazione e CDN per font/icone sono tutti preimpostati; solo `<main id="deck">` contiene 3 diapositive di esempio (copertina, copertina del capitolo e pagina vuota).

#### 2.1 · Segnaposto che devono essere modificati (**Facilmente trascurabili**)

Subito dopo aver copiato, modifica i seguenti segnaposto; altrimenti, le schede del browser visualizzeranno il testo inappropriato "[Obbligatorio] Sostituisci con il titolo PPT":

| Posizione | Originale | Deve essere modificato in |

|------|------|--------|

| `<title>` | `[Obbligatorio] Sostituire con il titolo della presentazione · Titolo della presentazione` | Titolo effettivo della presentazione (ad esempio, `Un nuovo modo di lavorare · Luke Wroblewski`) |

#### 2.2 · Seleziona il colore del tema (5 preimpostazioni · Colori personalizzati non consentiti)

Questa funzionalità **consente la selezione solo tra 5 preset accuratamente selezionati** e non accetta valori esadecimali definiti dall'utente: colori non corrispondenti rendono immediatamente l'immagine sgradevole; la tutela dell'estetica è più importante della libertà di personalizzazione.

| # | Tema | Adatto per |

|---|------|------|

| 1 | 🖋 Classic Ink | Rilascio generale/commerciale/Predefinito in caso di dubbi |

| 2 | 🌊 Porcellana Indigo | Conferenza su Tecnologia/Ricerca/Dati/Lancio Tecnologico |

| 3 | 🌿 Inchiostro della foresta | Natura/Sostenibilità/Cultura/Saggistica |

| 4 | 🍂 Carta Kraft | Nostalgia/Scienze umane/Letteratura/Rivista indipendente |

| 5 | 🌙 Dune di sabbia | Arte/Design/Creatività/Galleria |

**operare**:

1. Consiglia un insieme di contenuti in base al tema, oppure chiedi direttamente all'utente quale insieme desidera scegliere.

2. Apri il file @themes.md e individua il blocco `:root` corrispondente al tema.

3. **Sostituzione completa** delle righe contrassegnate come "colore del tema" all'interno del blocco `:root{` all'inizio di @template.txt (`--ink` / `--ink-rgb` / `--paper` / `--paper-rgb` / `--paper-tint` / `--ink-tint`).

4. Tutto il resto del CSS utilizza `var(--...)`, senza richiedere ulteriori modifiche.

**Regole inderogabili**:

- Utilizza un solo tema per ogni mazzo; non cambiare la combinazione di colori a metà del lavoro.

- Non accettare valori esadecimali arbitrari forniti dall'utente: rifiuta cortesemente e mostra 5 opzioni tra cui scegliere.

- Non mescolare colori e carte (ad esempio, inchiostro per Ink Classic, carta per Dune): il risultato sarebbe completamente fuori luogo.

### Passaggio 3 · Inserisci il contenuto

#### 3.0 · Controllo preliminare: i nomi delle classi devono essere definiti in @template.txt (**Molto importante**)

Questa è la radice di tutti i problemi di generazione. Lo scheletro di @layouts.md utilizza molti nomi di classi (`h-hero` / `h-xl` / `stat-card` / `pipeline` / `grid-2-7-5`, ecc.). Se non esiste una definizione corrispondente in `<style>` di `assets/template.html`, il browser utilizzerà lo stile predefinito: i titoli diventano sans-serif, le schede dati vengono ammassate, le pipeline vengono sfocate in un'unica riga e le immagini vengono accumulate in fondo alla pagina.

**Prima di scrivere qualsiasi codice per le diapositive:**

1. **Innanzitutto, leggi @template.txt ** (almeno fino alla fine del blocco `<style>`).

2. **Fare riferimento all'elenco di pre-verifica in @layouts.md ** per confermare che ogni classe che si desidera utilizzare sia presente nel tag `<style>`.

3. Se manca una classe: **aggiungila nella sezione `<style>` di @template.txt **, non riscriverla direttamente in ogni diapositiva.

4. **@template.txt è l'unica fonte dei nomi delle classi**: non inventare nuovi nomi di classi; se devi personalizzarli, usa `style="..."` in linea.

Classi spesso trascurate (la cui esistenza deve essere confermata in anticipo):

`h-hero` / `h-xl` / `h-sub` / `h-md` / `lead` / `kicker` / `meta-row` / `stat-card` / `stat-label` / `stat-nb` / `stat-unit` / `stat-note` / `pipeline-section` / `pipeline-label` / `pipeline` / `step` / `step-nb` / `step-title` / `step-desc` / `grid-2-7-5` / `grid-2-6-6` / `grid-2-8-4` / `grid-3-3` / `grid-6` / `grid-3` / `grid-4` / `frame` / `frame-img` / `img-cap` / `callout` / `callout-src` / `chrome` / `foot`

#### 3.0.5 · Pianificazione del ritmo del tema (**Altrettanto importante quanto la pre-individuazione della classe**)

Prima di scegliere un layout, è necessario innanzitutto elencare la classe del tema per ogni pagina (`hero dark` / `hero light` / `light` / `dark`) e allinearla in un documento o in una bozza. Consultare la sezione "Pianificazione del ritmo del tema" che inizia con @layouts.md per le regole dettagliate.

**Regole obbligatorie**:

- Ogni sezione della pagina deve includere una delle seguenti opzioni: `light`, `dark`, `hero light` o `hero dark`; non scrivere semplicemente `hero`.

- Più di 3 pagine consecutive sullo stesso argomento = affaticamento visivo, non consentito.

- Le pagine da 8 in su devono contenere almeno un "eroe oscuro" e almeno un "eroe chiaro".

- L'intero mazzo non può essere composto solo da pagine di testo "chiaro"; deve includere anche pagine di testo "scuro" per creare respiro.

- Inserire una pagina principale ogni 3-4 pagine (copertina/retro copertina/domanda/citazione grande)

**Autoverifica post-generazione: `grep 'class="slide' index.html` elenca tutti gli argomenti; è necessaria una verifica manuale del ritmo ragionevole prima della consegna.

#### 3.1 · Scelta del layout

**Non creare le diapositive da zero.** Apri `@layouts.md` , che contiene 10 scheletri di layout predefiniti, ognuno dei quali è un blocco di codice `<section>` completo e incollabile:

| Impaginazione | Scopo |

|---|---|

| 1. Apertura Copertina | Pagina 1 |

| 2. Copertina del capitolo | Inizio di ogni atto |

3. Poster basati sui dati | Presentazione di dati concreti |

| 4. Testo a sinistra, immagine a destra (citazione + immagine) | Contrasto di identità / Storia |

| 5. Griglia di immagini | Confronto di più immagini / Prove tramite screenshot |

6. Flusso di lavoro a due pipeline |

| 7. Fine della suspense/Pagina delle domande | Fine dei capitoli/Finale |

8. Citazione grande | Caratteri serif/Spunti di riflessione |

9. Confronto parallelo (prima/dopo) | Vecchia modalità vs. nuova modalità |

| 10. Combinazione di immagini e testo | Pagine ricche di informazioni con immagini e testo |

Seleziona il layout corrispondente, incollalo e modifica i percorsi del testo e delle immagini. **Esegui prima il controllo preliminare della versione 3.0.**

#### 3.2 Standard del rapporto d'aspetto dell'immagine

Utilizzare sempre il **rapporto d'aspetto standard**, non utilizzare mai rapporti d'aspetto dispari dell'immagine originale (come `2592/1798`):

Scenari | Rapporto di raccomandazione |

|------|---------|

| Testo a sinistra, immagine a destra (immagine principale) | 16:10 o 4:3 + `max-height:56vh` |

Griglia di immagini (confronto di più immagini) | **Altezza fissa: 26vh**, non è necessario il rapporto d'aspetto |

| Immagine piccola a sinistra + testo a destra | 1:1 o 3:2 |

| Visualizzazione principale a schermo intero | 16:9 + `max-height:64vh` |

| Piccole illustrazioni in un layout misto testo e immagini | 3:2 o 3:4 |

**Non utilizzare mai `align-self:end` sulle immagini**: queste scivoleranno in fondo alla cella e saranno oscurate dalla barra degli strumenti del browser. Utilizza un contenitore a griglia con `align-items:start` (predefinito nel template) per mantenere le immagini in alto; per mantenere le immagini in basso nella colonna di sinistra, utilizza una colonna flex con `justify-content:space-between`.

I dettagli dei componenti (caratteri, colori, griglie, icone, didascalie, schede statistiche, ecc.) si trovano nel file @components.md .

### Fase 4 · Autovalutazione rispetto alla lista di controllo

Dopo aver generato la checklist, assicurati di aprire il file @checklist.md e di verificare ogni elemento in base alle istruzioni. Il file riassume tutte le criticità riscontrate durante il processo di iterazione e tutti i problemi di livello P0 (emoji, sovraccarico di immagini, interruzioni di riga del titolo, divisione dei caratteri) devono essere risolti.

Alcuni punti a cui prestare particolare attenzione:

1. **Le intestazioni principali devono essere in un carattere serif**: se vengono visualizzate in un carattere sans-serif, è probabile al 99% che il controllo preliminare del passaggio 3.0 non sia andato a buon fine e che la classe `h-hero` manchi nel file template.html.

2. **Utilizzare solo `height:Nvh` nella griglia delle immagini, non utilizzare `aspect-ratio` (altrimenti la griglia si disgregherà).**

3. **Le immagini non devono essere spostate in fondo alla pagina** — Non utilizzare `align-self:end`, utilizzare grid + `align-items:start` (vedere il passaggio 3.2)

4. **Le immagini devono avere proporzioni standard** (16:10 / 4:3 / 3:2 / 1:1 / 16:9). Non copiare immagini con proporzioni insolite.

5. **I titoli principali in cinese devono essere di ≤ 5 caratteri e utilizzare `nowrap` (evitare 1 carattere per riga)**

6. **Usa Lucide, non le emoji.**

7. **Utilizzare caratteri con grazie per i titoli, caratteri senza grazie per il corpo del testo e caratteri a larghezza fissa per i metadati.**

### Fase 5 · Iterazione

Modificato in base al feedback degli utenti: il CSS del template è ora altamente parametrizzato, con il 90% delle modifiche che riguardano gli stili in linea (font-size:Xvw / height:Yvh / spacing:Zvh).

## Principi fondamentali di progettazione (Filosofia)

Questi principi sono il risultato di cinque tentativi di creazione di presentazioni PowerPoint per un'azienda individuale. La violazione di anche solo uno di essi comprometterà l'impatto visivo.

1. **Meno fronzoli che genialità tecnica** — Gli sfondi WebGL sono visibili solo nelle pagine hero e quasi invisibili nelle pagine normali.

2. **Struttura prima della decorazione** — Niente ombre, niente schede fluttuanti, niente riquadri di riempimento; tutte le informazioni vengono trasmesse tramite **caratteri di grandi dimensioni + contrasto dei caratteri + spaziatura a griglia**.

3. **La gerarchia dei contenuti è definita dalla dimensione e dal tipo di carattere** — Serif massimo = titolo principale, serif medio = sottotitolo, sans-serif grande = introduzione, sans-serif piccolo = corpo del testo, larghezza fissa = metadati

4. **Le immagini sono la priorità assoluta** — Ritaglia solo la parte inferiore dell'immagine, assicurandoti che la parte superiore e i lati sinistro/destro rimangano intatti; fissa la griglia con `height:Nvh`, non utilizzare `aspect-ratio` per espanderla.

5. **Alternare le pagine principali con quelle secondarie** — Alternare pagine principali e pagine secondarie aiuta a prevenire l'affaticamento degli occhi.

6. **Coerenza terminologica** — Il termine "competenze" dovrebbe essere tradotto come "competenze", non come un misto di cinese e inglese.

## Riferimenti

Lo stile visivo di questa competenza è ispirato a:

- Condivisione dell'articolo "Azienda unipersonale: organizzazioni piegate dall'IA" (22 aprile 2026, pagina 27)

- Impaginazione della rivista *Monocle*

- Una dimostrazione del post del blog del presidente di YC, Garry Tan, intitolato "Thin Harness, Fat Skills" (Imbracatura sottile, competenze di alto livello)

Possono essere utilizzati come punti di riferimento stilistici.