agency-skills-suite/agency-visual-generator/SKILL.md

---

name: agency-visual-generator description: Generare asset visuali (card, carousel, thumbnail) per social e YouTube basati su content approvato e style guide. Usare quando: (1) post social needs visual, (2) YouTube thumbnail, (3) carousel Instagram/LinkedIn. Output: Asset PNG/webp in cartella client, QA visual compilato.

Agency Visual Generator — Asset Visuali

Genera asset visuali platform-ready basati su content approvato e style guide.

Quando Usare

• Social post: Creare visual per post in queue
• YouTube: Thumbnail per video
• Carousel: Instagram/LinkedIn multi-slide
• Brand assets: Immagini coordinate per cliente

---

Input

Input	Tipo	Validazione
client_path	string	Percorso client
content_files	array	Post o script che richiedono visual
style_guide	object	Style guide cliente (colori, font)
asset_type	string	"card" / "carousel" / "thumbnail"
platform	string	"linkedin" / "instagram" / "youtube"

---

Processo

Fase 1: Analisi Richiesta

Obiettivo: Capire che asset serve.

Azioni:

1. Leggi content file (post o script)

2. Identifica:

   • Piattaforma target
   • Tipo asset (card, carousel, thumbnail)
   • Copy da includere (hook, CTA)
   • Visual brief (se presente)

3. Verifica aspect ratio richiesto:

   • LinkedIn card: 1200x627px (1.91:1)
   • Instagram carousel: 1080x1350px (4:5)
   • YouTube thumbnail: 1280x720px (16:9)

---

Fase 2: Style Guide Check

Obiettivo: Caricare o creare style guide.

Azioni:

1. Cerca clients/{client}/design/style_guide.md o clients/{client}/assets/brand/style_guide.md

2. Se esiste:

   • Carica colori (hex)
   • Carica font (family, weights)
   • Carica logo (se disponibile)

3. Se NON esiste:

   • Crea draft style guide in clients/{client}/assets/brand/style_guide.md
   • Chiedi approvazione prima di procedere

Template Style Guide:

# Style Guide — {Client}

## Colors
- Primary: {hex}
- Secondary: {hex}
- Text: {hex}
- Background: {hex}

## Fonts
- Primary: {font-family}
- Secondary: {font-family}

## Logo
- URL: {logo_url}
- Usage: {note}

---

Fase 3: Compilazione JSON Template

Obiettivo: Preparare prompt per generazione.

Azioni:

1. Carica template appropriato da core/templates/visual/:

   • linkedin_card.json
   • instagram_carousel.json
   • youtube_thumbnail.json

2. Compila campi:

   • text (headline, sub, CTA)
   • colors (da style guide)
   • fonts (da style guide)
   • logo (se disponibile)
   • imagery (descrizione visual)

Esempio YouTube Thumbnail JSON:

{
  "format": "youtube_thumbnail",
  "dimensions": { "width": 1280, "height": 720 },
  "text": {
    "headline": "3 Errori Comuni",
    "sub": "Che Tutti Fanno in {Settore}",
    "cta": "GUARDA ORA"
  },
  "colors": {
    "background": "#1a1a2e",
    "text": "#ffffff",
    "accent": "#e94560"
  },
  "fonts": {
    "headline": "Inter Bold 72px",
    "sub": "Inter Regular 36px"
  },
  "imagery": "Foto persona sorpresa, lato destro, sfondo sfocato"
}

---

Fase 4: Generazione Immagine

Obiettivo: Generare asset con tool configured.

Azioni:

1. Usa tool di generazione immagini (OpenClaw integration o servizio esterno)

2. Passa JSON template come prompt strutturato

3. Genera immagine PNG/webp

4. Salva in:

   • clients/{client}/assets/social/{post_id}.png
   • clients/{client}/assets/youtube/thumbnails/{ep_id}.png
   • clients/{client}/assets/social/carousels/{id}/slide_01.png, etc.

5. Aggiorna content file con asset_path

---

Fase 5: Visual QA

Obiettivo: Verificare qualità asset.

Azioni:

1. Usa checklist da references/qa_visual.md:

Readability:

• Text readable at mobile size (320px)
• Strong contrast text/background
• Headline <= 8 words

Brand:

• Colors match style guide
• Fonts match style guide
• No off-brand elements

Message:

• One clear idea per image
• Visual supports hook/CTA
• No misleading visuals

Technical:

• Correct aspect ratio
• No artifacts / broken text
• Safe margins for UI overlays

2. Registra risultato in clients/{client}/assets/qa/qa_visual.md

Template:

# QA Visual — {Asset Name}

**Data:** 2026-03-09
**Asset:** {path}

## Checklist

| Categoria | Check | Risultato |
|-----------|-------|-----------|
| Readability | Text mobile-size | ✅ Pass |
| Readability | Contrast | ✅ Pass |
| Brand | Colors | ✅ Pass |
| Brand | Fonts | ⚠️ Fallback usato |
| Message | One idea | ✅ Pass |
| Technical | Aspect ratio | ✅ Pass |

## Esito

**Status:** APPROVED / NEEDS_FIX

**Note:** {Eventuali fix richiesti}

---

Output

File	Formato	Descrizione
clients/{client}/assets/social/*.png	PNG/webp	Card social
clients/{client}/assets/social/carousels/*/slide_*.png	PNG	Carousel slides
clients/{client}/assets/youtube/thumbnails/*.png	PNG	YouTube thumbnail
clients/{client}/assets/qa/qa_visual.md	Markdown	QA checklist

---

References

• qa_visual.md — QA checklist
• platform_patterns.md — Pattern per piattaforma
• publishing_gates.md — Gate pre-publish

---

Note

Edge Cases:

• Nessuno style guide: Crea draft e chiedi approvazione
• Testo troppo lungo: Adatta copy (max 8 parole headline)
• Logo mancante: Procedi senza, segnala nel QA

Limitazioni:

• Richiede integrazione tool generazione immagini
• Quality varia in base a prompt e tool
• Iterazioni possono essere necessarie per perfezionare

---

Skill generata da framework-translator