Presentazione editoriale-rivista
[Originale di @GuiCang] Genera una presentazione PPT (file HTML singolo) con scorrimento orizzontale delle pagine web, nello stile di una presentazione "e-magazine × e-ink", inclusi sfondi fluidi WebGL, titoli con grazie e testo del corpo senza grazie, copertine dei capitoli, banner di grandi dimensioni, griglie di immagini e altri modelli. Utilizzare questo strumento quando è necessario creare presentazioni PPT per pagine web in stile condivisione/presentazioni/eventi di lancio, oppure quando si fa riferimento a "presentazioni PPT in stile rivista", "swipe deck orizzontale", "rivista editoriale" o "presentazione e-ink".
Featured by
淡苍
Why we love this skill
Questa funzionalità può trasformare i tuoi contenuti in una presentazione PowerPoint basata sul web dallo stile unico, un mix tra una rivista digitale e la stampa digitale, fondendo sfondi fluidi WebGL con una tipografia raffinata, rendendo le tue presentazioni artistiche e sofisticate e dicendo addio alla monotonia delle presentazioni PowerPoint tradizionali.
Istruzioni
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 / Non può contenere YY) | 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
Corpo principale (Nucleo) → Pagine 3-5: Contenuto principale, intervallato da 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 `
#### 2.1 · Segnaposto che devono essere modificati (**Facilmente trascurabili**)
Subito dopo aver copiato, modifica i seguenti segnaposto; altrimenti, le schede del browser visualizzeranno un testo inappropriato come "[Obbligatorio] Sostituisci con il titolo PPT":
| Posizione | Originale | Deve essere modificato in |
|------|------|--------|
| `
#### 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 `