# Guizang HTML PPT Agent-færdighed

> Generer HTML-præsentationer med to forskellige visuelle stilarter med denne PPT Agent-færdighed, komplet med billedgenerering og oprettelse af covers til flere platforme. Lav professionelle og visuelt tiltalende præsentationer på få sekunder.

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

Guizang HTML PPT Agent-færdigheden giver AI-agenter mulighed for nemt at generere professionelle, enkelte HTML-præsentationer. Designet til platforme som Claude Code og Codex, strømliner denne færdighed oprettelsen af visuelt overbevisende indhold og tilbyder to adskilte æstetiske systemer: den narrativt fokuserede Elektronisk Magasin-stil og den fakta-drevne Schweizisk Internationalisme-stil. Brugere kan hurtigt omdanne artikler til engagerende slides, producere detaljerede produktanalyser og generere konsistente covers til flere platforme, alt imens der opretholdes en høj visuel kvalitet.

Denne færdighed skiller sig ud ved at levere letvægts-HTML-output, der er nemt at dele og se uden komplekse opsætninger. Den integrerer avancerede funktioner såsom AI-drevet billedgenerering via GPT-Image 2.0 / GPT-M 2.0 inden for Codex, hvilket muliggør kontekstbevidste billeder og infografikker. Desuden tilbyder den strukturerede layouts og strenge designprincipper, især for den schweiziske stil, hvilket sikrer et poleret og konsistent udseende på tværs af alt genereret indhold, fra slides til covers til sociale medier.

Ideel til en række scenarier, fra interne foredrag og produktlanceringer til personlig deling og metode-præsentationer, forenkler Guizang HTML PPT Agent-færdigheden arbejdsgangene for indholdsoprettelse. Det giver brugerne mulighed for at konvertere langt indhold til koncise præsentationer, forbedre produkt-skærmbilleder til at passe til specifikke skabelonforhold og sikre en sammenhængende visuel identitet på tværs af alle kommunikationskanaler. Færdighedens fokus på strukturerede arbejdsgange og foruddefinerede visuelle regler sikrer resultater af høj kvalitet og æstetisk tiltalende resultater med minimal indsats.

## Key features

- **Dobbelte visuelle systemer**: Vælg mellem 'Stil A: Elektronisk Magasin × E-ink' til fortælling og personlig udtryk, eller 'Stil B: Schweizisk Internationalisme' til fakta, produktanalyse og metoder, hvilket sikrer, at dit budskab formidles effektivt.
- **Enkeltfil HTML-output**: Generer letvægts, selvstændige HTML-præsentationer, der ikke kræver nogen byggeproces eller server, hvilket gør dem nemme at åbne, dele og demonstrere direkte i enhver webbrowser.
- **AI-agentkompatibilitet**: Designet til Claude Code, Codex og andre AI-agenter med shell-adgang, hvilket muliggør problemfri generering, ændring og iteration af HTML-præsentationer gennem naturlige sprogkommandoer.
- **Codex-billedgenerering**: Integrer GPT-Image 2.0 / GPT-M 2.0 i Codex for at generere billeder, infografikker og UI-scenarier i høj kvalitet, der er kontekstbevidste, perfekt skalerede og indsat i dine dias.
- **Multi-platformsforsidegenerering**: Opret automatisk konsistente, visuelt forenede forsider til forskellige platforme som WeChat Official Accounts (21:9, 1:1), Xiaohongshu (3:4) og Video Accounts (16:9) baseret på din præsentations kerneindhold.

## Use cases

- **Forvandl artikler til præsentationer**: Konverter lange artikler eller dokumenter til koncise, engagerende HTML-præsentationer til taler, interne foredrag eller private delingssessioner, udtræk kerneideer og strukturer dem til en overbevisende fortælling.
- **Opret professionelle produktanalyser**: Udnyt den strukturerede 'Stil B: Schweizisk Internationalisme' til at præsentere produktanalyser, metoder eller AI-produktlanceringer med fokus på fakta, data og klar visuel kommunikation.
- **Design konsistent multi-platformsindhold**: Generer en forenet visuel identitet på tværs af din præsentation, ledsagende billeder og diverse sociale medie-forsider, hvilket sikrer brand-konsistens og gennemslagskraft på tværs af alle dine kommunikationskanaler.
- **Forbedr skærmbilleder til præsentationer**: Redesign og tilpas produktskærmbilleder, så de passer til præsentationsskabeloner, bevarer nøgleinformationer samtidig med at opnå en konsistent visuel stil, der passer til professionelle HTML-præsentationer.

## Result preview

Se en rigtig PPT genereret fra en artikel af denne Agent-færdighed.

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

### Trin 1：Installer

Tilføj færdigheden til din agent.

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

### Trin 2：Angiv indhold

Indtast et emne, noter, eller upload eksisterende materiale (f.eks. rapport, disposition, ideer).

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

### Trin 3：Få din PPT

Gennemgå HTML-præsentationen, du kan bruge direkte.

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

## Skill definition

En agentfærdighed til Claude Kode, Kodeks og lignende kodningsagent-miljøer. Den genererer **enkelt-fil HTML vandrette swipe-dæk**, dækvisuals og sociale forside-sider.

Den leveres med to visuelle systemer:

- **Stil A: redaktionelt magasin × elektronisk blæk**. Forestil dig *Monokel* med kode syet ind. Bedst til narrative foredrag, meninger, saloner og personlig stemme.
- **Stil B: Schweizisk International Typografisk Stil**. Gitter-først, én højmættet ankerfarve, skarpe rektangler, hårlinje-regler og ekstrem typekontrast. Bedst til fakta, produkter, analyser og rammer.

> Destilleret af [Guizang](https://x.com/op7418) fra offline-foredrag som "Enkeltmandsfirma: Organisationer foldet af AI" og "En ny måde at arbejde på." Hver faldgrube ramt under de dæk er logget i `checklist.md`.

**Gammelt Tema · Stil A Redaktionelt Magasin**

![Forhåndsvisning af Stil A Redaktionelt Magasin](https://github.com/user-attachments/assets/5dc316a2-401c-4e37-9123-ea081b6ae470)

**Nyt Tema · Stil B Schweizisk International**

![Forhåndsvisning af Stil B Schweizisk International](https://file.nanoskill.ai/8960e78c-69bb-4b7e-aa95-6fad64b70314-7.png)

## 30-sekunders start

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

Eller indsæt dette i en AI-agent med shell-adgang:

```text
Installer guizang-ppt-skill for mig. Klon https://github.com/op7418/guizang-ppt-skill ind i ~/.claude/skills/guizang-ppt-skill, bekræft derefter at SKILL.md, assets/ og references/ findes.
```

Hvis du allerede har installeret det, opdater med:

```text
Opdater guizang-ppt-skill for mig. Gå til ~/.claude/skills/guizang-ppt-skill, kør git pull, og fortæl mig den seneste commit.
```

Spørg derefter din agent:

```text
Opret et dæk i schweizisk stil fra denne artikel, omkring 7 dias, med 2-3 genererede visuals.
```

Andre nyttige prompts:

```text
Omdan denne Markdown-fil til en præsentation i redaktionelt magasinstil.
Opret et 21:9 socialt forsidebillede fra kerneidéen i dette dæk.
Redesign dette produktscreenshot som en 16:10 dias-visual.
```

## Hvad du får

- 🖋 **To visuelle systemer**: redaktionel historiefortælling til Stil A, faktuel schweizisk struktur til Stil B
- 📐 **Vandret swipenavigation**: ← → piletaster / scrollehjul / touch-swipe / bundpunkter / ESC til indeks
- 🧩 **Stil A 10 layouter**: forside, skillelinje, store tal, billede/tekst, billedgitter, pipeline, sammenligning og mere
- 🧱 **Stil B 22 låste layouter**: Forside, Erklæring, KPI-tårn, Sløjfediagram, Duosammenligning, Billedhelt, Afslutningsmanifest og mere
- 🎨 **Kuraterede temapresets**: 5 temapresets med elektronisk blæk til Stil A, 4 schweiziske ankerfarve-temaer til Stil B
- 🖼 **Valgfri Kodeks-billedflow**: generér dokumentariske fotos, infografikker, flowdiagrammer, systemkort og UI-scener med GPT-Image 2.0 / GPT-M 2.0, og indsæt dem derefter i skabelonsikre proportioner
- 📰 **Sociale forsider**: generér 21:9 WeChat-forsidebilleder, 1:1 delingskort, 3:4 Xiaohongshu-forsider, videominiaturer og relaterede varianter
- 📴 **Lavenergi-statisk tilstand**: tryk `B` for at omdanne WebGL / lærredsanimationer til statiske visuals
- 📄 **Enkelt HTML-fil** — ingen build, ingen server, åbn direkte i browseren

## Passer / Passer ikke

**✅ Passer**: offline-foredrag, branche-keynotes, private saloner, AI-produktlanceringer, demo-dag, præsentationer med stærk personlig stemme

**❌ Passer ikke**: datatunge tabeller, træningsdæk (for lav densitet), flerbrugersamarbejdsredigering (statisk HTML)

## Almindelige brugsscenarier

| Opgave | Anbefalet flow |
|--------|----------------|
| Lang artikel til foredragsdæk | Udtræk kerneargumentet, og byg derefter en rytme på 6-10 dias |
| Rammeværk / produktanalyse | Brug Stil B Schweizisk med låste layouter og 21:9 heltevisuals |
| Personligt foredrag / meningsindlæg | Brug Stil A Redaktionelt Magasin for stærkere narrativ rytme |
| Dækvisuals | I Kodeks, generér fotos, infografikker, flowdiagrammer, systemkort eller UI-scener |
| Sociale forsider | Generér 21:9 hovedforsider, 1:1 delingskort, 3:4 vertikale forsider og videominiaturer fra den samme idé |
| Skærmbillednormalisering | Redesign rå skærmbilleder til skabelonsikre proportioner før indsættelse på dias |

## Hvorfor HTML-dæk

- **Agent-indfødt redigering**: HTML / CSS er ren tekst, så agenter kan læse, redigere og validere det direkte.
- **Højere visuel densitet end Markdown**: præcis layout, positionering, bevægelse, interaktivitet og forsideformater.
- **Letvægtslevering**: én HTML-fil kan åbnes, præsenteres, sendes, tages skærmbilleder af eller optages.
- **Bedre kvalitetsporte**: den schweiziske validator kan fange layoutdrift, usikker billedplacering, centrerede brødteksttitler og SVG-tekstfælder.
- **Ét visuelt system på tværs af output**: dæk, genererede visuals, forsider og skærmbilledredesign kan dele de samme stilregler.

## Platformunderstøttelse

| Platform | Status | Noter |
|----------|--------|-------|
| Claude Kode | Understøttet | Indfødt færdigheds-workflow til oprettelse og iteration af HTML-dæk |
| Kodeks | Understøttet | God til dækgenerering, billedgenerering og browserbaseret visuel QA |
| Cursor / andre lokale agenter | Virker | Kræver filsystemadgang og shell-udførelse |
| WorkBuddy | Under tilpasning | Marketplace-klar version forberedes separat |
| Almindelig chatbot | Ikke anbefalet | Uden filsystem og browserforhåndsvisning er fuld dækgenerering svær at stabilisere |

## Installation

### Mulighed 1: En-linjes installation (anbefalet)

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

### Mulighed 2: Indsæt dette i en AI

> Installer færdigheden `guizang-ppt-skill` til Claude Kode for mig. Trin:
>
> 1. Sørg for at `~/.claude/skills/` findes (opret hvis ikke)
> 2. Kør `git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill`
> 3. Bekræft: `ls ~/.claude/skills/guizang-ppt-skill/` skal vise `SKILL.md`, `assets/`, `references/`
> 4. Fortæl mig når det er færdigt. Senere vil det at sige ting som "lav mig et dæk i magasinstil" udløse denne færdighed.

Indsæt blokken ovenfor i Claude Kode / Cursor / enhver AI-agent med shell-adgang, og den håndterer installationen.

### Mulighed 3: Manuel CLI

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

### Sådan udløser du den

Når den er installeret, auto-registrerer Claude Kode færdigheden. Udløserfraser:

- "Lav mig et dæk i magasinstil"
- "Lav mig et dæk i schweizisk stil"
- "Generér et vandret swipe-dæk"
- "Præsentation i redaktionelt magasinstil"
- "Elektronisk blæk-dias til mit foredrag"
- "Opret et 21:9 WeChat-forsidebillede fra denne artikel"
- "Opret et 1:1 delingskort fra dette dæk"

## Workflow

Færdigheden er et struktureret workflow; agenten går dig igennem hvert trin:

1. **Vælg stil** — Stil A Redaktionelt Magasin, eller Stil B Schweizisk International
2. **Afklar hensigt** — 7-spørgsmåls tjekliste: stil, publikum, varighed, kildemateriale, billeder/skærmbilleder, tema, hårde begrænsninger
3. **Kopiér skabelon** — Stil A bruger `assets/template.html`; Stil B bruger `assets/template-swiss.html`
4. **Udfyld indhold** — opret en rytmeplan, vælg og tilpas derefter de matchende layoutskeletter
5. **Valgfri billedgenerering** — i Kodeks, spørg om der skal bruges GPT-Image 2.0 / GPT-M 2.0 billeder, og indsæt dem derefter ved side-passende proportioner
6. **Selvkontrol** — tjek mod `references/checklist.md`; P0-problemer skal alle bestås; Schweiziske dæk skal også bestå layout-validatoren
7. **Forhåndsvisning** — åbn HTML'en i en browser
8. **Iterér** — brug inline-stile til at justere skriftstørrelse, højde, afstand

Fuld spec i [`SKILL.md`](./SKILL.md).

## Stil B Schweizisk

Det schweiziske tema er et strengt layoutsystem, ikke bare en CSS-hud.

- **22 navngivne layouter**: brødtekstdias skal bruge `S01` til `S22`; opfind ikke nye strukturer
- **4 ankerfarver**: International Klein Blå, citrongul, citrongrøn, sikkerhedsorange
- **Gitterlås**: 16-kolonne gitter, skarpe rektangler, 1px hårlinjer, ingen skygger, ingen gradienter, ingen afrundede kort
- **Kinesisk titelskalering**: helt kinesiske overskrifter bør være et trin mindre for at bevare plads til indhold og billeder
- **Bundjustering af billede/tekst**: tekst- og billedblokke skal justeres i bunden i venstre/højre billedlayouter, mens de forbliver fri af sidekontroller
- **Billedpladser**: billeder skal sidde i skabelondefinerede `data-image-slot` regioner, ofte genereret i 21:9 eller 16:10
- **Hård validering**: validatoren fanger centrerede brødteksttitler, eksperimentelle layouter, synlig SVG-tekst og billeder placeret uden for pladser

Schweizisk validering:

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

## Kodeks Billedflow

I Kodeks, når det første dækudkast er klar, kan agenten spørge om brugeren ønsker genererede visuals. Når det er bekræftet, vælg en billedtype eller stil. Almindelige typer inkluderer:

- Dokumentariske fotos: Fuji / Leica-lignende virkelige scener, der tilføjer menneskelig tekstur
- Infografikker / flowdiagrammer / sammenligningsdiagrammer / systemkort: til koncepter, der ikke kan forklares godt med fotos
- Skærmbilledindramning / skærmbilledredesign: bevar rå skærmbilleder med medfølgende baggrundsaktiver og et CleanShot X-stil lærred først; brug UI-scenegenerering kun når skærmbilledet skal rekonstrueres
- Dataplakater / diagrammer: omdan nøgletal til indsættelsesklare visuelle aktiver
- Multi-billedkompositioner: nyttige til ultrabrede pladser, hvor tre uafhængige 16:9 billeder ville bryde gitteret

Genererede billeder skal følge fire kerneregler:

- Behandl billedet som et indlejret aktiv, ikke et selvstændigt dias: ingen sidefod, sidebund, titel, sidetal, hjørnemærke, signatur eller dekorativ ramme
- Match dæksproget: Kinesiske dæk bruger kinesiske etiketter inde i infografikker, engelske dæk bruger engelske etiketter
- Match pladsproportionen før generering: 21:9 til mange schweiziske heltepladser, 16:9 / 16:10 til almindelige hovedvisuals, 16:10 til UI-scener, faste lige højder til billedgitre
- Når et råt skærmbillede skal forblive trofast, læs `references/screenshot-framing.md` først og brug medfølgende `assets/screenshot-backgrounds/` baggrunde plus programmatisk skalering, polstring og justering i stedet for at gentegne skærmbilledet som standard

Billedprompts findes i [`references/image-prompts.md`](./references/image-prompts.md). Skærmbilledindramning findes i [`references/screenshot-framing.md`](./references/screenshot-framing.md).

## Forsidegenerering

Færdigheden kan også omdanne en artikel eller dækidé til platformsforsider:

- **WeChat-hovedforside**: 21:9, overskrift-først, med ét visuelt anker
- **WeChat-delingskort**: 1:1, visuelt parret med 21:9-forsiden
- **Xiaohongshu-forside / karrusel**: 3:4, stor titel, konsistent typeskala på tværs af en batch
- **Videominiature**: 16:9, titel + undertitel + ét fokusvisual

Den samme regel gælder: brug få stærke nøgleord, hold titlen som det visuelle centrum, og fyld ikke lærredet med brødtekst.

## Eksempelprompts

Kopiér en af disse prompts ind i din agent, og vedhæft derefter din artikel, Markdown-fil eller billedaktiver:

```text
Opret et dæk i schweizisk stil med 8 dias fra denne artikel, med 3 genererede visuals, der matcher skabelonens billedpladser.
```

```text
Omdan dette produktanalysedokument til et dæk i redaktionelt magasinstil med en stærk narrativ rytme.
```

```text
Fra dette dæks kerneidé, opret to forsider: en 21:9 hovedforside og et visuelt parret 1:1 delingskort.
```

```text
Redesign disse produktskærmbilleder til konsistente 16:10 dias-visuals. Bevar vigtig UI-information; tilføj ikke diastitler eller sidefødder inde i billederne.
```

## Mappe

```
guizang-ppt-skill/
├── SKILL.md              ← hovedfærdighedsfil: workflow, principper, almindelige fejl
├── README.md             ← kinesisk README
├── README.en.md          ← denne fil
├── assets/
│   ├── template.html         ← Stil A redaktionelt magasin-skabelon
│   ├── template-swiss.html   ← Stil B schweizisk skabelon
│   └── screenshot-backgrounds/ ← medfølgende WebP skærmbilledbaggrunde: 5 style-a / 4 style-b
├── scripts/
│   └── validate-swiss-deck.mjs ← Schweizisk layout-validator
└── references/
    ├── components.md     ← komponentkatalog (type, farve, gitter, ikoner, callout, stat, pipeline)
    ├── layouts.md        ← 10 layoutskeletter (klar til indsættelse)
    ├── layouts-swiss.md  ← 22 låste schweiziske layouter
    ├── swiss-layout-lock.md ← Schweizisk troskabs- og layout hårde regler
    ├── themes.md         ← 5 temapresets (vælg, tilpas ikke)
    ├── themes-swiss.md   ← 4 schweiziske ankerfarve-temaer
    ├── image-prompts.md  ← GPT-Image 2.0 / GPT-M 2.0 billedtyper, proportioner og baseprompts
    ├── screenshot-framing.md ← CleanShot X-stil skærmbilledindramningssemantik
    └── checklist.md      ← kvalitetstjekliste (P0 / P1 / P2 / P3 niveauer)
```

## Temapresets

Vælg fra `references/themes.md`. **Tilpassede hex-værdier er ikke tilladt** — beskyttelse af æstetikken betyder mere end valgfrihed.

### Stil A Redaktionelle Temaer

| Forhåndsvisning | Tema | Kernefarver og bedst til |
|---------|-------|--------------------------|
| <img src="https://file.nanoskill.ai/df21dbcb-5fe4-4852-a91a-a9cf00aceeb4-7.png" width="260" alt="Forhåndsvisning af Blæk Klassisk tema"> | 🖋 **Blæk Klassisk** | `#0a0a0b` / `#f1efea`. Generel standard, kommercielle lanceringer, når du er i tvivl. |
| <img src="https://file.nanoskill.ai/99ce0fd2-72a6-4368-a75a-a8e21657a537-7.png" width="260" alt="Forhåndsvisning af Indigo Porcelæn tema"> | 🌊 **Indigo Porcelæn** | `#0a1f3d` / `#f1f3f5`. Teknologi, forskning, AI, tekniske keynotes. |
| <img src="https://file.nanoskill.ai/bcc1cc4c-5e8e-4467-ae8d-f5801ae73657-6.png" width="260" alt="Forhåndsvisning af Skovblæk tema"> | 🌿 **Skovblæk** | `#1a2e1f` / `#f5f1e8`. Natur, bæredygtighed, kultur, non-fiktion. |
| <img src="https://file.nanoskill.ai/dfea080e-e916-417e-93cd-0a3628de84ca-7.png" width="260" alt="Forhåndsvisning af Kraftpapir tema"> | 🍂 **Kraftpapir** | `#2a1e13` / `#eedfc7`. Nostalgisk, humanistisk, litterært, indie-zines. |
| <img src="https://file.nanoskill.ai/f3705592-9a72-4dbc-9818-df3aea61bc75-7.png" width="260" alt="Forhåndsvisning af Klit tema"> | 🌙 **Klit** | `#1f1a14` / `#f0e6d2`. Kunst, design, kreativ, mode, gallerilignende dæk. |

At skifte tema kræver blot at erstatte de 6 variabler i toppen af `template.html`'s `:root{}` blok — al anden CSS flyder gennem `var(--...)`.

### Stil B Schweiziske Temaer

Vælg fra `references/themes-swiss.md`. **Tilpassede hex-værdier er heller ikke tilladt** her.

| Forhåndsvisning | Tema | Ankerfarve og bedst til |
|---------|-------|---------------------------|
| <img src="https://file.nanoskill.ai/c02d02f7-ce6f-4e16-b8a6-778c96851f94-7.png" width="260" alt="Forhåndsvisning af International Klein Blå schweizisk tema"> | 🔵 **International Klein Blå** | `#002FA7`. Standard, kommercielle lanceringer, AI-produkter, rammer. |
| <img src="https://file.nanoskill.ai/c310a8c4-5d28-450e-b49a-6ac5b6ba4785-7.png" width="260" alt="Forhåndsvisning af Citrongul schweizisk tema"> | 🟡 **Citrongul** | `#FFD500`. Ungdom, sport, detailhandel, forbrugsvarer, Y2K retro. |
| <img src="https://file.nanoskill.ai/65f7b3f9-3358-419e-b513-f7f2cc24ec76-7.png" width="260" alt="Forhåndsvisning af Citrongrøn schweizisk tema"> | 🟢 **Citrongrøn** | `#C5E803`. Økologi, bæredygtighed, sundhed, Gen Z-mærker. |
| <img src="https://file.nanoskill.ai/9c3319c9-a134-4657-9a56-211c23411f7f-7.png" width="260" alt="Forhåndsvisning af Sikkerhedsorange schweizisk tema"> | 🟠 **Sikkerhedsorange** | `#FF6B35`. Advarsler, nyheder, industrielle emner, sport, energiske temaer. |

Hvis brugeren beder om et dæk i schweizisk stil uden at specificere farve, standard til International Klein Blå.

## Kernedesignprincipper

1. **Tilbageholdenhed over blær** — WebGL-baggrunde skinner kun igennem på heltesider
2. **Struktur over dekoration** — informationshierarki via skriftstørrelse + skrifttype + gitterwhitespace, ikke skygger eller flydende kort
3. **Billeder er førsteklasses borgere** — justér dem i forhold til brødtekstområdet, hold proportioner stabile, beskær kun fra bunden, og bevar top/sider
4. **Genererede visuals er aktiver** — behold kun kernefotografiet / diagrammet / UI; gengiv ikke diastitler, sidefødder eller hjørnemærker inde i billedet
5. **Rytme lever på heltesider** — helte / ikke-helte veksling forhindrer øjet i at blive træt
6. **Dynamiske effekter skal være valgfri** — `B` skifter statisk tilstand, så animation aldrig bliver en læsebyrde
7. **Termer forbliver konsistente** — Skills er Skills; ingen blanding af oversættelser
8. **Schweiziske layouter forbliver låste** — Stil B bør gendanne og genbruge det originale 22-siders layoutsystem i stedet for at opfinde ikke-relaterede sider

## Visuelle referencer

- [*Monokel*](https://monocle.com) magasinlayouter
- YC Garry Tan — "Tynd Sele, Fede Færdigheder"
- Massimo Vignelli / Helvetica Forever / Schweizisk International Typografisk Stil
- Guizangs offline foredragsdæk-serie

## Køreplan

- Tilføj flere virkelige eksempler og åbnbare HTML-dækdemoer
- Udvid forsideformater til flere publiceringsplatforme
- Tilføj flere schweiziske layoutvalideringsregler
- Forbedre workflows for skærmbilledredesign og infografikgenerering
- Forbered marketplace-specifikke varianter som WorkBuddy
- Tilføj flere kuraterede temapakker, mens tilpassede farver forbliver begrænsede

## FAQ

**Kan den eksportere til PPTX?**
Hovedoutputtet er HTML. Du kan præsentere det i en browser, tage skærmbilleder af det eller optage det. PPTX-konvertering kan laves som et separat workflow, men det er ikke den primære vej i dag.

**Hvorfor er tilpassede farver ikke tilladt?**
Færdigheden er designet til stabilt visuelt output. Vilkårlige farver bryder ofte systemet, så dæk skal bruge kuraterede presets.

**Kan jeg tilføje min egen layout?**
Ja. Stil A-layouter kan udvides i `references/layouts.md`. Stil B er strengere: opdater `template-swiss.html`, `layouts-swiss.md`, `swiss-layout-lock.md` og validatoren sammen.

**Er Kodeks billedgenerering påkrævet?**
Nej. Dæk fungerer uden genererede billeder. Billedflowet bruges kun, når du har brug for fotos, infografikker, UI-scener eller forsider.

**Hvordan opdaterer jeg færdigheden?**
Kør installationskommandoen igen, eller kør `git pull` inden i din lokale færdighedsmappe.

## Bidragsydelse

Fejl, layoutproblemer, nye layoutforespørgsler — Issues og PR'er velkomne. Prioriter:

- Tilføj nye klasser til `template.html` først; lad ikke `layouts.md` referere til udefinerede klasser
- Når du ændrer `template-swiss.html`, opdater `layouts-swiss.md` og `swiss-layout-lock.md` sammen
- Når du tilføjer schweiziske regler, opdater `scripts/validate-swiss-deck.mjs`
- Log faldgruber i `checklist.md` på det matchende P0 / P1 / P2 / P3 niveau
- Nye temafarver ind i `themes.md` med et anbefalet brugsscenarie

## Licens

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

## FAQ

### Hvad er Guizang HTML PPT Agent-færdigheden?

Guizang HTML PPT-færdigheden er et AI-agent-kompatibelt værktøj designet til at generere enkeltfil HTML-præsentationer, ledsagende billeder og multi-platformsforsider. Den tilbyder to distinkte visuelle stilarter: Elektronisk Magasin og Schweizisk Internationalisme.

### Hvordan installerer jeg Guizang HTML PPT Agent-færdigheden?

Du kan installere den ved at køre \`npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill\` i din terminal, eller ved at instruere en shell-aktiveret AI-agent til at klone repository'et til dit færdighedsbibliotek.

### Kan jeg tilpasse farverne på min HTML-præsentation?

Nej, tilpassede HEX-værdier er ikke tilladt. Færdigheden tilbyder et udvalg af forudindstillede temaer til både Stil A (Elektronisk Magasin) og Stil B (Schweizisk Internationalisme) for at sikre æstetisk konsistens og kvalitetsoutput.

### Hvilke to visuelle stilarter tilbydes?

Stil A, 'Elektronisk Magasin × E-ink,' er ideel til historiefortælling, meninger og personlig udtryk. Stil B, 'Schweizisk Internationalisme,' er bedst egnet til at præsentere fakta, produktanalyser og metoder med et gitterbaseret, minimalistisk design.

### Er det muligt at eksportere HTML-præsentationen til PPTX-format?

Den primære levering er HTML, som kan demonstreres direkte i en browser, screenshottes eller optages. Selvom direkte PPTX-eksport ikke er en primær funktion, kan du bruge HTML-siderne som visuelle udkast til konvertering om nødvendigt.

### Understøtter færdigheden billedgenerering til min HTML-præsentation?

Ja, når den bruges i et Codex-miljø, kan færdigheden udnytte GPT-Image 2.0 / GPT-M 2.0 til at generere forskellige typer billeder, infografikker og UI-scenarier, som derefter indsættes i din præsentation i henhold til skabelonforhold.
