Guizang HTML PPT-agentferdighet

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

Nytt tema · Stil B Sveitsisk internasjonal

30-sekunders start

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

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

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:

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:

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

Andre nyttige meldinger:

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

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

Installer

Alternativ 1: Ettlinje-installasjon (anbefalt)

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

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.

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:

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. Skjermbilde-innramming ligger i 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:

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

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

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

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

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

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

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