Competenza Agente Social Card

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. Linguaggio visivo condiviso, manutenzione separata. PPT risolve "presentazioni a scorrimento orizzontale"; questa risolve "immagini statiche per il feed."

Avvio in 30 secondi

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:

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:

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:

Creami un carosello per Xiaohongshu in stile svizzero da questo articolo, 5 card, blu IKB.

Altri prompt utili:

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) / 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:

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

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

Installazione

Opzione 1: Installazione a riga singola (consigliato)

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

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 <!-- POSTERS_HERE --> → 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. Dettagli approfonditi nei file references/*.md corrispondenti.

Validatore

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. Non sono ammessi valori esadecimali personalizzati — proteggere l'estetica conta più della libertà di scelta.

Editoriale (6)

Svizzero (4)

Per cambiare tema, basta sostituire l'attributo <section class="poster" data-theme="..."> 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

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.