Ferdighet for sosialkortagent

En agentferdighet for Claude Code, Codex og lignende kodeagentmiljøer. Den genererer Xiaohongshu / Rednote-karusellbilder og WeChat 21:9 + 1:1 omslagspar fra artikler, tekst, skjermbilder, produktnotater, undertekster eller bilder.

To visuelle systemer deler én arbeidsflyt:

• Redaksjonell. Tilbakeholdne oppsett i ånden av Monocle / Kinfolk / Cereal. Best for historiefortelling, livsstil, reise, lesing, film og personlig observasjon.
• Sveitserstil. Rutenett-først, én ankertonefarge, skarpe hårstreker, ekstrem typescene. Best for produktanmeldelser, data, rammeverk, veiledninger og KI-verktøy.

Søsterprosjekt til guizang-ppt-skill. Delt visuelt språk, separat vedlikehold. PPT løser "horisontale sveip-presentasjoner"; denne løser "statiske feed-bilder."

30-sekunders start

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

Eller lim dette inn i en KI-agent med skalltilgang:

Installer guizang-social-card-skill for meg. Klon https://github.com/op7418/guizang-social-card-skill inn i ~/.claude/skills/guizang-social-card-skill, bekreft deretter at SKILL.md, assets/ og references/ eksisterer.

Hvis du allerede har installert den, oppdater med:

Oppdater guizang-social-card-skill for meg. Gå til ~/.claude/skills/guizang-social-card-skill, kjør git pull, og fortell meg den nyeste forpliktelsen.

Spør så agenten din:

Lag en sveitserstil Xiaohongshu-karusell fra denne artikkelen, 5 kort, IKB-blå.

Andre nyttige ledetekster:

Lag et Xiaohongshu-sett i 3:4-format fra denne produktanmeldelsen, med redaksjonelle titler.
Gjør denne artikkelen til et WeChat-omslagspar: 21:9 helt + 1:1 delingskort, visuelt konsistent.
Jeg har 3 campingbilder — lag en bildebasert Xiaohongshu-karusell.
Gjør denne spillguide-teksten om til et Xiaohongshu-sett; hent litt spillkunst fra Wallhaven.

Hva du får

• 🖋 To visuelle systemer: Redaksjonell for atmosfære og fortelling, sveitserstil for fakta og struktur, deler én arbeidsflyt
• 📐 3 lerretsstørrelser: .poster.xhs 1080×1440 (Xiaohongshu 3:4), .poster.wide 2100×900 (WeChat 21:9), .poster.square 1080×1080 (WeChat 1:1)
• 🧩 28 layoutskjeletter: 16 redaksjonelle (M01-M16, inkludert Bildebasert omslag, Pipeline, Før/Etter) + 12 sveitsiske (S01-S12, inkludert KPI-tårn, H-stolpediagram, Matrise + helt)
• 🎨 10 temaforhåndsinnstillinger: 6 redaksjonelle (Blekklassisk, Indigo-porselen, Skogblekk, Kraftpapir, Dune, Midnattblekk mørk) + 4 sveitsiske ankertonefarger (IKB Klein-blå, Sitron, Sitrongrønn, Sikkerhetsoransje)
• 🖼 Arbeidsflyt for bildehenting: brukerbilder først; ellers fall gjennom Unsplash → Pexels → Flickr CC → Wallhaven → direktesøk, lastet ned lokalt med automatisk generert SOURCES.md
• 🌫 WebGL-blekkflyt-bakgrunn: redaksjonelle heltsider kan levere en levende blekkanimasjon; kan deaktiveres for enheter med lav effekt eller skjermbildemodus
• 🪧 Bildeoverlay + ansiktssikkerhet: heltdekkende bilder må ha en maske; tekstplasseringssoner må unngå motivet. Strenge regler i references/image-overlay.md
• 🧰 Skjermbilde-forskjønnelsesressurser: 9 WebP-bakgrunner med ekte tekstur (5 redaksjonelle / 4 sveitsiske), sammen med .frame-shot / .device-browser / .device-phone-verktøy
• 🗺 Kartkomponent: MapLibre + OSM ekte fliser, multi-pin + koblinger, laget for reiseguider
• ✅ Validator: validate-social-deck.mjs auto-oppdager overløp, typebegrensningsbrudd, tetthetshull i 4-bånd og bunntekstkollisjoner
• 📄 Enkeltfil HTML + Playwright-rendering: ingen frontend-byggepipeline; node render.mjs sender PNG direkte ut

Passer / Passer ikke

✅ Passer: Xiaohongshu-karuseller / WeChat-omslagspar / Moments-omslag / Channels-omslag / artikkelvisualiseringer / veiledningssider / dataoppsummeringer / reiseguider / produktanmeldelser / skjermbilde-forklarere

❌ Passer ikke: Horisontale sveip-dekk (bruk guizang-ppt-skill) / langformat-videogenerering / ren bilde retusjering / ren tekstredigering uten layout

11 Xiaohongshu-kategorier

Nivåinndelt etter "kompetansesirkel" — se references/category-cookbook.md:

Ende-til-ende sterk (tekst / struktur / bilder alt innenfor):

• Reise, karriere, anbefalinger (etter spesifisering av undersjanger)

Tekst og struktur sterk, bilder avhenger av bruker eller hentet kunst:

• Spilling, film, mat (oppskriftsorientert), sminke (veiledningsorientert), trening, hjem, mote (kuraterte utvalg)

Utenfor omfang, erklært på forhånd (vil ikke tvinge tilpasning):

• OOTD live-bilder / dreamcore / film-emuleringsfargegradering / ekte hudtest-sminke — alt som er sterkt avhengig av fotografi eller etterbehandling

Vanlige scenarier

Hvorfor enkeltfil HTML til PNG

• Agentvennlig: HTML + CSS er tekst — agenter kan skrive, lese, redigere og validere direkte
• Layoutpresisjon: CSS Grid + strenge type-/marg-/rutenettregler overgår langt Markdowns layoutrekkevidde
• Åpen bildehenting: koble til Unsplash / Pexels / Wallhaven / Mapbox / OSM / hvilken som helst nettressurs
• Verifiserbar kvalitet: validate-social-deck.mjs kjører Playwright DOM-måling, ikke gjetting
• Enkel levering: output/*.png leveres direkte — ingen deployinger, ingen eksportverktøy

Plattformstøtte

Installer

Alternativ 1: Enlinje-installasjon (anbefalt)

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

Alternativ 2: Lim dette inn i en KI

Installer guizang-social-card-skill Claude Code-ferdigheten for meg. Trinn:

1. Sørg for at ~/.claude/skills/ eksisterer (opprett hvis ikke)
2. Kjør git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill
3. Bekreft: ls ~/.claude/skills/guizang-social-card-skill/ skal vise SKILL.md, assets/, references/
4. Fortell meg når det er gjort. Senere vil utsagn som "lag en Xiaohongshu-karusell til meg" utløse denne ferdigheten.

Lim inn blokken ovenfor i Claude Code / Cursor / hvilken som helst KI-agent med skalltilgang.

Alternativ 3: Manuell CLI

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

Hvordan utløse den

Når den er installert, oppdager Claude Code ferdigheten automatisk. Utløserfraser:

• "Lag en Xiaohongshu / Rednote-karusell til meg"
• "Lag Rednote-kort til meg"
• "Lag et WeChat 21:9 helt + 1:1 delingskort"
• "Generer sosiale kort / magasin-stil sosiale kort"
• "Gjør denne artikkelen om til en veiledningskarusell"
• "Lag en sveitserstil Xiaohongshu-anmeldelse / IKB-stil kort"

Arbeidsflyt

Ferdigheten er en strukturert arbeidsflyt. Agenten går gjennom 7 trinn:

1. Inntak — fang 4 ting: målplattform / stil / kildeinnhold / brukerbilder. Når ingen bilder er tilgjengelige, presenter A/B/C én gang (ta dine egne / KI-generer / hent fra nett); ikke foreslå på nytt
2. Stil & Tema — velg Redaksjonell eller Sveitserstil, velg deretter én av 10 temaforhåndsinnstillinger. Egendefinerte hex-verdier er ikke tillatt
3. Layoutvalg — velg / lim inn / tilpass tekst fra de 28 layoutskjelettene. 16 redaksjonelle / 12 sveitsiske
4. Ressursforberedelse — hent bilder (Unsplash / Pexels / Flickr CC / Wallhaven / direktesøk), last ned lokalt + skriv SOURCES.md; spør om kilder skal krediteres
5. Komponer & Render — kopier frømal → bytt ut <!-- POSTERS_HERE --> → node render.mjs
6. Lever & Gjennomgå — vis PNG-er først, spør "se på dem selv, eller vil du at jeg skal kjøre validatoren?" — auto-validerer ikke
7. Iterer — anvend brukertilbakemeldinger, juster innebygde stiler eller bytt layouter / bilder, render på nytt

Full spesifikasjon i SKILL.md. Dype detaljer i tilhørende references/*.md.

Validator

node validate-social-deck.mjs path/to/task-dir

6 regler, basert på Playwrights ekte-rendermåling, ikke statisk skanning:

• R1 Overløp — enhver seksjon som flyter over .poster feiler umiddelbart
• R2 Typebegrensninger — .h-xl / .h-display størrelse + vektkombinasjoner som overstiger frødefinisjonene
• R3 Bunntekstkollisjon — innhold som presser seg inn i bunn-bunntekst / sidetall
• R4 4-bånds tetthet — 1440-høyt lerret delt inn i 4 horisontale bånd; hvert må inneholde innhold eller ha en oppgitt grunn for tomrom
• R5 Rammeoverløp — .frame-img / .frame-shot barn som flyter over rammen
• R6 Sveitsisk identitet — sveitsiske maler med innebygd font-weight >= 700 advarer (bryter med "større betyr tynnere")

SKILL.md Trinn 7 uttaler eksplisitt at validatoren ikke kjører automatisk — vent til brukeren har sett på bildene først, noe som sparer titalls sekunder per runde.

Temaforhåndsinnstillinger

Velg fra references/theme-presets.md. Egendefinerte hex-verdier er ikke tillatt — å beskytte estetikken betyr mer enn valgfrihet.

Redaksjonell (6)

Sveitsisk (4)

For å bytte tema, erstatt bare <section class="poster" data-theme="...">-attributtet på frømalen; all CSS løses gjennom var(--...).

Katalog

guizang-social-card-skill/
├── SKILL.md                              ← Hovedferdighetsfil: 7-trinns arbeidsflyt
├── README.md                             ← Kinesisk README
├── README.en.md                          ← Denne filen
├── HANDOFF.md                            ← Overleveringsdokument: fakta + versjonshistorikk
├── PRODUCT.md                            ← Produktdokument: tenkning + beslutninger + veikart
├── validate-social-deck.mjs              ← Playwright-layoutvalidator
├── assets/
│   ├── template-editorial-card.html      ← Redaksjonelt frø (6 temaer / 3 lerreter)
│   ├── template-swiss-card.html          ← Sveitsisk frø (4 aksenter / 3 lerreter)
│   ├── magazine-bg-webgl.js              ← WebGL-blekkflyt-bakgrunn
│   └── screenshot-backgrounds/           ← 9 bakgrunner for skjermbildescene (WebP)
│       ├── style-a/                      ←   5 Redaksjonelle
│       └── style-b/                      ←   4 Sveitsiske
└── references/
    ├── platform-specs.md                 ← Plattform × oppløsning × navngivning
    ├── style-system.md                   ← Strenge regler og antimønstre for begge stiler
    ├── theme-presets.md                  ← Alle 10 paletter i detalj
    ├── layout-recipes.md                 ← 28 layoutskjeletter (M01-M16 + S01-S12)
    ├── components.md                     ← Type / kort / mellomrom / ikoner
    ├── background-systems.md             ← Blekksflyt / rutenett / papirlag
    ├── portrait-fill.md                  ← Tomromsstrategi for 3:4-tavlen
    ├── content-planning.md               ← Kroker / sideoppdelinger / tekstkomprimering
    ├── category-cookbook.md              ← 11 Xiaohongshu-kategori rutetabell
    ├── image-overlay.md                  ← Heltdekkende bildemaske + ansiktssikkerhetsregler
    ├── screenshot-treatment.md           ← `.frame-shot`-verktøy + skjermbilde-forskjønnelse
    ├── map-component.md                  ← `.map-block` MapLibre-kart
    ├── title-shortener.md                ← Korttittel-strategi for 1:1-omslaget
    ├── production-workflow.md            ← Playwright-renderingspipeline
    └── qa-checklist.md                   ← Kvalitetssjekkliste

Kjerneprinsipper for design

1. Tilbakeholdenhet over høylytthet — tilbakeholdne paletter skiller seg ut i en mettet feed
2. Struktur over dekorasjon — type / kontrast / rutenett bærer hierarkiet, ikke skygger eller kort
3. Layouter over frihet — velg først, tilpass senere; ikke oppfinn sider utenfor de 28 skjelettene
4. Brukerbilder først — ved inntak, presenter A/B/C én gang; ikke foreslå på nytt å ta egne
5. Maske + unngå — heltdekkende bilder har alltid en maske; tekstplasseringssoner må holde seg unna motivet (ansikter / produkter / teksttette områder)
6. Større betyr tynnere — sveitsisk .h-xl størrelse går opp → vekt må gå ned. Redaksjonell følger samme regel
7. Ingen auto-validering — la brukeren se først, spør før validering; sparer titalls sekunder per runde
8. En ferdighet er et produkt, ikke en prompt — har PRODUCT.md, versjonsnumre, CHANGELOG, kapabilitetsgrenser
9. Lokale tester holdes utenfor git — alle demoer / røyktester ligger under local-tests/, gitignorert

Visuelle referanser

• Monocle / Kinfolk / Cereal magasinoppsett og bokstavavstand
• Massimo Vignelli / Helvetica Forever / sveitsisk internasjonal typografisk stil rutenettsystemer
• Apartamento / The Gentlewoman bilde-til-tekst-forhold og menneskelig portrettering
• Tilbakeholden-vinner-feeden-eksempler fra Xiaohongshu / Rednote
• Guizangs sosiale kort-praksis

Veikart

• Flere røyktester for typebegrensnings-randtilfeller under langt redaksjonelt innhold
• Flere sveitsiske datalayouter (flere diagramskjeletter)
• Etter bildegenerering: aktivt spør om lokale reparasjoner / regenerering av hele bildet
• Flere kategorispesifikke anbefalte layoutpakker (for øyeblikket er 7 av 11 ende-til-ende sterke)
• Markedsplassklar WorkBuddy-versjon

Bidra

Feil, layoutproblemer, forespørsler om nye layouter — Issues og PR-er velkomne. Prioriteringer for endringer:

• Når du redigerer frømaler, oppdater også references/components.md sin korrespondansetabell (størrelser / mellomrom / vekter)
• Når du legger til layouter, legg til hele oppskriften i references/layout-recipes.md (tekstbegrensninger + minimumstetthet)
• Når du legger til temafarger, oppdater også frømalens [data-theme="..."]-blokk + references/theme-presets.md
• Når du legger til sveitsiske regler, oppdater også den matchende regelen i validate-social-deck.mjs
• Feil du har støtt på går inn i references/qa-checklist.md
• Tester og demoer ligger under local-tests/ — ikke forurens ferdighetsroten

Lisens

AGPL-3.0 © 2026 op7418

Dette prosjektet er lisensiert under GNU AGPL-3.0. Viktige punkter:

1. Navngivelse påkrevd — Behold opphavsrettsvarselet
2. Avledede verk må være åpen kildekode — Enhver modifisert versjon, fork eller redistribusjon må utgis under AGPL-3.0 (eller en kompatibel lisens), med full kildekode tilgjengeliggjort
3. Nettverksbruk er distribusjon — Selv om du bare kjører en modifisert versjon som en SaaS / webtjeneste uten å distribuere koden, må du likevel publisere kilden (dette er det som gjør AGPL strengere enn GPL)
4. Ingen lukket kildekode, proprietær eller kun betalt distribusjon

Fullstendige vilkår i LICENSE.