# Ferdighet for sosialkortagent > Generer visuelt imponerende sosiale kort for Xiaohongshu-karuseller og WeChat-omslagspar fra ulike innholdskilder. Utnytt redaksjonelle eller sveitsiske designsystemer for å skape engasjerende visuelt innhold til artiklene og innleggene dine. - Canonical: https://nanoskill.ai/nb/skills/social-card-generation - Markdown: https://nanoskill.ai/nb/skills/social-card-generation.md - Author: op7418 - Published: 2026-06-01T07:18:11.391Z - Updated: 2026-07-21T18:32:43.637Z - Language: nb - 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 Guizang-ferdigheten for sosiale kort er en avansert agentfunksjon designet for å strømlinjeforme generering av sosiale kort for plattformer som Xiaohongshu og WeChat. Den gir brukerne mulighet til å transformere variert innhold – fra artikler og produktnotater til skjermbilder og bilder – til polerte, plattformoptimaliserte visuelle elementer. Ved å tilby distinkte redaksjonelle og sveitsiske internasjonale designsystemer, sikrer ferdigheten at uansett om målet ditt er narrativ historiefortelling eller datadrevne forklaringer, vil de sosiale kortene dine være både engasjerende og estetisk konsistente, klare til å fange publikums oppmerksomhet. Denne ferdigheten utmerker seg med sin strukturerte arbeidsflyt, som tilbyr 28 layout-skjeletter og 10 temaforhåndsinnstillinger for å veilede innholdspresentasjonen. Den automatiserer bildehenting fra populære plattformer og inkluderer en robust Playwright-basert validator for å opprettholde visuell kvalitet ved å oppdage vanlige layoutproblemer. Resultatet leveres som enkeltfil-HTML, gjengitt direkte til PNG, noe som gjør den svært kompatibel med kodingsagentmiljøer som Claude Code og Codex. Brukerne kan utnytte Guizang-ferdigheten for sosiale kort til en rekke bruksområder, for eksempel å lage Xiaohongshu-karuseller med flere kort fra lange artikler, designe visuelt harmoniske WeChat 21:9-helte- og 1:1-delingskortpar, eller produsere tydelige veiledningsvisuelle elementer fra skjermbilder. Designprinsippene prioriterer tilbakeholdenhet, struktur og brukersentrert bildehåndtering, noe som sikrer profesjonelt og virkningsfullt sosiale medier-innhold uten å kreve omfattende designekspertise. ## Key features - **Doble visuelle systemer**: Velg mellom en redaksjonell stil for historiefortelling (Monocle, Kinfolk) eller en sveitsisk internasjonal stil for data og struktur (grid-først, skarpe hårlinjer) for å matche innholdets tone. - **Flere lerretstørrelser**: Støtter Xiaohongshu 3:4 (1080x1440), WeChat 21:9 (2100x900) og WeChat 1:1 (1080x1080) for allsidig tilstedeværelse i sosiale medier. - **Omfattende layoutskjeletter**: Få tilgang til 28 forhåndsdesignede layoutskjeletter (16 Redaksjonell, 12 Sveitsisk) inkludert bildeledede forsider, KPI-tårn og H-stolpediagrammer for rask innholdsstrukturering. - **Automatisert bildekildesøking**: Henter automatisk bilder fra Unsplash, Pexels, Flickr CC, Wallhaven eller direkte søk, og laster dem ned lokalt med en automatisk generert SOURCES.md-fil. - **Layoutvalidator**: Inkluderer en Playwright-basert validator for å oppdage overløp, skrifttypebegrensningsbrudd, tetthetshull og bunntekstkollisjoner, noe som sikrer høy kvalitet på sosialkortgenerering. ## Use cases - **Lag Xiaohongshu-karuseller**: Forvandle lange artikler, produktanmeldelser eller reiseguider til engasjerende flerkortkaruseller for Xiaohongshu, ved bruk av enten redaksjonell eller sveitsisk design. - **Design WeChat-forsidepar**: Generer visuelt konsistente 21:9 heltebilder og 1:1 delingskort for WeChat Moments og Channels fra enhver innholdskilde. - **Produser veiledningsvisualiseringer**: Konverter skjermbildeveiledninger, spillguider eller verktøygjennomganger til strukturerte sosialkort med forskjønnede skjermbilder og klare layout. - **Oppsummer data og anmeldelser**: Presenter produktanmeldelser, dataoppsummeringer eller årsoppsummeringsinnhold ved hjelp av sveitsiske layout med diagrammer og matriser for tydelig kommunikasjon. ## Result preview Utforsk en profesjonell sosiale medier-karusell drevet av denne ferdigheten. ![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 ### Installer Legg til ferdigheten for generering av sosiale kort i AI-agenten din. ![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) ### Beskriv innhold Oppgi innholdet, emnet eller nøkkelbudskapet du vil transformere til sosiale medier-kort. ![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) ### Generer sosiale kort Lag visuelt engasjerende, plattformoptimaliserte kortdesign med tydelig informasjonshierarki, sterk historiefortellingsflyt og publiseringsklare layouter. ![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 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](https://github.com/op7418/guizang-ppt-skill). Delt visuelt språk, separat vedlikehold. PPT løser "horisontale sveip-presentasjoner"; denne løser "statiske feed-bilder." ![Forhåndsvisning av Guizang sosialkort-ferdighet](https://file.nanoskill.ai/d370abcc-1fc4-4de1-903a-09020a6556ce.png) ## 30-sekunders start ```bash 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: ```text 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: ```text 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: ```text Lag en sveitserstil Xiaohongshu-karusell fra denne artikkelen, 5 kort, IKB-blå. ``` Andre nyttige ledetekster: ```text 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](https://github.com/op7418/guizang-ppt-skill)) / langformat-videogenerering / ren bilde retusjering / ren tekstredigering uten layout ## 11 Xiaohongshu-kategorier Nivåinndelt etter "kompetansesirkel" — se [`references/category-cookbook.md`](./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 | Oppgave | Anbefalt arbeidsflyt | |---------|----------------------| | Lang artikkel → Xiaohongshu-karusell | Trekk ut kjernebudskap; redaksjonell for fortellertempo, sveitserstil for datanedbrytninger | | Produktanmeldelse / verktøyoppsummering | Sveitserstil + IKB-blå, foretrekk `S09 KPI-tårn` / `S10 H-stolpediagram` | | Reise / livsstil | Redaksjonell + Midnattblekk eller Dune, `M16 Bildebasert omslag` for heltdekkende helt | | WeChat-omslagspar | Gjengi det samme innholdet to ganger: `.poster.wide` 21:9 + `.poster.square` 1:1, visuelt konsistent | | Skjermbildeveiledning / verktøygjennomgang | `.frame-shot` + `.device-browser`, foretrekk sveitsisk rutenettbase | | Spillguide / filmoppsummering | Redaksjonell + Midnattblekk, hent spillkunst fra Wallhaven for heltdekkende helt | | Dataoppsummering / år i oppsummering | Sveitserstil + Sitron eller Sikkerhetsoransje, matrise + hovedbok-kombinasjon | ## 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 | Plattform | Status | Notater | |-----------|--------|---------| | Claude Code | Støttet | Innebygd Ferdighets-arbeidsflyt, ideelt for generering + iterasjon av kort | | Codex | Støttet | Bra for langformat-kortgenerering, bildehenting, visuell QA | | Cursor / andre lokale agenter | Fungerer | Krever filsystem-lesing/-skriving + skallkjøring | | Ren chatbot | Ikke anbefalt | Uten filsystem og renderingspipeline kan man ikke pålitelig levere bilder | ## Installer ### Alternativ 1: Enlinje-installasjon (anbefalt) ```bash 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 ```bash 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 `` → `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`](./SKILL.md). Dype detaljer i tilhørende `references/*.md`. ## Validator ```bash 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`](./references/theme-presets.md). **Egendefinerte hex-verdier er ikke tillatt** — å beskytte estetikken betyr mer enn valgfrihet. ### Redaksjonell (6) | Tema | Toner | Best for | |------|-------|----------| | 🖋 **Blekklassisk** | `#0a0a0b` / `#f1efea` | Generell standard, kommersielle emner, når du er i tvil | | 🌊 **Indigo-porselen** | `#0a1f3d` / `#f1f3f5` | Teknologi, forskning, KI, teknisk skriving | | 🌿 **Skogblekk** | `#1a2e1f` / `#f5f1e8` | Natur, bærekraft, utendørs, sakprosa | | 🍂 **Kraftpapir** | `#2a1e13` / `#eedfc7` | Nostalgi, humaniora, lesing, litteratur | | 🌙 **Dune** | `#1f1a14` / `#f0e6d2` | Kunst, design, kreativ, mote | | ⚫ **Midnattblekk** | `#0e0d0c` / `#ece2cf` / `#d4a04a` | Spillnøkkelkunst / nattscener / filmatiske omslag / Black Myth · Elden Ring-stil mørke temaer | ### Sveitsisk (4) | Tema | Anker | Best for | |------|-------|----------| | 🔵 **IKB Klein-blå** | `#002FA7` | Generell standard, kommersielle lanseringer, KI-produkter, rammeverk | | 🟡 **Sitron** | `#FFD500` | Ungdom, sport, detaljhandel, forbruker, Y2K | | 🟢 **Sitrongrønn** | `#C5E803` | Øko, helse, Gen Z, grønne merker | | 🟠 **Sikkerhetsoransje** | `#FF6B35` | Varsler, nyheter, industri, energiske temaer | For å bytte tema, erstatt bare `
`-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](https://github.com/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`](./LICENSE). ## FAQ ### Hva er Guizang sosialkortferdighet? Guizang sosialkortferdighet er en agentferdighet for Claude Kode, Kodeks og lignende kodeagentmiljøer som genererer Xiaohongshu-karuseller og WeChat-forsidepar fra ulike innholdsinput som artikler, notater eller bilder, ved hjelp av distinkte visuelle designsystemer. ### Hva slags innhold kan jeg bruke for å generere sosialkort? Du kan bruke artikler, kopi, skjermbilder, produktnotater, undertekster eller bilder som kildeinnhold for å generere sosialkort. Ferdigheten tilpasser seg ulike input for å skape visuelt tiltalende output. ### Hva er de to visuelle systemene tilgjengelige for sosialkortgenerering? Ferdigheten tilbyr to visuelle systemer: 'Redaksjonell' for historiefortelling, livsstil og narrativt innhold, og 'Sveitsisk Internasjonal' for produktanmeldelser, data, rammeverk og veiledninger, preget av en grid-først-tilnærming. ### Kan jeg bruke egendefinerte farger for mine sosialkort? Nei, egendefinerte hex-verdier er ikke tillatt. Ferdigheten gir 10 forhåndsinnstilte temaer (6 Redaksjonell, 4 Sveitsisk) for å opprettholde visuell samhørighet og kvalitet. Du kan bytte temaer ved å oppdatere data-theme-attributtet på frømalen. ### Hvordan installerer jeg Guizang sosialkortferdighet? Du kan installere den ved å bruke \`npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill\` eller ved å klone repositoryet inn i agentens ferdighetskatalog. ### Støtter ferdigheten engelsk innhold? Ja, ferdigheten støtter engelsk innhold. Både Redaksjonell (Playfair Display + Noto Serif) og Sveitsisk (Inter + Helvetica) skrifttyper dekker kinesisk og engelsk, og layoutskjelettene er språkuavhengige.