Guizang HTML PPT Agent Vaardigheid

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

Nieuw Thema · Stijl B Zwitsers Internationaal

30-seconden start

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

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

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:

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:

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

Andere nuttige prompts:

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

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

Installeren

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

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

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.

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:

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. Screenshot framing staat in 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:

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

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

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

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

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.

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