# Guizang HTML PPT-agentferdighet

> Generer HTML-presentasjoner med to distinkte visuelle stiler med denne PPT-agentferdigheten, komplett med bildegenerering og opprettelse av flerplattformomslag. Lag profesjonelle og visuelt tiltalende presentasjoner på sekunder.

- Canonical: https://nanoskill.ai/nb/skills/ppt-agent-skill
- Markdown: https://nanoskill.ai/nb/skills/ppt-agent-skill.md
- Author: op7418
- Published: 2026-05-22T08:33:57.477Z
- Updated: 2026-07-25T04:34:45.899Z
- Language: nb
- 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-agentferdigheten gir AI-agenter muligheten til å generere profesjonelle HTML-presentasjoner i én fil med letthet. Designet for plattformer som Claude Code og Codex, effektiviserer denne ferdigheten opprettelsen av visuelt overbevisende innhold, og tilbyr to distinkte estetiske systemer: den narrativfokuserte Elektronisk Magasin-stilen og den faktadrevne Sveitsisk Internasjonalisme-stilen. Brukere kan raskt forvandle artikler til engasjerende presentasjoner, produsere detaljerte produktanalyser og generere konsistente flerplattformomslag, alt mens de opprettholder høy visuell kvalitet.

Denne ferdigheten utmerker seg ved å levere lettvektig HTML-utdata som er enkelt å dele og vise uten komplekse oppsett. Den integrerer avanserte funksjoner som AI-drevet bildegenerering gjennom GPT-Image 2.0 / GPT-M 2.0 innenfor Codex, noe som muliggjør kontekstbevisste visuelle elementer og infografikk. Videre tilbyr den strukturerte oppsett og strenge designprinsipper, spesielt for den sveitsiske stilen, noe som sikrer et polert og konsistent utseende på tvers av alt generert innhold, fra lysbilder til omslag for sosiale medier.

Ideell for en rekke scenarioer, fra interne samtaler og produktlanseringer til personlig deling og metodepresentasjoner, forenkler Guizang HTML PPT-agentferdigheten arbeidsflyter for innholdsopprettelse. Den gjør det mulig for brukere å konvertere langformatinnhold til konsise presentasjoner, forbedre produkt-skjermbilder for å passe bestemte malproporsjoner, og sikre en sammenhengende visuell identitet på tvers av alle kommunikasjonskanaler. Ferdighetens fokus på strukturerte arbeidsflyter og forhåndsdefinerte visuelle regler sikrer resultater av høy kvalitet, estetisk tiltalende med minimal innsats.

## Key features

- **To visuelle systemer**: Velg mellom 'Stil A: Elektronisk magasin × E-blekk' for narrativ og personlig uttrykk, eller 'Stil B: Sveitsisk internasjonalism' for fakta, produktanalyser og metoder, som sikrer at budskapet ditt formidles effektivt.
- **Enkeltfil HTML-utdata**: Generer lettvekts, selvstendige HTML-presentasjoner som ikke krever noen byggeprosess eller server, noe som gjør dem enkle å åpne, dele og demonstrere direkte i en hvilken som helst nettleser.
- **AI-agent-kompatibilitet**: Designet for Claude Code, Codex og andre AI-agenter med skalltilgang, noe som muliggjør sømløs generering, modifisering og iterasjon av HTML PPT-er gjennom naturlige språkkommandoer.
- **Codex bildegenerering**: Integrer GPT-Image 2.0 / GPT-M 2.0 i Codex for å generere høykvalitets, kontekstbevisste bilder, infografikk og UI-scenarioer, perfekt skalert og satt inn i lysbildene dine.
- **Flerplattform-omslagsgenerering**: Opprett automatisk konsistente, visuelt enhetlige omslag for ulike plattformer som WeChat offisielle kontoer (21:9, 1:1), Xiaohongshu (3:4) og videokontoer (16:9) basert på presentasjonens kjerneinnhold.

## Use cases

- **Forvandle artikler til presentasjoner**: Konverter lange artikler eller dokumenter til konsise, engasjerende HTML PPT-er for taler, interne foredrag eller private delingsøkter, ved å trekke ut kjerneideer og strukturere dem til en overbevisende narrativ.
- **Lag profesjonelle produktanalyser**: Benytt den strukturerte 'Stil B: Sveitsisk internasjonalism' for å presentere produktanalyser, metoder eller AI-produktlanseringer med fokus på fakta, data og tydelig visuell kommunikasjon.
- **Design konsistent flerplattforminnhold**: Generer en enhetlig visuell identitet på tvers av presentasjonen din, medfølgende bilder og ulike omslag for sosiale medier, og sikre merkonsistens og gjennomslagskraft på alle kommunikasjonskanalene dine.
- **Forbedre skjermbilder for PPT-er**: Redesign og tilpass produktskjermbilder for å passe presentasjonsmaler, med bevaring av nøkkelinformasjon samtidig som man oppnår en konsekvent visuell stil egnet for profesjonelle HTML PPT-er.

## Result preview

Se en ekte PPT generert fra en artikkel av denne agentferdigheten.

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

### Trinn 1：Installer

Legg til ferdigheten til agenten din.

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

### Trinn 2：Gi innhold

Skriv inn et emne, notater, eller last opp eksisterende materiale (f.eks. rapport, disposisjon, ideer).

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

### Trinn 3：Få din PPT

Se gjennom HTML-presentasjonen du kan bruke direkte.

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

## Skill definition

En agentferdighet for Claude Code, Codex og lignende koding-agentmiljøer. Den genererer **enkeltfil HTML horisontale sveip-kortstokker**, kortstokkvisualiseringer og sosiale forsidebilder.

Den leveres med to visuelle systemer:

- **Stil A: redaksjonelt magasin × elektronisk blekk**. Forestill deg *Monokkel* med kode sydd inn. Best for narrative foredrag, meninger, salonger og personlig stemme.
- **Stil B: Sveitsisk internasjonal typografisk stil**. Rutenett-først, én høy-mettet ankerfarge, skarpe rektangler, hårfine linjer og ekstrem typekontrast. Best for fakta, produkter, analyse og rammeverk.

> Destillert av [Guizang](https://x.com/op7418) fra offline-foredrag som "Enmannsselskap: Organisasjoner foldet av AI" og "En ny måte å arbeide på." Hver fallgruve som ble truffet under disse kortstokkene er logget i `checklist.md`.

**Gammelt tema · Stil A Redaksjonelt magasin**

![Stil A Redaksjonelt magasin forhåndsvisning](https://file.nanoskill.ai/5dc316a2-401c-4e37-9123-ea081b6ae470-5.png)

**Nytt tema · Stil B Sveitsisk internasjonal**

![Stil B Sveitsisk internasjonal forhåndsvisning](https://file.nanoskill.ai/8960e78c-69bb-4b7e-aa95-6fad64b70314-5.png)

## 30-sekunders start

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

Eller lim dette inn i en AI-agent med skalltilgang:

```text
Install guizang-ppt-skill for me. Clone https://github.com/op7418/guizang-ppt-skill into ~/.claude/skills/guizang-ppt-skill, then verify that SKILL.md, assets/, and references/ exist.
```

Hvis du allerede har installert den, oppdater med:

```text
Update guizang-ppt-skill for me. Go to ~/.claude/skills/guizang-ppt-skill, run git pull, then tell me the latest commit.
```

Så spør agenten din:

```text
Create a Swiss-style deck from this article, around 7 slides, with 2-3 generated visuals.
```

Andre nyttige meldinger:

```text
Turn this Markdown file into an editorial magazine-style presentation.
Create a 21:9 social cover from the core idea of this deck.
Redesign this product screenshot as a 16:10 slide visual.
```

## Hva du får

- 🖋 **To visuelle systemer**: redaksjonell historiefortelling for Stil A, faktabasert sveitsisk struktur for Stil B
- 📐 **Horisontal sveip-navigasjon**: ← → piler / rullehjul / berørings-sveip / bunnprikker / ESC for indeks
- 🧩 **Stil A 10 oppsett**: forside, skillelinje, store tall, bilde/tekst, bildenett, rørledning, sammenligning og mer
- 🧱 **Stil B 22 låste oppsett**: Forside, Utsagn, KPI-tårn, Sløyfediagram, Duo-sammenligning, Bildehelt, Avslutningsmanifest og mer
- 🎨 **Kurerte temaoppsett**: 5 elektronisk-blekk-temaer for Stil A, 4 sveitsiske ankerfarge-temaer for Stil B
- 🖼 **Valgfri Codex-bildeflyt**: generer dokumentariske bilder, infografikk, flytdiagrammer, systemkart og UI-scener med GPT-Image 2.0 / GPT-M 2.0, og sett dem deretter inn ved mal-sikre forhold
- 📰 **Sosiale forsidebilder**: generer 21:9 WeChat-forsidebilder, 1:1 dele-kort, 3:4 Xiaohongshu-forsider, videominiatyrer og relaterte varianter
- 📴 **Lavstrøm statisk modus**: trykk `B` for å gjøre WebGL / lerretsanimasjon om til statiske bilder
- 📄 **Enkel HTML-fil** — ingen bygging, ingen server, åpnes direkte i nettleseren

## Passer / Passer ikke

**✅ Passer**: offline-foredrag, bransje-hovedforedrag, private salonger, AI-produktlanseringer, demo-dag, presentasjoner med sterkt personlig preg

**❌ Passer ikke**: datatunge tabeller, opplærings-kortstokker (for lav tetthet), flerbruker samarbeidsredigering (statisk HTML)

## Vanlige bruksområder

| Oppgave | Anbefalt flyt |
|------|------------------|
| Lang artikkel til foredragskortstokk | Trekk ut kjerne-argumentet, bygg deretter en 6-10 slides rytme |
| Rammeverk / produktanalyse | Bruk Stil B sveitsisk med låste oppsett og 21:9 helt-visualiseringer |
| Personlig foredrag / meningsinnlegg | Bruk Stil A redaksjonelt magasin for sterkere narrativ rytme |
| Kortstokk-visualiseringer | I Codex, generer bilder, infografikk, flytdiagrammer, systemkart eller UI-scener |
| Sosiale forsidebilder | Generer 21:9 hovedforsider, 1:1 dele-kort, 3:4 vertikale forsider og videominiatyrer fra den samme ideen |
| Skjermbilde-normalisering | Redesign rå skjermbilder til mal-sikre forhold før de settes inn i slides |

## Hvorfor HTML-kortstokker

- **Agent-nativ redigering**: HTML / CSS er ren tekst, så agenter kan lese, redigere og validere det direkte.
- **Høyere visuell tetthet enn Markdown**: presis layout, posisjonering, bevegelse, interaktivitet og forsideformater.
- **Lettvekts levering**: én HTML-fil kan åpnes, presenteres, sendes, ta skjermbilde av eller tas opp.
- **Bedre kvalitets barrierer**: den sveitsiske validatoren kan fange layout-drift, usikker bildeplassering, sentrerte kroppstitler og SVG-tekstfeller.
- **Ett visuelt system på tvers av utdata**: kortstokker, genererte visuelle elementer, forsidebilder og redesign av skjermbilder kan dele de samme stilreglene.

## Plattformstøtte

| Plattform | Status | Merknader |
|----------|--------|-------|
| Claude Code | Støttet | Innebygd ferdighetsarbeidsflyt for å lage og iterere HTML-kortstokker |
| Codex | Støttet | Bra for kortstokk-generering, bildegenerering og nettleserbasert visuell QA |
| Cursor / andre lokale agenter | Fungerer | Krever filsystemtilgang og skallkjøring |
| WorkBuddy | Under tilpasning | Markedsplass-klar versjon forberedes separat |
| Vanlig chatbot | Anbefales ikke | Uten filsystem- og nettleserforhåndsvisning er full kortstokk-generering vanskelig å stabilisere |

## Installer

### Alternativ 1: Ettlinje-installasjon (anbefalt)

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

### Alternativ 2: Lim dette inn i en AI

> Installer `guizang-ppt-skill` Claude Code-ferdigheten for meg. Trinn:
>
> 1. Sørg for at `~/.claude/skills/` eksisterer (opprett hvis ikke)
> 2. Kjør `git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill`
> 3. Verifiser: `ls ~/.claude/skills/guizang-ppt-skill/` skal vise `SKILL.md`, `assets/`, `references/`
> 4. Si ifra når det er ferdig. Senere vil det å si ting som "lag meg en magasin-stil kortstokk" utløse denne ferdigheten.

Lim blokken ovenfor inn i Claude Code / Cursor / en hvilken som helst AI-agent med skalltilgang, så håndterer den installasjonen.

### Alternativ 3: Manuell CLI

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

### Hvordan utløse den

Når den er installert, oppdager Claude Code ferdigheten automatisk. Utløserfraser:

- "Lag meg en magasin-stil kortstokk"
- "Lag meg en sveitserstil-kortstokk"
- "Generer en horisontal sveip-kortstokk"
- "Redaksjonell magasin-stil presentasjon"
- "Elektronisk blekk-slides for mitt foredrag"
- "Lag et 21:9 WeChat-forsidebilde fra denne artikkelen"
- "Lag et 1:1 dele-kort fra denne kortstokken"

## Arbeidsflyt

Ferdigheten er en strukturert arbeidsflyt; agenten går deg gjennom hvert trinn:

1. **Velg stil** — Stil A redaksjonelt magasin, eller Stil B sveitsisk internasjonal
2. **Avklar hensikt** — 7-spørsmåls sjekkliste: stil, publikum, varighet, kildemateriale, bilder/skjermbilder, tema, harde begrensninger
3. **Kopier mal** — Stil A bruker `assets/template.html`; Stil B bruker `assets/template-swiss.html`
4. **Fyll inn innhold** — lag en rytme-plan, velg og tilpass deretter de matchende oppsett-skjelettene
5. **Valgfri bildegenerering** — i Codex, spør om du skal bruke GPT-Image 2.0 / GPT-M 2.0-bilder, sett dem deretter inn ved side-passende forhold
6. **Selvsjekk** — match mot `references/checklist.md`; P0-problemer må alle bestå; sveitsiske kortstokker må også bestå layout-validatoren
7. **Forhåndsvisning** — åpne HTML-en i en nettleser
8. **Iterer** — bruk innebygde stiler for å justere skriftstørrelse, høyde, avstand

Full spesifikasjon i [`SKILL.md`](./SKILL.md).

## Stil B sveitsisk

Det sveitsiske temaet er et strengt layout-system, ikke bare et CSS-skinn.

- **22 navngitte oppsett**: kropps-slides må bruke `S01` til `S22`; ikke oppfinn nye strukturer
- **4 ankerfarger**: Internasjonal Klein Blå, sitrongul, sitrongrønn, sikkerhetsoransje
- **Rutenettlås**: 16-kolonne rutenett, skarpe rektangler, 1px hårfine linjer, ingen skygger, ingen gradienter, ingen avrundede kort
- **Kinesisk tittelskalering**: hel-kinesiske overskrifter bør være ett trinn mindre for å bevare plass til innhold og bilder
- **Bilde/tekst bunnjustering**: tekst- og bildeblokker skal justeres i bunnen i venstre/høyre bildeoppsett, samtidig som de holder seg unna pagineringskontroller
- **Bildespor**: bilder må sitte i mal-definerte `data-image-slot`-områder, ofte generert ved 21:9 eller 16:10
- **Hard validering**: validatoren fanger sentrerte kroppstitler, eksperimentelle oppsett, synlig SVG-tekst og bilder plassert utenfor spor

Sveitsisk validering:

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

## Codex bildeflyt

I Codex, etter at det første kortstokkutkastet er klart, kan agenten spørre om brukeren vil ha genererte visuelle elementer. Når det er bekreftet, velg en bilde-type eller stil. Vanlige typer inkluderer:

- Dokumentariske bilder: Fuji / Leica-lignende virkelighetsscener som legger til menneskelig tekstur
- Infografikk / flytdiagrammer / sammenligningsdiagrammer / systemkart: for konsepter som ikke kan forklares godt med bilder
- Skjermbilde-innramming / skjermbilde-redesign: bevar rå skjermbilder med medfølgende bakgrunnsmidler og et CleanShot X-stil lerret først; bruk UI-sceneregenerering bare når skjermbildet trenger rekonstruksjon
- Dataplakater / diagrammer: gjør nøkkeltall om til innsettingsklare visuelle aktiva
- Flerbilde-komposisjoner: nyttig for ultra-brede spor der tre urelaterte 16:9-bilder ville bryte rutenettet

Genererte bilder må følge fire kjerneregler:

- Behandle bildet som en innebygd ressurs, ikke en frittstående slide: ingen bunntekst, sidebunn, tittel, sidetall, hjørnemarkør, signatur eller dekorativ kant
- Match kortstokk-språket: kinesiske kortstokker bruker kinesiske etiketter inne i infografikk, engelske kortstokker bruker engelske etiketter
- Match spor-forholdet før generering: 21:9 for mange sveitsiske helt-spor, 16:9 / 16:10 for vanlige hovedvisualiseringer, 16:10 for UI-scener, faste like høyder for bildenett
- Når et rått skjermbilde må forbli trofast, les `references/screenshot-framing.md` først og bruk medfølgende `assets/screenshot-backgrounds/` bakgrunner pluss programmatisk skalering, polstring og justering i stedet for å tegne skjermbildet på nytt som standard

Bildemeldinger ligger i [`references/image-prompts.md`](./references/image-prompts.md). Skjermbilde-innramming ligger i [`references/screenshot-framing.md`](./references/screenshot-framing.md).

## Forsidegenerering

Ferdigheten kan også gjøre en artikkel eller kortstokk-idé om til plattform-forsider:

- **WeChat hovedforside**: 21:9, overskrift-først, med ett visuelt anker
- **WeChat dele-kort**: 1:1, visuelt paret med 21:9 forsiden
- **Xiaohongshu forside / karusell**: 3:4, stor tittel, konsistent skriftstørrelse på tvers av en batch
- **Videominiatyr**: 16:9, tittel + undertittel + ett fokusert visuelt element

Den samme regelen gjelder: bruk noen få sterke nøkkelord, hold tittelen som det visuelle senteret, og ikke fyll lerretet med brødtekst.

## Eksempelpormeldinger

Kopier en av disse meldingene inn i agenten din, og legg ved artikkelen, Markdown-filen eller bildeaktiva dine:

```text
Create an 8-slide Swiss-style deck from this article, with 3 generated visuals matched to the template image slots.
```

```text
Turn this product analysis document into an editorial magazine-style deck with a strong narrative rhythm.
```

```text
From this deck's core idea, create two covers: a 21:9 main cover and a visually paired 1:1 share card.
```

```text
Redesign these product screenshots into consistent 16:10 slide visuals. Preserve key UI information; do not add slide titles or footers inside the images.
```

## Katalog

```text
guizang-ppt-skill/
├── SKILL.md              ← main skill file: workflow, principles, common mistakes
├── README.md             ← Chinese README
├── README.en.md          ← this file
├── assets/
│   ├── template.html         ← Style A editorial magazine template
│   ├── template-swiss.html   ← Style B Swiss template
│   └── screenshot-backgrounds/ ← bundled WebP screenshot backgrounds: 5 style-a / 4 style-b
├── scripts/
│   └── validate-swiss-deck.mjs ← Swiss layout validator
└── references/
    ├── components.md     ← component catalog (type, color, grid, icons, callout, stat, pipeline)
    ├── layouts.md        ← 10 layout skeletons (paste-ready)
    ├── layouts-swiss.md  ← 22 locked Swiss layouts
    ├── swiss-layout-lock.md ← Swiss fidelity and layout hard rules
    ├── themes.md         ← 5 theme presets (pick, don't customize)
    ├── themes-swiss.md   ← 4 Swiss anchor-color themes
    ├── image-prompts.md  ← GPT-Image 2.0 / GPT-M 2.0 image types, ratios, and base prompts
    ├── screenshot-framing.md ← CleanShot X-style screenshot framing semantics
    └── checklist.md      ← quality checklist (P0 / P1 / P2 / P3 tiers)
```

## Temaoppsett-forvalg

Velg fra `references/themes.md`. **Egendefinerte hex-verdier er ikke tillatt** — å beskytte estetikken betyr mer enn valgfrihet.

### Stil A redaksjonelle temaer

| Forhåndsvisning | Tema | Kjernefarger og best for |
|---------|-------|--------------------------|
| <img src="https://file.nanoskill.ai/df21dbcb-5fe4-4852-a91a-a9cf00aceeb4-5.png" width="260" alt="Ink Classic theme preview"> | 🖋 **Blekk Klassisk** | `#0a0a0b` / `#f1efea`. Generell standard, kommersielle lanseringer, når du er i tvil. |
| <img src="https://file.nanoskill.ai/99ce0fd2-72a6-4368-a75a-a8e21657a537-5.png" width="260" alt="Indigo Porcelain theme preview"> | 🌊 **Indigo Porselens** | `#0a1f3d` / `#f1f3f5`. Teknologi, forskning, AI, tekniske hovedforedrag. |
| <img src="https://file.nanoskill.ai/bcc1cc4c-5e8e-4467-ae8d-f5801ae73657-5.png" width="260" alt="Forest Ink theme preview"> | 🌿 **Skogsblekk** | `#1a2e1f` / `#f5f1e8`. Natur, bærekraft, kultur, sakprosa. |
| <img src="https://file.nanoskill.ai/dfea080e-e916-417e-93cd-0a3628de84ca-5.png" width="260" alt="Kraft Paper theme preview"> | 🍂 **Kraftpapir** | `#2a1e13` / `#eedfc7`. Nostalgisk, humanistisk, litterært, indie-zines. |
| <img src="https://file.nanoskill.ai/f3705592-9a72-4dbc-9818-df3aea61bc75-5.png" width="260" alt="Dune theme preview"> | 🌙 **Dyne** | `#1f1a14` / `#f0e6d2`. Kunst, design, kreativ, mote, galleri-lignende kortstokker. |

Å bytte tema krever bare å erstatte de 6 variablene øverst i `template.html` sin `:root{}`-blokk — all annen CSS flyter gjennom `var(--...)`.

### Stil B sveitsiske temaer

Velg fra `references/themes-swiss.md`. **Egendefinerte hex-verdier er ikke tillatt** her heller.

| Forhåndsvisning | Tema | Ankerfarge og best for |
|---------|-------|---------------------------|
| <img src="https://file.nanoskill.ai/c02d02f7-ce6f-4e16-b8a6-778c96851f94-5.png" width="260" alt="International Klein Blue Swiss theme preview"> | 🔵 **Internasjonal Klein Blå** | `#002FA7`. Standard, kommersielle lanseringer, AI-produkter, rammeverk. |
| <img src="https://file.nanoskill.ai/c310a8c4-5d28-450e-b49a-6ac5b6ba4785-5.png" width="260" alt="Lemon Yellow Swiss theme preview"> | 🟡 **Sitrongul** | `#FFD500`. Ungdom, sport, detaljhandel, forbruksvarer, Y2K retro. |
| <img src="https://file.nanoskill.ai/65f7b3f9-3358-419e-b513-f7f2cc24ec76-5.png" width="260" alt="Lemon Green Swiss theme preview"> | 🟢 **Sitrongrønn** | `#C5E803`. Økologi, bærekraft, helse, Gen Z-merker. |
| <img src="https://file.nanoskill.ai/9c3319c9-a134-4657-9a56-211c23411f7f-5.png" width="260" alt="Safety Orange Swiss theme preview"> | 🟠 **Sikkerhetsoransje** | `#FF6B35`. Varsler, nyheter, industrielle emner, sport, energiske temaer. |

Hvis brukeren ber om en sveitserstil-kortstokk uten å spesifisere farge, standard til Internasjonal Klein Blå.

## Kjernedesignprinsipper

1. **Tilbakeholdenhet over glans** — WebGL-bakgrunner blør bare gjennom på helt-sider
2. **Struktur over dekorasjon** — informasjonshierarki via skriftstørrelse + skrifttype + rutenett-hvittrom, ikke skygger eller flytende kort
3. **Bilder er førsteklasses borgere** — juster dem med kroppsinnholdsområdet, hold forhold stabile, beskjær bare fra bunnen, og bevar topp/sider
4. **Genererte visuelle elementer er aktiva** — behold bare kjernebildet / diagrammet / grensesnittet; gjengi ikke slide-titler, bunntekster eller hjørnemarkører inne i bildet
5. **Rytme lever på helt-sider** — helt / ikke-helt-veksling holder øyet fra å bli utmattet
6. **Dynamiske effekter må være valgfrie** — `B` veksler statisk modus slik at animasjon aldri blir en lesebyrde
7. **Termer forblir konsistente** — Ferdigheter er Ferdigheter; ingen blanding-og-matching-oversettelser
8. **Sveitsiske oppsett forblir låste** — Stil B bør gjenopprette og gjenbruke det originale 22-siders oppsett-systemet i stedet for å oppfinne urelaterte sider

## Visuelle referanser

- [*Monokkel*](https://monocle.com) magasin-oppsett
- YC Garry Tan — "Tynn sele, tykke ferdigheter"
- Massimo Vignelli / Helvetica Forever / Sveitsisk internasjonal typografisk stil
- Guizangs offline foredragskortstokk-serie

## Veikart

- Legg til flere virkelige eksempler og åpnebare HTML-kortstokk-demoer
- Utvid forsideformater for flere publiseringsplattformer
- Legg til flere sveitsiske layout-valideringsregler
- Forbedre arbeidsflyter for redesign av skjermbilder og generering av infografikk
- Forbered markedsplass-spesifikke varianter som WorkBuddy
- Legg til flere kuraterte temapakker mens egendefinerte farger forblir begrenset

## Vanlige spørsmål

**Kan den eksportere til PPTX?**
Hovedutdata er HTML. Du kan presentere den i en nettleser, ta skjermbilde av den eller ta den opp. PPTX-konvertering kan gjøres som en separat arbeidsflyt, men det er ikke kjerneveien i dag.

**Hvorfor er egendefinerte farger ikke tillatt?**
Ferdigheten er designet for stabil visuell utdata. Vilkårlige farger bryter ofte systemet, så kortstokker må bruke kuraterte forvalg.

**Kan jeg legge til mitt eget oppsett?**
Ja. Stil A-oppsett kan utvides i `references/layouts.md`. Stil B er strengere: oppdater `template-swiss.html`, `layouts-swiss.md`, `swiss-layout-lock.md` og validatoren sammen.

**Er Codex bildegenerering påkrevd?**
Nei. Kortstokker fungerer uten genererte bilder. Bildeflyten brukes bare når du trenger bilder, infografikk, UI-scener eller forsidebilder.

**Hvordan oppdaterer jeg ferdigheten?**
Kjør installeringskommandoen på nytt, eller kjør `git pull` inne i den lokale ferdighetskatalogen din.

## Bidrag

Feil, layout-problemer, forespørsler om nye oppsett — Issues og PR-er velkomne. Prioriter:

- Legg til nye klasser i `template.html` først; ikke la `layouts.md` referere til udefinerte klasser
- Når du endrer `template-swiss.html`, oppdater `layouts-swiss.md` og `swiss-layout-lock.md` sammen
- Når du legger til sveitsiske regler, oppdater `scripts/validate-swiss-deck.mjs`
- Logg fallgruver i `checklist.md` på det matchende P0 / P1 / P2 / P3-nivået
- Nye temafarger går inn i `themes.md` med et anbefalt bruksområde

## Lisens

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

## FAQ

### Hva er Guizang HTML PPT Agent-ferdigheten?

Guizang HTML PPT-ferdigheten er et AI-agent-kompatibelt verktøy designet for å generere selvstendige HTML-presentasjoner, medfølgende bilder og flerplattform-omslag. Det tilbyr to distinkte visuelle stiler: Elektronisk magasin og Sveitsisk internasjonalism.

### Hvordan installerer jeg Guizang HTML PPT Agent-ferdigheten?

Du kan installere det ved å kjøre \`npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill\` i terminalen, eller ved å instruere en AI-agent med skalltilgang til å klone repositoriet til ferdighetskatalogen din.

### Kan jeg tilpasse fargene på min HTML PPT?

Nei, egendefinerte HEX-verdier er ikke tillatt. Ferdigheten tilbyr et utvalg av forhåndsinnstilte temaer for både Stil A (Elektronisk magasin) og Stil B (Sveitsisk internasjonalism) for å sikre estetisk konsistens og kvalitetsresultat.

### Hva er de to visuelle stilene som tilbys?

Stil A, 'Elektronisk magasin × E-blekk,' er ideell for historiefortelling, meninger og personlig uttrykk. Stil B, 'Sveitsisk internasjonalism,' er best egnet for å presentere fakta, produktanalyser og metoder med et rutenettbasert, minimalistisk design.

### Er det mulig å eksportere HTML PPT-en til PPTX-format?

Hovedleveransen er HTML, som kan vises direkte i en nettleser, ta skjermbilder av eller tas opp. Selv om direkte PPTX-eksport ikke er en primærfunksjon, kan du bruke HTML-sidene som visuelle utkast for konvertering om nødvendig.

### Støtter ferdigheten bildegenerering for min HTML PPT?

Ja, når det brukes i et Codex-miljø, kan ferdigheten utnytte GPT-Image 2.0 / GPT-M 2.0 til å generere ulike typer bilder, infografikk og UI-scenarioer, som deretter settes inn i presentasjonen din i henhold til malforhold.
