Umiejętność agenta dla środowisk Claude Code, Codex i podobnych środowisk programistycznych z agentem. Generuje obrazy karuzeli Xiaohongshu / Rednote oraz pary okładek WeChat 21:9 + 1:1 z artykułów, copy, zrzutów ekranu, notatek produktowych, napisów lub zdjęć.
Dwa systemy wizualne dzielą jeden workflow:
- Editorial. Powściągliwe układy w duchu Monocle / Kinfolk / Cereal. Najlepsze do opowiadania historii, lifestyle'u, podróży, czytelnictwa, filmu i osobistych obserwacji.
- Swiss International. Najpierw siatka, jeden kolor akcentu, ostre cienkie linie, ekstremalny kontrast typograficzny. Najlepsze do recenzji produktów, danych, frameworków, samouczków i narzędzi AI.
Projekt siostrzany do guizang-ppt-skill. Wspólny język wizualny, osobna konserwacja. PPT rozwiązuje "prezentacje z poziomym przeciąganiem"; ten rozwiązuje "statyczne obrazy w feedzie."
Szybki start w 30 sekund
npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill
Lub wklej to do agenta AI z dostępem do powłoki:
Zainstaluj dla mnie guizang-social-card-skill. Sklonuj https://github.com/op7418/guizang-social-card-skill do ~/.claude/skills/guizang-social-card-skill, a następnie sprawdź, czy istnieją pliki SKILL.md, assets/ i references/.
Jeśli już ją zainstalowałeś, zaktualizuj za pomocą:
Zaktualizuj dla mnie guizang-social-card-skill. Przejdź do ~/.claude/skills/guizang-social-card-skill, uruchom git pull, a następnie powiedz mi najnowszy commit.
Następnie zapytaj swojego agenta:
Zrób mi karuzelę Xiaohongshu w stylu szwajcarskim z tego artykułu, 5 kart, kolor IKB blue.
Inne przydatne podpowiedzi:
Zrób mi zestaw Xiaohongshu 3:4 z tej recenzji produktu, z tytułami w stylu edytorskim.
Zmień ten artykuł w parę okładek WeChat: 21:9 hero + 1:1 share card, wizualnie spójne.
Mam 3 zdjęcia z kempingu — zrób mi karuzelę Xiaohongshu opartą na obrazach.
Zmień ten tekst poradnika do gry w zestaw Xiaohongshu; pobierz trochę grafik z gry z Wallhaven.
Co otrzymujesz
- 🖋 Dwa systemy wizualne: Editorial dla atmosfery i narracji, Swiss dla faktów i struktury, korzystające z jednego workflow
- 📐 3 rozmiary kanw:
.poster.xhs1080×1440 (Xiaohongshu 3:4),.poster.wide2100×900 (WeChat 21:9),.poster.square1080×1080 (WeChat 1:1) - 🧩 28 szkieletów układów: 16 Editorial (
M01-M16, w tym Okładka oparta na obrazie, Pipeline, Przed/Po) + 12 Swiss (S01-S12, w tym Wieża KPI, Wykres słupkowy H, Macierz + Hero) - 🎨 10 predefiniowanych motywów: 6 Editorial (Klasyczny atrament, Porcelana indygo, Leśny atrament, Papier pakowy, Wydma, Ciemny atrament ciemny) + 4 kolory akcentu Swiss (IKB Klein Blue, Cytrynowy, Cytrynowo-zielony, Ostrzegawczy pomarańczowy)
- 🖼 Workflow pozyskiwania obrazów: najpierw obrazy użytkownika; w przeciwnym razie kaskadowo przez Unsplash → Pexels → Flickr CC → Wallhaven → wyszukiwanie bezpośrednie, pobierane lokalnie z automatycznie generowanym plikiem
SOURCES.md - 🌫 Tło w formie płynącego atramentu WebGL: strony-hero edytorskie mogą zawierać animację płynącego atramentu; można ją wyłączyć dla urządzeń o niskiej mocy lub w trybie zrzutu ekranu
- 🪧 Nakładka obrazu + bezpieczeństwo twarzy: obrazy na pełną szerokość muszą mieć maskę; strefy upuszczania tekstu muszą unikać obiektu. Twarde zasady w
references/image-overlay.md - 🧰 Zasoby do upiększania zrzutów ekranu: 9 teł WebP z prawdziwymi teksturami (5 Editorial / 4 Swiss), połączone z narzędziami
.frame-shot/.device-browser/.device-phone - 🗺 Komponent mapy: MapLibre + prawdziwe kafelki OSM, wiele pinów + łączniki, stworzony do przewodników turystycznych
- ✅ Walidator:
validate-social-deck.mjsautomatycznie wykrywa przepełnienie, naruszenia limitów typografii, luki w gęstości 4-pasmowej i kolizje stopek - 📄 Pojedynczy plik HTML + renderowanie Playwright: brak potoku kompilacji frontendu;
node render.mjsbezpośrednio wyprowadza PNG
Pasuje / Nie pasuje
✅ Pasuje: karuzele Xiaohongshu / pary okładek WeChat / okładki Moments / okładki Channels / wizualizacje artykułów / strony samouczków / podsumowania danych / przewodniki turystyczne / recenzje produktów / wyjaśnienia ze zrzutów ekranu
❌ Nie pasuje: poziome talie slajdów (użyj guizang-ppt-skill) / generowanie długich filmów / czysty retusz zdjęć / edycja zwykłego tekstu bez układu
11 kategorii Xiaohongshu
Podzielone według "kręgu kompetencji" — zobacz references/category-cookbook.md:
Silne od początku do końca (copy / struktura / obrazy w zakresie):
- Podróże, kariera, rekomendacje (po określeniu podgatunku)
Silne copy i struktura, obrazy zależne od użytkownika lub pozyskanych grafik:
- Gry, film, jedzenie (zorientowane na przepisy), makijaż (zorientowany na samouczki), fitness, dom, moda (wyselekcjonowane wybory)
Poza zakresem, zadeklarowane z góry (nie będzie na siłę dopasowywane):
- Zdjęcia na żywo OOTD / dreamcore / grading emulacji filmowej / makijaż z prawdziwym testem skóry — cokolwiek silnie zależne od fotografii lub postprodukcji
Typowe scenariusze
| Zadanie | Zalecany przepływ |
|---|---|
| Długi artykuł → karuzela Xiaohongshu | Wyodrębnij kluczowe wnioski; Editorial dla tempa narracji, Swiss dla rozbić danych |
| Recenzja produktu / podsumowanie narzędzi | Swiss + IKB blue, preferuj S09 Wieża KPI / S10 Wykres słupkowy H |
| Podróże / lifestyle | Editorial + Midnight Ink lub Dune, M16 Okładka oparta na obrazie dla pełnoekranowego hero |
| Para okładek WeChat | Renderuj tę samą zawartość dwa razy: .poster.wide 21:9 + .poster.square 1:1, wizualnie spójne |
| Samouczek ze zrzutów ekranu / omówienie narzędzia | .frame-shot + .device-browser, preferuj szwajcarską siatkę jako podstawę |
| Poradnik do gry / podsumowanie filmu | Editorial + Midnight Ink, pobierz grafikę gry z Wallhaven dla pełnoekranowego hero |
| Podsumowanie danych / roczne podsumowanie | Swiss + Lemon lub Safety Orange, kombinacja macierz + księga |
Dlaczego pojedynczy plik HTML do PNG
- Przyjazny agentom: HTML + CSS to tekst — agenci mogą bezpośrednio pisać, czytać, edytować i walidować
- Precyzja układu: CSS Grid + ścisłe reguły typografii / marginesów / siatki znacznie przewyższają możliwości układu Markdown
- Otwarte pozyskiwanie obrazów: podłącz Unsplash / Pexels / Wallhaven / Mapbox / OSM / dowolne zasoby internetowe
- Weryfikowalna jakość:
validate-social-deck.mjsuruchamia pomiar DOM Playwright, nie zgadywanie - Proste dostarczanie:
output/*.pngdostarczane bezpośrednio — brak wdrożeń, brak narzędzi eksportu
Wsparcie platform
| Platforma | Status | Uwagi |
|---|---|---|
| Claude Code | Wspierany | Natywny workflow Skill, idealny do generowania + iterowania kart |
| Codex | Wspierany | Dobry do generowania długich kart, pozyskiwania obrazów, QA wizualnego |
| Cursor / inne lokalne agenty | Działa | Wymaga odczytu/zapisu systemu plików + wykonania powłoki |
| Zwykły chatbot | Niezalecany | Bez systemu plików i potoku renderowania nie może niezawodnie dostarczać obrazów |
Instalacja
Opcja 1: Instalacja jednym poleceniem (zalecana)
npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill
Opcja 2: Wklej to do AI
Zainstaluj dla mnie umiejętność
guizang-social-card-skillw Claude Code. Kroki:
- Upewnij się, że katalog
~/.claude/skills/istnieje (utwórz, jeśli nie)- Uruchom
git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill- Zweryfikuj:
ls ~/.claude/skills/guizang-social-card-skill/powinien pokazaćSKILL.md,assets/,references/- Powiedz mi, kiedy skończysz. Później mówienie rzeczy typu "zrób mi karuzelę Xiaohongshu" wywoła tę umiejętność.
Wklej powyższy blok do Claude Code / Cursor / dowolnego agenta AI z dostępem do powłoki.
Opcja 3: Ręcznie z CLI
git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill
Jak to wywołać
Po zainstalowaniu Claude Code automatycznie wykrywa umiejętność. Zwroty wyzwalające:
- "Zrób mi karuzelę Xiaohongshu / Rednote"
- "Zrób mi karty Rednote"
- "Zrób okładkę WeChat 21:9 + kartę udostępniania 1:1"
- "Wygeneruj karty społecznościowe / karty społecznościowe w stylu magazynu"
- "Zmień ten artykuł w karuzelę samouczka"
- "Zrób recenzję Xiaohongshu w stylu szwajcarskim / karty w stylu IKB"
Workflow
Umiejętność to ustrukturyzowany przepływ pracy. Agent przechodzi przez 7 kroków:
- Pozyskiwanie — zbierz 4 rzeczy: platformę docelową / styl / zawartość źródłową / obrazy użytkownika. Gdy nie ma dostępnych obrazów, przedstaw raz A/B/C (zrób własne / wygeneruj AI / pozyskaj online); nie nalegaj ponownie
- Styl i motyw — wybierz Editorial lub Swiss, następnie wybierz jeden z 10 predefiniowanych motywów. Niestandardowe wartości hex nie są dozwolone
- Wybór układu — wybierz / wklej / dostosuj copy z 28 szkieletów układów. 16 Editorial / 12 Swiss
- Przygotowanie zasobów — pozyskaj obrazy (Unsplash / Pexels / Flickr CC / Wallhaven / wyszukiwanie bezpośrednie), pobierz lokalnie + napisz
SOURCES.md; zapytaj, czy podawać źródła - Komponuj i renderuj — skopiuj szablon źródłowy → zastąp
<!-- POSTERS_HERE -->→node render.mjs - Dostarcz i przejrzyj — najpierw pokaż pliki PNG, zapytaj "obejrzeć je samodzielnie, czy chcesz, żebym uruchomił walidator?" — nie waliduje automatycznie
- Iteruj — zastosuj opinie użytkownika, popraw style inline lub zamień układy / obrazy, ponownie renderuj
Pełna specyfikacja w SKILL.md. Szczegółowe informacje w pasujących plikach references/*.md.
Walidator
node validate-social-deck.mjs ścieżka/do/katalogu-zadania
6 reguł, opartych na rzeczywistym pomiarze renderowania Playwright, a nie skanowaniu statycznym:
- R1 Przepełnienie — każda sekcja wychodząca poza
.posternatychmiast kończy się niepowodzeniem - R2 Limity typografii — kombinacje rozmiaru + grubości
.h-xl/.h-displayprzekraczające definicje źródłowe - R3 Kolizja stopki — zawartość wciskająca się w dolną stopkę / numer strony
- R4 Gęstość 4-pasmowa — kanwa o wysokości 1440 podzielona na 4 poziome pasma; każde musi zawierać treść lub mieć podany powód dla pustej przestrzeni
- R5 Przepełnienie ramki — elementy dziecka
.frame-img/.frame-shotwychodzące poza ramkę - R6 Tożsamość szwajcarska — szwajcarskie szablony z wbudowanym
font-weight >= 700ostrzegają (narusza "większy oznacza cieńszy")
Krok 7 SKILL.md wyraźnie stwierdza, że walidator nie uruchamia się automatycznie — najpierw poczekaj, aż użytkownik obejrzy obrazy, oszczędzając dziesiątki sekund na rundę.
Predefiniowane motywy
Wybierz z references/theme-presets.md. Niestandardowe wartości hex nie są dozwolone — ochrona estetyki ma większe znaczenie niż swoboda wyboru.
Editorial (6)
| Motyw | Tony | Najlepszy do |
|---|---|---|
| 🖋 Klasyczny atrament | #0a0a0b / #f1efea | Ogólny domyślny, tematy komercyjne, w razie wątpliwości |
| 🌊 Porcelana indygo | #0a1f3d / #f1f3f5 | Technologia, badania, AI, pisanie techniczne |
| 🌿 Leśny atrament | #1a2e1f / #f5f1e8 | Natura, zrównoważony rozwój, aktywność na świeżym powietrzu, literatura faktu |
| 🍂 Papier pakowy | #2a1e13 / #eedfc7 | Nostalgia, nauki humanistyczne, czytelnictwo, literatura |
| 🌙 Wydma | #1f1a14 / #f0e6d2 | Sztuka, projektowanie, kreatywność, moda |
| ⚫ Ciemny atrament | #0e0d0c / #ece2cf / #d4a04a | Grafiki kluczowe gier / sceny nocne / kinowe okładki / Mroczne tematy w stylu Black Myth · Elden Ring |
Swiss (4)
| Motyw | Akcent | Najlepszy do |
|---|---|---|
| 🔵 IKB Klein Blue | #002FA7 | Ogólny domyślny, premiery komercyjne, produkty AI, frameworki |
| 🟡 Cytrynowy | #FFD500 | Młodzież, sport, handel detaliczny, konsument, Y2K |
| 🟢 Cytrynowo-zielony | #C5E803 | Ekologia, zdrowie, pokolenie Z, zielone marki |
| 🟠 Ostrzegawczy pomarańczowy | #FF6B35 | Alerty, wiadomości, przemysł, energetyczne tematy |
Aby zmienić motywy, po prostu zastąp atrybut <section class="poster" data-theme="..."> w szablonie źródłowym; wszystkie style CSS są rozwiązywane przez var(--...).
Katalog
guizang-social-card-skill/
├── SKILL.md ← Główny plik umiejętności: 7-krokowy workflow
├── README.md ← README po chińsku
├── README.en.md ← Ten plik
├── HANDOFF.md ← Dokument przekazania: fakty + historia wersji
├── PRODUCT.md ← Dokument produktu: myślenie + decyzje + mapa drogowa
├── validate-social-deck.mjs ← Walidator układu Playwright
├── assets/
│ ├── template-editorial-card.html ← Szablon źródłowy Editorial (6 motywów / 3 kanwy)
│ ├── template-swiss-card.html ← Szablon źródłowy Swiss (4 akcenty / 3 kanwy)
│ ├── magazine-bg-webgl.js ← Tło płynącego atramentu WebGL
│ └── screenshot-backgrounds/ ← 9 teł do zrzutów ekranu (WebP)
│ ├── style-a/ ← 5 Editorial
│ └── style-b/ ← 4 Swiss
└── references/
├── platform-specs.md ← Platforma × rozdzielczość × nazewnictwo
├── style-system.md ← Twarde zasady i antywzorce dla obu stylów
├── theme-presets.md ← Wszystkie 10 palet szczegółowo
├── layout-recipes.md ← 28 szkieletów układów (M01-M16 + S01-S12)
├── components.md ← Typografia / karty / odstępy / ikony
├── background-systems.md ← Płynący atrament / siatka / warstwy papieru
├── portrait-fill.md ← Strategia białej przestrzeni dla planszy 3:4
├── content-planning.md ← Haki / podział na strony / kompresja copy
├── category-cookbook.md ← 11 tabela routingu kategorii Xiaohongshu
├── image-overlay.md ← Maska obrazu na pełną szerokość + zasady bezpieczeństwa twarzy
├── screenshot-treatment.md ← Narzędzia `.frame-shot` + upiększanie zrzutów ekranu
├── map-component.md ← `.map-block` mapa MapLibre
├── title-shortener.md ← Strategia krótkich tytułów dla okładki 1:1
├── production-workflow.md ← Potok renderowania Playwright
└── qa-checklist.md ← Lista kontrolna jakości
Podstawowe zasady projektowe
- Powściągliwość ponad głośność — powściągliwe palety wyróżniają się w nasyconym feedzie
- Struktura ponad dekorację — typografia / kontrast / siatka niosą hierarchię, a nie cienie czy karty
- Układy ponad swobodę — najpierw wybierz, później dostosuj; nie wymyślaj stron spoza 28 szkieletów
- Najpierw obrazy użytkownika — przy pozyskiwaniu przedstaw raz A/B/C; nie nalegaj ponownie na robienie własnych
- Maska + unikanie — obrazy na pełną szerokość zawsze mają maskę; strefy upuszczania tekstu muszą omijać obiekt (twarze / produkty / obszary o dużej gęstości tekstu)
- Większy oznacza cieńszy — w Swiss rozmiar
.h-xlrośnie → grubość musi maleć. Editorial stosuje tę samą zasadę - Bez automatycznej walidacji — najpierw pozwól użytkownikowi spojrzeć, a następnie zapytaj przed walidacją; oszczędza dziesiątki sekund na rundę
- Umiejętność to produkt, a nie prompt — ma PRODUCT.md, numery wersji, CHANGELOG, granice możliwości
- Lokalne testy pozostają poza git — wszystkie dema / testy dymne znajdują się w
local-tests/, ignorowane przez git
Odniesienia wizualne
- Układ magazynów Monocle / Kinfolk / Cereal i odstępy między literami
- Systemy siatki Massimo Vignelli / Helvetica Forever / Swiss International Typographic Style
- Proporcje obrazu do tekstu i portrety ludzkie w Apartamento / The Gentlewoman
- Przykłady z Xiaohongshu / Rednote, gdzie powściągliwość wygrywa w feedzie
- Praktyka kart społecznościowych Guizang
Mapa drogowa
- Więcej testów dymnych dla przypadków brzegowych limitów typografii przy długich treściach Editorial
- Więcej szwajcarskich układów danych (dodatkowe szkielety wykresów)
- Po wygenerowaniu obrazu: aktywnie pytaj, czy wprowadzić lokalne poprawki / ponownie wygenerować cały obraz
- Więcej pakietów zalecanych układów specyficznych dla kategorii (obecnie 7 z 11 jest silnych od początku do końca)
- Wersja WorkBuddy gotowa na rynek
Współpraca
Błędy, problemy z układem, prośby o nowe układy — mile widziane Issues i PR. Priorytety zmian:
- Podczas edycji szablonów źródłowych aktualizuj również tabelę korespondencji w
references/components.md(rozmiary / odstępy / grubości) - Podczas dodawania układów dodaj pełny przepis do
references/layout-recipes.md(limity copy + minimalna gęstość) - Podczas dodawania kolorów motywów zaktualizuj również blok
[data-theme="..."]w szablonie źródłowym +references/theme-presets.md - Podczas dodawania reguł szwajcarskich zaktualizuj również pasującą regułę w
validate-social-deck.mjs - Napotkane błędy trafiają do
references/qa-checklist.md - Testy i dema znajdują się w
local-tests/— nie zaśmiecaj katalogu głównego umiejętności
Licencja
AGPL-3.0 © 2026 op7418
Ten projekt jest licencjonowany na warunkach GNU AGPL-3.0. Kluczowe punkty:
- Wymagane przypisanie autorstwa — Zachowaj informację o prawach autorskich
- Prace pochodne muszą być open-source — Każda zmodyfikowana wersja, fork lub redystrybucja musi być udostępniona na licencji AGPL-3.0 (lub kompatybilnej), wraz z pełnym kodem źródłowym
- Korzystanie sieciowe jest dystrybucją — Nawet jeśli uruchamiasz zmodyfikowaną wersję tylko jako SaaS / usługę internetową bez rozpowszechniania kodu, nadal musisz opublikować źródło (to właśnie sprawia, że AGPL jest bardziej restrykcyjna niż GPL)
- Zakaz dystrybucji zamkniętej, własnościowej lub wyłącznie płatnej
Pełne warunki w LICENSE.