Guizang HTML PPT Agent-færdighed

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

Nyt Tema · Stil B Schweizisk International

30-sekunders start

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:

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:

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:

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

Andre nyttige prompts:

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

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

Installation

Mulighed 1: En-linjes installation (anbefalet)

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

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.

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:

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. Skærmbilledindramning findes i 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:

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

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

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

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

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.

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