# Competenza Agente Social Card > Genera schede social visivamente sorprendenti per caroselli Xiaohongshu e coppie di copertine WeChat da varie fonti di contenuto. Sfrutta sistemi di design editoriali o svizzeri per creare immagini coinvolgenti per i tuoi articoli e post. - Canonical: https://nanoskill.ai/it/skills/social-card-generation - Markdown: https://nanoskill.ai/it/skills/social-card-generation.md - Author: op7418 - Published: 2026-06-01T07:18:11.391Z - Updated: 2026-07-21T18:32:43.637Z - Language: it - 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 La Competenza Guizang Social Card è una capacità avanzata dell'agente progettata per semplificare la generazione di schede social per piattaforme come Xiaohongshu e WeChat. Consente agli utenti di trasformare contenuti diversi – da articoli e note di prodotto a screenshot e foto – in immagini raffinate e ottimizzate per la piattaforma. Offrendo sistemi di design distinti Editoriale e Svizzero Internazionale, la competenza garantisce che, sia che il tuo obiettivo sia la narrazione narrativa o la spiegazione basata sui dati, le tue schede social saranno coinvolgenti ed esteticamente coerenti, pronte a catturare l'attenzione del pubblico. Questa competenza si distingue per il suo flusso di lavoro strutturato, che fornisce 28 scheletri di layout e 10 preset tematici per guidare la presentazione dei contenuti. Automatizza il reperimento di immagini da piattaforme popolari e include un robusto validatore basato su Playwright per mantenere la qualità visiva rilevando problemi di layout comuni. L'output viene fornito come file HTML singolo, renderizzato direttamente in PNG, rendendolo altamente compatibile con ambienti di agenti di codifica come Claude Code e Codex. Gli utenti possono sfruttare la Competenza Guizang per Schede Social per una varietà di casi d'uso, come la creazione di caroselli Xiaohongshu multi-card da articoli lunghi, la progettazione di coppie di schede armoniose per WeChat in formato 21:9 hero e 1:1 da condividere, o la produzione di immagini tutorial chiare a partire da screenshot. I suoi principi di design danno priorità a sobrietà, struttura e gestione delle immagini incentrata sull'utente, garantendo contenuti social media professionali e di impatto senza richiedere competenze di design approfondite. ## Key features - **Doppi Sistemi Visivi**: Scegli tra uno stile Editoriale per lo storytelling (Monocle, Kinfolk) o uno stile Swiss International per dati e struttura (basato su griglia, linee sottili marcate) per adattarti al tono del tuo contenuto. - **Dimensioni Multiple della Tela**: Supporta i formati Xiaohongshu 3:4 (1080x1440), WeChat 21:9 (2100x900) e WeChat 1:1 (1080x1080) per una presenza versatile sui social media. - **Ampi Scheletri di Layout**: Accedi a 28 scheletri di layout pre-progettati (16 Editoriali, 12 Swiss) tra cui copertine con immagini predominanti, torri di KPI e grafici a barre orizzontali per una strutturazione rapida dei contenuti. - **Ricerca Automatica di Immagini**: Recupera automaticamente immagini da Unsplash, Pexels, Flickr CC, Wallhaven o tramite ricerca diretta, scaricandole localmente con un file SOURCES.md generato automaticamente. - **Validatore di Layout**: Include un validatore basato su Playwright per rilevare overflow, violazioni dei limiti di testo, lacune di densità e collisioni del piè di pagina, garantendo una generazione di social card di alta qualità. ## Use cases - **Crea Caroselli per Xiaohongshu**: Trasforma articoli lunghi, recensioni di prodotti o guide di viaggio in coinvolgenti caroselli multi-scheda per Xiaohongshu, utilizzando il design Editoriale o Swiss. - **Progetta Coppie di Copertine per WeChat**: Genera immagini hero 21:9 visivamente coerenti e schede di condivisione 1:1 per WeChat Moments e Channels da qualsiasi fonte di contenuto. - **Produci Visual per Tutorial**: Converti tutorial basati su screenshot, guide di giochi o procedure guidate di strumenti in social card strutturate con screenshot abbelliti e layout chiari. - **Riassumi Dati e Recensioni**: Presenta recensioni di prodotti, riepiloghi di dati o contenuti di fine anno utilizzando layout in stile Swiss con grafici e matrici per una comunicazione chiara. ## Result preview Esplora un carosello professionale per social media creato con questa Competenza. ![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 ### Installa Aggiungi la Competenza di Generazione Schede Social al tuo agente AI. ![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) ### Descrivi il Contenuto Fornisci il contenuto, l'argomento o il messaggio chiave che desideri trasformare in schede per social media. ![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) ### Genera Schede Social Crea design di schede visivamente coinvolgenti e ottimizzati per la piattaforma, con una chiara gerarchia informativa, un flusso narrativo efficace e layout pronti per la pubblicazione. ![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 Una skill per agenti di Claude Code, Codex e ambienti di coding simili. Genera **immagini carosello per Xiaohongshu / Rednote** e **coppie di copertine per WeChat 21:9 + 1:1** da articoli, testi, screenshot, note di prodotto, sottotitoli o foto. Due sistemi visivi condividono un unico flusso di lavoro: - **Editoriale**. Layout sobri nello spirito di *Monocle* / *Kinfolk* / *Cereal*. Ideale per storytelling, lifestyle, viaggi, lettura, cinema e osservazioni personali. - **Svizzero Internazionale**. Basato su griglie, un unico colore di ancoraggio, linee sottili nette, contrasto tipografico estremo. Perfetto per recensioni di prodotti, dati, framework, tutorial e strumenti AI. > Progetto gemello di [guizang-ppt-skill](https://github.com/op7418/guizang-ppt-skill). Linguaggio visivo condiviso, manutenzione separata. PPT risolve "presentazioni a scorrimento orizzontale"; questa risolve "immagini statiche per il feed." ![Anteprima Guizang Social Card Skill](https://file.nanoskill.ai/d370abcc-1fc4-4de1-903a-09020a6556ce.png) ## Avvio in 30 secondi ```bash npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill ``` Oppure incolla questo testo in un agente AI con accesso shell: ```text Installa guizang-social-card-skill per me. Clona https://github.com/op7418/guizang-social-card-skill in ~/.claude/skills/guizang-social-card-skill, poi verifica che esistano SKILL.md, assets/ e references/. ``` Se lo hai già installato, aggiorna con: ```text Aggiorna guizang-social-card-skill per me. Vai a ~/.claude/skills/guizang-social-card-skill, esegui git pull, poi comunicami l'ultimo commit. ``` Quindi chiedi al tuo agente: ```text Creami un carosello per Xiaohongshu in stile svizzero da questo articolo, 5 card, blu IKB. ``` Altri prompt utili: ```text Creami un set 3:4 per Xiaohongshu da questa recensione di prodotto, con titoli in stile editoriale. Trasforma questo articolo in una coppia di copertine WeChat: hero 21:9 + card di condivisione 1:1, visivamente coerenti. Ho 3 foto di campeggio — creami un carosello per Xiaohongshu guidato dalle immagini. Trasforma il testo di questa guida di gioco in un set per Xiaohongshu; prendi qualche immagine di gioco da Wallhaven. ``` ## Cosa ottieni - 🖋 **Due sistemi visivi**: Editoriale per atmosfera e narrazione, Svizzero per fatti e struttura, che condividono un unico flusso di lavoro - 📐 **3 dimensioni canvas**: `.poster.xhs` 1080×1440 (Xiaohongshu 3:4), `.poster.wide` 2100×900 (WeChat 21:9), `.poster.square` 1080×1080 (WeChat 1:1) - 🧩 **28 scheletri di layout**: 16 Editoriale (`M01-M16`, inclusi Copertina guidata da immagine, Pipeline, Prima/Dopo) + 12 Svizzero (`S01-S12`, inclusi Torre KPI, Grafico a barre H, Matrice + Hero) - 🎨 **10 preset di tema**: 6 Editoriale (Ink Classic, Indigo Porcelain, Forest Ink, Kraft Paper, Dune, **Midnight Ink** scuro) + 4 colori di ancoraggio Svizzero (Blu IKB Klein, Limone, Verde Lime, Arancio Safety) - 🖼 **Flusso di lavoro per la ricerca di immagini**: prima le immagini dell'utente; altrimenti cascata attraverso Unsplash → Pexels → Flickr CC → Wallhaven → ricerca diretta, scaricate localmente con generazione automatica di `SOURCES.md` - 🌫 **Sfondo a flusso d'inchiostro WebGL**: le pagine hero editoriali possono includere un'animazione d'inchiostro live; disattivabile per dispositivi a bassa potenza o modalità screenshot - 🪧 **Sovrapposizione immagini + sicurezza volti**: immagini a tutto campo devono avere una maschera; le zone di caduta del testo devono evitare il soggetto. Regole rigide in `references/image-overlay.md` - 🧰 **Asset di abbellimento screenshot**: 9 sfondi WebP con texture reale (5 Editoriale / 4 Svizzero), abbinati a utility `.frame-shot` / `.device-browser` / `.device-phone` - 🗺 **Componente mappa**: MapLibre + tiles OSM reali, multi-pin + connettori, pensato per guide di viaggio - ✅ **Validatore**: `validate-social-deck.mjs` rileva automaticamente overflow, violazioni dei limiti di tipo, gap di densità a 4 bande e collisioni nel footer - 📄 **HTML a file singolo + rendering Playwright**: nessuna pipeline di build frontend; `node render.mjs` genera direttamente PNG ## Adatto / Non adatto **✅ Adatto**: Caroselli Xiaohongshu / coppie di copertine WeChat / copertine Moments / copertine Channels / immagini per articoli / pagine tutorial / riepiloghi dati / guide di viaggio / recensioni di prodotti / spiegazioni con screenshot **❌ Non adatto**: Presentazioni a scorrimento orizzontale (usa [guizang-ppt-skill](https://github.com/op7418/guizang-ppt-skill)) / generazione di video lunghi / fotoritocco puro / editing di testo semplice senza layout ## 11 categorie Xiaohongshu Ordinate per "cerchio di competenza" — vedi [`references/category-cookbook.md`](./references/category-cookbook.md): **Completamente gestibili** (testo / struttura / immagini tutto compreso): - Viaggi, carriera, raccomandazioni (dopo aver specificato un sottogenere) **Testo e struttura gestibili, immagini dipendenti dall'utente o da arte reperita:** - Gaming, cinema, cibo (orientato a ricette), makeup (orientato a tutorial), fitness, casa, moda (selezioni curate) **Fuori scopo, dichiarato in anticipo** (non si forzano adattamenti): - Scatti OOTD dal vivo / dreamcore / grading di emulazione filmica / makeup con test su pelle reale — tutto ciò che dipende fortemente dalla fotografia o dalla post-produzione ## Scenari comuni | Compito | Flusso consigliato | |------|------------------| | Articolo lungo → carosello Xiaohongshu | Estrai i punti chiave; Editoriale per il ritmo narrativo, Svizzero per scomposizioni dati | | Recensione prodotto / riepilogo strumento | Svizzero + blu IKB, preferisci `S09 Torre KPI` / `S10 Grafico a barre H` | | Viaggio / stile di vita | Editoriale + Midnight Ink o Dune, `M16 Copertina guidata da immagine` per hero a tutto campo | | Coppia di copertine WeChat | Renderizza lo stesso contenuto due volte: `.poster.wide` 21:9 + `.poster.square` 1:1, visivamente coerente | | Tutorial con screenshot / walkthrough strumento | `.frame-shot` + `.device-browser`, preferisci base griglia Svizzera | | Guida di gioco / riepilogo film | Editoriale + Midnight Ink, prendi immagine di gioco da Wallhaven per hero a tutto campo | | Riepilogo dati / anno in rassegna | Svizzero + Limone o Arancio Safety, combinazione matrice + libro mastro | ## Perché HTML a file singolo in PNG - **Adatto agli agenti**: HTML + CSS è testo — gli agenti possono scrivere, leggere, modificare e validare direttamente - **Precisione del layout**: CSS Grid + regole rigide di tipo / margini / griglia superano di gran lunga la portata del layout di Markdown - **Ricerca immagini aperta**: collegamento a Unsplash / Pexels / Wallhaven / Mapbox / OSM / qualsiasi risorsa web - **Qualità verificabile**: `validate-social-deck.mjs` esegue misurazioni DOM con Playwright, non congetture - **Consegna semplice**: `output/*.png` viene consegnato direttamente — nessun deploy, nessuno strumento di esportazione ## Supporto piattaforma | Piattaforma | Stato | Note | |----------|--------|-------| | Claude Code | Supportato | Flusso di lavoro nativo Skill, ideale per generare e iterare card | | Codex | Supportato | Buono per generazione di card di lunga forma, ricerca immagini, QA visivo | | Cursor / altri agenti locali | Funziona | Richiede lettura/scrittura su filesystem + esecuzione shell | | Chatbot semplice | Sconsigliato | Senza filesystem e pipeline di rendering, non può consegnare immagini in modo affidabile | ## Installazione ### Opzione 1: Installazione a riga singola (consigliato) ```bash npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill ``` ### Opzione 2: Incolla questo in un AI > Installa la skill `guizang-social-card-skill` per Claude Code per me. Passaggi: > > 1. Assicurati che `~/.claude/skills/` esista (crealo se non c'è) > 2. Esegui `git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill` > 3. Verifica: `ls ~/.claude/skills/guizang-social-card-skill/` dovrebbe mostrare `SKILL.md`, `assets/`, `references/` > 4. Fammi sapere quando hai finito. In seguito, dire cose come "creami un carosello per Xiaohongshu" attiverà questa skill. Incolla il blocco sopra in Claude Code / Cursor / qualsiasi agente AI con accesso shell. ### Opzione 3: CLI Manuale ```bash git clone https://github.com/op7418/guizang-social-card-skill.git ~/.claude/skills/guizang-social-card-skill ``` ### Come attivarlo Una volta installato, Claude Code rileva automaticamente la skill. Frasi di attivazione: - "Creami un carosello per Xiaohongshu / Rednote" - "Creami card per Rednote" - "Crea un hero WeChat 21:9 + card di condivisione 1:1" - "Genera social card / card social in stile rivista" - "Trasforma questo articolo in un carosello tutorial" - "Crea una recensione per Xiaohongshu in stile svizzero / card in stile IKB" ## Flusso di lavoro La skill è un flusso di lavoro strutturato. L'agente percorre 7 passaggi: 1. **Raccolta iniziale** — cattura 4 cose: piattaforma target / stile / contenuto sorgente / immagini dell'utente. Quando non ci sono immagini disponibili, presenta A/B/C una volta (scatta le tue / genera con AI / reperisci online); non riproporre 2. **Stile e Tema** — scegli Editoriale o Svizzero, poi scegli uno dei 10 preset di tema. Non sono ammessi valori esadecimali personalizzati 3. **Selezione Layout** — scegli / incolla / adatta il testo dai 28 scheletri di layout. 16 Editoriale / 12 Svizzero 4. **Preparazione Asset** — reperisci immagini (Unsplash / Pexels / Flickr CC / Wallhaven / ricerca diretta), scarica localmente + scrivi `SOURCES.md`; chiedi se accreditare le fonti 5. **Composizione e Rendering** — copia il template base → sostituisci `` → `node render.mjs` 6. **Consegna e Revisione** — mostra prima i PNG, chiedi "li guardi tu o vuoi che esegua il validatore?" — non esegue la validazione automatica 7. **Iterazione** — applica il feedback dell'utente, modifica gli stili inline o scambia layout / immagini, riesegui il rendering Specifica completa in [`SKILL.md`](./SKILL.md). Dettagli approfonditi nei file `references/*.md` corrispondenti. ## Validatore ```bash node validate-social-deck.mjs path/to/task-dir ``` 6 regole, basate sulla misurazione reale del rendering con Playwright, non su scansione statica: - **R1** Overflow — qualsiasi sezione che supera `.poster` fallisce immediatamente - **R2** Limiti di tipo — combinazioni di dimensioni/peso `.h-xl` / `.h-display` che superano le definizioni del template base - **R3** Collisione Footer — contenuto che preme nel footer inferiore / numero di pagina - **R4** Densità a 4 bande — canvas alto 1440 diviso in 4 bande orizzontali; ciascuna deve contenere contenuto o avere una ragione dichiarata per lo spazio bianco - **R5** Overflow Cornice — elementi figli di `.frame-img` / `.frame-shot` che superano la cornice - **R6** Identità Svizzera — template svizzeri con `font-weight >= 700` inline generano un avviso (viola la regola "più grande significa più sottile") `SKILL.md` Passaggio 7 afferma esplicitamente che **il validatore non viene eseguito automaticamente** — attendere che l'utente guardi prima le immagini, risparmiando decine di secondi per round. ## Preset di tema Scegli da [`references/theme-presets.md`](./references/theme-presets.md). **Non sono ammessi valori esadecimali personalizzati** — proteggere l'estetica conta più della libertà di scelta. ### Editoriale (6) | Tema | Toni | Ideale per | |-------|-------|----------| | 🖋 **Ink Classic** | `#0a0a0b` / `#f1efea` | Default generico, argomenti commerciali, in caso di dubbio | | 🌊 **Indigo Porcelain** | `#0a1f3d` / `#f1f3f5` | Tecnologia, ricerca, AI, scrittura tecnica | | 🌿 **Forest Ink** | `#1a2e1f` / `#f5f1e8` | Natura, sostenibilità, attività all'aperto, saggistica | | 🍂 **Kraft Paper** | `#2a1e13` / `#eedfc7` | Nostalgia, discipline umanistiche, lettura, letteratura | | 🌙 **Dune** | `#1f1a14` / `#f0e6d2` | Arte, design, creatività, moda | | ⚫ **Midnight Ink** | `#0e0d0c` / `#ece2cf` / `#d4a04a` | Key art di giochi / scene notturne / copertine cinematografiche / Black Myth · temi scuri in stile Elden Ring | ### Svizzero (4) | Tema | Ancoraggio | Ideale per | |-------|--------|----------| | 🔵 **Blu IKB Klein** | `#002FA7` | Default generico, lanci commerciali, prodotti AI, framework | | 🟡 **Limone** | `#FFD500` | Gioventù, sport, retail, consumo, Y2K | | 🟢 **Verde Lime** | `#C5E803` | Eco, salute, Gen Z, marchi green | | 🟠 **Arancio Safety** | `#FF6B35` | Avvisi, notizie, industriale, temi energici | Per cambiare tema, basta sostituire l'attributo `
` nel template base; tutti i CSS vengono risolti tramite `var(--...)`. ## Directory ``` guizang-social-card-skill/ ├── SKILL.md ← File principale della skill: flusso di lavoro a 7 passaggi ├── README.md ← README in cinese ├── README.en.md ← Questo file ├── HANDOFF.md ← Documento di passaggio: fatti + cronologia versioni ├── PRODUCT.md ← Documento di prodotto: pensiero + decisioni + roadmap ├── validate-social-deck.mjs ← Validatore di layout Playwright ├── assets/ │ ├── template-editorial-card.html ← Template base Editoriale (6 temi / 3 canvas) │ ├── template-swiss-card.html ← Template base Svizzero (4 accenti / 3 canvas) │ ├── magazine-bg-webgl.js ← Sfondo a flusso d'inchiostro WebGL │ └── screenshot-backgrounds/ ← 9 sfondi per stage di screenshot (WebP) │ ├── style-a/ ← 5 Editoriale │ └── style-b/ ← 4 Svizzero └── references/ ├── platform-specs.md ← Piattaforma × risoluzione × denominazione ├── style-system.md ← Regole rigide e anti-pattern per entrambi gli stili ├── theme-presets.md ← Tutte le 10 palette in dettaglio ├── layout-recipes.md ← 28 scheletri di layout (M01-M16 + S01-S12) ├── components.md ← Tipografia / card / spaziatura / icone ├── background-systems.md ← Sistemi di sfondo: flusso d'inchiostro / griglia / strati carta ├── portrait-fill.md ← Strategia di spazi bianchi per la tavola 3:4 ├── content-planning.md ← Agganci / suddivisione pagine / compressione del testo ├── category-cookbook.md ← Tabella di instradamento per 11 categorie Xiaohongshu ├── image-overlay.md ← Maschera immagine a tutto campo + regole di sicurezza volti ├── screenshot-treatment.md ← Utility `.frame-shot` + abbellimento screenshot ├── map-component.md ← Mappa MapLibre `.map-block` ├── title-shortener.md ← Strategia di titolo breve per la copertina 1:1 ├── production-workflow.md ← Pipeline di rendering Playwright └── qa-checklist.md ← Checklist di qualità ``` ## Principi fondamentali di design 1. **Sobrietà sopra il clamore** — palette sobrie si distinguono in un feed saturo 2. **Struttura sopra decorazione** — tipografia / contrasto / griglia portano la gerarchia, non ombre o card 3. **Layout sopra la libertà** — prima scegli, poi adatta; non inventare pagine al di fuori dei 28 scheletri 4. **Prima le immagini dell'utente** — in fase di raccolta, presenta A/B/C una volta; non riproporre di scattare le proprie 5. **Maschera + evita** — le immagini a tutto campo hanno sempre una maschera; le zone di caduta del testo devono lasciare libero il soggetto (volti / prodotti / regioni dense di testo) 6. **Più grande significa più sottile** — la dimensione `.h-xl` Svizzera aumenta → il peso deve diminuire. Editoriale segue la stessa regola 7. **Nessuna validazione automatica** — lascia che l'utente guardi prima, poi chiedi prima di validare; risparmia decine di secondi per round 8. **Una skill è un prodotto, non un prompt** — ha PRODUCT.md, numeri di versione, CHANGELOG, confini di capacità 9. **I test locali restano fuori da git** — tutte le demo / smoke test vivono sotto `local-tests/`, gitignorati ## Riferimenti visivi - Layout e spaziatura delle lettere delle riviste *Monocle* / *Kinfolk* / *Cereal* - Sistemi a griglia di Massimo Vignelli / Helvetica Forever / Stile Tipografico Internazionale Svizzero - Rapporti immagine-testo e ritrattistica umana di Apartamento / The Gentlewoman - Esempi di "la sobrietà vince il feed" da Xiaohongshu / Rednote - Pratica di social card di Guizang ## Roadmap - Più smoke test per casi limite di limiti di tipo con contenuti editoriali lunghi - Più layout di dati svizzeri (scheletri di grafici aggiuntivi) - Dopo la generazione dell'immagine: chiedere attivamente se eseguire correzioni locali / rigenerare l'intera immagine - Più pacchetti di layout raccomandati specifici per categoria (attualmente 7 su 11 sono completamente gestibili) - Versione WorkBuddy pronta per il marketplace ## Contribuire Bug, problemi di layout, richieste di nuovi layout — Issue e PR sono benvenuti. Priorità per le modifiche: - Quando si modificano i template base, aggiornare anche la tabella di corrispondenza di `references/components.md` (dimensioni / spaziatura / pesi) - Quando si aggiungono layout, aggiungere la ricetta completa a `references/layout-recipes.md` (limiti di copia + densità minima) - Quando si aggiungono colori di tema, aggiornare anche il blocco `[data-theme="..."]` del template base + `references/theme-presets.md` - Quando si aggiungono regole svizzere, aggiornare anche la regola corrispondente in `validate-social-deck.mjs` - Gli errori incontrati vanno in `references/qa-checklist.md` - Test e demo vivono sotto `local-tests/` — non inquinare la root della skill ## Licenza AGPL-3.0 © 2026 [op7418](https://github.com/op7418) Questo progetto è concesso in licenza sotto **GNU AGPL-3.0**. Punti chiave: 1. **Attribuzione richiesta** — Mantenere l'avviso di copyright 2. **I derivati devono essere open source** — Qualsiasi versione modificata, fork o ridistribuzione deve essere rilasciata sotto AGPL-3.0 (o una licenza compatibile), con il codice sorgente completo reso disponibile 3. **L'uso in rete è distribuzione** — Anche se si esegue solo una versione modificata come SaaS / servizio web senza distribuire il codice, è necessario pubblicare il sorgente (questo è ciò che rende AGPL più restrittiva di GPL) 4. **Nessuna distribuzione closed-source, proprietaria o a solo pagamento** Termini completi in [`LICENSE`](./LICENSE). ## FAQ ### Che cos'è la Guizang Social Card Skill? La Guizang Social Card Skill è una skill per agenti per Claude Code, Codex e ambienti di coding-agent simili che genera caroselli per Xiaohongshu e coppie di copertine per WeChat a partire da vari input di contenuto come articoli, appunti o foto, utilizzando sistemi di design visivo distinti. ### Che tipo di contenuto posso utilizzare per generare social card? Puoi utilizzare articoli, testi, screenshot, note di prodotto, sottotitoli o foto come contenuto di origine per generare social card. La skill si adatta a vari input per creare output visivamente accattivanti. ### Quali sono i due sistemi visivi disponibili per la generazione di social card? La skill offre due sistemi visivi: 'Editorial' per contenuti narrativi, di lifestyle e di storytelling, e 'Swiss International' per recensioni di prodotti, dati, framework e tutorial, caratterizzato da un approccio orientato alla griglia. ### Posso utilizzare colori personalizzati per le mie social card? No, i valori esadecimali personalizzati non sono consentiti. La skill fornisce 10 preset di temi (6 Editorial, 4 Swiss) per mantenere coesione visiva e qualità. Puoi cambiare i temi aggiornando l'attributo data-theme sul modello seed. ### Come installo la Guizang Social Card Skill? Puoi installarla utilizzando \`npx skills add https://github.com/op7418/guizang-social-card-skill --skill guizang-social-card-skill\` oppure clonando il repository nella directory delle skill del tuo agente. ### La skill supporta i contenuti in inglese? Sì, la skill supporta i contenuti in inglese. Entrambi i font Editorial (Playfair Display + Noto Serif) e Swiss (Inter + Helvetica) coprono il cinese e l'inglese, e gli scheletri di layout sono indipendenti dalla lingua.