guizang-social-card-skill: generare social card con Claude Code

When you turn a 5,000-character technical article into social cards, the hard part is not only extracting ideas. The repeated work is layout: where the title lands, which theme is used, whether the WeChat cover pair stays visually consistent, and whether every PNG can survive review. Questa sezione conserva fatti e giudizio del testo cinese, ma li rende in italiano operativo. Claude Code o Codex possono occuparsi di canvas, scheletro del layout, generazione HTML, export PNG e validator. Restano umani la densit? dei titoli, i diritti sulle immagini, il tono di marca e il via libera finale alla pubblicazione.

Adattamento del progetto: conviene usarlo?

Questa sezione conserva fatti e giudizio del testo cinese, ma li rende in italiano operativo. Claude Code o Codex possono occuparsi di canvas, scheletro del layout, generazione HTML, export PNG e validator. Restano umani la densit? dei titoli, i diritti sulle immagini, il tono di marca e il via libera finale alla pubblicazione.

Dimensione	Note
Skill	Claude Code / Codex workflow for social cards
Output	HTML monofile -> PNG locale con Playwright
Platform	Xiaohongshu 1080x1440, WeChat 2100x900 and 1080x1080
Good fit	Team contenuti, sviluppatori indipendenti, blogger tecnici
Poor fit	Ritocco fotografico, approvazione rigida di brand, redistribuzione closed-source
License	AGPL-3.0
Not promised	Pubblicazione in batch, pubblicazione automatica, adattamento alle regole piattaforma

Questa sezione conserva fatti e giudizio del testo cinese, ma li rende in italiano operativo. Claude Code o Codex possono occuparsi di canvas, scheletro del layout, generazione HTML, export PNG e validator. Restano umani la densit? dei titoli, i diritti sulle immagini, il tono di marca e il via libera finale alla pubblicazione.

Due sistemi visivi e tre canvas

Editorial vs Swiss: differenze di stile

Questa sezione conserva fatti e giudizio del testo cinese, ma li rende in italiano operativo. Claude Code o Codex possono occuparsi di canvas, scheletro del layout, generazione HTML, export PNG e validator. Restano umani la densit? dei titoli, i diritti sulle immagini, il tono di marca e il via libera finale alla pubblicazione.

Visual system	Uso	Layout skeletons	Theme presets
Editorial	Card narrative, note di viaggio, letture condivise	16	6
Swiss	Recensioni prodotto, card comparative, dati	12	4

Tre dimensioni canvas

Questa sezione conserva fatti e giudizio del testo cinese, ma li rende in italiano operativo. Claude Code o Codex possono occuparsi di canvas, scheletro del layout, generazione HTML, export PNG e validator. Restano umani la densit? dei titoli, i diritti sulle immagini, il tono di marca e il via libera finale alla pubblicazione.

Canvas marker	Size	Use
.poster.xhs	1080x1440 (3:4)	Xiaohongshu / Rednote carousel
.poster.wide	2100x900 (21:9)	Cover WeChat larga
.poster.square	1080x1080 (1:1)	Cover WeChat quadrata

Installazione: CLI o clone locale

Opzione 1: installazione via CLI (consigliata)

Questa sezione conserva fatti e giudizio del testo cinese, ma li rende in italiano operativo. Claude Code o Codex possono occuparsi di canvas, scheletro del layout, generazione HTML, export PNG e validator. Restano umani la densit? dei titoli, i diritti sulle immagini, il tono di marca e il via libera finale alla pubblicazione.

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

Questa sezione conserva fatti e giudizio del testo cinese, ma li rende in italiano operativo. Claude Code o Codex possono occuparsi di canvas, scheletro del layout, generazione HTML, export PNG e validator. Restano umani la densit? dei titoli, i diritti sulle immagini, il tono di marca e il via libera finale alla pubblicazione.

Opzione 2: clone locale

Questa sezione conserva fatti e giudizio del testo cinese, ma li rende in italiano operativo. Claude Code o Codex possono occuparsi di canvas, scheletro del layout, generazione HTML, export PNG e validator. Restano umani la densit? dei titoli, i diritti sulle immagini, il tono di marca e il via libera finale alla pubblicazione.

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

guizang-social-card-skill/
??? SKILL.md
??? templates/
??? scripts/
?   ??? render.mjs
?   ??? validate-social-deck.mjs
??? references/

Rendering e validazione: da HTML a PNG

Come usare lo script di rendering

Questa sezione conserva fatti e giudizio del testo cinese, ma li rende in italiano operativo. Claude Code o Codex possono occuparsi di canvas, scheletro del layout, generazione HTML, export PNG e validator. Restano umani la densit? dei titoli, i diritti sulle immagini, il tono di marca e il via libera finale alla pubblicazione.

node render.mjs

• Playwright is missing: run npx playwright install chromium first
• The HTML path is wrong: check the generated filename
• Fonts are missing: install suitable local fonts for Chinese text

Come usare lo script di validazione

Questa sezione conserva fatti e giudizio del testo cinese, ma li rende in italiano operativo. Claude Code o Codex possono occuparsi di canvas, scheletro del layout, generazione HTML, export PNG e validator. Restano umani la densit? dei titoli, i diritti sulle immagini, il tono di marca e il via libera finale alla pubblicazione.

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

1. Overflow detection: text outside the canvas is flagged
2. Font-size ceiling: oversized titles are reported
3. Footer collision: overlap between footer and content is flagged
4. Horizontal band density: dense Swiss bands produce warnings
5. Frame overflow: frames outside the canvas are reported
6. Swiss font weight: invalid weight settings are reported

Fonti degli asset e rischi di licenza

Workflow per le fonti immagini

Questa sezione conserva fatti e giudizio del testo cinese, ma li rende in italiano operativo. Claude Code o Codex possono occuparsi di canvas, scheletro del layout, generazione HTML, export PNG e validator. Restano umani la densit? dei titoli, i diritti sulle immagini, il tono di marca e il via libera finale alla pubblicazione.

• Unsplash: high-quality free images, but still check commercial terms
• Pexels: free images, with license terms to review
• Flickr CC: Creative Commons images may need attribution
• Wallhaven: wallpaper-style images need commercial-rights checks
• Search results: licensing status is uncertain and needs manual review

Come leggere la licenza AGPL-3.0

Questa sezione conserva fatti e giudizio del testo cinese, ma li rende in italiano operativo. Claude Code o Codex possono occuparsi di canvas, scheletro del layout, generazione HTML, export PNG e validator. Restano umani la densit? dei titoli, i diritti sulle immagini, il tono di marca e il via libera finale alla pubblicazione.

Scenario	Requisito
Personal use	Libero da usare e modificare
Redistribution	Mantenere AGPL-3.0 e fornire il codice sorgente
Network service	Publish server-side source if offered as SaaS or a network service
Commercial use	Consentito solo rispettando gli obblighi open source

Note di rischio

Questa sezione conserva fatti e giudizio del testo cinese, ma li rende in italiano operativo. Claude Code o Codex possono occuparsi di canvas, scheletro del layout, generazione HTML, export PNG e validator. Restano umani la densit? dei titoli, i diritti sulle immagini, il tono di marca e il via libera finale alla pubblicazione.

• Il progetto genera asset PNG, non post pubblicati
• Le dimensioni canvas vengono dal README, non dalle regole ufficiali della piattaforma
• Stars e fork cambiano nel tempo e non sono il segnale di valore principale
• Le licenze degli asset richiedono revisione umana; l?agente non pu? completarla da solo

Letture successive

Questa sezione conserva fatti e giudizio del testo cinese, ma li rende in italiano operativo. Claude Code o Codex possono occuparsi di canvas, scheletro del layout, generazione HTML, export PNG e validator. Restano umani la densit? dei titoli, i diritti sulle immagini, il tono di marca e il via libera finale alla pubblicazione.

• Claude Code Skill guide: why SKILL.md is more stable than copied prompts
• CLAUDE.md writing guide: how to constrain agent output with project rules
• Claude Subagent guide: how to split planning, writing, design, and QA across roles

Conclusione

Questa sezione conserva fatti e giudizio del testo cinese, ma li rende in italiano operativo. Claude Code o Codex possono occuparsi di canvas, scheletro del layout, generazione HTML, export PNG e validator. Restano umani la densit? dei titoli, i diritti sulle immagini, il tono di marca e il via libera finale alla pubblicazione.

guizang-social-card-skill is best treated as a small production line. Let it fix canvas, layout, color, rendering, and validation. Questa sezione conserva fatti e giudizio del testo cinese, ma li rende in italiano operativo. Lo Skill stabilizza canvas, layout, tema, rendering e validazione. Il controllo umano resta necessario per licenze, brand, regole della piattaforma e decisione finale di pubblicazione.