# Guizang HTML PPT Agent Vaardigheid

> Genereer HTML-presentaties met twee onderscheidende visuele stijlen met deze PPT Agent Vaardigheid, compleet met afbeeldingen genereren en multi-platform omslagcreatie. Maak in enkele seconden professionele en visueel aantrekkelijke presentaties.

- Canonical: https://nanoskill.ai/nl/skills/ppt-agent-skill
- Markdown: https://nanoskill.ai/nl/skills/ppt-agent-skill.md
- Author: op7418
- Published: 2026-05-22T08:33:57.477Z
- Updated: 2026-07-25T04:34:45.899Z
- Language: nl
- 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

De Guizang HTML PPT Agent Vaardigheid stelt AI Agents in staat om eenvoudig professionele, enkele-bestands HTML-presentaties te genereren. Ontworpen voor platforms zoals Claude Code en Codex, stroomlijnt deze vaardigheid de creatie van visueel aantrekkelijke inhoud en biedt twee verschillende esthetische systemen: de verhalende Elektronische Magazine-stijl en de op feiten gebaseerde Zwitserse Internationale Stijl. Gebruikers kunnen artikelen snel omzetten in boeiende decks, gedetailleerde productanalyses produceren en consistente multi-platform omslagen genereren, terwijl ze een hoge visuele kwaliteit behouden.

Deze vaardigheid valt op door lichte HTML-uitvoer te leveren die gemakkelijk te delen en te bekijken is zonder complexe installaties. Het integreert geavanceerde mogelijkheden zoals AI-ondersteunde afbeeldingengeneratie via GPT-Image 2.0 / GPT-M 2.0 binnen Codex, waardoor contextbewuste visuals en infographics mogelijk zijn. Bovendien biedt het gestructureerde lay-outs en strikte ontwerpprincipes, met name voor de Zwitserse stijl, waardoor een gepolijste en consistente uitstraling over alle gegenereerde inhoud wordt gegarandeerd, van dia's tot social media omslagen.

Ideaal voor uiteenlopende scenario's, van interne presentaties en productlanceringen tot persoonlijke deling en methode presentaties, vereenvoudigt de Guizang HTML PPT Agent Vaardigheid de workflows voor contentcreatie. Het stelt gebruikers in staat om lange inhoud om te zetten in beknopte presentaties, product screenshots te verbeteren zodat ze passen binnen specifieke sjabloonverhoudingen, en een samenhangende visuele identiteit te garanderen over alle communicatiekanalen. De focus van de vaardigheid op gestructureerde workflows en vooraf gedefinieerde visuele regels zorgt voor hoogwaardige, esthetisch aantrekkelijke resultaten met minimale inspanning.

## Key features

- **Dubbele Visuele Systemen**: Kies tussen 'Stijl A: Elektronisch Tijdschrift × E-inkt' voor verhalende en persoonlijke expressie, of 'Stijl B: Zwitsers Internationalisme' voor feiten, productanalyse en methodologieën, zodat uw boodschap effectief wordt overgebracht.
- **Enkelbestands HTML-uitvoer**: Genereer lichtgewicht, op zichzelf staande HTML-presentaties die geen build-proces of server vereisen, waardoor ze eenvoudig te openen, te delen en direct in elke webbrowser te demonstreren zijn.
- **AI Agent-compatibiliteit**: Ontworpen voor Claude Code, Codex en andere AI Agents met shell-toegang, waardoor naadloze generatie, aanpassing en iteratie van HTML PPT's mogelijk is via opdrachten in natuurlijke taal.
- **Codex-afbeeldingsgeneratie**: Integreer GPT-Image 2.0 / GPT-M 2.0 binnen Codex om hoogwaardige, contextbewuste afbeeldingen, infographics en UI-scenario's te genereren, perfect geschaald en ingevoegd in uw dia's.
- **Multi-platform Covergeneratie**: Creëer automatisch consistente, visueel uniforme covers voor verschillende platforms zoals WeChat Official Accounts (21:9, 1:1), Xiaohongshu (3:4) en Video Accounts (16:9) op basis van de kerninhoud van uw presentatie.

## Use cases

- **Transformeer Artikelen in Presentaties**: Zet lange artikelen of documenten om in beknopte, boeiende HTML PPT's voor toespraken, interne lezingen of privé-deelsessies, waarbij kernideeën worden geëxtraheerd en gestructureerd tot een overtuigend verhaal.
- **Creëer Professionele Productanalyses**: Gebruik de gestructureerde 'Stijl B: Zwitsers Internationalisme' om productanalyses, methodologieën of AI-productlanceringen te presenteren met een focus op feiten, data en duidelijke visuele communicatie.
- **Ontwerp Consistente Multi-platform Content**: Genereer een uniforme visuele identiteit over uw presentatie, bijbehorende afbeeldingen en verschillende sociale mediacovers, waarbij merkconsistentie en impact op al uw communicatiekanalen worden gewaarborgd.
- **Verbeter Screenshots voor PPT's**: Herontwerp en pas product screenshots aan om te passen bij presentatiesjablonen, waarbij belangrijke informatie behouden blijft en een consistente visuele stijl wordt bereikt die geschikt is voor professionele HTML PPT's.

## Result preview

Bekijk een echte PPT gegenereerd uit een artikel door deze Agent Vaardigheid.

![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

### Stap 1：Installeren

Voeg de vaardigheid toe aan uw agent.

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

### Stap 2：Inhoud aanleveren

Voer een onderwerp, notities in of upload bestaand materiaal (bijv. rapport, overzicht, ideeën).

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

### Stap 3：Ontvang uw PPT

Bekijk de HTML-presentatie die u direct kunt gebruiken.

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

## Skill definition

Een agentvaardigheid voor Claude Code, Codex en soortgelijke codeeragentomgevingen. Het genereert **enkelvoudige HTML horizontale swipe-decks**, deckvisuals en sociale omslagpagina's.

Het wordt geleverd met twee visuele systemen:

- **Stijl A: redactioneel tijdschrift × elektronische inkt**. Denk aan *Monocle* met code erin genaaid. Het beste voor verhalende lezingen, opiniestukken, salons en persoonlijke stem.
- **Stijl B: Zwitserse Internationale Typografische Stijl**. Raster-eerst, één hoog-verzadigde ankerkleur, scherpe rechthoeken, haarlijnregels en extreem typografisch contrast. Het beste voor feiten, producten, analyses en raamwerken.

> Gedistilleerd door [Guizang](https://x.com/op7418) van offline lezingen zoals "Eénpersoonsbedrijf: Organisaties gevouwen door AI" en "Een Nieuwe Manier van Werken." Elke valkuil die tijdens die decks werd geraakt, is vastgelegd in `checklist.md`.

**Oud Thema · Stijl A Redactioneel Tijdschrift**

![Stijl A Redactioneel Tijdschrift preview](https://file.nanoskill.ai/5dc316a2-401c-4e37-9123-ea081b6ae470-2.png)

**Nieuw Thema · Stijl B Zwitsers Internationaal**

![Stijl B Zwitsers Internationaal preview](https://file.nanoskill.ai/8960e78c-69bb-4b7e-aa95-6fad64b70314-2.png)

## 30-seconden start

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

Of plak dit in een AI-agent met shell-toegang:

```text
Installeer guizang-ppt-skill voor mij. Kloon https://github.com/op7418/guizang-ppt-skill naar ~/.claude/skills/guizang-ppt-skill, verifieer vervolgens dat SKILL.md, assets/ en references/ bestaan.
```

Als je het al hebt geïnstalleerd, werk dan bij met:

```text
Werk guizang-ppt-skill voor mij bij. Ga naar ~/.claude/skills/guizang-ppt-skill, voer git pull uit en vertel me dan de laatste commit.
```

Vraag vervolgens aan je agent:

```text
Maak een Zwitsers-stijl deck van dit artikel, ongeveer 7 dia's, met 2-3 gegenereerde visuals.
```

Andere nuttige prompts:

```text
Verander dit Markdown-bestand in een redactioneel tijdschriftstijl-presentatie.
Maak een 21:9 sociale omslag van het kernidee van dit deck.
Herontwerp deze product-screenshot als een 16:10 diavisual.
```

## Wat je krijgt

- 🖋 **Twee visuele systemen**: redactioneel verhalen vertellen voor Stijl A, feitelijke Zwitserse structuur voor Stijl B
- 📐 **Horizontale swipe-navigatie**: ← → pijlen / scrollwiel / aanraakgebaar / onderste stippen / ESC voor index
- 🧩 **Stijl A 10 lay-outs**: omslag, scheidingslijn, grote getallen, afbeelding/tekst, afbeeldingsraster, pijplijn, vergelijking en meer
- 🧱 **Stijl B 22 vergrendelde lay-outs**: Omslag, Verklaring, KPI-toren, Lusdiagram, Duo-vergelijking, Afbeeldingheld, Slotmanifest en meer
- 🎨 **Samengestelde themavoorinstellingen**: 5 elektronische inkt-thema's voor Stijl A, 4 Zwitserse ankerkleuren-thema's voor Stijl B
- 🖼 **Optionele Codex-afbeeldingsstroom**: genereer documentaire foto's, infographics, stroomdiagrammen, systeemkaarten en UI-scènes met GPT-Image 2.0 / GPT-M 2.0 en voeg ze in op sjabloonveilige verhoudingen
- 📰 **Sociale omslagen**: genereer 21:9 WeChat-omslagafbeeldingen, 1:1 deelkaarten, 3:4 Xiaohongshu-omslagen, videominiaturen en gerelateerde varianten
- 📴 **Statische modus met laag energieverbruik**: druk op `B` om WebGL / canvas-animatie om te zetten in statische visuals
- 📄 **Enkel HTML-bestand** — geen build, geen server, rechtstreeks openen in de browser

## Past / Past niet

**✅ Past**: offline lezingen, industrie-keynotes, privésalons, AI-productlanceringen, demo-dag, presentaties met een sterke persoonlijke stem

**❌ Past niet**: gegevenszware tabellen, trainingsdecks (dichtheid te laag), bewerking door meerdere gebruikers tegelijk (statische HTML)

## Veelvoorkomende gebruiksscenario's

| Taak | Aanbevolen stroom |
|------|------------------|
| Lang artikel naar lezingdeck | Extraheer het kernargument en bouw vervolgens een ritme van 6-10 dia's |
| Raamwerk / productanalyse | Gebruik Stijl B Zwitsers met vergrendelde lay-outs en 21:9 heldvisuals |
| Persoonlijke lezing / opiniestuk | Gebruik Stijl A redactioneel tijdschrift voor een sterker verhalend ritme |
| Deckvisuals | Genereer in Codex foto's, infographics, stroomdiagrammen, systeemkaarten of UI-scènes |
| Sociale omslagen | Genereer 21:9 hoofdomslagen, 1:1 deelkaarten, 3:4 verticale omslagen en videominiaturen van hetzelfde idee |
| Screenshotnormalisatie | Herontwerp ruwe screenshots naar sjabloonveilige verhoudingen voordat je ze in dia's invoegt |

## Waarom HTML-decks

- **Agent-native bewerking**: HTML / CSS is platte tekst, dus agenten kunnen het rechtstreeks lezen, bewerken en valideren.
- **Hogere visuele dichtheid dan Markdown**: nauwkeurige lay-out, positionering, beweging, interactiviteit en omslagformaten.
- **Lichtgewicht levering**: één HTML-bestand kan worden geopend, gepresenteerd, verzonden, gescreenshot of opgenomen.
- **Betere kwaliteitspoorten**: de Zwitserse validator kan lay-outverschuiving, onveilige plaatsing van afbeeldingen, gecentreerde hoofdteksttitels en SVG-tekstvallen detecteren.
- **Eén visueel systeem voor alle uitvoer**: decks, gegenereerde visuals, omslagen en screenshot-herontwerpen kunnen dezelfde stijlregels delen.

## Platformondersteuning

| Platform | Status | Opmerkingen |
|----------|--------|-------|
| Claude Code | Ondersteund | Native vaardigheidsworkflow voor het maken en itereren van HTML-decks |
| Codex | Ondersteund | Goed voor deckgeneratie, afbeeldingsgeneratie en browsergebaseerde visuele QA |
| Cursor / andere lokale agenten | Werkt | Vereist bestandssysteemtoegang en shell-uitvoering |
| WorkBuddy | In aanpassing | Marketplace-klare versie wordt apart voorbereid |
| Gewone chatbot | Niet aanbevolen | Zonder bestandssysteem en browservoorbeeld is volledige deckgeneratie moeilijk te stabiliseren |

## Installeren

### Optie 1: Installatie met één regel (aanbevolen)

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

### Optie 2: Plak dit in een AI

> Installeer de `guizang-ppt-skill` Claude Code-vaardigheid voor mij. Stappen:
>
> 1. Zorg ervoor dat `~/.claude/skills/` bestaat (maak aan indien niet)
> 2. Voer `git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill` uit
> 3. Verifieer: `ls ~/.claude/skills/guizang-ppt-skill/` moet `SKILL.md`, `assets/`, `references/` tonen
> 4. Vertel het me wanneer het klaar is. Later zullen dingen zeggen als "maak een tijdschriftstijl-deck voor mij" deze vaardigheid activeren.

Plak het bovenstaande blok in Claude Code / Cursor / elke AI-agent met shell-toegang en het handelt de installatie af.

### Optie 3: Handmatige CLI

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

### Hoe het te activeren

Eenmaal geïnstalleerd detecteert Claude Code de vaardigheid automatisch. Activeerzinnen:

- "Maak een tijdschriftstijl-deck voor mij"
- "Maak een Zwitsers-stijl deck voor mij"
- "Genereer een horizontaal swipe-deck"
- "Redactionele tijdschriftstijl presentatie"
- "Elektronische inkt dia's voor mijn lezing"
- "Maak een 21:9 WeChat-omslag van dit artikel"
- "Maak een 1:1 deelkaart van dit deck"

## Workflow

De vaardigheid is een gestructureerde workflow; de agent leidt je door elke stap:

1. **Kies stijl** — Stijl A redactioneel tijdschrift, of Stijl B Zwitsers Internationaal
2. **Verhelder de bedoeling** — 7-vragen checklist: stijl, publiek, duur, bronmateriaal, afbeeldingen/screenshots, thema, harde beperkingen
3. **Kopieer sjabloon** — Stijl A gebruikt `assets/template.html`; Stijl B gebruikt `assets/template-swiss.html`
4. **Vul inhoud** — maak een ritmeplan, kies en pas vervolgens de bijpassende lay-outskeletten aan
5. **Optionele afbeeldingsgeneratie** — vraag in Codex of GPT-Image 2.0 / GPT-M 2.0 afbeeldingen moeten worden gebruikt en voeg ze vervolgens in op pagina-geschikte verhoudingen
6. **Zelfcontrole** — vergelijk met `references/checklist.md`; P0-problemen moeten allemaal slagen; Zwitserse decks moeten ook de lay-outvalidator doorstaan
7. **Voorvertoning** — open de HTML in een browser
8. **Itereren** — gebruik inline stijlen om lettergrootte, hoogte, spatiëring aan te passen

Volledige specificatie in [`SKILL.md`](./SKILL.md).

## Stijl B Zwitsers

Het Zwitserse thema is een strikt lay-outsysteem, niet alleen een CSS-skin.

- **22 benoemde lay-outs**: body-dia's moeten `S01` tot `S22` gebruiken; verzin geen nieuwe structuren
- **4 ankerkleuren**: Internationaal Klein Blauw, citroengeel, citroengroen, veiligheidsoranje
- **Rastervergrendeling**: 16-koloms raster, scherpe rechthoeken, 1px haarlijnen, geen schaduwen, geen verlopen, geen afgeronde kaarten
- **Chinese titelschaal**: volledig Chinese koppen moeten één stap kleiner zijn om ruimte te behouden voor inhoud en afbeeldingen
- **Onderuitlijning van afbeelding/tekst**: tekst- en afbeeldingsblokken moeten onderaan uitlijnen in linker-/rechterafbeeldingslay-outs, terwijl ze wegblijven van pagineringsbediening
- **Afbeeldingsvakken**: afbeeldingen moeten in door sjabloon gedefinieerde `data-image-slot`-regio's staan, vaak gegenereerd op 21:9 of 16:10
- **Harde validatie**: de validator vangt gecentreerde bodytitels, experimentele lay-outs, zichtbare SVG-tekst en afbeeldingen die buiten vakken zijn geplaatst

Zwitserse validatie:

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

## Codex-afbeeldingsstroom

In Codex, nadat het eerste deckconcept klaar is, kan de agent vragen of de gebruiker gegenereerde visuals wil. Zodra bevestigd, kies een afbeeldingstype of stijl. Veelvoorkomende typen zijn:

- Documentaire foto's: Fuji / Leica-achtige echte scènes die menselijke textuur toevoegen
- Infographics / stroomdiagrammen / vergelijkingsgrafieken / systeemkaarten: voor concepten die niet goed met foto's kunnen worden uitgelegd
- Screenshot framing / screenshot-herontwerpen: bewaar ruwe screenshots eerst met gebundelde achtergrondassets en een CleanShot X-stijl canvas; gebruik UI-scènegeneratie alleen als de screenshot opnieuw moet worden opgebouwd
- Gegevensposters / grafieken: verander sleutelcijfers in inzetklare visuele assets
- Multi-afbeeldingscomposities: nuttig voor ultrabrede vakken waar drie niet-gerelateerde 16:9 afbeeldingen het raster zouden breken

Gegenereerde afbeeldingen moeten vier kernregels volgen:

- Behandel de afbeelding als een ingesloten asset, niet als een zelfstandige dia: geen voettekst, pagina-onderkant, titel, paginanummer, hoekmerk, handtekening of decoratieve rand
- Stem overeen met de decktaal: Chinese decks gebruiken Chinese labels binnen infographics, Engelse decks gebruiken Engelse labels
- Stem de vakverhouding af vóór generatie: 21:9 voor veel Zwitserse heldvakken, 16:9 / 16:10 voor veelvoorkomende hoofdvisuals, 16:10 voor UI-scènes, vaste gelijke hoogten voor afbeeldingsrasters
- Wanneer een ruwe screenshot trouw moet blijven, lees dan eerst `references/screenshot-framing.md` en gebruik gebundelde `assets/screenshot-backgrounds/`-achtergronden plus programmatische schaling, opvulling en uitlijning in plaats van de screenshot standaard opnieuw te tekenen

Afbeeldingsprompts staan in [`references/image-prompts.md`](./references/image-prompts.md). Screenshot framing staat in [`references/screenshot-framing.md`](./references/screenshot-framing.md).

## Omslaggeneratie

De vaardigheid kan ook een artikel of deckidee omzetten in platformomslagen:

- **WeChat-hoofdomslag**: 21:9, kop-eerst, met één visueel anker
- **WeChat-deelkaart**: 1:1, visueel gekoppeld aan de 21:9 omslag
- **Xiaohongshu-omslag / carrousel**: 3:4, grote titel, consistente typografische schaal over een batch
- **Video-miniatuur**: 16:9, titel + ondertitel + één focusvisueel

Dezelfde regel is van toepassing: gebruik een paar sterke trefwoorden, houd de titel als het visuele middelpunt en vul het canvas niet met broodtekst.

## Voorbeeldprompts

Kopieer een van deze prompts in je agent, voeg vervolgens je artikel, Markdown-bestand of afbeeldingsassets toe:

```text
Maak een 8-dia Zwitsers-stijl deck van dit artikel, met 3 gegenereerde visuals die passen bij de sjabloonafbeeldingsvakken.
```

```text
Verander dit productanalysedocument in een redactioneel tijdschriftstijl-deck met een sterk verhalend ritme.
```

```text
Maak van het kernidee van dit deck twee omslagen: een 21:9 hoofdomslag en een visueel gekoppelde 1:1 deelkaart.
```

```text
Herontwerp deze product-screenshots in consistente 16:10 diavisuals. Behoud belangrijke UI-informatie; voeg geen diatitels of voetteksten toe in de afbeeldingen.
```

## Directory

```
guizang-ppt-skill/
├── SKILL.md              ← hoofdvaardigheidsbestand: workflow, principes, veelgemaakte fouten
├── README.md             ← Chinese README
├── README.en.md          ← dit bestand
├── assets/
│   ├── template.html         ← Stijl A redactioneel tijdschriftsjabloon
│   ├── template-swiss.html   ← Stijl B Zwitsers sjabloon
│   └── screenshot-backgrounds/ ← gebundelde WebP screenshot-achtergronden: 5 style-a / 4 style-b
├── scripts/
│   └── validate-swiss-deck.mjs ← Zwitserse lay-outvalidator
└── references/
    ├── components.md     ← componentencatalogus (type, kleur, raster, pictogrammen, toelichting, statistiek, pijplijn)
    ├── layouts.md        ← 10 lay-outskeletten (klaar om te plakken)
    ├── layouts-swiss.md  ← 22 vergrendelde Zwitserse lay-outs
    ├── swiss-layout-lock.md ← Zwitserse betrouwbaarheid en harde lay-outregels
    ├── themes.md         ← 5 themavoorinstellingen (kies, pas niet aan)
    ├── themes-swiss.md   ← 4 Zwitserse ankerkleurenthema's
    ├── image-prompts.md  ← GPT-Image 2.0 / GPT-M 2.0 afbeeldingstypen, verhoudingen en basisprompts
    ├── screenshot-framing.md ← CleanShot X-stijl screenshot framing semantiek
    └── checklist.md      ← kwaliteitscontrole lijst (P0 / P1 / P2 / P3 niveaus)
```

## Themavoorinstellingen

Kies uit `references/themes.md`. **Aangepaste hex-waarden zijn niet toegestaan** — het beschermen van de esthetiek is belangrijker dan keuzevrijheid.

### Stijl A Redactionele Thema's

| Voorvertoning | Thema | Kernkleuren en het beste voor |
|---------|-------|--------------------------|
| <img src="https://file.nanoskill.ai/df21dbcb-5fe4-4852-a91a-a9cf00aceeb4-2.png" width="260" alt="Ink Classic themavoorvertoning"> | 🖋 **Ink Classic** | `#0a0a0b` / `#f1efea`. Algemene standaard, commerciële lanceringen, bij twijfel. |
| <img src="https://file.nanoskill.ai/99ce0fd2-72a6-4368-a75a-a8e21657a537-2.png" width="260" alt="Indigo Porcelain themavoorvertoning"> | 🌊 **Indigo Porcelain** | `#0a1f3d` / `#f1f3f5`. Tech, onderzoek, AI, technische keynotes. |
| <img src="https://file.nanoskill.ai/bcc1cc4c-5e8e-4467-ae8d-f5801ae73657-2.png" width="260" alt="Forest Ink themavoorvertoning"> | 🌿 **Forest Ink** | `#1a2e1f` / `#f5f1e8`. Natuur, duurzaamheid, cultuur, non-fictie. |
| <img src="https://file.nanoskill.ai/dfea080e-e916-417e-93cd-0a3628de84ca-2.png" width="260" alt="Kraft Paper themavoorvertoning"> | 🍂 **Kraft Paper** | `#2a1e13` / `#eedfc7`. Nostalgisch, humanistisch, literair, indie zines. |
| <img src="https://file.nanoskill.ai/f3705592-9a72-4dbc-9818-df3aea61bc75-2.png" width="260" alt="Dune themavoorvertoning"> | 🌙 **Dune** | `#1f1a14` / `#f0e6d2`. Kunst, design, creatief, mode, galerie-achtige decks. |

Thema's wisselen vereist alleen het vervangen van de 6 variabelen bovenaan het `:root{}`-blok van `template.html` — alle andere CSS stroomt via `var(--...)`.

### Stijl B Zwitserse Thema's

Kies uit `references/themes-swiss.md`. **Aangepaste hex-waarden zijn hier ook niet toegestaan**.

| Voorvertoning | Thema | Ankerkleur en het beste voor |
|---------|-------|---------------------------|
| <img src="https://file.nanoskill.ai/c02d02f7-ce6f-4e16-b8a6-778c96851f94-2.png" width="260" alt="International Klein Blue Swiss themavoorvertoning"> | 🔵 **Internationaal Klein Blauw** | `#002FA7`. Standaard, commerciële lanceringen, AI-producten, raamwerken. |
| <img src="https://file.nanoskill.ai/c310a8c4-5d28-450e-b49a-6ac5b6ba4785-2.png" width="260" alt="Lemon Yellow Swiss themavoorvertoning"> | 🟡 **Citroengeel** | `#FFD500`. Jeugd, sport, detailhandel, consumentengoederen, Y2K retro. |
| <img src="https://file.nanoskill.ai/65f7b3f9-3358-419e-b513-f7f2cc24ec76-2.png" width="260" alt="Lemon Green Swiss themavoorvertoning"> | 🟢 **Citroengroen** | `#C5E803`. Ecologie, duurzaamheid, gezondheid, Gen Z-merken. |
| <img src="https://file.nanoskill.ai/9c3319c9-a134-4657-9a56-211c23411f7f-2.png" width="260" alt="Safety Orange Swiss themavoorvertoning"> | 🟠 **Veiligheidsoranje** | `#FF6B35`. Waarschuwingen, nieuws, industriële onderwerpen, sport, energieke thema's. |

Als de gebruiker om een Zwitsers-stijl deck vraagt zonder kleur op te geven, standaard naar Internationaal Klein Blauw.

## Kernontwerpprincipes

1. **Ingetogenheid boven flits** — WebGL-achtergronden sijpelen alleen door op heldpagina's
2. **Structuur boven decoratie** — informatiehiërarchie via lettergrootte + lettertype + rasterwitruimte, niet via schaduwen of zwevende kaarten
3. **Afbeeldingen zijn eersteklas burgers** — lijn ze uit met het body-inhoudsgebied, houd verhoudingen stabiel, snijd alleen van onderaf en behoud boven- en zijkanten
4. **Gegenereerde visuals zijn assets** — behoud alleen de kernfoto / grafiek / UI; render geen diatitels, voetteksten of hoekmerken in de afbeelding
5. **Ritme leeft op heldpagina's** — held / niet-held afwisseling voorkomt oogvermoeidheid
6. **Dynamische effecten moeten optioneel zijn** — `B` schakelt statische modus in zodat animatie nooit een leeslast wordt
7. **Termen blijven consistent** — Vaardigheden is Vaardigheden; geen mix-en-match vertalingen
8. **Zwitserse lay-outs blijven vergrendeld** — Stijl B moet het originele 22-pagina lay-outsysteem herstellen en hergebruiken in plaats van niet-gerelateerde pagina's te verzinnen

## Visuele referenties

- [*Monocle*](https://monocle.com) tijdschriftlay-outs
- YC Garry Tan — "Thin Harness, Fat Skills"
- Massimo Vignelli / Helvetica Forever / Zwitserse Internationale Typografische Stijl
- Guizang's offline lezingdeck-serie

## Roadmap

- Voeg meer praktijkvoorbeelden en openbare HTML-deckdemo's toe
- Breid omslagformaten uit voor meer publicatieplatforms
- Voeg meer Zwitserse lay-outvalidatieregels toe
- Verbeter workflows voor screenshot-herontwerp en infographic-generatie
- Bereid marketplace-specifieke varianten zoals WorkBuddy voor
- Voeg meer samengestelde themapakketten toe terwijl aangepaste kleuren beperkt blijven

## FAQ

**Kan het naar PPTX exporteren?**
De hoofdoutput is HTML. Je kunt het in een browser presenteren, screenshoten of opnemen. PPTX-conversie kan als een aparte workflow worden gedaan, maar is vandaag niet het kernpad.

**Waarom zijn aangepaste kleuren niet toegestaan?**
De vaardigheid is ontworpen voor stabiele visuele output. Willekeurige kleuren breken vaak het systeem, dus decks moeten samengestelde voorinstellingen gebruiken.

**Kan ik mijn eigen lay-out toevoegen?**
Ja. Stijl A lay-outs kunnen worden uitgebreid in `references/layouts.md`. Stijl B is strenger: werk `template-swiss.html`, `layouts-swiss.md`, `swiss-layout-lock.md` en de validator samen bij.

**Is Codex-afbeeldingsgeneratie vereist?**
Nee. Decks werken zonder gegenereerde afbeeldingen. De afbeeldingsstroom wordt alleen gebruikt wanneer je foto's, infographics, UI-scènes of omslagen nodig hebt.

**Hoe werk ik de vaardigheid bij?**
Voer de installatieopdracht opnieuw uit, of voer `git pull` uit in je lokale vaardigheidsdirectory.

## Bijdragen

Bugs, lay-outproblemen, verzoeken voor nieuwe lay-outs — Issues en PR's welkom. Prioriteiten:

- Voeg eerst nieuwe klassen toe aan `template.html`; laat `layouts.md` niet verwijzen naar ongedefinieerde klassen
- Werk bij het wijzigen van `template-swiss.html` tegelijk `layouts-swiss.md` en `swiss-layout-lock.md` bij
- Werk bij het toevoegen van Zwitserse regels `scripts/validate-swiss-deck.mjs` bij
- Log valkuilen in `checklist.md` op het bijpassende P0 / P1 / P2 / P3-niveau
- Nieuwe themakleuren gaan in `themes.md` met een aanbevolen gebruiksscenario

## Licentie

MIT © 2026 [op7418](https://github.com/op7418)

## FAQ

### Wat is de Guizang HTML PPT Agentvaardigheid?

De Guizang HTML PPT Vaardigheid is een AI Agent-compatibele tool die is ontworpen om single-file HTML-presentaties, bijbehorende afbeeldingen en multi-platform covers te genereren. Het biedt twee verschillende visuele stijlen: Elektronisch Tijdschrift en Zwitsers Internationalisme.

### Hoe installeer ik de Guizang HTML PPT Agentvaardigheid?

Je kunt het installeren door \`npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill\` in je terminal uit te voeren, of door een shell-enabled AI Agent te instrueren de repository naar je vaardighedenmap te klonen.

### Kan ik de kleuren van mijn HTML PPT aanpassen?

Nee, aangepaste HEX-waarden zijn niet toegestaan. De vaardigheid biedt een selectie vooraf ingestelde thema's voor zowel Stijl A (Elektronisch Tijdschrift) als Stijl B (Zwitsers Internationalisme) om esthetische consistentie en kwaliteitsoutput te garanderen.

### Wat zijn de twee aangeboden visuele stijlen?

Stijl A, 'Elektronisch Tijdschrift × E-inkt,' is ideaal voor verhalen vertellen, meningen en persoonlijke expressie. Stijl B, 'Zwitsers Internationalisme,' is het meest geschikt voor het presenteren van feiten, productanalyses en methodologieën met een op rasters gebaseerd, minimalistisch ontwerp.

### Is het mogelijk om de HTML PPT naar PPTX-formaat te exporteren?

De kernoplevering is HTML, die direct in een browser kan worden gedemonstreerd, gescreenshot of opgenomen. Hoewel directe PPTX-export geen primaire functie is, kunt u de HTML-pagina's gebruiken als visuele concepten voor conversie indien nodig.

### Ondersteunt de vaardigheid het genereren van afbeeldingen voor mijn HTML PPT?

Ja, wanneer gebruikt in een Codex-omgeving, kan de vaardigheid GPT-Image 2.0 / GPT-M 2.0 benutten om verschillende soorten afbeeldingen, infographics en UI-scenario's te genereren, die vervolgens in uw presentatie worden ingevoegd volgens de sjabloonverhoudingen.
