# Umiejętność Agenta HTML PPT Guizang
> Generuj prezentacje HTML z dwoma różnymi stylami wizualnymi za pomocą tej Umiejętności Agenta PPT, wraz z generowaniem obrazów i tworzeniem okładek na wiele platform. Twórz profesjonalne i atrakcyjne wizualnie prezentacje w kilka sekund.
- Canonical: https://nanoskill.ai/pl/skills/ppt-agent-skill
- Markdown: https://nanoskill.ai/pl/skills/ppt-agent-skill.md
- Author: op7418
- Published: 2026-05-22T08:33:57.477Z
- Updated: 2026-07-25T04:34:45.899Z
- Language: pl
- 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
Umiejętność Agenta HTML PPT Guizang umożliwia agentom AI łatwe generowanie profesjonalnych, jednoplikowych prezentacji HTML. Zaprojektowana dla platform takich jak Claude Code i Codex, ta umiejętność usprawnia tworzenie atrakcyjnych wizualnie treści, oferując dwa odrębne systemy estetyczne: skupiony na narracji styl magazynu elektronicznego i oparty na faktach szwajcarski internacjonalizm. Użytkownicy mogą szybko przekształcać artykuły w angażujące slajdy, tworzyć szczegółowe analizy produktów i generować spójne okładki na wiele platform, zachowując przy tym wysoką jakość wizualną.
Ta umiejętność wyróżnia się dostarczaniem lekkiego kodu HTML, który jest łatwy do udostępniania i przeglądania bez skomplikowanych konfiguracji. Integruje zaawansowane możliwości, takie jak generowanie obrazów oparte na sztucznej inteligencji za pomocą GPT-Image 2.0 / GPT-M 2.0 w Codex, umożliwiając tworzenie kontekstowych wizualizacji i infografik. Ponadto oferuje ustrukturyzowane układy i ścisłe zasady projektowania, szczególnie w przypadku stylu szwajcarskiego, zapewniając dopracowany i spójny wygląd wszystkich generowanych treści, od slajdów po okładki mediów społecznościowych.
Idealna do szerokiego zakresu zastosowań, od wewnętrznych prezentacji i premier produktów po osobiste udostępnianie i prezentacje metod, Umiejętność Agenta HTML PPT Guizang upraszcza procesy tworzenia treści. Umożliwia użytkownikom przekształcanie długich treści w zwięzłe prezentacje, dostosowywanie zrzutów ekranu produktów do określonych proporcji szablonów oraz zapewnienie spójnej tożsamości wizualnej we wszystkich kanałach komunikacji. Koncentracja umiejętności na ustrukturyzowanych procesach i predefiniowanych zasadach wizualnych zapewnia wysoką jakość, estetyczne rezultaty przy minimalnym wysiłku.
## Key features
- **Podwójne systemy wizualne**: Wybierz między „Styl A: Magazyn elektroniczny × E-ink” dla narracji i osobistej ekspresji, a „Styl B: Szwajcarski internacjonalizm” dla faktów, analiz produktów i metodologii, zapewniając skuteczne przekazanie wiadomości.
- **Jednoplikowe wyjście HTML**: Generuj lekkie, samodzielne prezentacje HTML, które nie wymagają procesu budowania ani serwera, co ułatwia ich otwieranie, udostępnianie i prezentowanie bezpośrednio w dowolnej przeglądarce internetowej.
- **Kompatybilność z AI Agent**: Zaprojektowany dla Claude Code, Codex i innych agentów AI z dostępem do powłoki, umożliwiając płynne generowanie, modyfikowanie i iterację HTML PPT za pomocą poleceń w języku naturalnym.
- **Generowanie obrazów w Codex**: Zintegruj GPT-Image 2.0 / GPT-M 2.0 w Codex, aby generować wysokiej jakości, świadome kontekstu obrazy, infografiki i scenariusze UI, idealnie skalowane i wstawiane do slajdów.
- **Generowanie okładek na wiele platform**: Automatycznie twórz spójne, wizualnie ujednolicone okładki na różne platformy, takie jak WeChat Official Accounts (21:9, 1:1), Xiaohongshu (3:4) i Video Accounts (16:9), w oparciu o główną treść prezentacji.
## Use cases
- **Przekształć artykuły w prezentacje**: Konwertuj długie artykuły lub dokumenty na zwięzłe, angażujące HTML PPT do przemówień, wystąpień wewnętrznych lub prywatnych sesji udostępniania, wyodrębniając główne idee i strukturyzując je w przekonującą narrację.
- **Twórz profesjonalne analizy produktów**: Wykorzystaj ustrukturyzowany „Styl B: Szwajcarski internacjonalizm” do prezentowania analiz produktów, metodologii lub premier produktów AI, koncentrując się na faktach, danych i jasnej komunikacji wizualnej.
- **Projektuj spójne treści na wiele platform**: Generuj ujednoliconą tożsamość wizualną dla swojej prezentacji, towarzyszących obrazów i różnych okładek w mediach społecznościowych, zapewniając spójność marki i wpływ we wszystkich kanałach komunikacji.
- **Ulepsz zrzuty ekranu do PPT**: Przeprojektuj i dostosuj zrzuty ekranu produktów do szablonów prezentacji, zachowując kluczowe informacje, jednocześnie osiągając spójny styl wizualny odpowiedni dla profesjonalnych HTML PPT.
## Result preview
Zobacz prawdziwą prezentację PPT wygenerowaną z artykułu za pomocą tej Umiejętności Agenta.
## Result walkthrough
### Krok 1：Instaluj
Dodaj umiejętność do swojego agenta.
### Krok 2：Podaj treść
Wprowadź temat, notatki lub prześlij istniejące materiały (np. raport, konspekt, pomysły).
### Krok 3：Odbierz swoją prezentację PPT
Przejrzyj prezentację HTML, którą możesz bezpośrednio wykorzystać.
## Skill definition
Umiejętność agenta dla Claude Code, Codex i podobnych środowisk agentów kodujących. Generuje **jednoplikowe poziome talie HTML z przewijaniem**, wizualizacje talii i strony okładek społecznościowych.
Dostarczana z dwoma systemami wizualnymi:
- **Styl A: magazyn redakcyjny × atrament elektroniczny**. Wyobraź sobie *Monocle* z wszytym kodem. Najlepszy do opowieści narracyjnych, opinii, salonów i osobistego głosu.
- **Styl B: Szwajcarski Międzynarodowy Styl Typograficzny**. Najpierw siatka, jeden mocno nasycony kolor kotwiczący, ostre prostokąty, linie cienkie i ekstremalny kontrast czcionek. Najlepszy do faktów, produktów, analiz i ram.
> Wydestylowane przez [Guizang](https://x.com/op7418) z offline'owych prelekcji takich jak „Firma jednoosobowa: organizacje złożone przez AI” i „Nowy sposób pracy”. Każda pułapka napotkana podczas tych talii jest odnotowana w `checklist.md`.
**Stary motyw · Styl A Magazyn redakcyjny**
**Nowy motyw · Styl B Szwajcarski Międzynarodowy**
## Start w 30 sekund
```bash
npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill
```
Lub wklej to do agenta AI z dostępem do powłoki:
```text
Zainstaluj dla mnie guizang-ppt-skill. Sklonuj https://github.com/op7418/guizang-ppt-skill do ~/.claude/skills/guizang-ppt-skill, a następnie sprawdź, czy istnieją SKILL.md, assets/ i references/.
```
Jeśli już zainstalowałeś, zaktualizuj przy użyciu:
```text
Zaktualizuj dla mnie guizang-ppt-skill. Przejdź do ~/.claude/skills/guizang-ppt-skill, wykonaj git pull, a następnie poinformuj mnie o najnowszym commicie.
```
Następnie poproś swojego agenta:
```text
Stwórz szwajcarską talię z tego artykułu, około 7 slajdów, z 2-3 wygenerowanymi wizualizacjami.
```
Inne przydatne polecenia:
```text
Przekształć ten plik Markdown w prezentację w stylu magazynu redakcyjnego.
Stwórz okładkę społeczną 21:9 z głównej idei tej talii.
Przeprojektuj ten zrzut ekranu produktu jako wizualizację slajdu 16:10.
```
## Co otrzymujesz
- 🖋 **Dwa systemy wizualne**: opowiadanie redakcyjne dla Stylu A, faktograficzna struktura szwajcarska dla Stylu B
- 📐 **Nawigacja pozioma przez przesuwanie**: strzałki ← → / kółko myszy / dotykowe przesuwanie / kropki na dole / ESC dla indeksu
- 🧩 **10 układów Stylu A**: okładka, separator, duże liczby, obraz/tekst, siatka obrazów, pipeline, porównanie i więcej
- 🧱 **22 zablokowane układy Stylu B**: Okładka, Stwierdzenie, Wieża KPI, Diagram pętli, Porównanie duo, Obraz-bohater, Manifest końcowy i więcej
- 🎨 **Wybrane gotowe motywy**: 5 motywów atramentu elektronicznego dla Stylu A, 4 motywy kolorów kotwiczących szwajcarskich dla Stylu B
- 🖼 **Opcjonalny przepływ obrazów Codex**: generuj zdjęcia dokumentalne, infografiki, diagramy przepływu, mapy systemu i sceny UI za pomocą GPT-Image 2.0 / GPT-M 2.0, a następnie wstaw je w proporcjach bezpiecznych dla szablonu
- 📰 **Okładki społecznościowe**: generuj obrazy okładek WeChat 21:9, karty udostępniania 1:1, okładki Xiaohongshu 3:4, miniatury wideo i powiązane warianty
- 📴 **Tryb statyczny niskiego poboru mocy**: naciśnij `B`, aby przełączyć animację WebGL / canvas na statyczne wizualizacje
- 📄 **Pojedynczy plik HTML** — bez budowania, bez serwera, otwórz bezpośrednio w przeglądarce
## Pasuje / Nie pasuje
**✅ Pasuje**: prelekcje offline, branżowe keynotes, prywatne salony, premiery produktów AI, dzień demo, prezentacje z silnym osobistym głosem
**❌ Nie pasuje**: tabele pełne danych, talie szkoleniowe (zbyt niska gęstość), edycja współpracy wielu użytkowników (statyczny HTML)
## Typowe przypadki użycia
| Zadanie | Zalecany przepływ |
|------|------------------|
| Długi artykuł do talii prelekcyjnej | Wyodrębnij główny argument, a następnie zbuduj rytm 6-10 slajdów |
| Analiza ram / produktu | Użyj Stylu B Szwajcarskiego z zablokowanymi układami i wizualizacjami bohaterów 21:9 |
| Osobista prelekcja / felieton | Użyj Stylu A magazynu redakcyjnego dla silniejszego rytmu narracji |
| Wizualizacje talii | W Codex wygeneruj zdjęcia, infografiki, diagramy przepływu, mapy systemu lub sceny UI |
| Okładki społecznościowe | Wygeneruj główne okładki 21:9, karty udostępniania 1:1, okładki pionowe 3:4 i miniatury wideo z tego samego pomysłu |
| Normalizacja zrzutów ekranu | Przeprojektuj surowe zrzuty ekranu na proporcje bezpieczne dla szablonu przed wstawieniem ich do slajdów |
## Dlaczego talie HTML
- **Edycja natywna dla agentów**: HTML / CSS to zwykły tekst, więc agenci mogą go bezpośrednio czytać, edytować i walidować.
- **Wyższa gęstość wizualna niż Markdown**: precyzyjny układ, pozycjonowanie, ruch, interaktywność i formaty okładek.
- **Lekkie dostarczanie**: jeden plik HTML można otworzyć, zaprezentować, wysłać, zrzutować ekranowo lub nagrać.
- **Lepsze bramki jakości**: walidator szwajcarski może wychwycić dryf układu, niebezpieczne umieszczenie obrazu, wyśrodkowane tytuły korpusu i pułapki tekstu SVG.
- **Jeden system wizualny dla wszystkich wyników**: talie, wygenerowane wizualizacje, okładki i przeprojektowane zrzuty ekranu mogą współdzielić te same reguły stylu.
## Wsparcie platform
| Platforma | Status | Uwagi |
|----------|--------|-------|
| Claude Code | Wspierane | Natywny przepływ pracy umiejętności do tworzenia i iterowania talii HTML |
| Codex | Wspierane | Dobre do generowania talii, generowania obrazów i wizualnej kontroli jakości w przeglądarce |
| Cursor / inne agenty lokalne | Działa | Wymaga dostępu do systemu plików i wykonania powłoki |
| WorkBuddy | W adaptacji | Wersja gotowa na rynek jest przygotowywana osobno |
| Zwykły chatbot | Niezalecane | Bez dostępu do systemu plików i podglądu w przeglądarce, pełne generowanie talii jest trudne do ustabilizowania |
## Instalacja
### Opcja 1: Instalacja jednoliniowa (zalecana)
```bash
npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill
```
### Opcja 2: Wklej to do AI
> Zainstaluj dla mnie umiejętność `guizang-ppt-skill` Claude Code. Kroki:
>
> 1. Upewnij się, że istnieje `~/.claude/skills/` (utwórz jeśli nie)
> 2. Uruchom `git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill`
> 3. Zweryfikuj: `ls ~/.claude/skills/guizang-ppt-skill/` powinno pokazać `SKILL.md`, `assets/`, `references/`
> 4. Daj znać, gdy skończysz. Później mówiąc coś w stylu „zrób mi talię w stylu magazynu” uruchomi tę umiejętność.
Wklej powyższy blok do Claude Code / Cursor / dowolnego agenta AI z dostępem do powłoki, a on obsłuży instalację.
### Opcja 3: Ręczne CLI
```bash
git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill
```
### Jak to wywołać
Po zainstalowaniu Claude Code automatycznie wykrywa umiejętność. Frazy wyzwalające:
- „Zrób mi talię w stylu magazynu”
- „Zrób mi talię w stylu szwajcarskim”
- „Wygeneruj poziomą talię z przesuwaniem”
- „Prezentacja w stylu magazynu redakcyjnego”
- „Slajdy z atramentem elektronicznym na moją prelekcję”
- „Stwórz okładkę WeChat 21:9 z tego artykułu”
- „Stwórz kartę udostępniania 1:1 z tej talii”
## Przepływ pracy
Umiejętność to ustrukturyzowany przepływ pracy; agent przeprowadzi Cię przez każdy krok:
1. **Wybierz styl** — Styl A magazyn redakcyjny lub Styl B Szwajcarski Międzynarodowy
2. **Wyjaśnij intencję** — lista kontrolna 7 pytań: styl, publiczność, czas trwania, materiał źródłowy, obrazy/zrzuty ekranu, motyw, twarde ograniczenia
3. **Skopiuj szablon** — Styl A używa `assets/template.html`; Styl B używa `assets/template-swiss.html`
4. **Wypełnij treść** — stwórz plan rytmu, a następnie wybierz i dostosuj pasujące szkielety układów
5. **Opcjonalne generowanie obrazów** — w Codex zapytaj, czy użyć obrazów GPT-Image 2.0 / GPT-M 2.0, a następnie wstaw je w proporcjach odpowiednich dla strony
6. **Samosprawdzenie** — porównaj z `references/checklist.md`; wszystkie problemy P0 muszą przejść; talie szwajcarskie muszą również przejść walidator układu
7. **Podgląd** — otwórz HTML w przeglądarce
8. **Iteruj** — użyj stylów inline, aby dostroić rozmiar czcionki, wysokość, odstępy
Pełna specyfikacja w [`SKILL.md`](./SKILL.md).
## Styl B Szwajcarski
Motyw szwajcarski to ścisły system układu, a nie tylko skórka CSS.
- **22 nazwane układy**: slajdy treści muszą używać `S01` do `S22`; nie wymyślaj nowych struktur
- **4 kolory kotwiczące**: International Klein Blue, cytrynowy żółty, cytrynowy zielony, pomarańczowy bezpieczeństwa
- **Blokada siatki**: siatka 16-kolumnowa, ostre prostokąty, 1px cienkie linie, bez cieni, bez gradientów, bez zaokrąglonych kart
- **Skalowanie chińskich tytułów**: nagłówki wyłącznie chińskie powinny być o jeden stopień mniejsze, aby zachować miejsce na treść i obrazy
- **Wyrównanie dolne obrazu/tekstu**: bloki tekstu i obrazu powinny być wyrównane do dołu w układach obrazu lewo/prawo, pozostając z dala od kontrolek paginacji
- **Sloty obrazów**: obrazy muszą znajdować się w regionach `data-image-slot` zdefiniowanych w szablonie, często generowanych w 21:9 lub 16:10
- **Ścisła walidacja**: walidator wyłapuje wyśrodkowane tytuły korpusu, eksperymentalne układy, widoczny tekst SVG i obrazy umieszczone poza slotami
Walidacja szwajcarska:
```bash
node scripts/validate-swiss-deck.mjs ścieżka/do/index.html
```
## Przepływ obrazów Codex
W Codex, po przygotowaniu pierwszego szkicu talii, agent może zapytać, czy użytkownik chce wygenerowanych wizualizacji. Po potwierdzeniu wybierz typ lub styl obrazu. Typowe typy obejmują:
- Zdjęcia dokumentalne: sceny ze świata rzeczywistego w stylu Fuji/Leica, które dodają ludzkiej tekstury
- Infografiki / diagramy przepływu / wykresy porównawcze / mapy systemu: dla koncepcji, których nie da się dobrze wyjaśnić za pomocą zdjęć
- Kadrowanie zrzutów ekranu / przeprojektowanie zrzutów ekranu: zachowaj surowe zrzuty ekranu z dołączonymi zasobami tła i płótnem w stylu CleanShot X najpierw; użyj generowania scen UI tylko wtedy, gdy zrzut ekranu wymaga rekonstrukcji
- Plakaty / wykresy danych: przekształć kluczowe liczby w gotowe do wstawienia zasoby wizualne
- Kompozycje wielu obrazów: przydatne w przypadku ultraszerokich slotów, gdzie trzy niepowiązane obrazy 16:9 złamałyby siatkę
Wygenerowane obrazy muszą przestrzegać czterech podstawowych zasad:
- Traktuj obraz jako osadzony zasób, a nie samodzielny slajd: bez stopki, dołu strony, tytułu, numeru strony, znaku narożnego, podpisu ani ozdobnej ramki
- Dopasuj język talii: chińskie talie używają chińskich etykiet wewnątrz infografik, angielskie talie używają angielskich etykiet
- Dopasuj proporcje slotu przed generowaniem: 21:9 dla wielu szwajcarskich slotów bohaterów, 16:9 / 16:10 dla typowych głównych wizualizacji, 16:10 dla scen UI, stałe równe wysokości dla siatek obrazów
- Gdy surowy zrzut ekranu musi pozostać wierny, najpierw przeczytaj `references/screenshot-framing.md` i użyj dołączonych teł `assets/screenshot-backgrounds/` plus programatyczne skalowanie, dopełnienie i wyrównanie zamiast domyślnie przerysowywać zrzut ekranu
Podpowiedzi obrazów znajdują się w [`references/image-prompts.md`](./references/image-prompts.md). Kadrowanie zrzutów ekranu znajduje się w [`references/screenshot-framing.md`](./references/screenshot-framing.md).
## Generowanie okładek
Umiejętność może również przekształcić artykuł lub pomysł na talię w okładki platform:
- **Główna okładka WeChat**: 21:9, najpierw nagłówek, z jedną kotwicą wizualną
- **Karta udostępniania WeChat**: 1:1, wizualnie sparowana z okładką 21:9
- **Okładka / karuzela Xiaohongshu**: 3:4, duży tytuł, spójna skala typografii w całej partii
- **Miniatura wideo**: 16:9, tytuł + podtytuł + jeden wizualny punkt centralny
Ta sama zasada obowiązuje: użyj kilku silnych słów kluczowych, utrzymaj tytuł jako centrum wizualne i nie wypełniaj płótna tekstem korpusu.
## Przykładowe polecenia
Skopiuj dowolne z tych poleceń do swojego agenta, a następnie dołącz swój artykuł, plik Markdown lub zasoby obrazów:
```text
Stwórz 8-slajdową szwajcarską talię z tego artykułu, z 3 wygenerowanymi wizualizacjami dopasowanymi do slotów obrazów szablonu.
```
```text
Przekształć ten dokument analizy produktu w talię w stylu magazynu redakcyjnego z silnym rytmem narracyjnym.
```
```text
Z głównej idei tej talii stwórz dwie okładki: główną okładkę 21:9 i wizualnie sparowaną kartę udostępniania 1:1.
```
```text
Przeprojektuj te zrzuty ekranu produktu na spójne wizualizacje slajdów 16:10. Zachowaj kluczowe informacje UI; nie dodawaj tytułów slajdów ani stopek wewnątrz obrazów.
```
## Katalog
```
guizang-ppt-skill/
├── SKILL.md ← główny plik umiejętności: przepływ pracy, zasady, typowe błędy
├── README.md ← chiński README
├── README.en.md ← ten plik
├── assets/
│ ├── template.html ← szablon magazynu redakcyjnego Stylu A
│ ├── template-swiss.html ← szablon szwajcarski Stylu B
│ └── screenshot-backgrounds/ ← dołączone tła zrzutów ekranu WebP: 5 style-a / 4 style-b
├── scripts/
│ └── validate-swiss-deck.mjs ← walidator układu szwajcarskiego
└── references/
├── components.md ← katalog komponentów (typ, kolor, siatka, ikony, wezwanie, stat, pipeline)
├── layouts.md ← 10 szkieletów układów (gotowe do wklejenia)
├── layouts-swiss.md ← 22 zablokowane układy szwajcarskie
├── swiss-layout-lock.md ← twarde reguły wierności i układu szwajcarskiego
├── themes.md ← 5 gotowych motywów (wybierz, nie dostosowuj)
├── themes-swiss.md ← 4 szwajcarskie motywy kolorów kotwiczących
├── image-prompts.md ← typy obrazów, proporcje i podstawowe podpowiedzi GPT-Image 2.0 / GPT-M 2.0
├── screenshot-framing.md ← semantyka kadrowania zrzutów ekranu w stylu CleanShot X
└── checklist.md ← lista kontrolna jakości (poziomy P0 / P1 / P2 / P3)
```
## Gotowe motywy
Wybierz z `references/themes.md`. **Niestandardowe wartości hex nie są dozwolone** — ochrona estetyki jest ważniejsza niż swoboda wyboru.
### Motywy redakcyjne Stylu A
| Podgląd | Motyw | Główne kolory i najlepsze do |
|---------|-------|--------------------------|
| 
| 🖋 **Ink Classic** | `#0a0a0b` / `#f1efea`. Ogólny domyślny, komercyjne premiery, w razie wątpliwości. |
| 
| 🌊 **Indigo Porcelain** | `#0a1f3d` / `#f1f3f5`. Technologie, badania, AI, techniczne keynotes. |
| 
| 🌿 **Forest Ink** | `#1a2e1f` / `#f5f1e8`. Natura, zrównoważony rozwój, kultura, literatura faktu. |
| 
| 🍂 **Kraft Paper** | `#2a1e13` / `#eedfc7`. Nostalgiczny, humanistyczny, literacki, indie ziny. |
| 
| 🌙 **Dune** | `#1f1a14` / `#f0e6d2`. Sztuka, design, kreatywność, moda, talie w stylu galerii. |
Zmiana motywów wymaga jedynie zastąpienia 6 zmiennych na górze bloku `:root{}` pliku `template.html` — cały pozostały CSS przepływa przez `var(--...)`.
### Motywy szwajcarskie Stylu B
Wybierz z `references/themes-swiss.md`. **Niestandardowe wartości hex również tutaj nie są dozwolone**.
| Podgląd | Motyw | Kolor kotwiczący i najlepszy do |
|---------|-------|---------------------------|
| 
| 🔵 **International Klein Blue** | `#002FA7`. Domyślny, komercyjne premiery, produkty AI, ramy. |
| 
| 🟡 **Lemon Yellow** | `#FFD500`. Młodzież, sport, handel detaliczny, dobra konsumpcyjne, retro Y2K. |
| 
| 🟢 **Lemon Green** | `#C5E803`. Ekologia, zrównoważony rozwój, zdrowie, marki Gen Z. |
| 
| 🟠 **Safety Orange** | `#FF6B35`. Alerty, wiadomości, tematy przemysłowe, sport, energetyczne motywy. |
Jeśli użytkownik poprosi o szwajcarską talię bez określania koloru, domyślnie użyj International Klein Blue.
## Podstawowe zasady projektowania
1. **Powściągliwość ponad błyskotliwość** — tła WebGL prześwitują tylko na stronach bohaterów
2. **Struktura ponad dekorację** — hierarchia informacji poprzez rozmiar czcionki + krój pisma + białą przestrzeń siatki, a nie cienie czy pływające karty
3. **Obrazy są obywatelami pierwszej klasy** — wyrównaj je z obszarem treści korpusu, utrzymuj stabilne proporcje, przycinaj tylko od dołu i zachowaj górę/boki
4. **Wygenerowane wizualizacje to zasoby** — zachowaj tylko główne zdjęcie / wykres / UI; nie renderuj tytułów slajdów, stopek ani znaków narożnych wewnątrz obrazu
5. **Rytm żyje na stronach bohaterów** — naprzemienność bohater / nie-bohater zapobiega zmęczeniu oczu
6. **Efekty dynamiczne muszą być opcjonalne** — `B` przełącza tryb statyczny, aby animacja nigdy nie stała się obciążeniem dla czytania
7. **Terminy pozostają spójne** — Umiejętności to Umiejętności; żadnych mieszanych tłumaczeń
8. **Układy szwajcarskie pozostają zablokowane** — Styl B powinien przywracać i ponownie wykorzystywać oryginalny 22-stronicowy system układów zamiast wymyślać niepowiązane strony
## Odniesienia wizualne
- Układy magazynu [*Monocle*](https://monocle.com)
- YC Garry Tan — „Thin Harness, Fat Skills”
- Massimo Vignelli / Helvetica Forever / Szwajcarski Międzynarodowy Styl Typograficzny
- Seria talii prelekcji offline Guizang
## Mapa drogowa
- Dodaj więcej przykładów z życia i otwieralne demo talii HTML
- Rozszerz formaty okładek dla większej liczby platform wydawniczych
- Dodaj więcej reguł walidacji układów szwajcarskich
- Ulepsz przeprojektowanie zrzutów ekranu i przepływy pracy generowania infografik
- Przygotuj warianty specyficzne dla rynku, takie jak WorkBuddy
- Dodaj więcej wyselekcjonowanych pakietów motywów, jednocześnie utrzymując ograniczenie niestandardowych kolorów
## FAQ
**Czy można eksportować do PPTX?**
Głównym wyjściem jest HTML. Możesz zaprezentować go w przeglądarce, zrobić zrzut ekranu lub nagrać. Konwersja do PPTX może być wykonana jako osobny przepływ pracy, ale nie jest to dziś główna ścieżka.
**Dlaczego niestandardowe kolory nie są dozwolone?**
Umiejętność została zaprojektowana dla stabilnego wyjścia wizualnego. Dowolne kolory często psują system, więc talie muszą używać wyselekcjonowanych ustawień.
**Czy mogę dodać własny układ?**
Tak. Układy Stylu A można rozszerzać w `references/layouts.md`. Styl B jest bardziej rygorystyczny: zaktualizuj razem `template-swiss.html`, `layouts-swiss.md`, `swiss-layout-lock.md` i walidator.
**Czy generowanie obrazów Codex jest wymagane?**
Nie. Talie działają bez wygenerowanych obrazów. Przepływ obrazów jest używany tylko wtedy, gdy potrzebujesz zdjęć, infografik, scen UI lub okładek.
**Jak zaktualizować umiejętność?**
Uruchom ponownie komendę instalacji lub wykonaj `git pull` w swoim lokalnym katalogu umiejętności.
## Współtworzenie
Błędy, problemy z układem, prośby o nowe układy — Issues i PR mile widziane. Priorytetyzuj:
- Najpierw dodaj nowe klasy do `template.html`; nie pozwól, aby `layouts.md` odwoływał się do niezdefiniowanych klas
- Gdy zmieniasz `template-swiss.html`, zaktualizuj razem `layouts-swiss.md` i `swiss-layout-lock.md`
- Gdy dodajesz reguły szwajcarskie, zaktualizuj `scripts/validate-swiss-deck.mjs`
- Zapisz pułapki w `checklist.md` na odpowiednim poziomie P0 / P1 / P2 / P3
- Nowe kolory motywów trafiają do `themes.md` z zalecanym przypadkiem użycia
## Licencja
MIT © 2026 [op7418](https://github.com/op7418)
## FAQ
### Czym jest umiejętność Guizang HTML PPT Agent?
Umiejętność Guizang HTML PPT to narzędzie kompatybilne z AI Agent, zaprojektowane do generowania jednoplikowych prezentacji HTML, towarzyszących obrazów i okładek na wiele platform. Oferuje dwa różne style wizualne: magazyn elektroniczny i szwajcarski internacjonalizm.
### Jak zainstalować umiejętność Guizang HTML PPT Agent?
Możesz ją zainstalować, uruchamiając w terminalu polecenie \`npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill\` lub instruując agenta AI z dostępem do powłoki, aby sklonował repozytorium do twojego katalogu umiejętności.
### Czy mogę dostosować kolory mojego HTML PPT?
Nie, niestandardowe wartości HEX nie są dozwolone. Umiejętność zapewnia wybór gotowych motywów zarówno dla Stylu A (magazyn elektroniczny), jak i Stylu B (szwajcarski internacjonalizm), aby zapewnić spójność estetyczną i wysoką jakość wyników.
### Jakie są dwa oferowane style wizualne?
Styl A, „Magazyn elektroniczny × E-ink”, jest idealny do opowiadania historii, wyrażania opinii i osobistej ekspresji. Styl B, „Szwajcarski internacjonalizm”, najlepiej nadaje się do przedstawiania faktów, analiz produktów i metodologii w minimalistycznym designie opartym na siatce.
### Czy można wyeksportować HTML PPT do formatu PPTX?
Podstawowym formatem dostarczania jest HTML, który można bezpośrednio zaprezentować w przeglądarce, zrobić zrzut ekranu lub nagrać. Choć bezpośredni eksport do PPTX nie jest główną funkcją, w razie potrzeby można użyć stron HTML jako wizualnych szkiców do konwersji.
### Czy umiejętność obsługuje generowanie obrazów do mojego HTML PPT?
Tak, gdy jest używana w środowisku Codex, umiejętność może wykorzystać GPT-Image 2.0 / GPT-M 2.0 do generowania różnych typów obrazów, infografik i scenariuszy UI, które następnie są wstawiane do prezentacji zgodnie z proporcjami szablonu.