---
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:**

```markdown
# 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:**

```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:**

```markdown
# 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](../../references/qa_visual.md) — QA checklist
- [platform_patterns.md](../../references/platform_patterns.md) — Pattern per piattaforma
- [publishing_gates.md](../../references/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_