# Umiejętność Agenta Kart Społecznościowych > Generuj wizualnie oszałamiające karty społecznościowe dla karuzel Xiaohongshu i par okładek WeChat z różnych źródeł treści. Wykorzystaj systemy projektowania redakcyjnego lub szwajcarskiego, aby tworzyć angażujące wizualizacje dla swoich artykułów i postów. - Canonical: https://nanoskill.ai/pl/skills/social-card-generation - Markdown: https://nanoskill.ai/pl/skills/social-card-generation.md - Author: op7418 - Published: 2026-06-01T07:18:11.391Z - Updated: 2026-07-21T18:32:43.637Z - Language: pl - Source type: github - Popularity signal: 2219 ## Sources - https://github.com/op7418/guizang-social-card-skill ## Install ```shell npx skills add https://github.com/op7418/guizang-social-card-skill/blob/main/README.en.md ``` ## About Umiejętność Kart Społecznościowych Guizang to zaawansowana zdolność agenta zaprojektowana do usprawnienia generowania kart społecznościowych dla platform takich jak Xiaohongshu i WeChat. Umożliwia użytkownikom przekształcanie różnorodnych treści – od artykułów i notatek produktowych po zrzuty ekranu i zdjęcia – w dopracowane, zoptymalizowane pod kątem platformy wizualizacje. Oferując wyraźne systemy projektowania redakcyjnego i szwajcarskiego międzynarodowego, umiejętność ta zapewnia, że niezależnie od tego, czy Twoim celem jest narracyjne opowiadanie historii, czy wyjaśnianie oparte na danych, Twoje karty społecznościowe będą zarówno angażujące, jak i estetycznie spójne, gotowe przyciągnąć uwagę odbiorców. Ta umiejętność wyróżnia się ustrukturyzowanym przepływem pracy, oferując 28 szkieletów układu i 10 predefiniowanych motywów, które kierują prezentacją treści. Automatyzuje pozyskiwanie obrazów z popularnych platform i zawiera solidny walidator oparty na Playwright, aby utrzymać jakość wizualną poprzez wykrywanie typowych problemów z układem. Wynik jest dostarczany jako pojedynczy plik HTML, renderowany bezpośrednio do PNG, co czyni go wysoce kompatybilnym ze środowiskami agentów kodowania, takimi jak Claude Code i Codex. Użytkownicy mogą wykorzystać Umiejętność Kart Społecznościowych Guizang w różnych przypadkach użycia, takich jak tworzenie wielokartowych karuzel Xiaohongshu z długich artykułów, projektowanie wizualnie harmonijnych par kart: głównej 21:9 i do udostępniania 1:1 dla WeChat, czy też tworzenie czytelnych wizualizacji instruktażowych ze zrzutów ekranu. Jej zasady projektowania priorytetyzują powściągliwość, strukturę i obsługę obrazów zorientowaną na użytkownika, zapewniając profesjonalne i efektowne treści w mediach społecznościowych bez potrzeby posiadania rozległej wiedzy projektowej. ## Key features - **Podwójne systemy wizualne**: Wybierz między stylem Edytorial do opowiadania historii (Monocle, Kinfolk) a stylem Szwajcarski Międzynarodowy do danych i struktury (podejście siatkowe, ostre cienkie linie), aby dopasować się do tonu treści. - **Wiele rozmiarów płótna**: Obsługuje Xiaohongshu 3:4 (1080x1440), WeChat 21:9 (2100x900) i WeChat 1:1 (1080x1080) dla wszechstronnej obecności w mediach społecznościowych. - **Rozbudowane szkielety układów**: Dostęp do 28 wstępnie zaprojektowanych szkieletów układów (16 Edytorial, 12 Szwajcarskich), w tym okładek z obrazami wiodącymi, wież KPI i wykresów słupkowych poziomych, do szybkiego strukturyzowania treści. - **Automatyczne pozyskiwanie obrazów**: Automatycznie pobiera obrazy z Unsplash, Pexels, Flickr CC, Wallhaven lub bezpośredniego wyszukiwania, pobierając je lokalnie z automatycznie generowanym plikiem SOURCES.md. - **Walidator układu**: Zawiera walidator oparty na Playwright do wykrywania przepełnień, naruszeń limitu typów, luk w gęstości i kolizji stopek, zapewniając wysokiej jakości generowanie kart społecznościowych. ## Use cases - **Twórz karuzele Xiaohongshu**: Przekształcaj długie artykuły, recenzje produktów lub przewodniki turystyczne w angażujące wielokartowe karuzele dla Xiaohongshu, używając projektu Edytorial lub Szwajcarskiego. - **Projektuj pary okładek WeChat**: Generuj spójne wizualnie obrazy hero 21:9 i karty udostępniania 1:1 dla WeChat Moments i Channels z dowolnego źródła treści. - **Twórz wizualizacje samouczków**: Konwertuj samouczki zrzutów ekranu, przewodniki po grach lub prezentacje narzędzi w uporządkowane karty społecznościowe z upiększonymi zrzutami ekranu i przejrzystymi układami. - **Podsumowuj dane i recenzje**: Prezentuj recenzje produktów, podsumowania danych lub treści podsumowujące rok, używając układów w stylu szwajcarskim z wykresami i matrycami do jasnej komunikacji. ## Result preview Poznaj profesjonalną karuzelę mediów społecznościowych napędzaną tą Umiejętnością. ![A minimalist horizontal bar chart titled 'Top Use Cases by Enterprise Adoption.' The chart presents six enterprise applications of AI agents ranked by adoption rate. Each category is displayed with a blue progress bar against a light gray background track, with percentage values aligned on the right side. The highest adoption category is Intelligent Customer Support at 82%, followed by Automated Data Processing at 74%, Code Development and Review at 68%, Marketing Content Generation at 61%, Supply Chain Planning at 47%, and Legal Document Review at 39%. The bars use varying shades of blue to visually distinguish the categories while maintaining a cohesive design. The layout emphasizes comparative adoption levels across business functions, highlighting customer support and data processing as the most widely adopted AI agent use cases in enterprise environments. The overall design features clean typography, ample whitespace, and a professional business-report aesthetic suitable for executive presentations, technology trend reports, and AI adoption studies.](https://file.nanoskill.ai/social-card-outcome1.png) ![A clean, executive-style industry transformation overview slide titled 'Industries Being Transformed.' The layout presents four major sectors where AI agents are driving measurable business impact, arranged in a structured table-like format with horizontal dividers between rows. Each industry category appears in bold black text on the left, followed by representative AI agent applications in the center, and a highlighted blue percentage growth figure on the far right. The industries featured include Healthcare, Financial Services, Manufacturing, and Retail & eCommerce. Healthcare highlights clinical decision support, patient triage, and radiology reading assistance, showing a 32% impact metric. Financial Services focuses on fraud detection, automated reporting, and compliance monitoring, with the highest displayed value of 41%. Manufacturing showcases predictive maintenance, supply chain optimization, and quality control, associated with a 28% increase. Retail and eCommerce emphasizes personalized shopping experiences, dynamic pricing, and inventory automation, showing a 36% impact figure. The design uses a minimalist business-report aesthetic with a light gray background, bold typography, generous whitespace, subtle divider lines, and bright blue percentage indicators that draw attention to performance improvements. The slide communicates how AI agents are transforming operational workflows across multiple industries and is suitable for executive presentations, consulting reports, digital transformation strategies, and enterprise AI adoption studies.](https://file.nanoskill.ai/social-card-outcome2.png) ![A professional executive presentation slide titled 'What to Watch For,' highlighting three critical risks and implementation challenges organizations should consider when deploying AI agents at scale. The slide uses a minimalist consulting-style layout with a light gray background and three horizontally stacked warning cards featuring orange accent borders and caution icons. The first section, 'Security & Privacy,' warns that AI agents with system-level access create new attack surfaces and increase cybersecurity exposure. It notes that 72% of enterprises identify data governance as a primary concern and recommends least-privilege access controls, audit trails, and strong security frameworks from the start. The second section, 'Integration Complexity,' explains that legacy systems remain the largest deployment obstacle. It emphasizes that modern enterprises operate hundreds of interconnected applications, requiring robust APIs, workflow orchestration, fallback mechanisms, and resilient system integration to prevent fragile automation failures. The third section, 'Trust & Oversight,' addresses the risks of black-box decision making. It highlights the need for human-in-the-loop review processes, explainability layers, transparent governance, accountability structures, and escalation procedures to ensure responsible AI deployment and maintain user confidence. The visual design follows a modern enterprise-report aesthetic with bold section headings, soft neutral panels, orange warning indicators, generous whitespace, and clear information hierarchy. The slide communicates strategic risk management considerations for AI agent adoption and is suitable for board presentations, technology strategy reports, digital transformation roadmaps, enterprise AI governance discussions, and executive briefings.](https://file.nanoskill.ai/sociai-card-outcome3.png) ![A premium executive presentation closing slide titled 'The Agent Era Starts Now,' designed in a modern consulting-report style with a bold deep-blue background, minimalist typography, and strong visual hierarchy. At the top-left, a small section label reading 'WHAT COMES NEXT' introduces the concluding chapter, accompanied by a subtle orange accent line that serves as a visual anchor and brand motif. The center-left features a large, bold headline stating 'The Agent Era Starts Now,' emphasizing urgency, transformation, and the beginning of a new technological era driven by autonomous AI agents. Beneath the headline, a concise strategic statement explains that organizations that move first—guided by clear strategy, governance, responsible oversight, and human-centered design—will shape how work is performed over the coming decade. The message frames AI agents not merely as tools, but as a foundational shift in business operations, productivity, and organizational structure. The slide functions as a call-to-action and executive conclusion, encouraging decision-makers to prepare for widespread AI agent adoption. It communicates themes of innovation leadership, competitive advantage, digital transformation, future-of-work strategy, and responsible AI implementation. The visual design uses extensive whitespace, high-contrast white typography, subtle gray supporting text, and a restrained orange accent to create a polished, enterprise-grade aesthetic. The overall appearance resembles a strategy consulting presentation, boardroom briefing, technology foresight report, or executive keynote deck focused on the future impact of AI agents and autonomous systems.](https://file.nanoskill.ai/social-card-outcome4.png) ## Result walkthrough ### Zainstaluj Dodaj Umiejętność Generowania Kart Społecznościowych do swojego agenta AI. ![A screenshot showing the installation and verification process of the 'guizang-social-card-skill' for an AI agent environment. At the top, a dark blue command banner displays an NPX installation command pointing to a GitHub repository containing the skill. Below, a gray chat-style response panel explains that the installation initially paused because the command requested interactive agent selection. The system reruns the installation using a '-y' flag to bypass prompts and successfully installs the skill for the Hermes Agent environment. The response confirms that the skill has been installed and symbolically linked under the Hermes skills directory. A summary section explains that the skill generates Guizang-style social media card image sets for multiple platforms, including Xiaohongshu or RedNote carousel posts, WeChat Official Account cover image pairs, social cards, article covers, and platform thumbnails. Additional details mention built-in layout recipes, design systems, platform specifications, theme presets, and HTML templates such as Editorial Magazine and Swiss International styles. The interface uses a clean conversational layout with highlighted code snippets, numbered installation steps, bullet-point feature lists, and clear confirmation messages describing the skill's capabilities and readiness for use.](https://file.nanoskill.ai/social-card-install.png) ### Opisz Treść Podaj treść, temat lub kluczową wiadomość, którą chcesz przekształcić w karty mediów społecznościowych. ![A screenshot of an AI-powered social media content design workflow. The upper section contains a large dark blue prompt panel describing a role as an award-winning Social Media Content Designer and Visual Storytelling Director. The prompt requests the creation of a premium social media card series titled 'The Future of AI Agents,' focused on how AI agents will transform productivity, business operations, and everyday work. Detailed requirements specify a carousel-style content format with cover cards, key insights, examples, data highlights, and actionable takeaways. The instructions emphasize clean and modern visual design, strong information hierarchy, platform optimization for Xiaohongshu, LinkedIn, X, and WeChat, concise copywriting, and highly shareable layouts. Additional directives include critiquing the initial content structure, improving readability and engagement, refining storytelling flow, and producing a publication-ready social card series. The final deliverable is described as a visually striking PDF with editorial-style layouts, colorful content sections, infographics, and swipe-friendly designs. Beneath the prompt, a gray response panel shows the AI beginning its workflow by loading the social card skill, reviewing its capabilities, loading reference materials, and accessing template and production workflow resources before generating the final content package. The interface uses a chat-style layout with rounded panels, white text on a dark blue background, and structured formatting to present a professional content design brief.](https://file.nanoskill.ai/social-card-task.png) ### Generuj Karty Społecznościowe Twórz wizualnie angażujące, zoptymalizowane pod kątem platformy projekty kart z jasną hierarchią informacji, silnym przepływem narracyjnym i układami gotowymi do publikacji. ![A professional report cover page titled 'The Future of AI Agents.' The design features a deep royal blue background with a clean, minimalist editorial style. At the top left, small uppercase text reads 'SPECIAL REPORT • 2026,' accompanied by a short orange accent line that serves as a visual divider. The main headline, 'The Future of AI Agents,' appears in large bold white typography positioned on the left side of the page, creating strong visual hierarchy and emphasis. Below the title, a descriptive subtitle explains the report’s focus: how autonomous AI agents will transform productivity, reshape business operations, and redefine the way people work every day. The layout uses generous whitespace, modern sans-serif typography, and a limited color palette of blue, white, and orange, giving the cover a sophisticated corporate-report aesthetic. The overall design communicates themes of technology, innovation, business transformation, automation, and the future of work.](https://file.nanoskill.ai/social-card-outcome.png) ## Skill definition 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](https://github.com/op7418/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." ![Podgląd Guizang Social Card Skill](https://file.nanoskill.ai/d370abcc-1fc4-4de1-903a-09020a6556ce.png) ## Szybki start w 30 sekund ```bash 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: ```text 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ą: ```text 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: ```text Zrób mi karuzelę Xiaohongshu w stylu szwajcarskim z tego artykułu, 5 kart, kolor IKB blue. ``` Inne przydatne podpowiedzi: ```text 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.xhs` 1080×1440 (Xiaohongshu 3:4), `.poster.wide` 2100×900 (WeChat 21:9), `.poster.square` 1080×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.mjs` automatycznie 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.mjs` bezpoś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](https://github.com/op7418/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`](./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.mjs` uruchamia pomiar DOM Playwright, nie zgadywanie - **Proste dostarczanie**: `output/*.png` dostarczane 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) ```bash 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-skill` w Claude Code. Kroki: > > 1. Upewnij się, że katalog `~/.claude/skills/` istnieje (utwórz, jeśli nie) > 2. Uruchom `git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill` > 3. Zweryfikuj: `ls ~/.claude/skills/guizang-social-card-skill/` powinien pokazać `SKILL.md`, `assets/`, `references/` > 4. 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 ```bash 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: 1. **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 2. **Styl i motyw** — wybierz Editorial lub Swiss, następnie wybierz jeden z 10 predefiniowanych motywów. Niestandardowe wartości hex nie są dozwolone 3. **Wybór układu** — wybierz / wklej / dostosuj copy z 28 szkieletów układów. 16 Editorial / 12 Swiss 4. **Przygotowanie zasobów** — pozyskaj obrazy (Unsplash / Pexels / Flickr CC / Wallhaven / wyszukiwanie bezpośrednie), pobierz lokalnie + napisz `SOURCES.md`; zapytaj, czy podawać źródła 5. **Komponuj i renderuj** — skopiuj szablon źródłowy → zastąp `` → `node render.mjs` 6. **Dostarcz i przejrzyj** — najpierw pokaż pliki PNG, zapytaj "obejrzeć je samodzielnie, czy chcesz, żebym uruchomił walidator?" — nie waliduje automatycznie 7. **Iteruj** — zastosuj opinie użytkownika, popraw style inline lub zamień układy / obrazy, ponownie renderuj Pełna specyfikacja w [`SKILL.md`](./SKILL.md). Szczegółowe informacje w pasujących plikach `references/*.md`. ## Walidator ```bash 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 `.poster` natychmiast kończy się niepowodzeniem - **R2** Limity typografii — kombinacje rozmiaru + grubości `.h-xl` / `.h-display` przekraczają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-shot` wychodzące poza ramkę - **R6** Tożsamość szwajcarska — szwajcarskie szablony z wbudowanym `font-weight >= 700` ostrzegają (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`](./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 `
` 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 1. **Powściągliwość ponad głośność** — powściągliwe palety wyróżniają się w nasyconym feedzie 2. **Struktura ponad dekorację** — typografia / kontrast / siatka niosą hierarchię, a nie cienie czy karty 3. **Układy ponad swobodę** — najpierw wybierz, później dostosuj; nie wymyślaj stron spoza 28 szkieletów 4. **Najpierw obrazy użytkownika** — przy pozyskiwaniu przedstaw raz A/B/C; nie nalegaj ponownie na robienie własnych 5. **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) 6. **Większy oznacza cieńszy** — w Swiss rozmiar `.h-xl` rośnie → grubość musi maleć. Editorial stosuje tę samą zasadę 7. **Bez automatycznej walidacji** — najpierw pozwól użytkownikowi spojrzeć, a następnie zapytaj przed walidacją; oszczędza dziesiątki sekund na rundę 8. **Umiejętność to produkt, a nie prompt** — ma PRODUCT.md, numery wersji, CHANGELOG, granice możliwości 9. **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](https://github.com/op7418) Ten projekt jest licencjonowany na warunkach **GNU AGPL-3.0**. Kluczowe punkty: 1. **Wymagane przypisanie autorstwa** — Zachowaj informację o prawach autorskich 2. **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 3. **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) 4. **Zakaz dystrybucji zamkniętej, własnościowej lub wyłącznie płatnej** Pełne warunki w [`LICENSE`](./LICENSE). ## FAQ ### Czym jest umiejętność karty społecznościowej Guizang? Umiejętność karty społecznościowej Guizang to umiejętność agenta dla środowisk Claude Code, Codex i podobnych agentów kodujących, która generuje karuzele Xiaohongshu i pary okładek WeChat z różnych źródeł treści, takich jak artykuły, notatki lub zdjęcia, przy użyciu wyraźnych systemów projektowania wizualnego. ### Jakiego rodzaju treści mogę użyć do generowania kart społecznościowych? Możesz używać artykułów, kopii (copy), zrzutów ekranu, notatek produktów, napisów lub zdjęć jako treści źródłowych do generowania kart społecznościowych. Umiejętność dostosowuje się do różnych danych wejściowych, aby tworzyć atrakcyjne wizualnie rezultaty. ### Jakie są dwa dostępne systemy wizualne do generowania kart społecznościowych? Umiejętność oferuje dwa systemy wizualne: 'Edytorial' do opowiadania historii, stylu życia i treści narracyjnych oraz 'Szwajcarski Międzynarodowy' do recenzji produktów, danych, frameworków i samouczków, charakteryzujący się podejściem siatkowym (grid-first). ### Czy mogę używać niestandardowych kolorów do moich kart społecznościowych? Nie, niestandardowe wartości szesnastkowe nie są dozwolone. Umiejętność udostępnia 10 predefiniowanych motywów (6 Edytorial, 4 Szwajcarski), aby zachować spójność wizualną i jakość. Możesz zmieniać motywy, aktualizując atrybut data-theme na szablonie źródłowym. ### Jak zainstalować umiejętność karty społecznościowej Guizang? Możesz ją zainstalować za pomocą \`npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill\` lub klonując repozytorium do katalogu umiejętności agenta. ### Czy umiejętność obsługuje treści w języku angielskim? Tak, umiejętność obsługuje treści w języku angielskim. Zarówno czcionki Edytorial (Playfair Display + Noto Serif), jak i Szwajcarskie (Inter + Helvetica) obsługują język chiński i angielski, a szkielety układów są niezależne od języka.