# Social Card Agent-færdighed > Generér visuelt imponerende sociale kort til Xiaohongshu-karruseller og WeChat-coverpar fra forskellige indholdskilder. Udnyt redaktionelle eller schweiziske designsystemer til at skabe engagerende visuals til dine artikler og opslag. - Canonical: https://nanoskill.ai/da/skills/social-card-generation - Markdown: https://nanoskill.ai/da/skills/social-card-generation.md - Author: op7418 - Published: 2026-06-01T07:18:11.391Z - Updated: 2026-07-21T18:32:43.637Z - Language: da - 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 Social Card-færdigheden er en avanceret agentfunktion, der er designet til at strømline genereringen af sociale kort til platforme som Xiaohongshu og WeChat. Den giver brugerne mulighed for at omdanne forskelligt indhold – fra artikler og produktnoter til skærmbilleder og fotos – til polerede, platformoptimerede visuals. Ved at tilbyde særskilte redaktionelle og schweiziske internationale designsystemer sikrer færdigheden, at uanset om dit mål er narrativ historiefortælling eller datadrevet forklaring, vil dine sociale kort være både engagerende og æstetisk konsistente, klar til at fange publikums opmærksomhed. Denne færdighed skiller sig ud med sin strukturerede arbejdsgang, der leverer 28 layoutskeletter og 10 temapresets til at guide indholdspræsentationen. Den automatiserer billedhentning fra populære platforme og indeholder en robust Playwright-baseret validator til at opretholde visuel kvalitet ved at opdage almindelige layoutproblemer. Outputtet leveres som single-file HTML, der renderes direkte til PNG, hvilket gør det meget kompatibelt med kodende agentmiljøer som Claude Code og Codex. Brugere kan udnytte Guizang Social Card-færdigheden til en række anvendelsesmuligheder, såsom at skabe fler-kort Xiaohongshu-karruseller fra lange artikler, designe visuelt harmoniske WeChat 21:9 hero- og 1:1 dele-kortpar eller producere klare tutorial-visuals fra skærmbilleder. Dens designprincipper prioriterer tilbageholdenhed, struktur og brugercentreret håndtering af billeder, hvilket sikrer professionelt og indflydelsesrigt indhold på sociale medier uden at kræve omfattende designekspertise. ## Key features - **Dobbelt visuelle systemer**: Vælg mellem en Editorial-stil til historiefortælling (Monocle, Kinfolk) eller en Swiss International-stil til data og struktur (gitternet-først, skarpe hårlinjer) for at matche dit indholds tone. - **Flere lærredstørrelser**: Understøtter Xiaohongshu 3:4 (1080x1440), WeChat 21:9 (2100x900) og WeChat 1:1 (1080x1080) til alsidig tilstedeværelse på sociale medier. - **Omfattende layoutskabeloner**: Få adgang til 28 prædesignede layoutskabeloner (16 Editorial, 12 Swiss) inklusive billedstyrede forsider, KPI-tårne og H-bar-diagrammer til hurtig indholdsstrukturering. - **Automatiseret billedsourcing**: Henter automatisk billeder fra Unsplash, Pexels, Flickr CC, Wallhaven eller direkte søgning og downloader dem lokalt med en auto-genereret SOURCES.md-fil. - **Layout-validator**: Inkluderer en Playwright-baseret validator til at opdage overløb, overskridelse af typegrænser, tæthedshuller og kollisioner i sidefoden, hvilket sikrer generering af sociale kort af høj kvalitet. ## Use cases - **Opret Xiaohongshu-karruseller**: Omdan lange artikler, produktanmeldelser eller rejseguides til engagerende flerkorts-karruseller til Xiaohongshu ved hjælp af enten Editorial- eller Swiss-design. - **Design WeChat-coverpar**: Generer visuelt konsistente 21:9 hero-billeder og 1:1-delingskort til WeChat Moments og Channels fra enhver indholdskilde. - **Producer visuelle tutorials**: Konverter skærmbillede-tutorials, spilguides eller værktøjsgennemgange til strukturerede sociale kort med forskønnede skærmbilleder og tydelige layouts. - **Opsummer data og anmeldelser**: Præsenter produktanmeldelser, dataresuméer eller årlige opsamlinger ved hjælp af Swiss-layouts med diagrammer og matricer for tydelig kommunikation. ## Result preview Udforsk en professionel social medie-karrusel drevet af denne færdighed. ![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 ### Installér Føj Social Card-genereringsfærdigheden til din 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) ### Beskriv indhold Angiv det indhold, emne eller nøglebudskab, du vil omdanne til sociale mediekort. ![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) ### Generér sociale kort Lav visuelt engagerende, platformoptimerede kortdesigns med klar informationshierarki, stærkt fortælleflow og udgivelsesklare layout. ![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 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](https://github.com/op7418/guizang-ppt-skill). Fælles visuelt sprog, separat vedligeholdelse. PPT løser "horisontale swipe-foredrag"; denne løser "statiske feed-billeder." ![Guizang Social Card Skill forhåndsvisning](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 indsæt dette i en AI-agent med shell-adgang: ```text 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: ```text 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: ```text Lav mig en Schweizisk-stil Xiaohongshu karrusel fra denne artikel, 5 kort, IKB blå. ``` Andre nyttige prompter: ```text 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](https://github.com/op7418/guizang-ppt-skill)) / langform video generering / ren fotoredigering / ren tekstredigering uden layout ## 11 Xiaohongshu kategorier Inddelt efter "kompetencecirkel" — se [`references/category-cookbook.md`](./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 | Opgave | Anbefalet flow | |------|------------------| | Lang artikel → Xiaohongshu karrusel | Uddrag kernebudskaber; Redaktionel til fortællerytme, Schweizisk til dataopdelinger | | Produktanmeldelse / værktøjsopsamling | Schweizisk + IKB blå, foretræk `S09 KPI Tårn` / `S10 H-Bar Diagram` | | Rejser / livsstil | Redaktionel + Midnatsblæk eller Klit, `M16 Billedledt Forside` til fuldblødende helt | | WeChat forsidepar | Gengiv det samme indhold to gange: `.poster.wide` 21:9 + `.poster.square` 1:1, visuelt konsistent | | Skærmbilledevejledning / værktøjsgennemgang | `.frame-shot` + `.device-browser`, foretræk Schweizisk gitterbase | | Spilguide / filmopsummering | Redaktionel + Midnatsblæk, hent spilkunst fra Wallhaven til fuldblødende helt | | Dataopsummering / år i gennemgang | Schweizisk + Citron eller Sikkerhedsorange, matrix + hovedbog kombination | ## 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 | Platform | Status | Noter | |----------|--------|-------| | Claude Kode | Understøttet | Indbygget færdighedsarbejdsgang, ideel til at generere + iterere kort | | Codex | Understøttet | God til langform kortgenerering, sourcing af billeder, visuel QA | | Cursor / andre lokale agenter | Fungerer | Kræver filsystemlæsning/skrivning + shell-udførelse | | Almindelig chatbot | Ikke anbefalet | Uden filsystem og renderingspipeline kan man ikke pålideligt levere billeder | ## Installer ### Mulighed 1: En-linje installation (anbefalet) ```bash 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 ```bash 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 `` → `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`](./SKILL.md). Dybe detaljer i de matchende `references/*.md`. ## Validator ```bash 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`](./references/theme-presets.md). **Brugerdefinerede hex-værdier er ikke tilladt** — at beskytte æstetikken betyder mere end valgfrihed. ### Redaktionel (6) | Tema | Toner | Bedst til | |-------|-------|----------| | 🖋 **Blæk Klassisk** | `#0a0a0b` / `#f1efea` | Generel standard, kommercielle emner, når man er i tvivl | | 🌊 **Indigo Porcelæn** | `#0a1f3d` / `#f1f3f5` | Teknologi, forskning, AI, teknisk skrivning | | 🌿 **Skovblæk** | `#1a2e1f` / `#f5f1e8` | Natur, bæredygtighed, udendørs, faglitteratur | | 🍂 **Kraft Papir** | `#2a1e13` / `#eedfc7` | Nostalgi, humaniora, læsning, litteratur | | 🌙 **Klit** | `#1f1a14` / `#f0e6d2` | Kunst, design, kreativ, mode | | ⚫ **Midnatsblæk** | `#0e0d0c` / `#ece2cf` / `#d4a04a` | Spilnøglekunst / nattescener / filmiske forside / Black Myth · Elden Ring-stil mørke temaer | ### Schweizisk (4) | Tema | Anker | Bedst til | |-------|--------|----------| | 🔵 **IKB Klein Blå** | `#002FA7` | Generel standard, kommercielle lanceringer, AI-produkter, rammer | | 🟡 **Citron** | `#FFD500` | Ungdom, sport, detailhandel, forbruger, Y2K | | 🟢 **Citron Grøn** | `#C5E803` | Øko, sundhed, Gen Z, grønne brands | | 🟠 **Sikkerhedsorange** | `#FF6B35` | Advarsler, nyheder, industri, energiske temaer | For at skifte temaer, erstat blot `
` 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](https://github.com/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`](./LICENSE). ## FAQ ### Hvad er Guizang Social Card-færdigheden? Guizang Social Card-færdigheden er en agentfærdighed til Claude Code, Codex og lignende kodningsagent-miljøer, der genererer Xiaohongshu-karruseller og WeChat-coverpar fra forskellige indholdsinput som artikler, noter eller fotos ved hjælp af forskellige visuelle designsystemer. ### Hvilken type indhold kan jeg bruge til at generere sociale kort? Du kan bruge artikler, tekst, skærmbilleder, produktnoter, undertekster eller fotos som kildeindhold til at generere sociale kort. Færdigheden tilpasser sig forskellige inputs for at skabe visuelt tiltalende output. ### Hvilke to visuelle systemer er tilgængelige til generering af sociale kort? Færdigheden tilbyder to visuelle systemer: 'Editorial' til historiefortælling, livsstil og fortællende indhold, og 'Swiss International' til produktanmeldelser, data, rammer og tutorials, kendetegnet ved en gitternet-først tilgang. ### Kan jeg bruge brugerdefinerede farver til mine sociale kort? Nej, brugerdefinerede hex-værdier er ikke tilladt. Færdigheden giver 10 temapræsæt (6 Editorial, 4 Swiss) for at opretholde visuel sammenhæng og kvalitet. Du kan skifte temaer ved at opdatere data-theme-attributten på seed-skabelonen. ### Hvordan installerer jeg Guizang Social Card-færdigheden? Du kan installere den ved at bruge \`npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill\` eller ved at klone repositoryet til din agents færdighedsmappe. ### Understøtter færdigheden engelsk indhold? Ja, færdigheden understøtter engelsk indhold. Både Editorial (Playfair Display + Noto Serif) og Swiss (Inter + Helvetica) skrifttyper dækker kinesisk og engelsk, og layoutskabelonerne er sproguafhængige.