Skill Agente Guizang per PPT HTML

Una skill agente per Claude Code, Codex e ambienti simili per la programmazione assistita. Genera deck a scorrimento orizzontale in singolo file HTML, visuali per le slide e pagine di copertina per i social.

È dotata di due sistemi visivi:

• Stile A: rivista editoriale × inchiostro elettronico. Immagina Monocle con codice incorporato. Ideale per discorsi narrativi, opinioni, salotti e voce personale.
• Stile B: stile tipografico internazionale svizzero. Basato sulla griglia, con un colore di ancoraggio ad alta saturazione, rettangoli netti, linee sottilissime e contrasto tipografico estremo. Ideale per dati, prodotti, analisi e framework.

Distillato da Guizang a partire da talk offline come "Azienda unipersonale: organizzazioni piegate dall'AI" e "Un nuovo modo di lavorare". Ogni trappola incontrata durante quelle presentazioni è documentata in checklist.md.

Tema classico · Stile A Rivista editoriale

Nuovo tema · Stile B Svizzero internazionale

Avvio in 30 secondi

npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill

Oppure incolla questo comando in un agente AI con accesso shell:

Installa guizang-ppt-skill per me. Clona https://github.com/op7418/guizang-ppt-skill in ~/.claude/skills/guizang-ppt-skill, quindi verifica che SKILL.md, assets/ e references/ esistano.

Se l'hai già installata, aggiornala con:

Aggiorna guizang-ppt-skill per me. Vai a ~/.claude/skills/guizang-ppt-skill, esegui git pull, poi comunicami l'ultimo commit.

Quindi chiedi al tuo agente:

Crea un deck in stile svizzero da questo articolo, circa 7 slide, con 2-3 visuali generate.

Altri comandi utili:

Trasforma questo file Markdown in una presentazione in stile rivista editoriale.
Crea una copertina social 21:9 dall'idea centrale di questo deck.
Riprogetta questo screenshot di prodotto come una visuale per slide 16:10.

Cosa ottieni

• 🖋 Due sistemi visivi: storytelling editoriale per lo Stile A, struttura svizzera fattuale per lo Stile B
• 📐 Navigazione a scorrimento orizzontale: frecce ← → / rotellina del mouse / swipe touch / punti in basso / ESC per l'indice
• 🧩 10 layout Stile A: copertina, divisore, grandi numeri, immagine/testo, griglia immagini, pipeline, confronto e altri
• 🧱 22 layout bloccati Stile B: Copertina, Dichiarazione, Torre KPI, Diagramma ad anello, Confronto a due, Hero immagine, Manifesto di chiusura e altri
• 🎨 Preimpostazioni di tema curate: 5 temi a inchiostro elettronico per lo Stile A, 4 temi a colore di ancoraggio svizzero per lo Stile B
• 🖼 Flusso immagini Codex opzionale: genera foto documentaristiche, infografiche, diagrammi di flusso, mappe di sistema e scene UI con GPT-Image 2.0 / GPT-M 2.0, quindi inseriscile nei rapporti predefiniti dei template
• 📰 Copertine social: genera immagini di copertina WeChat 21:9, card condivisibili 1:1, copertine Xiaohongshu 3:4, miniature video e varianti correlate
• 📴 Modalità statica a basso consumo: premi B per trasformare le animazioni WebGL / canvas in visuali statiche
• 📄 Singolo file HTML — nessuna compilazione, nessun server, si apre direttamente nel browser

Quando è adatto / quando non lo è

✅ Adatto per: discorsi offline, keynote di settore, salotti privati, lanci di prodotti AI, demo day, presentazioni con una forte voce personale

❌ Non adatto per: tabelle ricche di dati, deck formativi (densità troppo bassa), editing collaborativo multiutente (HTML statico)

Casi d'uso comuni

Perché deck HTML

• Editing nativo per agenti: HTML / CSS è testo semplice, quindi gli agenti possono leggerlo, modificarlo e validarlo direttamente.
• Densità visiva maggiore rispetto a Markdown: layout preciso, posizionamento, movimento, interattività e formati di copertina.
• Distribuzione leggera: un singolo file HTML può essere aperto, presentato, inviato, catturato o registrato.
• Migliori controlli di qualità: il validatore svizzero può rilevare slittamenti di layout, posizionamento insicuro delle immagini, titoli centrati nel corpo e trappole di testo SVG.
• Un sistema visivo per tutti gli output: deck, visuali generate, copertine e riprogettazioni di screenshot possono condividere le stesse regole di stile.

Supporto piattaforme

Installazione

Opzione 1: Installazione a riga singola (consigliata)

npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill

Opzione 2: Incolla questo in un AI

Installa la skill guizang-ppt-skill di Claude Code per me. Passi:

1. Assicurati che ~/.claude/skills/ esista (crealo se non c'è)
2. Esegui git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill
3. Verifica: ls ~/.claude/skills/guizang-ppt-skill/ dovrebbe mostrare SKILL.md, assets/, references/
4. Avvisami quando hai finito. In seguito, dire cose come "fammi un deck in stile rivista" attiverà questa skill.

Incolla il blocco sopra in Claude Code / Cursor / qualsiasi agente AI con accesso shell e gestirà l'installazione.

Opzione 3: CLI manuale

git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill

Come attivarla

Una volta installata, Claude Code rileva automaticamente la skill. Frasi di attivazione:

• "Fammi un deck in stile rivista"
• "Fammi un deck in stile svizzero"
• "Genera un deck a scorrimento orizzontale"
• "Presentazione in stile rivista editoriale"
• "Slide a inchiostro elettronico per il mio talk"
• "Crea una copertina WeChat 21:9 da questo articolo"
• "Crea una card condivisibile 1:1 da questo deck"

Flusso di lavoro

La skill è un flusso di lavoro strutturato; l'agente ti guida attraverso ogni passaggio:

1. Scegli lo stile — Stile A rivista editoriale, o Stile B svizzero internazionale
2. Chiarisci l'intento — Checklist di 7 domande: stile, pubblico, durata, materiale sorgente, immagini/screenshot, tema, vincoli rigidi
3. Copia il template — Lo Stile A usa assets/template.html; lo Stile B usa assets/template-swiss.html
4. Inserisci i contenuti — crea un piano ritmico, poi scegli e adatta gli scheletri di layout corrispondenti
5. Generazione immagini opzionale — in Codex, chiedi se usare immagini GPT-Image 2.0 / GPT-M 2.0, quindi inseriscile nei rapporti adatti alla pagina
6. Autocontrollo — confronta con references/checklist.md; tutti i problemi P0 devono essere superati; i deck svizzeri devono anche superare il validatore di layout
7. Anteprima — apri l'HTML in un browser
8. Itera — usa stili inline per regolare dimensione del carattere, altezza, spaziatura

Specifica completa in SKILL.md.

Stile B Svizzero

Il tema svizzero è un sistema di layout rigoroso, non solo un foglio di stile CSS.

• 22 layout nominati: le slide del corpo devono usare da S01 a S22; non inventare nuove strutture
• 4 colori di ancoraggio: Blu Klein internazionale, giallo limone, verde limone, arancione di sicurezza
• Blocco della griglia: griglia a 16 colonne, rettangoli netti, linee di 1px, nessuna ombra, nessun gradiente, nessuna scheda arrotondata
• Dimensionamento dei titoli cinesi: i titoli interamente in cinese dovrebbero essere di una misura più piccola per preservare lo spazio per contenuti e immagini
• Allineamento inferiore immagine/testo: i blocchi di testo e immagine dovrebbero allinearsi in basso nei layout immagine sinistra/destra, rimanendo lontani dai controlli di paginazione
• Slot per immagini: le immagini devono essere posizionate nelle regioni data-image-slot definite dal template, spesso generate in 21:9 o 16:10
• Validazione rigida: il validatore rileva titoli centrati nel corpo, layout sperimentali, testo SVG visibile e immagini posizionate fuori dagli slot

Validazione svizzera:

node scripts/validate-swiss-deck.mjs path/to/index.html

Flusso immagini Codex

In Codex, dopo che la prima bozza del deck è pronta, l'agente può chiedere se l'utente desidera visuali generate. Una volta confermato, scegli un tipo o uno stile di immagine. I tipi comuni includono:

• Foto documentaristiche: scene reali in stile Fuji / Leica che aggiungono texture umana
• Infografiche / diagrammi di flusso / grafici comparativi / mappe di sistema: per concetti che non possono essere spiegati bene con le foto
• Inquadratura di screenshot / riprogettazione di screenshot: conserva gli screenshot grezzi con risorse di sfondo incluse e una tela in stile CleanShot X; usa la generazione di scene UI solo quando lo screenshot necessita di ricostruzione
• Poster di dati / grafici: trasforma i numeri chiave in risorse visive pronte per l'inserimento
• Composizioni multi-immagine: utili per slot ultra-wide dove tre immagini 16:9 non correlate romperebbero la griglia

Le immagini generate devono seguire quattro regole fondamentali:

• Considera l'immagine come una risorsa incorporata, non come una slide autonoma: nessun piè di pagina, fondo pagina, titolo, numero di pagina, marchio d'angolo, firma o bordo decorativo
• Abbina la lingua del deck: i deck cinesi usano etichette in cinese all'interno delle infografiche, i deck inglesi usano etichette in inglese
• Abbina il rapporto dello slot prima della generazione: 21:9 per molti slot hero svizzeri, 16:9 / 16:10 per le visuali principali comuni, 16:10 per le scene UI, altezze uguali fisse per le griglie di immagini
• Quando uno screenshot grezzo deve rimanere fedele, leggi prima references/screenshot-framing.md e usa gli sfondi assets/screenshot-backgrounds/ in bundle insieme a ridimensionamento, spaziatura e allineamento programmatico invece di ridisegnare lo screenshot per impostazione predefinita

I prompt per le immagini si trovano in references/image-prompts.md. L'inquadratura degli screenshot si trova in references/screenshot-framing.md.

Generazione copertine

La skill può anche trasformare un articolo o un'idea per un deck in copertine per piattaforme:

• Copertina principale WeChat: 21:9, titolo in primo piano, con un'ancora visiva
• Card condivisibile WeChat: 1:1, visivamente abbinata alla copertina 21:9
• Copertina / carosello Xiaohongshu: 3:4, titolo grande, scala tipografica uniforme su un batch
• Miniatura video: 16:9, titolo + sottotitolo + un elemento visivo focale

La stessa regola si applica: usa poche parole chiave forti, mantieni il titolo come centro visivo e non riempire la tela con il corpo del testo.

Esempi di prompt

Copia uno qualsiasi di questi prompt nel tuo agente, poi allega il tuo articolo, file Markdown o risorse immagine:

Crea un deck in stile svizzero di 8 slide da questo articolo, con 3 visuali generate corrispondenti agli slot immagine del template.

Trasforma questo documento di analisi prodotto in un deck in stile rivista editoriale con un forte ritmo narrativo.

Dall'idea centrale di questo deck, crea due copertine: una copertina principale 21:9 e una card condivisibile 1:1 visivamente abbinata.

Riprogetta questi screenshot prodotto in visuali per slide 16:10 uniformi. Conserva le informazioni chiave dell'UI; non aggiungere titoli di slide o piè di pagina all'interno delle immagini.

Struttura directory

guizang-ppt-skill/
├── SKILL.md              ← file principale della skill: flusso di lavoro, principi, errori comuni
├── README.md             ← README in cinese
├── README.en.md          ← questo file
├── assets/
│   ├── template.html         ← template Stile A rivista editoriale
│   ├── template-swiss.html   ← template Stile B svizzero
│   └── screenshot-backgrounds/ ← sfondi screenshot WebP in bundle: 5 style-a / 4 style-b
├── scripts/
│   └── validate-swiss-deck.mjs ← validatore layout svizzero
└── references/
    ├── components.md     ← catalogo componenti (tipo, colore, griglia, icone, callout, stat, pipeline)
    ├── layouts.md        ← 10 scheletri di layout (pronti da incollare)
    ├── layouts-swiss.md  ← 22 layout svizzeri bloccati
    ├── swiss-layout-lock.md ← regole rigide di fedeltà e layout svizzero
    ├── themes.md         ← 5 preimpostazioni di tema (scegliere, non personalizzare)
    ├── themes-swiss.md   ← 4 temi a colore di ancoraggio svizzero
    ├── image-prompts.md  ← tipi di immagine, rapporti e prompt base per GPT-Image 2.0 / GPT-M 2.0
    ├── screenshot-framing.md ← semantica di inquadratura screenshot in stile CleanShot X
    └── checklist.md      ← checklist di qualità (livelli P0 / P1 / P2 / P3)

Preimpostazioni di tema

Scegli da references/themes.md. I valori esadecimali personalizzati non sono consentiti — proteggere l'estetica è più importante della libertà di scelta.

Temi editoriali Stile A

Cambiare tema richiede solo la sostituzione delle 6 variabili nella parte superiore del blocco :root{} di template.html — tutto il resto dei CSS fluisce attraverso var(--...).

Temi svizzeri Stile B

Scegli da references/themes-swiss.md. Anche qui i valori esadecimali personalizzati non sono consentiti.

Se l'utente richiede un deck in stile svizzero senza specificare il colore, si predefinisce l'International Klein Blue.

Principi fondamentali di design

1. Sobrietà sopra l'effetto — gli sfondi WebGL traspaiono solo nelle pagine hero
2. Struttura sopra la decorazione — gerarchia delle informazioni attraverso dimensione del carattere + tipo di carattere + spazio bianco della griglia, non ombre o schede fluttuanti
3. Le immagini sono cittadine di prima classe — allineale con l'area del contenuto del corpo, mantieni stabili i rapporti, ritaglia solo dal basso e preserva la parte superiore e i lati
4. Le visuali generate sono risorse — mantieni solo la foto / il grafico / l'UI principale; non visualizzare titoli di slide, piè di pagina o marchi d'angolo all'interno dell'immagine
5. Il ritmo vive nelle pagine hero — l'alternanza hero / non hero impedisce l'affaticamento visivo
6. Gli effetti dinamici devono essere opzionali — B attiva la modalità statica così l'animazione non diventa mai un peso per la lettura
7. I termini rimangono coerenti — Skills è Skills; nessuna traduzione mista
8. I layout svizzeri rimangono bloccati — Lo Stile B dovrebbe ripristinare e riutilizzare il sistema di layout originale a 22 pagine invece di inventare pagine non correlate

Riferimenti visivi

• Layout della rivista Monocle
• YC Garry Tan — "Cintura sottile, Competenze grasse"
• Massimo Vignelli / Helvetica Forever / Stile tipografico internazionale svizzero
• Serie di deck per talk offline di Guizang

Roadmap

• Aggiungere più esempi reali e demo di deck HTML apribili
• Espandere i formati di copertina per più piattaforme di pubblicazione
• Aggiungere più regole di validazione del layout svizzero
• Migliorare i flussi di riprogettazione degli screenshot e generazione di infografiche
• Preparare varianti specifiche per marketplace come WorkBuddy
• Aggiungere più pacchetti di temi curati mantenendo limitati i colori personalizzati

FAQ

Può esportare in PPTX? L'output principale è HTML. Puoi presentarlo in un browser, catturarlo o registrarlo. La conversione in PPTX può essere eseguita come flusso di lavoro separato, ma non è il percorso principale attuale.

Perché i colori personalizzati non sono consentiti? La skill è progettata per un output visivo stabile. Colori arbitrari spesso rompono il sistema, quindi i deck devono usare preimpostazioni curate.

Posso aggiungere il mio layout? Sì. I layout dello Stile A possono essere estesi in references/layouts.md. Lo Stile B è più rigido: aggiorna template-swiss.html, layouts-swiss.md, swiss-layout-lock.md e il validatore insieme.

La generazione di immagini Codex è obbligatoria? No. I deck funzionano senza immagini generate. Il flusso immagini viene utilizzato solo quando hai bisogno di foto, infografiche, scene UI o copertine.

Come aggiorno la skill? Esegui di nuovo il comando di installazione, oppure esegui git pull all'interno della directory locale della skill.

Contributi

Bug, problemi di layout, richieste di nuovi layout — Issue e PR sono benvenuti. Dare priorità a:

• Aggiungere nuove classi a template.html per primo; non lasciare che layouts.md faccia riferimento a classi indefinite
• Quando si modifica template-swiss.html, aggiornare insieme layouts-swiss.md e swiss-layout-lock.md
• Quando si aggiungono regole svizzere, aggiornare scripts/validate-swiss-deck.mjs
• Registrare le insidie in checklist.md al livello corrispondente P0 / P1 / P2 / P3
• I nuovi colori dei temi vanno in themes.md con un caso d'uso consigliato

Licenza

MIT © 2026 op7418