Sociale Kaart Agent Vaardigheid

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. Gedeelde visuele taal, apart onderhoud. PPT lost "horizontaal swipende gesprekken" op; deze lost "statische feedafbeeldingen" op.

30-seconden start

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:

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:

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:

Maak voor mij een Swiss-style Xiaohongshu carrousel van dit artikel, 5 kaarten, IKB-blauw.

Andere nuttige prompts:

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) / lange videogeneratie / pure fotobewerking / platte tekstbewerking zonder lay-out

11 Xiaohongshu-categorieën

Gerangschikt volgens "cirkel van competentie" — zie 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

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

Installeren

Optie 1: Installatie met één regel (aanbevolen)

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

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 <!-- POSTERS_HERE --> → 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. Diepgaande details in de bijbehordende references/*.md.

Validator

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. Aangepaste hex-waarden zijn niet toegestaan — het beschermen van de esthetiek is belangrijker dan keuzevrijheid.

Editorial (6)

Swiss (4)

Om thema's te wisselen, vervang eenvoudig het <section class="poster" data-theme="..."> 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

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.