# Sociale Kaart Agent Vaardigheid > Genereer visueel verbluffende sociale kaarten voor Klein Rood Boekje-carrousels en WijChat-coverparen uit verschillende inhoudsbronnen. Benut redactionele of Zwitserse ontwerpsystemen om boeiende beelden te creëren voor uw artikelen en berichten. - Canonical: https://nanoskill.ai/nl/skills/social-card-generation - Markdown: https://nanoskill.ai/nl/skills/social-card-generation.md - Author: op7418 - Published: 2026-06-01T07:18:11.391Z - Updated: 2026-07-21T18:32:43.637Z - Language: nl - 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 De Terugkeerschatkamer Sociale Kaart Vaardigheid is een geavanceerde agentmogelijkheid die is ontworpen om het genereren van sociale kaarten voor platforms zoals Klein Rood Boekje en WijChat te stroomlijnen. Het stelt gebruikers in staat om diverse inhoud – van artikelen en productnotities tot schermafbeeldingen en foto's – om te zetten in gepolijste, platform-geoptimaliseerde beelden. Door onderscheidende Redactionele en Zwitserse Internationale ontwerpsystemen aan te bieden, zorgt de vaardigheid ervoor dat, of uw doel nu verhalende storytelling of datagestuurde uitleg is, uw sociale kaarten zowel boeiend als esthetisch consistent zullen zijn, klaar om de aandacht van het publiek te trekken. Deze vaardigheid valt op door zijn gestructureerde workflow, die 28 lay-outskeletten en 10 thema-voorinstellingen biedt om de presentatie van inhoud te sturen. Het automatiseert het sourcen van afbeeldingen van populaire platforms en omvat een robuuste, op Toneelschrijver gebaseerde validator om de visuele kwaliteit te behouden door veelvoorkomende lay-outproblemen te detecteren. De uitvoer wordt geleverd als enkelbestands HTML, rechtstreeks gerenderd naar PNG, waardoor het zeer compatibel is met coderingsagentomgevingen zoals Claude Code en Codex. Gebruikers kunnen de Terugkeerschatkamer Sociale Kaart Vaardigheid benutten voor verschillende toepassingsgevallen, zoals het maken van multi-kaart Klein Rood Boekje carrousels uit lange artikelen, het ontwerpen van visueel harmonieuze WijChat 21:9 held- en 1:1 deelkaartparen, of het produceren van duidelijke tutorialbeelden van schermafbeeldingen. De ontwerpprincipes geven prioriteit aan terughoudendheid, structuur en gebruikersgerichte beeldbehandeling, waardoor professionele en impactvolle sociale media-inhoud wordt gegarandeerd zonder dat uitgebreide ontwerpexpertise nodig is. ## Key features - **Dubbele visuele systemen**: Kies tussen een Redactionele stijl voor storytelling (Monocle, Kinfolk) of een Zwitsers Internationaal stijl voor gegevens en structuur (grid-first, scherpe haarlijnen) om de toon van uw inhoud aan te passen. - **Meerdere canvasformaten**: Ondersteunt Xiaohongshu 3:4 (1080x1440), WeChat 21:9 (2100x900) en WeChat 1:1 (1080x1080) voor een veelzijdige aanwezigheid op sociale media. - **Uitgebreide lay-outskeletten**: Toegang tot 28 vooraf ontworpen lay-outskeletten (16 Redactioneel, 12 Zwitsers) inclusief beeldgestuurde covers, KPI-torens en H-staafdiagrammen voor snelle inhoudstructurering. - **Geautomatiseerde beeldverwerving**: Verwerft automatisch afbeeldingen van Unsplash, Pexels, Flickr CC, Wallhaven of directe zoekopdracht, en downloadt ze lokaal met een automatisch gegenereerd SOURCES.md-bestand. - **Lay-outvalidator**: Bevat een op Playwright gebaseerde validator om overloop, tekstlimietoverschrijdingen, dichtheidstekorten en voettekstbotsingen te detecteren, waardoor een hoogwaardige sociale kaartgeneratie wordt gegarandeerd. ## Use cases - **Maak Xiaohongshu-carrousels**: Transformeer lange artikelen, productbeoordelingen of reisgidsen in boeiende multi-card carrousels voor Xiaohongshu, met behulp van Redactioneel of Zwitsers ontwerp. - **Ontwerp WeChat-coverparen**: Genereer visueel consistente 21:9-hero-afbeeldingen en 1:1-deelkaarten voor WeChat Moments en Channels uit elke inhoudsbron. - **Produceer instructiebeelden**: Converteer schermafdrukhandleidingen, spelgidsen of tool-walkthroughs naar gestructureerde sociale kaarten met verfraaide schermafbeeldingen en duidelijke lay-outs. - **Samenvatting van gegevens en beoordelingen**: Presenteer productbeoordelingen, gegevenssamenvattingen of jaaroverzichtinhoud met behulp van lay-outs in Zwitserse stijl met diagrammen en matrices voor duidelijke communicatie. ## Result preview Verken een professionele sociale media-carrousel aangedreven door deze Vaardigheid. ![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 ### Installeren Voeg de Sociale Kaart Generatie Vaardigheid toe aan uw AI-agent. ![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) ### Beschrijf Inhoud Geef de inhoud, het onderwerp of de kernboodschap die u wilt omzetten in sociale media-kaarten. ![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) ### Genereer Sociale Kaarten Creëer visueel aantrekkelijke, platform-geoptimaliseerde kaartontwerpen met duidelijke informatiehiërarchie, sterke verhaallijn en publicatieklare lay-outs. ![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 Een agent-vaardigheid voor Claude Code, Codex en vergelijkbare coding-agent-omgevingen. Het genereert **Xiaohongshu / Rednote carrouselafbeeldingen** en **WeChat 21:9 + 1:1 omslagparen** uit artikelen, copy, screenshots, productnotities, ondertitels of foto's. Twee visuele systemen delen één workflow: - **Editorial**. Ingetogen lay-outs in de geest van *Monocle* / *Kinfolk* / *Cereal*. Het beste voor storytelling, lifestyle, reizen, lezen, film en persoonlijke observatie. - **Swiss International**. Grid-first, enkele accentkleur, scherpe haarlijnen, extreem typecontrast. Het beste voor productrecensies, data, frameworks, tutorials en AI-tools. > Zusterproject van [guizang-ppt-skill](https://github.com/op7418/guizang-ppt-skill). Gedeelde visuele taal, apart onderhoud. PPT lost "horizontaal swipende gesprekken" op; deze lost "statische feedafbeeldingen" op. ![Guizang Social Card Skill preview](https://file.nanoskill.ai/d370abcc-1fc4-4de1-903a-09020a6556ce.png) ## 30-seconden start ```bash npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill ``` Of plak dit naar een AI-agent met shell-toegang: ```text Installeer guizang-social-card-skill voor mij. Kloon https://github.com/op7418/guizang-social-card-skill naar ~/.claude/skills/guizang-social-card-skill, controleer vervolgens of SKILL.md, assets/ en references/ bestaan. ``` Als je het al hebt geïnstalleerd, werk dan bij met: ```text Werk guizang-social-card-skill voor mij bij. Ga naar ~/.claude/skills/guizang-social-card-skill, voer git pull uit en vertel me dan de laatste commit. ``` Vraag dan je agent: ```text Maak voor mij een Swiss-style Xiaohongshu carrousel van dit artikel, 5 kaarten, IKB-blauw. ``` Andere nuttige prompts: ```text Maak een 3:4 Xiaohongshu-set van deze productrecensie, met titels in editorial-stijl. Verander dit artikel in een WeChat omslagpaar: 21:9 hero + 1:1 deelkaart, visueel consistent. Ik heb 3 kampeerfoto's — maak een beeldgeleide Xiaohongshu carrousel. Verander deze gamegids-copy in een Xiaohongshu-set; haal wat game-art van Wallhaven. ``` ## Wat je krijgt - 🖋 **Twee visuele systemen**: Editorial voor sfeer en verhaal, Swiss voor feiten en structuur, die één workflow delen - 📐 **3 canvasformaten**: `.poster.xhs` 1080×1440 (Xiaohongshu 3:4), `.poster.wide` 2100×900 (WeChat 21:9), `.poster.square` 1080×1080 (WeChat 1:1) - 🧩 **28 lay-outskeletten**: 16 Editorial (`M01-M16`, inclusief Image-Led Cover, Pipeline, Before/After) + 12 Swiss (`S01-S12`, inclusief KPI Tower, H-Bar Chart, Matrix + Hero) - 🎨 **10 themapresets**: 6 Editorial (Ink Classic, Indigo Porcelain, Forest Ink, Kraft Paper, Dune, **Midnight Ink** donker) + 4 Swiss accentkleuren (IKB Klein Blue, Lemon, Lemon Green, Safety Orange) - 🖼 **Workflow voor het sourcen van afbeeldingen**: eerst gebruikersafbeeldingen; anders waterval via Unsplash → Pexels → Flickr CC → Wallhaven → directe zoekopdracht, lokaal gedownload met automatisch gegenereerde `SOURCES.md` - 🌫 **WebGL-inktvloeiachtergrond**: editorial heldenpagina's kunnen een live inktanimatie leveren; kan worden uitgeschakeld voor apparaten met laag stroomverbruik of screenshotmodus - 🪧 **Afbeeldingsoverlay + gezichtsveiligheid**: volledig uitlopende afbeeldingen moeten een masker hebben; tekstzones moeten het onderwerp vermijden. Harde regels in `references/image-overlay.md` - 🧰 **Activa voor screenshotverfraaiiing**: 9 WebP-achtergronden met echte textuur (5 Editorial / 4 Swiss), gecombineerd met `.frame-shot` / `.device-browser` / `.device-phone` hulpprogramma's - 🗺 **Kaartcomponent**: MapLibre + OSM echte tegels, multi-pin + verbindingen, gemaakt voor reisgidsen - ✅ **Validator**: `validate-social-deck.mjs` detecteert automatisch overflow, schendingen van typebeperkingen, 4-banddichtheidstekorten en voettekstbotsingen - 📄 **Single-file HTML + Playwright rendering**: geen frontend build-pipeline; `node render.mjs` geeft direct PNG uit ## Past / Past niet **✅ Past**: Xiaohongshu carrousels / WeChat omslagparen / Moments omslagen / Channels omslagen / artikelvisuals / tutorialpagina's / data-overzichten / reisgidsen / productrecensies / screenshot-uitleggers **❌ Past niet**: Horizontaal swipende decks (gebruik [guizang-ppt-skill](https://github.com/op7418/guizang-ppt-skill)) / lange videogeneratie / pure fotobewerking / platte tekstbewerking zonder lay-out ## 11 Xiaohongshu-categorieën Gerangschikt volgens "cirkel van competentie" — zie [`references/category-cookbook.md`](./references/category-cookbook.md): **End-to-end sterk** (copy / structuur / afbeeldingen allemaal binnen bereik): - Reizen, carrière, aanbevelingen (na specificatie van een subgenre) **Copy en structuur sterk, afbeeldingen afhankelijk van gebruiker of gesourcede kunst:** - Gaming, film, eten (receptgericht), make-up (tutorialgericht), fitness, wonen, mode (samengestelde keuzes) **Buiten bereik, vooraf verklaard** (wordt niet geforceerd aangepast): - OOTD live shots / dreamcore / filme-emulatie grading / echte huids test make-up — alles wat sterk afhankelijk is van fotografie of postproductie ## Veelvoorkomende scenario's | Taak | Aanbevolen flow | |------|------------------| | Lang artikel → Xiaohongshu carrousel | Haal kernpunten eruit; Editorial voor verhalend tempo, Swiss voor data-uitsplitsingen | | Productrecensie / tool-samenvatting | Swiss + IKB blauw, geef de voorkeur aan `S09 KPI Tower` / `S10 H-Bar Chart` | | Reizen / lifestyle | Editorial + Midnight Ink of Dune, `M16 Image-Led Cover` voor volledig uitlopende hero | | WeChat omslagpaar | Render dezelfde inhoud twee keer: `.poster.wide` 21:9 + `.poster.square` 1:1, visueel consistent | | Screenshot tutorial / tool doorloop | `.frame-shot` + `.device-browser`, geef de voorkeur aan Swiss grid-basis | | Gamegids / filmoverzicht | Editorial + Midnight Ink, haal game-art van Wallhaven voor volledig uitlopende hero | | Data-overzicht / jaaroverzicht | Swiss + Lemon of Safety Orange, matrix + grootboekcombinatie | ## Waarom single-file HTML naar PNG - **Agentvriendelijk**: HTML + CSS is tekst — agents kunnen direct schrijven, lezen, bewerken en valideren - **Lay-outprecisie**: CSS Grid + strikte type / marge / grid-regels overtreffen ruimschoots Markdown's lay-outbereik - **Open afbeeldingsourcing**: koppel aan Unsplash / Pexels / Wallhaven / Mapbox / OSM / elke webbron - **Controleerbare kwaliteit**: `validate-social-deck.mjs` gebruikt Playwright DOM-meting, geen giswerk - **Simpele levering**: `output/*.png` wordt direct verzonden — geen deploys, geen exporttools ## Platformondersteuning | Platform | Status | Notities | |----------|--------|-------| | Claude Code | Ondersteund | Native Skill-workflow, ideaal voor het genereren + itereren van kaarten | | Codex | Ondersteund | Goed voor het genereren van lange kaarten, sourcen van afbeeldingen, visuele QA | | Cursor / andere lokale agents | Werkt | Vereist lezen/schrijven van bestandssysteem + shell-uitvoering | | Gewone chatbot | Niet aanbevolen | Zonder bestandssysteem en rendering-pipeline kunnen afbeeldingen niet betrouwbaar worden verzonden | ## Installeren ### Optie 1: Installatie met één regel (aanbevolen) ```bash npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill ``` ### Optie 2: Plak dit naar een AI > Installeer de `guizang-social-card-skill` Claude Code-vaardigheid voor mij. Stappen: > > 1. Zorg dat `~/.claude/skills/` bestaat (maak aan indien niet) > 2. Voer `git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill` uit > 3. Controleer: `ls ~/.claude/skills/guizang-social-card-skill/` zou `SKILL.md`, `assets/`, `references/` moeten tonen > 4. Vertel me wanneer klaar. Later zal het zeggen van dingen als "maak een Xiaohongshu carrousel voor mij" deze vaardigheid activeren. Plak het bovenstaande blok in Claude Code / Cursor / elke AI-agent met shell-toegang. ### Optie 3: Handmatige CLI ```bash git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill ``` ### Hoe het te activeren Eenmaal geïnstalleerd detecteert Claude Code de vaardigheid automatisch. Activeerzinnen: - "Maak een Xiaohongshu / Rednote carrousel voor mij" - "Maak Rednote kaarten voor mij" - "Maak een WeChat 21:9 hero + 1:1 deelkaart" - "Genereer social cards / magazine-stijl social cards" - "Verander dit artikel in een tutorial-carrousel" - "Maak een Swiss-style Xiaohongshu review / IKB-stijl kaarten" ## Workflow De vaardigheid is een gestructureerde workflow. De agent doorloopt 7 stappen: 1. **Intake** — leg 4 dingen vast: doelplatform / stijl / broninhoud / gebruikersafbeeldingen. Als er geen afbeeldingen beschikbaar zijn, presenteer dan eenmalig A/B/C (zelf fotograferen / AI genereren / online sourcen); niet opnieuw voorstellen 2. **Stijl & Thema** — kies Editorial of Swiss, kies dan een van de 10 themapresets. Aangepaste hex-waarden zijn niet toegestaan 3. **Lay-outselectie** — kies / plak / pas copy aan uit de 28 lay-outskeletten. 16 Editorial / 12 Swiss 4. **Asset-voorbereiding** — source afbeeldingen (Unsplash / Pexels / Flickr CC / Wallhaven / directe zoekopdracht), lokaal downloaden + `SOURCES.md` schrijven; vraag of bronnen moeten worden vermeld 5. **Samenstellen & Renderen** — kopieer seed-template → vervang `` → `node render.mjs` 6. **Leveren & Controleren** — toon eerst PNG's, vraag "wil je ze zelf bekijken, of wil je dat ik de validator uitvoer?" — voert niet automatisch validatie uit 7. **Itereren** — pas gebruikersfeedback toe, pas inline-stijlen aan of wissel lay-outs / afbeeldingen, render opnieuw Volledige specificatie in [`SKILL.md`](./SKILL.md). Diepgaande details in de bijbehordende `references/*.md`. ## Validator ```bash node validate-social-deck.mjs path/to/task-dir ``` 6 regels, gebaseerd op Playwright real-render meting, niet op statische scanning: - **R1** Overflow — elke sectie die `.poster` overstroomt, faalt onmiddellijk - **R2** Typebeperkingen — `.h-xl` / `.h-display` grootte + gewichtscombinaties die de seed-definities overschrijden - **R3** Voettekstbotsing — inhoud die tegen de onderste voettekst / paginanummer drukt - **R4** 4-banddichtheid — 1440-hoog canvas opgesplitst in 4 horizontale banden; elke band moet inhoud bevatten of een verklaarde reden voor witruimte hebben - **R5** Frame-overflow — `.frame-img` / `.frame-shot` kinderen die het frame overstromen - **R6** Swiss-identiteit — Swiss templates met inline `font-weight >= 700` waarschuwen (overtreden "groter betekent dunner") `SKILL.md` Stap 7 stelt expliciet dat **de validator niet automatisch wordt uitgevoerd** — wacht tot de gebruiker eerst naar de afbeeldingen kijkt, wat tientallen seconden per ronde bespaart. ## Themapresets Kies uit [`references/theme-presets.md`](./references/theme-presets.md). **Aangepaste hex-waarden zijn niet toegestaan** — het beschermen van de esthetiek is belangrijker dan keuzevrijheid. ### Editorial (6) | Thema | Tonen | Het beste voor | |-------|-------|----------------| | 🖋 **Ink Classic** | `#0a0a0b` / `#f1efea` | Algemene standaard, commerciële onderwerpen, bij twijfel | | 🌊 **Indigo Porcelain** | `#0a1f3d` / `#f1f3f5` | Tech, onderzoek, AI, technisch schrijven | | 🌿 **Forest Ink** | `#1a2e1f` / `#f5f1e8` | Natuur, duurzaamheid, buitenleven, non-fictie | | 🍂 **Kraft Paper** | `#2a1e13` / `#eedfc7` | Nostalgie, geesteswetenschappen, lezen, literatuur | | 🌙 **Dune** | `#1f1a14` / `#f0e6d2` | Kunst, design, creatief, mode | | ⚫ **Midnight Ink** | `#0e0d0c` / `#ece2cf` / `#d4a04a` | Game key art / nachtscènes / filmische omslagen / Black Myth · Elden Ring-achtige donkere thema's | ### Swiss (4) | Thema | Accent | Het beste voor | |-------|--------|----------------| | 🔵 **IKB Klein Blue** | `#002FA7` | Algemene standaard, commerciële lanceringen, AI-producten, frameworks | | 🟡 **Lemon** | `#FFD500` | Jeugd, sport, detailhandel, consument, Y2K | | 🟢 **Lemon Green** | `#C5E803` | Eco, gezondheid, Gen Z, groene merken | | 🟠 **Safety Orange** | `#FF6B35` | Waarschuwingen, nieuws, industrieel, energieke thema's | Om thema's te wisselen, vervang eenvoudig het `
` attribuut op de seed template; alle CSS wordt opgelost via `var(--...)`. ## Mappen ``` guizang-social-card-skill/ ├── SKILL.md ← Hoofdskillbestand: 7-stappen workflow ├── README.md ← Chinese README ├── README.en.md ← Dit bestand ├── HANDOFF.md ← Overdrachtsdocument: feiten + versiegeschiedenis ├── PRODUCT.md ← Productdocument: denken + beslissingen + roadmap ├── validate-social-deck.mjs ← Playwright lay-outvalidator ├── assets/ │ ├── template-editorial-card.html ← Editorial-seed (6 thema's / 3 canvassen) │ ├── template-swiss-card.html ← Swiss-seed (4 accenten / 3 canvassen) │ ├── magazine-bg-webgl.js ← WebGL-inktvloeiachtergrond │ └── screenshot-backgrounds/ ← 9 achtergronden voor screenshotpodia (WebP) │ ├── style-a/ ← 5 Editorial │ └── style-b/ ← 4 Swiss └── references/ ├── platform-specs.md ← Platform × resolutie × naamgeving ├── style-system.md ← Harde regels en anti-patronen voor beide stijlen ├── theme-presets.md ← Alle 10 paletten in detail ├── layout-recipes.md ← 28 lay-outskeletten (M01-M16 + S01-S12) ├── components.md ← Type / kaarten / afstand / pictogrammen ├── background-systems.md ← Inktvloeiing / raster / papierlagen ├── portrait-fill.md ← Witruimtestrategie voor het 3:4 bord ├── content-planning.md ← Hooks / pagina-splitsingen / copycompressie ├── category-cookbook.md ← 11 Xiaohongshu-categorie routeringstabel ├── image-overlay.md ← Volledig uitlopend afbeeldingsmasker + gezichtsveiligheidsregels ├── screenshot-treatment.md ← `.frame-shot` hulpprogramma's + screenshotverfraaiing ├── map-component.md ← `.map-block` MapLibre-kaart ├── title-shortener.md ← Kortetitelstrategie voor de 1:1 omslag ├── production-workflow.md ← Playwright renderpipeline └── qa-checklist.md ← Kwaliteitschecklist ``` ## Kernontwerpprincipes 1. **Ingetogenheid boven luidruchtigheid** — ingetogen paletten vallen op in een verzadigde feed 2. **Structuur boven decoratie** — type / contrast / raster dragen de hiërarchie, niet schaduwen of kaarten 3. **Lay-outs boven vrijheid** — kies eerst, pas later aan; verzin geen pagina's buiten de 28 skeletten 4. **Gebruikersafbeeldingen eerst** — bij intake, presenteer A/B/C eenmalig; stel niet opnieuw voor om zelf te fotograferen 5. **Masker + vermijden** — volledig uitlopende afbeeldingen hebben altijd een masker; tekstzones moeten vrij zijn van het onderwerp (gezichten / producten / tekstrijke gebieden) 6. **Groter betekent dunner** — Swiss `.h-xl` grootte omhoog → gewicht moet omlaag. Editorial volgt dezelfde regel 7. **Geen automatische validatie** — laat de gebruiker eerst kijken, vraag dan voordat je valideert; bespaart tientallen seconden per ronde 8. **Een vaardigheid is een product, geen prompt** — heeft PRODUCT.md, versienummers, CHANGELOG, capaciteitsgrenzen 9. **Lokale tests blijven buiten git** — alle demo's / smoke tests leven onder `local-tests/`, gitignored ## Visuele referenties - *Monocle* / *Kinfolk* / *Cereal* tijdschriftlay-outs en letterspatiëring - Massimo Vignelli / Helvetica Forever / Swiss International Typographic Style gridsystemen - Apartamento / The Gentlewoman beeld-naar-tekst verhoudingen en menselijke portretten - Ingetogen-wint-de-feed voorbeelden van Xiaohongshu / Rednote - Guizangs social card-praktijk ## Roadmap - Meer smoke tests voor typebeperking randgevallen onder lange Editorial-inhoud - Meer Swiss-datalay-outs (extra diagrammskeletten) - Na beeldgeneratie: actief vragen of lokale aanpassingen moeten worden gedaan / de hele afbeelding opnieuw genereren - Meer categorie-specifieke aanbevolen lay-outpakketten (momenteel zijn 7 van de 11 end-to-end sterk) - Marketplace-klare WorkBuddy-versie ## Bijdragen Bugs, lay-outproblemen, nieuwe lay-outverzoeken — Issues en PR's zijn welkom. Prioriteiten voor wijzigingen: - Bij het bewerken van seed-templates, werk ook de correspondentietabel van `references/components.md` bij (groottes / afstanden / gewichten) - Bij het toevoegen van lay-outs, voeg het volledige recept toe aan `references/layout-recipes.md` (kopieerlimieten + minimale dichtheid) - Bij het toevoegen van themakleuren, werk ook het `[data-theme="..."]`-blok van de seed-template + `references/theme-presets.md` bij - Bij het toevoegen van Swiss-regels, werk ook de corresponderende regel in `validate-social-deck.mjs` bij - Fouten die je bent tegengekomen, gaan naar `references/qa-checklist.md` - Tests en demo's leven onder `local-tests/` — vervuil de skill-root niet ## Licentie AGPL-3.0 © 2026 [op7418](https://github.com/op7418) Dit project is gelicentieerd onder **GNU AGPL-3.0**. Belangrijke punten: 1. **Naamsvermelding vereist** — Behoud de copyrightkennisgeving 2. **Afleidingen moeten open-source zijn** — Elke gewijzigde versie, fork of herdistributie moet worden vrijgegeven onder AGPL-3.0 (of een compatibele licentie), met volledige broncode beschikbaar 3. **Netwerkgebruik is distributie** — Zelfs als je alleen een gewijzigde versie als SaaS / webservice uitvoert zonder de code te distribueren, moet je nog steeds de bron publiceren (dit is wat AGPL strenger maakt dan GPL) 4. **Geen closed-source, propriëtaire of betalings-alleen distributie** Volledige voorwaarden in [`LICENSE`](./LICENSE). ## FAQ ### Wat is de Guizang Social Card-vaardigheid? De Guizang Social Card-vaardigheid is een agentvaardigheid voor Claude Code, Codex en vergelijkbare codeer-agentomgevingen die Xiaohongshu-carrousels en WeChat-coverparen genereert uit verschillende inhoudsinvoer zoals artikelen, notities of foto's, met behulp van onderscheidende visuele ontwerpsystemen. ### Wat voor soort inhoud kan ik gebruiken om sociale kaarten te genereren? U kunt artikelen, teksten, schermafbeeldingen, productnotities, ondertitels of foto's gebruiken als broninhoud voor het genereren van sociale kaarten. De vaardigheid past zich aan verschillende invoer aan om visueel aantrekkelijke uitvoer te creëren. ### Wat zijn de twee visuele systemen die beschikbaar zijn voor het genereren van sociale kaarten? De vaardigheid biedt twee visuele systemen: 'Redactioneel' voor storytelling, lifestyle en verhalende inhoud, en 'Zwitsers Internationaal' voor productbeoordelingen, gegevens, frameworks en tutorials, gekenmerkt door een grid-first benadering. ### Kan ik aangepaste kleuren gebruiken voor mijn sociale kaarten? Nee, aangepaste hex-waarden zijn niet toegestaan. De vaardigheid biedt 10 thema-presets (6 Redactioneel, 4 Zwitsers) om visuele samenhang en kwaliteit te behouden. U kunt van thema wisselen door het data-theme attribuut bij te werken op de seed template. ### Hoe installeer ik de Guizang Social Card-vaardigheid? U kunt het installeren met \`npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill\` of door de repository te klonen naar de vaardighedendirectory van uw agent. ### Ondersteunt de vaardigheid Engelse inhoud? Ja, de vaardigheid ondersteunt Engelse inhoud. Zowel de Redactionele (Playfair Display + Noto Serif) als de Zwitserse (Inter + Helvetica) lettertypen ondersteunen Chinees en Engels, en de lay-outskeletten zijn taalonafhankelijk.