# Skill Agente Guizang per PPT HTML

> Genera presentazioni HTML con due stili visivi distinti tramite questa Skill Agente PPT, completa di generazione immagini e creazione copertine multipiattaforma. Realizza presentazioni professionali e visivamente accattivanti in pochi secondi.

- Canonical: https://nanoskill.ai/it/skills/ppt-agent-skill
- Markdown: https://nanoskill.ai/it/skills/ppt-agent-skill.md
- Author: op7418
- Published: 2026-05-22T08:33:57.477Z
- Updated: 2026-07-25T04:34:45.899Z
- Language: it
- Source type: github
- Popularity signal: 11121

## Sources

- https://github.com/op7418/guizang-ppt-skill

## Install

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

## About

La Skill Agente Guizang per PPT HTML consente agli Agenti AI di generare con facilità presentazioni HTML professionali in un unico file. Progettata per piattaforme come Claude Code e Codex, questa skill semplifica la creazione di contenuti visivamente accattivanti, offrendo due sistemi estetici distinti: lo stile Rivista Elettronica incentrato sulla narrazione e lo stile Swiss Internationalism basato sui fatti. Gli utenti possono trasformare rapidamente articoli in mazzi di slide coinvolgenti, produrre analisi di prodotto dettagliate e generare copertine multipiattaforma coerenti, il tutto mantenendo un'elevata qualità visiva.

Questa skill si distingue per la produzione di output HTML leggero, facile da condividere e visualizzare senza configurazioni complesse. Integra funzionalità avanzate come la generazione di immagini basata su IA tramite GPT-Image 2.0 / GPT-M 2.0 all'interno di Codex, consentendo immagini e infografiche sensibili al contesto. Inoltre, fornisce layout strutturati e principi di design rigorosi, in particolare per lo stile Swiss, garantendo un aspetto curato e coerente in tutti i contenuti generati, dalle diapositive alle copertine per i social media.

Ideale per una varietà di scenari, dai talk interni e lanci di prodotto alla condivisione personale e presentazioni di metodologie, la Skill Agente Guizang per PPT HTML semplifica i flussi di lavoro per la creazione di contenuti. Consente agli utenti di convertire contenuti lunghi in presentazioni concise, adattare screenshot di prodotto per adattarsi a specifici rapporti di template e garantire un'identità visiva coerente su tutti i canali di comunicazione. L'attenzione della skill su flussi di lavoro strutturati e regole visive predefinite assicura risultati di alta qualità ed esteticamente gradevoli con il minimo sforzo.

## Key features

- **Due Sistemi Visivi**: Scegli tra 'Stile A: Rivista Elettronica × E-ink' per narrazione ed espressione personale, o 'Stile B: Internationalismo Svizzero' per fatti, analisi di prodotto e metodologie, garantendo che il tuo messaggio venga trasmesso efficacemente.
- **Output HTML in File Singolo**: Genera presentazioni HTML leggere e autonome che non richiedono processi di build o server, rendendole facili da aprire, condividere e mostrare direttamente in qualsiasi browser web.
- **Compatibilità con Agenti AI**: Progettato per Claude Code, Codex e altri Agenti AI con accesso alla shell, consentendo la generazione, modifica e iterazione senza soluzione di continuità di presentazioni HTML tramite comandi in linguaggio naturale.
- **Generazione di Immagini Codex**: Integra GPT-Image 2.0 / GPT-M 2.0 all'interno di Codex per generare immagini di alta qualità consapevoli del contesto, infografiche e scenari UI, perfettamente ridimensionati e inseriti nelle tue diapositive.
- **Generazione di Copertine Multipiattaforma**: Crea automaticamente copertine coerenti e visivamente unificate per varie piattaforme come Account Ufficiali WeChat (21:9, 1:1), Xiaohongshu (3:4) e Account Video (16:9) basate sul contenuto principale della tua presentazione.

## Use cases

- **Trasforma Articoli in Presentazioni**: Converti articoli o documenti lunghi in presentazioni HTML concise e coinvolgenti per discorsi, presentazioni interne o sessioni di condivisione private, estraendo le idee principali e strutturandole in una narrazione avvincente.
- **Crea Analisi di Prodotto Professionali**: Utilizza lo strutturato 'Stile B: Internationalismo Svizzero' per presentare analisi di prodotto, metodologie o lanci di prodotti AI con un focus su fatti, dati e comunicazione visiva chiara.
- **Progetta Contenuti Multipiattaforma Coerenti**: Genera un'identità visiva unificata per la tua presentazione, le immagini di accompagnamento e le varie copertine dei social media, garantendo coerenza e impatto del marchio su tutti i tuoi canali di comunicazione.
- **Migliora gli Screenshot per le Presentazioni**: Riprogetta e adatta gli screenshot dei prodotti per adattarli ai modelli di presentazione, mantenendo le informazioni chiave e ottenendo uno stile visivo coerente adatto a presentazioni HTML professionali.

## Result preview

Guarda un PPT reale generato da un articolo tramite questa Skill Agente.

![guizang-ppt-demo01](https://file.nanoskill.ai/guizang-ppt-demo01)

![guizang-ppt-demo02](https://file.nanoskill.ai/guizang-ppt-demo02)

![guizang-ppt-demo-03](https://file.nanoskill.ai/guizang-ppt-demo-03)

## Result walkthrough

### Passaggio 1：Installa

Aggiungi la skill al tuo agente.

![guizang-ppt-step-1](https://file.nanoskill.ai/guizang-ppt-step-1)

### Passaggio 2：Fornisci contenuto

Inserisci un argomento, appunti o carica materiale esistente (ad es., report, schema, idee).

![guizang-ppt-step-2](https://file.nanoskill.ai/guizang-ppt-step-2)

### Passaggio 3：Ottieni il tuo PPT

Rivedi la presentazione HTML che puoi usare direttamente.

![guizang-ppt-step-03](https://file.nanoskill.ai/guizang-ppt-step-03)

## Skill definition

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](https://x.com/op7418) 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**

![Anteprima Stile A Rivista editoriale](https://file.nanoskill.ai/5dc316a2-401c-4e37-9123-ea081b6ae470-1.png)

**Nuovo tema · Stile B Svizzero internazionale**

![Anteprima Stile B Svizzero internazionale](https://file.nanoskill.ai/8960e78c-69bb-4b7e-aa95-6fad64b70314-1.png)

## Avvio in 30 secondi

```bash
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:

```text
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:

```text
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:

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

Altri comandi utili:

```text
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

| Compito | Flusso consigliato |
|---------|-------------------|
| Articolo lungo → deck parlato | Estrai l'argomento centrale, poi costruisci un ritmo di 6-10 slide |
| Analisi di framework / prodotto | Usa lo Stile B svizzero con layout bloccati e visuali hero 21:9 |
| Discorso personale / pezzo d'opinione | Usa lo Stile A rivista editoriale per un ritmo narrativo più forte |
| Visuali per deck | In Codex, genera foto, infografiche, diagrammi di flusso, mappe di sistema o scene UI |
| Copertine social | Genera copertine principali 21:9, card condivisibili 1:1, copertine verticali 3:4 e miniature video dalla stessa idea |
| Normalizzazione screenshot | Riprogetta screenshot grezzi nei rapporti predefiniti dei template prima di inserirli nelle slide |

## 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

| Piattaforma | Stato | Note |
|------------|-------|------|
| Claude Code | Supportato | Flusso di lavoro nativo per creare e iterare deck HTML |
| Codex | Supportato | Ottimo per generazione deck, generazione immagini e QA visivo basato su browser |
| Cursor / altri agenti locali | Funziona | Richiede accesso al filesystem ed esecuzione shell |
| WorkBuddy | In adattamento | Una versione pronta per il marketplace è in preparazione separata |
| Chatbot semplice | Non consigliato | Senza filesystem e anteprima browser, la generazione completa di deck è difficile da stabilizzare |

## Installazione

### Opzione 1: Installazione a riga singola (consigliata)

```bash
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

```bash
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`](./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:

```bash
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`](./references/image-prompts.md). L'inquadratura degli screenshot si trova in [`references/screenshot-framing.md`](./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:

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

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

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

```text
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

| Anteprima | Tema | Colori principali e uso ideale |
|-----------|------|-------------------------------|
| <img src="https://file.nanoskill.ai/df21dbcb-5fe4-4852-a91a-a9cf00aceeb4-1.png" width="260" alt="Anteprima tema Ink Classic"> | 🖋 **Ink Classic** | `#0a0a0b` / `#f1efea`. Predefinito generale, lanci commerciali, quando si è in dubbio. |
| <img src="https://file.nanoskill.ai/99ce0fd2-72a6-4368-a75a-a8e21657a537-1.png" width="260" alt="Anteprima tema Indigo Porcelain"> | 🌊 **Indigo Porcelain** | `#0a1f3d` / `#f1f3f5`. Tecnologia, ricerca, AI, keynote tecnici. |
| <img src="https://file.nanoskill.ai/bcc1cc4c-5e8e-4467-ae8d-f5801ae73657-1.png" width="260" alt="Anteprima tema Forest Ink"> | 🌿 **Forest Ink** | `#1a2e1f` / `#f5f1e8`. Natura, sostenibilità, cultura, saggistica. |
| <img src="https://file.nanoskill.ai/dfea080e-e916-417e-93cd-0a3628de84ca-1.png" width="260" alt="Anteprima tema Kraft Paper"> | 🍂 **Kraft Paper** | `#2a1e13` / `#eedfc7`. Nostalgico, umanista, letterario, riviste indipendenti. |
| <img src="https://file.nanoskill.ai/f3705592-9a72-4dbc-9818-df3aea61bc75-1.png" width="260" alt="Anteprima tema Dune"> | 🌙 **Dune** | `#1f1a14` / `#f0e6d2`. Arte, design, creatività, moda, deck da galleria. |

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**.

| Anteprima | Tema | Colore di ancoraggio e uso ideale |
|-----------|------|----------------------------------|
| <img src="https://file.nanoskill.ai/c02d02f7-ce6f-4e16-b8a6-778c96851f94-1.png" width="260" alt="Anteprima tema svizzero International Klein Blue"> | 🔵 **International Klein Blue** | `#002FA7`. Predefinito, lanci commerciali, prodotti AI, framework. |
| <img src="https://file.nanoskill.ai/c310a8c4-5d28-450e-b49a-6ac5b6ba4785-1.png" width="260" alt="Anteprima tema svizzero Lemon Yellow"> | 🟡 **Lemon Yellow** | `#FFD500`. Gioventù, sport, vendita al dettaglio, beni di consumo, retrò Y2K. |
| <img src="https://file.nanoskill.ai/65f7b3f9-3358-419e-b513-f7f2cc24ec76-1.png" width="260" alt="Anteprima tema svizzero Lemon Green"> | 🟢 **Lemon Green** | `#C5E803`. Ecologia, sostenibilità, salute, marchi Gen Z. |
| <img src="https://file.nanoskill.ai/9c3319c9-a134-4657-9a56-211c23411f7f-1.png" width="260" alt="Anteprima tema svizzero Safety Orange"> | 🟠 **Safety Orange** | `#FF6B35`. Allarmi, notizie, argomenti industriali, sport, temi energici. |

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*](https://monocle.com)
- 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](https://github.com/op7418)

## FAQ

### Cos'è la competenza Guizang HTML PPT per agenti?

La competenza HTML PPT Guizang è uno strumento compatibile con Agenti AI progettato per generare presentazioni HTML in file singolo, immagini di accompagnamento e copertine multipiattaforma. Offre due stili visivi distinti: Rivista Elettronica e Internationalismo Svizzero.

### Come installo la competenza Guizang HTML PPT per agenti?

Puoi installarlo eseguendo \`npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill\` nel tuo terminale, oppure istruendo un Agente AI con accesso alla shell per clonare il repository nella tua directory delle competenze.

### Posso personalizzare i colori della mia presentazione HTML?

No, non sono consentiti valori HEX personalizzati. La competenza fornisce una selezione di temi predefiniti per entrambi lo Stile A (Rivista Elettronica) e lo Stile B (Internationalismo Svizzero) per garantire coerenza estetica e output di qualità.

### Quali sono i due stili visivi offerti?

Lo Stile A, 'Rivista Elettronica × E-ink,' è ideale per storytelling, opinioni ed espressione personale. Lo Stile B, 'Internationalismo Svizzero,' è più adatto per presentare fatti, analisi di prodotto e metodologie con un design minimalista basato su griglia.

### È possibile esportare la presentazione HTML in formato PPTX?

La distribuzione principale è HTML, che può essere mostrato direttamente in un browser, catturato in screenshot o registrato. Anche se l'esportazione diretta in PPTX non è una funzionalità primaria, è possibile utilizzare le pagine HTML come bozze visive per la conversione se necessario.

### La competenza supporta la generazione di immagini per la mia presentazione HTML?

Sì, se utilizzata in un ambiente Codex, la competenza può sfruttare GPT-Image 2.0 / GPT-M 2.0 per generare vari tipi di immagini, infografiche e scenari UI, che vengono poi inseriti nella presentazione secondo i rapporti del modello.
