Social Card Agent-færdighed

En agentfærdighed til Claude Kode, Codex og lignende kodningsagentmiljøer. Den genererer Xiaohongshu / Rednote karruselbilleder og WeChat 21:9 + 1:1 forsidepar fra artikler, tekst, skærmbilleder, produktnoter, undertekster eller fotos.

To visuelle systemer deler én arbejdsgang:

• Redaktionel. Tilbageholdende layout i ånden af Monocle / Kinfolk / Cereal. Bedst til historiefortælling, livsstil, rejser, læsning, film og personlig observation.
• Schweizisk International. Gitter-først, enkelt ankerfarve, skarpe hårlinjer, ekstrem typekontrast. Bedst til produktanmeldelser, data, rammer, vejledninger og AI-værktøjer.

Søsterprojekt til guizang-ppt-færdighed. Fælles visuelt sprog, separat vedligeholdelse. PPT løser "horisontale swipe-foredrag"; denne løser "statiske feed-billeder."

30-sekunders start

npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill

Eller indsæt dette i en AI-agent med shell-adgang:

Installer guizang-social-card-skill for mig. Klone https://github.com/op7418/guizang-social-card-skill til ~/.claude/skills/guizang-social-card-skill, verificér derefter at SKILL.md, assets/ og references/ findes.

Hvis du allerede har installeret den, opdatér med:

Opdater guizang-social-card-skill for mig. Gå til ~/.claude/skills/guizang-social-card-skill, kør git pull, og fortæl mig derefter den seneste commit.

Spørg derefter din agent:

Lav mig en Schweizisk-stil Xiaohongshu karrusel fra denne artikel, 5 kort, IKB blå.

Andre nyttige prompter:

Lav mig et 3:4 Xiaohongshu sæt fra denne produktanmeldelse, med redaktionelle titler.
Omdan denne artikel til et WeChat forsidepar: 21:9 helt + 1:1 delingskort, visuelt konsistent.
Jeg har 3 campingfotos — lav mig en billedledet Xiaohongshu karrusel.
Omdan denne spilguide-tekst til et Xiaohongshu sæt; hent noget spilkunst fra Wallhaven.

Hvad du får

• 🖋 To visuelle systemer: Redaktionel til atmosfære og fortælling, Schweizisk til fakta og struktur, deler én arbejdsgang
• 📐 3 lærredsstørrelser: .poster.xhs 1080×1440 (Xiaohongshu 3:4), .poster.wide 2100×900 (WeChat 21:9), .poster.square 1080×1080 (WeChat 1:1)
• 🧩 28 layoutskeletter: 16 Redaktionelle (M01-M16, inklusive Billedledt Forside, Pipeline, Før/Efter) + 12 Schweiziske (S01-S12, inklusive KPI Tårn, H-Bar Diagram, Matrix + Helt)
• 🎨 10 temaforudindstillinger: 6 Redaktionelle (Blæk Klassisk, Indigo Porcelæn, Skovblæk, Kraft Papir, Klit, Midnatsblæk mørk) + 4 Schweiziske ankerfarver (IKB Klein Blå, Citron, Citron Grøn, Sikkerhedsorange)
• 🖼 Billedsourcing arbegjdsgang: brugerbilleder først; ellers vandfald gennem Unsplash → Pexels → Flickr CC → Wallhaven → direkte søgning, downloadet lokalt med auto-genereret SOURCES.md
• 🌫 WebGL blæk-flydebaggrund: redaktionelle heltesider kan sende en live blæk-animation; kan deaktiveres for lavenergi-enheder eller skærmbilledtilstand
• 🪧 Billedoverlejring + ansigtssikkerhed: fuldblødende billeder skal bære en maske; tekstnedfaldszoner skal undgå motivet. Hårde regler i references/image-overlay.md
• 🧰 Skærmbilledeforskønnelsesaktiver: 9 ægte-tekstur WebP baggrunde (5 Redaktionelle / 4 Schweiziske), parret med .frame-shot / .device-browser / .device-phone hjælpeværktøjer
• 🗺 Kortkomponent: MapLibre + OSM ægte fliser, multi-pin + forbindelser, lavet til rejseguides
• ✅ Validator: validate-social-deck.mjs auto-detekterer overflow, type cap overtrædelser, 4-bånds tæthedshuller og fodkolisioner
• 📄 Enkelt-fil HTML + Playwright rendering: ingen frontend build-pipeline; node render.mjs udsender PNG direkte

Passer / Passer ikke

✅ Passer: Xiaohongshu karruseller / WeChat forsidepar / Moments forside / Kanaler forside / artikelvisualiseringer / vejledningssider / dataopsummeringer / rejseguides / produktanmeldelser / skærmbilledeforklarere

❌ Passer ikke: Horisontale swipe-dæk (brug guizang-ppt-færdighed) / langform video generering / ren fotoredigering / ren tekstredigering uden layout

11 Xiaohongshu kategorier

Inddelt efter "kompetencecirkel" — se references/category-cookbook.md:

Ende-til-ende stærk (kopi / struktur / billeder alt inden for omfang):

• Rejser, karriere, anbefalinger (efter angivelse af en subgenre)

Kopi og struktur stærk, billeder afhænger af bruger eller sourcet kunst:

• Spil, film, mad (opskriftsorienteret), makeup (vejledningsorienteret), fitness, hjem, mode (kuraterede udvalg)

Uden for omfang, erklæret på forhånd (vil ikke forcere):

• OOTD live-billeder / dreamcore / filmemulationsgradering / ægte hudtest makeup — alt stærkt afhængigt af fotografering eller efterbehandling

Almindelige scenarier

Hvorfor enkelt-fil HTML til PNG

• Agent-venlig: HTML + CSS er tekst — agenter kan skrive, læse, redigere og validere direkte
• Layoutpræcision: CSS Grid + strenge type / margin / gitter regler overgår Markdowns layoutrækkevidde langt
• Åben billedsourcing: hook ind i Unsplash / Pexels / Wallhaven / Mapbox / OSM / enhver webressource
• Verificerbar kvalitet: validate-social-deck.mjs kører Playwright DOM-måling, ikke gætværk
• Enkel levering: output/*.png leveres direkte — ingen deploys, ingen eksportværktøjer

Platformunderstøttelse

Installer

Mulighed 1: En-linje installation (anbefalet)

npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill

Mulighed 2: Indsæt dette i en AI

Installer guizang-social-card-skill Claude Kode færdighed for mig. Trin:

1. Sørg for at ~/.claude/skills/ findes (opret hvis ikke)
2. Kør git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill
3. Verificér: ls ~/.claude/skills/guizang-social-card-skill/ skal vise SKILL.md, assets/, references/
4. Fortæl mig når det er gjort. Senere vil det at sige ting som "lav mig en Xiaohongshu karrusel" udløse denne færdighed.

Indsæt blokken ovenfor i Claude Kode / Cursor / enhver AI-agent med shell-adgang.

Mulighed 3: Manuel CLI

git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill

Hvordan man udløser den

Når den er installeret, auto-detekterer Claude Kode færdigheden. Udløserfraser:

• "Lav mig en Xiaohongshu / Rednote karrusel"
• "Lav mig Rednote kort"
• "Lav en WeChat 21:9 helt + 1:1 delingskort"
• "Generér sociale kort / magasin-stil sociale kort"
• "Omdan denne artikel til en vejledningskarrusel"
• "Lav en Schweizisk-stil Xiaohongshu anmeldelse / IKB-stil kort"

Arbejdsgang

Færdigheden er en struktureret arbejdsgang. Agenten gennemgår 7 trin:

1. Indtag — indfang 4 ting: målplatform / stil / kildeindhold / brugerbilleder. Når ingen billeder er tilgængelige, præsentér A/B/C én gang (tag selv / AI-generer / hent online); genfremsæt ikke
2. Stil & Tema — vælg Redaktionel eller Schweizisk, vælg derefter én af 10 temaforudindstillinger. Brugerdefinerede hex-værdier er ikke tilladt
3. Layoutvalg — vælg / indsæt / tilpas kopi fra de 28 layoutskeletter. 16 Redaktionelle / 12 Schweiziske
4. Aktivforberedelse — hent billeder (Unsplash / Pexels / Flickr CC / Wallhaven / direkte søgning), download lokalt + skriv SOURCES.md; spørg om kilder skal krediteres
5. Komponér & Render — kopiér frø-skabelon → erstat <!-- POSTERS_HERE --> → node render.mjs
6. Lever & Gennemse — vis PNG'er først, spørg "se på dem selv, eller vil du have mig til at køre validatoren?" — auto-validerer ikke
7. Iterér — anvend brugerfeedback, finjustér inline-stile eller udskift layouts / billeder, gengengiv

Fuld spec i SKILL.md. Dybe detaljer i de matchende references/*.md.

Validator

node validate-social-deck.mjs sti/til/opgave-mappe

6 regler, baseret på Playwright ægte-render måling, ikke statisk scanning:

• R1 Overflow — enhver sektion der flyder over .poster fejler øjeblikkeligt
• R2 Type Caps — .h-xl / .h-display størrelse + vægtkombinationer der overskrider frødefinitioner
• R3 Fodkolision — indhold der presser ind i den nederste sidefod / sidenummer
• R4 4-Bånds tæthed — 1440-højt lærred opdelt i 4 horisontale bånd; hvert skal indeholde indhold eller have en angivet grund til hvidrum
• R5 Rammooverflow — .frame-img / .frame-shot børn der flyder over rammen
• R6 Schweizisk Identitet — Schweiziske skabeloner med inline font-weight >= 700 advarer (overtræder "større betyder tyndere")

SKILL.md Trin 7 angiver eksplicit validatoren kører ikke automatisk — vent på at brugeren ser på billederne først, hvilket sparer tiere af sekunder pr. runde.

Temaforudindstillinger

Vælg fra references/theme-presets.md. Brugerdefinerede hex-værdier er ikke tilladt — at beskytte æstetikken betyder mere end valgfrihed.

Redaktionel (6)

Schweizisk (4)

For at skifte temaer, erstat blot <section class="poster" data-theme="..."> attributten på frø-skabelonen; al CSS løses gennem var(--...).

Mappe

guizang-social-card-skill/
├── SKILL.md                              ← Hovedfærdighedsfil: 7-trins arbejdsgang
├── README.md                             ← Kinesisk README
├── README.en.md                          ← Denne fil
├── HANDOFF.md                            ← Overdragelsesdok: fakta + versionshistorik
├── PRODUCT.md                            ← Produktdok: tanker + beslutninger + køreplan
├── validate-social-deck.mjs              ← Playwright layoutvalidator
├── assets/
│   ├── template-editorial-card.html      ← Redaktionel frø (6 temaer / 3 lærreder)
│   ├── template-swiss-card.html          ← Schweizisk frø (4 accenter / 3 lærreder)
│   ├── magazine-bg-webgl.js              ← WebGL blæk-flydebaggrund
│   └── screenshot-backgrounds/           ← 9 skærmbillede scenebaggrunde (WebP)
│       ├── style-a/                      ←   5 Redaktionelle
│       └── style-b/                      ←   4 Schweiziske
└── references/
    ├── platform-specs.md                 ← Platform × opløsning × navngivning
    ├── style-system.md                   ← Hårde regler og anti-mønstre for begge stilarter
    ├── theme-presets.md                  ← Alle 10 paletter i detaljer
    ├── layout-recipes.md                 ← 28 layoutskeletter (M01-M16 + S01-S12)
    ├── components.md                     ← Type / kort / afstand / ikoner
    ├── background-systems.md             ← Blæk flow / gitter / papirlag
    ├── portrait-fill.md                  ← Hvidrumsstrategi for 3:4-brættet
    ├── content-planning.md               ← Kroge / sideopdelinger / kopikomprimering
    ├── category-cookbook.md              ← 11 Xiaohongshu kategorirutingstabel
    ├── image-overlay.md                  ← Fuldblødende billedmaske + ansigtssikkerhedsregler
    ├── screenshot-treatment.md           ← `.frame-shot` hjælpeværktøjer + skærmbilledeforskønnelse
    ├── map-component.md                  ← `.map-block` MapLibre kort
    ├── title-shortener.md                ← Korttitel-strategi for 1:1-forsiden
    ├── production-workflow.md            ← Playwright renderingspipeline
    └── qa-checklist.md                   ← Kvalitets checkliste

Grundlæggende designprincipper

1. Tilbageholdenhed over larm — tilbageholdende paletter skiller sig ud i et mættet feed
2. Struktur over dekoration — type / kontrast / gitter bærer hierarkiet, ikke skygger eller kort
3. Layouts over frihed — vælg først, tilpas senere; opfind ikke sider uden for de 28 skeletter
4. Brugerbilleder først — ved indtag, præsentér A/B/C én gang; genfremsæt ikke at tage deres egne
5. Maske + undgå — fuldblødende billeder bærer altid en maske; tekstnedfaldszoner skal rydde motivet (ansigter / produkter / tekst-tætte regioner)
6. Større betyder tyndere — Schweizisk .h-xl størrelse går op → vægt skal ned. Redaktionel følger samme regel
7. Ingen auto-validering — lad brugeren se først, spørg derefter før validering; sparer tiere af sekunder pr. runde
8. En færdighed er et produkt, ikke en prompt — har PRODUCT.md, versionsnumre, ÆNDRINGSLOG, kapacitetsgrænser
9. Lokale test forbliver ude af git — alle demoer / røgtest lever under local-tests/, gitignoret

Visuelle referencer

• Monocle / Kinfolk / Cereal magasinlayouts og bogstavafstand
• Massimo Vignelli / Helvetica Forever / Schweizisk International Typografisk Stil gittersystemer
• Apartamento / The Gentlewoman billede-til-tekst forhold og menneskelig portrættering
• Tilbageholdende-vinder-feedet eksempler fra Xiaohongshu / Rednote
• Guizangs sociale kortpraksis

Køreplan

• Flere røgtest for type-cap grænsetilfælde under langt Redaktionelt indhold
• Flere Schweiziske datalayouts (yderligere diagram skeletter)
• Efter-billedgenerering: spørg aktivt om at lave lokale rettelser / regenerere hele billedet
• Flere kategorispecifikke anbefalede layoutpakker (i øjeblikket er 7 af 11 ende-til-ende stærke)
• Markedsplads-klar WorkBuddy version

Bidrag

Fejl, layoutproblemer, nye layoutforespørgsler — Issues og PRs velkomne. Prioriteter for ændringer:

• Når du redigerer frø-skabeloner, opdatér også references/components.md's korrespondence-tabel (størrelser / afstand / vægte)
• Når du tilføjer layouts, tilføj den fulde opskrift til references/layout-recipes.md (kopi caps + minimum tæthed)
• Når du tilføjer temafarver, opdatér også frø-skabelonens [data-theme="..."] blok + references/theme-presets.md
• Når du tilføjer Schweiziske regler, opdatér også den matchende regel i validate-social-deck.mjs
• Fejl du er stødt på går ind i references/qa-checklist.md
• Test og demoer lever under local-tests/ — foruren ikke færdighedsroden

Licens

AGPL-3.0 © 2026 op7418

Dette projekt er licenseret under GNU AGPL-3.0. Nøglepunkter:

1. Attribution påkrævet — Behold ophavsretsmeddelelsen
2. Afledte værker skal være open source — Enhver modificeret version, fork eller videredistribution skal frigives under AGPL-3.0 (eller en kompatibel licens), med fuld kildekode gjort tilgængelig
3. Netværksbrug er distribution — Selv hvis du kun kører en modificeret version som en SaaS / webtjeneste uden at distribuere koden, skal du stadig offentliggøre kilden (dette er hvad gør AGPL strengere end GPL)
4. Ingen lukket-kilde, proprietær eller kun-betalt distribution

Fuld vilkår i LICENSE.