La settimana scorsa sono stato invitato dal Professor Li Jigang a tenere un'intervista in sessione privata su AI e organizzazioni.
Dopo la sessione, ho scoperto che la domanda più frequente era: "Con cosa hai fatto quel PPT? Puoi renderlo open source?"
Non mi aspettavo che il sottoprodotto diventasse il prodotto principale.
Così ho deciso di renderlo open source, chiamandolo guizang-ppt-skill (https://github.com/op7418/guizang-ppt-skillhttps://github.com/op7418/guizang-ppt-skill)).
L'articolo di oggi parlerà di com'è questa Skill e perché, da persona che è stata designer per dieci anni, penso sia esteticamente valida.
Com'è
Quando apri un PPT generato dalla Skill, la prima impressione la prima impressione è probabilmente: non sembra fatto dall'AI.
Alcune caratteristiche intuitive:
- Copertina: Sfondo color inchiostro + titolo principale con grazie, con un tenue fluido WebGL che scorre lentamente dietro.
- Corpo: Lo sfondo torna a un bianco carta con testo color inchiostro sovrapposto, come una rivista stampata aperta.
- Volta pagina: Scorrimento orizzontale da sinistra a destra, con supporto per tastiera, rotellina del mouse e gesti tattili—non il classico "prossima diapositiva" di PowerPoint.
- Metadati: Ogni pagina ha piccoli testo monospaziato nei quattro angoli, che riportano cose come "Atto II · 15 / 25," simile ai numeri di pagina dei giornali.
Ho dato a questo tono visivo un nome: "Rivista Elettronica × E-Ink."
L'ispirazione viene dalle tradizioni di impaginazione delle riviste stampate come Monocle, The Guardian e NYT, sovrapposte all'estetica di lettura della carta elettronica Kindle, il tutto legato con la sintassi interattiva Web contemporanea.
Cosa Può fare
La Skill fornisce attualmente 10 layout di pagina, 5 preset di colore tema e un set completo di interazioni per il volta pagina.
10 Layout coprono quasi tutti i tipi di pagina utilizzati in una sessione di condivisione di 15-30 pagine:
Copertina di apertura, interruzioni di capitolo, poster di dati, testo a sinistra immagine a destra, griglie di immagini, processi di pipeline, domande suspense, citazioni grandi, confronti Prima/Dopo e layout misti testo-immagine.
Ognuno è uno scheletro HTML che può essere incollato direttamente; basta cambiare il testo e le immagini per usarlo.
5 Temi corrispondono a diversi scenari:
- Ink Classic — Presentazioni aziendali, default generale
- Indigo Porcelain — Tecnologia, ricerca, conferenze AI
- Forest Ink — Natura, sostenibilità, discipline umanistiche
- Kraft Paper — Nostalgia, letteratura, riviste indipendenti
- Dune — Arte, design, creatività
Ogni tema è semplicemente un diverso set di valori per 6 variabili CSS. Cambiare tema richiede solo la sostituzione di quelle 6 righe di codice in :root.
Gli utenti non possono personalizzare i codici esadecimali; spiegherò perché più avanti.
Le interazioni per il volta pagina supportano i tasti freccia sinistra/destra della tastiera, la rotellina del mouse, lo scorrimento tattile, i salti a punti in basso e il tasto ESC per aprire un indice di miniature.
L'obiettivo è avvicinarsi il più possibile all'esperienza di sfogliare le pagine di una vera rivista nel browser.
L'output è un HTML a file singolo. Doppio clic per visualizzarlo in un browser. Inviarlo ad altri è solo un file, così non devi preoccuparti che i caratteri o le animazioni si rompano sul computer di qualcun altro.
Come si usa
In realtà, il vero valore di questa Skill non è nel template in sé, ma nel fatto sta che definisce un'interfaccia per la collaborazione Umano × AI sui PPT.
Ecco tre cose che penso siano le più utili da dire agli altri dopo averla usata io stesso per una settimana.
Chiarisci queste 6 cose con l'AI per primo
Una volta installata la Skill, basta dire "Aiutami a fare un PPT in stile rivista" e Claude ti farà proattivamente 6 domande:
- Chi è il pubblico e qual è lo scenario? (Interno settore / Presentazione aziendale / Condivisione privata)
- Quanto dura la condivisione? (15 min ≈ 10 pagine, 30 min ≈ 20 pagine)
- C'è materiale originale? (Documenti, dati, vecchi PPT, link ad articoli)
- Ci sono immagini, e dove si trovano?
- Quale colore tema vuoi? (Scegli tra 5 preset)
- Ci sono vincoli rigidi? (Deve includere XX dati / Non può mostrare YY)
Non devi dire tutto in una volta; ti farà le domande una per una. Dopo aver risposto, ti darà prima un sommario e una tabella di ritmo dei temi. Allineamento prima, poi inizia a scrivere il codice—questo passaggio mi evita l'80% delle rielaborazioni.
Il più grande punto dolente dell'uso dell'AI per i PPT prima era che iniziava subito a scrivere, e te ne accorgevi solo a pagina 10 che la direzione era sbagliata. Questo processo di chiarimento sposta "l'allineamento" all'inizio.
Come inserire immagini
Le immagini sono posizionate in una cartella images/ allo stesso livello di index.html, con regole di denominazione specifiche:
1ppt/2├── index.html3─ index.html4└── images/5 ├── 01-cover.jpg6 ├── 03-figma.png7 └── 05-dashboard.png
- Numeri di pagina con zero iniziale + semantica in inglese—01 invece di 1, cover invece di fengmian. Questo facilita l'ordinamento e chiare i riferimenti per l'AI.
- Usa JPG per foto, PNG per screenshot—Gli screenshot contengono testo; il PNG li mantiene nitidi.
- Larghezza singola immagine ≥ 1600px—Così non sono sfocate nelle proiezioni su grande schermo.
Basta dire a Claude "La pagina 3 è uno screenshot dell'interfaccia Figma" e scriverà automaticamente images/03-figma.png. Basta trascinare il file con lo stesso nome nella cartella.
Il segreto per la sostituzione di immagini senza perdita: Sovrascrivi con lo stesso nome
Questa è la trappola più grande che ho incontrato—voler cambiare un'immagine dopo che la copia è fatta, poi dover cercare e sostituire i percorsi a livello globale, cosa che spesso rompe l'HTML.
Il modo corretto è una sola frase: Sovrascrivi la vecchia immagine con la nuova usando lo stesso nome e non cambiare un singolo carattere nell'HTML.
Perché è così
Dopo aver parlato di come si usa, parliamo del perché è come è.
Il buon design non è mistero; è un insieme di decisioni scomponibili. Quello che ho fatto è essenzialmente spostare il linguaggio di impaginazione accumulato dall'industria delle riviste per oltre cento anni nell'HTML.
Divisione a tre livelli della tipografia
- Con grazie → "Opinioni". Usa i caratteri con grazie per i titoli principali; i lettori percepiscono immediatamente "questa è una frase da prendere sul serio."
- Senza grazie → "Informazioni". Alta densità per il corpo del testo, facile da leggere.
- Monospazio → "Metadati". Numeri di capitolo, date e numeri di pagina in intestazione e piè di pagina, come i piedi di pagina delle riviste o il codice in un terminale.
I lettori non devono pensare troppo; i loro occhi sanno automaticamente se una frase è il testo principale o una nota.
Disciplina del colore
Bianco carta, colore inchiostro, più un colore di accento è sufficiente.
Il bianco puro è accecante e il nero puro è aggressivo; l'industria della stampa non lo fa mai, e Kindle neppure.
Nei 5 temi della Skill, nessuno dei colori di sfondo è #FFFFFF, e nessuno dei colori di testo è #000000.
Ogni set espone solo 6 variabili CSS, e il SKILL.md afferma esplicitamente: Gli utenti non possono personalizzare i codici esadecimali; devono scegliere uno dei cinque.
Più i vincoli sono rigidi, più lo stile è stabile. Proteggere l'estetica è più importante che dare libertà agli utenti.
Griglia e Ritmo
Griglie fisse come 7:5, 6:6 e 8:4 assicurano l'ordine su una singola pagina.
Le pagine hero e quelle non hero devono alternarsi per garantire il ritmo dell'intero mazzo.
Una pagina densa, una pagina spaziosa—questo è il senso di "respiro" che si prova sfogliando una rivista.
Una regola rigida è scritta nella Skill: più di tre pagine consecutive con lo stesso tema è considerato un errore P0.
Un PPT senza ritmo è solo una pila di diapositive messe insieme in un PDF.
Parole Finali
Nessuna delle regole di cui sopra è stata inventata da me.
Sono designer da dieci anni, faccio UI, interazione ed effetti AI; queste sono in realtà conoscenze comuni del settore.
Le ho semplicemente scritte una per una in SKILL.md e checklist.md in modo che l'AI possa eseguirle per me.
In altre parole, questa Skill è un pacchetto compresso dei miei dieci anni di estetica.
Prima, per fare un PPT decente, dovevo passare due giorni a regolare manualmente le griglie, scegliere le dimensioni dei caratteri e selezionare i valori dei colori.
Ora, butto semplicemente i materiali all'AI, lei li assembla secondo queste regole, e io devo solo controllarli.
Per questo motivo, ho osato renderlo open source.
Le regole non erano di mia esclusività mia; i designer di Monocle le usavano decenni prima di me. Le ho solo copiate nell'HTML 2026.
La Skill è già su GitHub: github.com/op7418/guizang-ppt-skill
Il README contiene un "prompt di installazione per AI." Copialo e incollalo nel tuo Claude Code o in un altro AI Agenet, e completerà l'installazione automaticamente. Una volta installato, dì "Aiutami a fare un PPT in stile rivista" per attivarlo.
Puoi anche usarlo all'interno dell'Agente Bloome, che attualmente è gratuito:
https://bloome.im/agent/join/iKXCLtkD?ref=wNL9Ew2G
Se trovi utile questo contenuto, per favore metti un mi piace o condividilo con gli amici che ne hanno bisogno.
Puoi anche condividere i PPT che hai realizzato con questa Skill nella sezione commenti.
