Umiejętność Agenta HTML PPT Guizang

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

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:

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:

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:

Stwórz szwajcarską talię z tego artykułu, około 7 slajdów, z 2-3 wygenerowanymi wizualizacjami.

Inne przydatne polecenia:

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

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

Instalacja

Opcja 1: Instalacja jednoliniowa (zalecana)

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

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.

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:

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. Kadrowanie zrzutów ekranu znajduje się w 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:

Stwórz 8-slajdową szwajcarską talię z tego artykułu, z 3 wygenerowanymi wizualizacjami dopasowanymi do slotów obrazów szablonu.

Przekształć ten dokument analizy produktu w talię w stylu magazynu redakcyjnego z silnym rytmem narracyjnym.

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.

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

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.

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